Components / Fullscreen Media Preview

Fullscreen Media Preview

The 9:16 media lightbox inside fullscreen editors and detail sheets: the current slide on a letterboxed canvas with a thumbnail rail, arrow-key and click-to-advance navigation, and an optional per-slide delete.

import { FullscreenMediaPreview, type MediaSlide } from '@layers/ui/fullscreen-media-preview'

Rendered stock

House rules

• Controlled: the caller owns currentIndex/onIndexChange; the component never keeps its own index.
• The media backdrop is the --media-backdrop token (constant black in both themes), never raw black.
• onSlideDelete adds the hover delete affordance on thumbnails; omit it for read-only previews.
• showNavigationControls adds previous/next controls and pagination. Set navigationChrome="guttered" only when the host provides black side gutters for a TikTok-style slideshow.
• Videos autoplay with sound on; muting in the player persists (localStorage) until the user unmutes.
• Styles ship with the component (fullscreen-media-preview.css is self-imported); no consumer-side stylesheet wiring.