encoderPro/PAGINATION-FEATURE.md

# Infinite Scroll Pagination Feature

## Problem
The file table was limited to 50 files, making it impossible to view or select all files in large collections.

## Solution
Added infinite scroll + "Load More" button functionality to load files in batches of 100 as needed.

## Features

### 1. **Infinite Scroll**
- Automatically loads more files when you scroll near the bottom
- Triggers when within 500px of the bottom of the page
- Smooth, automatic loading experience

### 2. **Load More Button**
- Fallback option if infinite scroll doesn't trigger
- Shows count of currently displayed files
- Click to manually load the next batch

### 3. **Smart Loading**
- Loads 100 files at a time (increased from 50)
- Tracks offset to fetch next batch
- Prevents duplicate loading requests
- Knows when there are no more files to load

### 4. **Selection Tracking**
- Selected files are tracked across batches
- Your selections persist when loading more files
- "Select All" works on currently visible files
- Updated button labels to clarify "Select Visible"

## How It Works

### JavaScript Variables
```javascript
let currentOffset = 0;      // Tracks how many files already loaded
let hasMoreFiles = true;    // Whether more files exist
let isLoadingMore = false;  // Prevents duplicate requests
```

### Load Function
```javascript
loadFileQuality(append = false)
```
- `append = false` - Replace table (new filter/state)
- `append = true` - Add to existing table (load more)

### Infinite Scroll Detection
```javascript
function handleScroll() {
    const scrollPosition = window.innerHeight + window.scrollY;
    const documentHeight = document.documentElement.scrollHeight;

    if (scrollPosition >= documentHeight - 500) {
        loadFileQuality(true);  // Append more files
    }
}
```

## User Experience

### Initial Load
1. Dashboard loads first 100 files
2. If more files exist, shows "Load More" button
3. Displays count: "Showing 100 files"

### Loading More
**Option A - Infinite Scroll:**
- Scroll down the page
- When near bottom, automatically loads next 100
- Seamless, no button click needed

**Option B - Manual Load:**
- Click "📥 Load More Files" button
- Loads next 100 files
- Updates count

### Selection Workflow
1. Apply filters to narrow down files
2. Load as many batches as needed
3. Select files with checkboxes or quick select
4. "Select Visible" buttons only select currently loaded files
5. Encode your selection

## Example Scenarios

### Scenario 1: Large Library (500 files)
1. Initial load: Shows 100 files
2. Scroll down → Loads 100 more (200 total)
3. Scroll down → Loads 100 more (300 total)
4. Continue until all 500 loaded
5. Select files and encode

### Scenario 2: Filtered Selection
1. Click "🎞️ H.264" filter
2. Shows first 100 H.264 files
3. Load more until you see all H.264 files
4. Click "Select Visible Discovered"
5. Encode all selected H.264 files

### Scenario 3: Quick Processing
1. Default view shows first 100 discovered files
2. Click "Select Visible Discovered"
3. Choose profile and encode
4. Don't need to load more if these 100 are enough

## Technical Details

### API Changes
- Limit increased from 50 to 100 per request
- Uses `offset` parameter for pagination
- Returns 100 files at a time

### Loading Logic
```
Request 1: offset=0,   limit=100  → Returns files 0-99
Request 2: offset=100, limit=100  → Returns files 100-199
Request 3: offset=200, limit=100  → Returns files 200-299
...
```

### End Detection
- If API returns < 100 files, no more data exists
- "Load More" button is removed
- Infinite scroll stops triggering

### Performance
- Efficient: Only loads what you need
- Fast: 100 files load quickly
- Scalable: Works with thousands of files
- Memory: Old rows stay in DOM (uses more memory for very large sets)

## UI Updates

### Button Labels
**Before:**
- "📁 Discovered"
- "🔄 Failed"

**After:**
- "📁 Select Visible Discovered"
- "🔄 Select Visible Failed"

More accurate - clarifies that only currently loaded files are selected.

### Load More Button
```
┌─────────────────────────────────┐
│    📥 Load More Files           │
│    Showing 200 files            │
└─────────────────────────────────┘
```

## Files Modified

### templates/dashboard.html

#### Variables (Lines 1433-1437)
- Added `currentOffset` - Tracks pagination position
- Added `hasMoreFiles` - Whether more data exists
- Added `isLoadingMore` - Prevents duplicate loads

#### loadFileQuality() (Lines 1439-1607)
- Added `append` parameter for appending vs replacing
- Added offset to API URL
- Added logic to detect end of data
- Added "Load More" button rendering
- Added append vs replace logic

#### New Functions
- `loadMoreFiles()` (Line 1609) - Manual load trigger
- `handleScroll()` (Line 1613) - Infinite scroll detection

#### Initialization (Lines 718-723)
- Added scroll event listeners

## Benefits

✅ **View All Files** - No longer limited to 50
✅ **Efficient Loading** - Only loads what you need
✅ **Infinite Scroll** - Automatic, seamless loading
✅ **Manual Control** - "Load More" button as backup
✅ **Performance** - Batches of 100 are fast
✅ **Selection Persists** - Selections tracked across loads
✅ **Filters Work** - Pagination works with all filters

## Testing

1. **Large Library Test**
   - Library with 500+ files
   - Initial load shows 100
   - Scroll or click to load more
   - Verify all files eventually load

2. **Filter Test**
   - Apply filter (e.g., "H.264")
   - Load all matching files
   - Select and encode

3. **Selection Test**
   - Load first 100 files
   - Select some files
   - Load next 100 files
   - Verify previous selections persist

4. **End Detection Test**
   - Load all files in library
   - Verify "Load More" button disappears
   - Verify infinite scroll stops