fileserver: Add interactive media viewer (lightbox) to browse template #7287
Conversation
Add interactive media viewer (lightbox) for images and videos in the file browser template: - Images and videos now open in a modal overlay instead of navigating to a new page - Navigation controls: left/right arrow buttons and keyboard shortcuts (←/→) - Keyboard support: ESC to close, arrow keys to navigate - Auto-play support for videos with playback controls - Display file information and current position (e.g., "3 / 10") - Responsive design for both desktop and mobile devices Supported formats: - Images: jpg, jpeg, png, gif, webp, tiff, bmp, heif, heic, svg, avif - Videos: mp4, mov, m4v, mpeg, mpg, avi, ogg, webm, mkv, vob, gifv, 3gp 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Enhance the file browser media viewer with additional features: - Add audio file support (mp3, m4a, aac, flac, wav, wma, midi, cda) - Add touch swipe navigation for mobile devices (swipe left/right to navigate) - Refactor code style to match original template conventions (use var instead of const/let) - Add CSP media-src policy for video/audio playback support - Audio player width set to 80vw for better visibility All media types (images, videos, audio) now support: - Modal overlay viewing with navigation controls - Keyboard shortcuts (ESC, ←, →) - Touch gestures on mobile devices - File info display with position counter 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
|
This looks neat, thanks. Can you fill out the AI disclosure that was in the PR template? It looks like it got deleted. And, is this code borrowed from anywhere? Any sort of lightbox library, or is this your original work? |
|
Thanks! |
|
Thanks. I'm just debating, and discussing with our maintainer team, how fancy we want the default, standard file browser to be. There's a line somewhere between "Basic, elegant file listing" and "File browser application", and we don't want to start getting into "application" territory as that's probably out of scope. Remember that the browse template can be customized without needing to recompile Caddy -- so we don't feel inclined to bring in every feature. (It's not personal) |
|
Great! For me, I am also considering a similar process on pdf files. And also, a multi-select and download as zip file functionality might also be favorable? From my perspective, as the file browser template tend to act as a file sharing website, such functionality might be favorable for this usage. Feel free to let me know about your thoughts and the results of discussion from your maintainer team! |
Summary
Add an interactive media viewer (lightbox) to the file browser template, allowing users to preview images, videos, and audio files directly in the browser without navigating away from the current page.
Motivation
Currently, clicking on media files in the file browser navigates to a new page showing only that file. This enhancement provides a better user experience by:
Changes
Features Added
Media Types Support
Navigation Controls
←/→for navigation,ESCto closeMedia Playback
Security
media-src 'self'to Content Security Policy for video/audio support