MediaViewer Component

A versatile media viewer that supports photos, videos, and audio files. Features navigation controls for multiple media items and playback controls for video/audio.

Single Photo

<MediaViewer 
  media={[
    {
      id: "1",
      type: "photo",
      url: "https://example.com/photo.jpg",
      alt: "Concert photo"
    }
  ]}
/>

Photo Gallery

<MediaViewer 
  media={[
    { id: "1", type: "photo", url: "photo1.jpg", alt: "Concert photo 1" },
    { id: "2", type: "photo", url: "photo2.jpg", alt: "Concert photo 2" },
    { id: "3", type: "photo", url: "photo3.jpg", alt: "Concert photo 3" }
  ]}
/>

Video Player

video

<MediaViewer 
  media={[
    {
      id: "1",
      type: "video",
      url: "video.mp4",
      thumbnail: "video-thumbnail.jpg"
    }
  ]}
  controls={true}
/>

Audio Player

Audio Track

audio

<MediaViewer 
  media={[
    {
      id: "1",
      type: "audio",
      url: "audio-track.mp3"
    }
  ]}
  controls={true}
/>

Mixed Media Gallery

<MediaViewer 
  media={[
    { id: "1", type: "photo", url: "photo.jpg", alt: "Concert photo" },
    { id: "2", type: "video", url: "video.mp4", thumbnail: "thumb.jpg" },
    { id: "3", type: "audio", url: "audio.mp3" }
  ]}
  controls={true}
/>

Empty State

No media available

<MediaViewer media={[]} />

Props Reference

Prop	Type	Default	Description
media	MediaItem[]	required	Array of media items to display
autoplay	boolean	false	Auto-play video/audio content
controls	boolean	true	Show playback controls for video/audio
className	string	undefined	Additional CSS classes

MediaItem Interface

Property	Type	Required	Description
id	string	yes	Unique identifier
type	'photo' \| 'video' \| 'audio'	yes	Media type
url	string	yes	Media file URL
thumbnail	string	no	Video thumbnail URL
alt	string	no	Alt text for images