add grid view with thumbnail preview of videos #762
Conversation
There was a problem hiding this comment.
Pull Request Overview
Adds a grid view option with thumbnail previews for the completed downloads section, allowing users to switch between the traditional list view and a new grid view with visual thumbnails.
- Added view toggle buttons to switch between list and grid views in the completed downloads section
- Implemented thumbnail generation endpoint using ffmpeg to create video previews
- Enhanced UI with grid layout showing video thumbnails in card format
Reviewed Changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/src/app/downloads.service.ts | Added optional thumbnail property to Download interface |
| ui/src/app/app.component.ts | Added view mode state, thumbnail URL generation, and view switching logic |
| ui/src/app/app.component.sass | Added CSS styles for view toggle buttons and thumbnail display |
| ui/src/app/app.component.html | Implemented grid/list view toggle and grid layout with thumbnails |
| app/main.py | Added thumbnail generation endpoint using ffmpeg |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| setView(mode: 'list' | 'grid') { | ||
| this.viewMode = mode; localStorage.setItem('completedView', mode); | ||
| } |
There was a problem hiding this comment.
The setView method should retrieve the saved view mode from localStorage on component initialization to persist user preference across sessions.
| <button type="button" class="btn" [ngClass]="viewMode==='list' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView ? setView('list') : (viewMode='list')"> | ||
| <fa-icon [icon]="faList" class="me-1"></fa-icon> List | ||
| </button> | ||
| <button type="button" class="btn" [ngClass]="viewMode==='grid' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView ? setView('grid') : (viewMode='grid')"> |
There was a problem hiding this comment.
The conditional check 'setView ?' is unnecessary since setView is always defined in the component. Simplify to just call setView('list') and setView('grid') directly.
| <button type="button" class="btn" [ngClass]="viewMode==='list' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView ? setView('list') : (viewMode='list')"> | |
| <fa-icon [icon]="faList" class="me-1"></fa-icon> List | |
| </button> | |
| <button type="button" class="btn" [ngClass]="viewMode==='grid' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView ? setView('grid') : (viewMode='grid')"> | |
| <button type="button" class="btn" [ngClass]="viewMode==='list' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView('list')"> | |
| <fa-icon [icon]="faList" class="me-1"></fa-icon> List | |
| </button> | |
| <button type="button" class="btn" [ngClass]="viewMode==='grid' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView('grid')"> |
| <button type="button" class="btn" [ngClass]="viewMode==='list' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView ? setView('list') : (viewMode='list')"> | ||
| <fa-icon [icon]="faList" class="me-1"></fa-icon> List | ||
| </button> | ||
| <button type="button" class="btn" [ngClass]="viewMode==='grid' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView ? setView('grid') : (viewMode='grid')"> |
There was a problem hiding this comment.
The conditional check 'setView ?' is unnecessary since setView is always defined in the component. Simplify to just call setView('list') and setView('grid') directly.
| <button type="button" class="btn" [ngClass]="viewMode==='list' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView ? setView('list') : (viewMode='list')"> | |
| <fa-icon [icon]="faList" class="me-1"></fa-icon> List | |
| </button> | |
| <button type="button" class="btn" [ngClass]="viewMode==='grid' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView ? setView('grid') : (viewMode='grid')"> | |
| <button type="button" class="btn" [ngClass]="viewMode==='list' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView('list')"> | |
| <fa-icon [icon]="faList" class="me-1"></fa-icon> List | |
| </button> | |
| <button type="button" class="btn" [ngClass]="viewMode==='grid' ? 'btn-primary' : 'btn-outline-secondary'" (click)="setView('grid')"> |
| @routes.get(config.URL_PREFIX + 'thumb') | ||
| async def thumb(request): | ||
| # Query: base=video|audio, file=<filename>, folder=<subdir or empty>, t=<seconds> |
There was a problem hiding this comment.
The thumbnail endpoint lacks input validation for the 't' parameter. Malicious values could be passed to ffmpeg. Consider validating that 't' is a valid number within reasonable bounds.
|
yass bro, lets goo! |
2 participants
added buttons to switch between grid and list views