Full-page media browser with contact sidebar, category tabs, lightbox viewer, and bulk operations
The Media Browser (/media route) lets users browse all downloaded photos, videos, documents, audio, and links organized by contact. The left sidebar mirrors the main ChatList design for visual consistency.
| Method |
Path |
Description |
| GET |
/api/media/contacts |
List all contacts with categorized file counts and DB enrichment |
| GET |
/api/media/:folder |
Get categorized files, links, and transcript for a folder |
| GET |
/api/media/:folder/file/:filename |
Serve a media file |
| GET |
/api/media/:folder/thumb/:filename |
Serve a thumbnail (falls back to full file) |
| DELETE |
/api/media/:folder/file/:filename |
Delete a file and its thumbnail |
| POST |
/api/media/:folder/thumbs |
Generate missing thumbnails |
| POST |
/api/media/merge |
Merge duplicate folders + deduplicate |
| GET |
/api/media/duplicates |
Find duplicate files by MD5 hash |
| POST |
/api/media/bulk-delete |
Delete multiple files by folder/filename pairs |
| Tab |
Content |
Features |
| Photos |
Thumbnail grid |
Lightbox with arrow nav, delete, download |
| Videos |
Thumbnail grid |
Play button overlay, thumbnail fallback |
| Docs |
File list |
Type icon, size, date, download |
| Audio |
Audio players |
Inline <audio> controls, download |
| Links |
URL list |
Extracted from messages with context, sender, timestamp |
| File |
Role |
frontend/src/pages/MediaBrowserPage.tsx |
Full page component with sidebar, tabs, lightbox |
backend/src/controllers/mediaController.ts |
listContacts endpoint with DB enrichment |
frontend/src/types/index.ts |
MediaContact interface |
frontend/src/hooks/useZoom.ts |
Zoom state hook (localStorage-persisted) |
Complete and deployed.