MediaPreviewDialog

Lightbox-style dialog for previewing images, videos, audio, and documents

Overview

MediaPreviewDialog provides a full-featured lightbox for previewing media files. It supports images, videos, and audio with inline playback, while documents display a placeholder with download options.

Key Features

Inline preview for images, videos, and audio files
Navigation arrows and keyboard support for multiple files
Download and open in new tab actions for all files
Document placeholder with file type icon for non-previewable files
File metadata display including size and MIME type

Examples

Multiple Files

Click any file button to open the preview dialog. Use arrow keys or buttons to navigate between files.

Click any file to preview in the lightbox:

Single File

When only one file is provided, navigation arrows are hidden.

Keyboard Navigation

When the dialog is open with multiple files, keyboard navigation is enabled:

Arrow Left: Go to previous file
Arrow Right: Go to next file
Escape: Close the dialog

Props Reference

MediaPreviewDialogProps

Prop	Type	Default	Description
`files`	`MediaFile[]`	`required`	Array of files to preview
`initialIndex`	`number`	`0`	Index of initially selected file
`open`	`boolean`	`required`	Whether the dialog is open
`onOpenChange`	`(open: boolean) => void`	`required`	Callback when dialog open state changes

MediaFile Interface

Prop	Type	Description
`id`	`string`	Unique identifier for the file
`url`	`string`	URL to the file
`fileName`	`string`	Original filename
`fileType`	`string`	MIME type (e.g., image/jpeg, video/mp4)
`fileSizeBytes`	`number`	File size in bytes

Module Exports

The module exports the main component, types, and utility functions:

MediaPreviewDialog - Main dialog component
MediaPreviewDialogProps - Props interface
MediaFile - File data interface
isImageType(fileType) - Check if MIME type is image
isVideoType(fileType) - Check if MIME type is video
isAudioType(fileType) - Check if MIME type is audio
canPreviewInline(fileType) - Check if file can be previewed

Usage

import { MediaPreviewDialog } from '@/ui/components';
import type { MediaFile } from '@/ui/components/media-preview-dialog';

// Define your files
const files: MediaFile[] = [
  {
    id: '1',
    url: '/uploads/photo.jpg',
    fileName: 'photo.jpg',
    fileType: 'image/jpeg',
    fileSizeBytes: 245760,
  },
  {
    id: '2',
    url: '/uploads/video.mp4',
    fileName: 'video.mp4',
    fileType: 'video/mp4',
    fileSizeBytes: 5242880,
  },
];

// Basic usage
const [open, setOpen] = useState(false);
const [initialIndex, setInitialIndex] = useState(0);

<MediaPreviewDialog
  files={files}
  initialIndex={initialIndex}
  open={open}
  onOpenChange={setOpen}
/>

Prop

Type

Default

Description

files

MediaFile[]

required

Array of files to preview

initialIndex

number

0

Index of initially selected file

open

boolean

required

Whether the dialog is open

onOpenChange

(open: boolean) => void

required

Callback when dialog open state changes

Prop

Type

Description

id

string

Unique identifier for the file

url

string

URL to the file

fileName

string

Original filename

fileType

string

MIME type (e.g., image/jpeg, video/mp4)

fileSizeBytes

number

File size in bytes

import { MediaPreviewDialog } from '@/ui/components'; import type { MediaFile } from '@/ui/components/media-preview-dialog'; // Define your files const files: MediaFile[] = [ { id: '1', url: '/uploads/photo.jpg', fileName: 'photo.jpg', fileType: 'image/jpeg', fileSizeBytes: 245760, }, { id: '2', url: '/uploads/video.mp4', fileName: 'video.mp4', fileType: 'video/mp4', fileSizeBytes: 5242880, }, ]; // Basic usage const [open, setOpen] = useState(false); const [initialIndex, setInitialIndex] = useState(0); <MediaPreviewDialog files={files} initialIndex={initialIndex} open={open} onOpenChange={setOpen} />