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

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

Load Function

loadFileQuality(append = false)

• append = false - Replace table (new filter/state)
• append = true - Add to existing table (load more)

Infinite Scroll Detection

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