fileserver: Add interactive media viewer (lightbox) to browse template

[wang1zhen]

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:

• Allowing quick preview of media files in a modal overlay
• Supporting easy navigation between media files without page reloads
• Providing a modern, gallery-like browsing experience
• Supporting mobile touch gestures for better mobile UX

Changes

Features Added

Media Types Support

• 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
• Audio: mp3, m4a, aac, flac, wav, wma, midi, cda

Navigation Controls

• Mouse/Keyboard (Desktop):
  • Left/Right arrow buttons for previous/next
  • Keyboard shortcuts: ← / → for navigation, ESC to close
  • Click on background to close
• Touch (Mobile):
  • Swipe left/right to navigate between media files
  • Tap close button or background to exit

Media Playback

• Auto-play for videos and audio files
• Native browser controls for playback (play, pause, volume, seek)
• Audio player width set to 80vw for better visibility on all screens

Security

• Added media-src 'self' to Content Security Policy for video/audio support
• All existing CSP restrictions maintained

[mholt]

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?

[wang1zhen]

Thanks!
AI Disclosure: Yes, this feature was implemented with AI assistance using Claude Code. The commits include the co-authorship attribution.
Code Origin: This is original work - not borrowed from any existing lightbox library. The implementation was built from scratch specifically for Caddy's file browser template to create a lightweight media viewer.

[mholt]

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)

[wang1zhen]

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!

[Efreak]

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)

Can I suggest a website/docs section with common examples? Or a community repo linking to other users' configs? I'm interested in "prettifying" my directory listings without having to use a CGI script or site generator or having to rewrite (and debug) things by hand; discoverability is difficult for things like this.

[mholt]

@Efreak The community can post and maintain their examples in the project wiki on our forums: https://caddy.community/c/wiki/13