initial comment
This commit is contained in:
210
PAGINATION-FEATURE.md
Normal file
210
PAGINATION-FEATURE.md
Normal file
@@ -0,0 +1,210 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user