Media Integration Demo

HTML5 Media Players, YouTube Embeds, and CSV Data Display

Individual Components

HTML5 Image Player

Earth from Space

HTML5 Video Player

Big Buck Bunny

YouTube Embed

Sample YouTube Video

CSV Data Display

No CSV data available

Media Gallery

Earth from Space

Beautiful view of Earth from the International Space Station

Big Buck Bunny

Open source animated short film

Sample YouTube Video

Example of YouTube embed integration

Firebase/Firestore Integration

To enable Firebase/Firestore integration for dynamic media loading:

Copy firebase.env.example to .env.local
Add your Firebase project credentials
Create a Firestore collection (e.g., "media")
Add documents with fields: type, url, title, description
Use MediaGallery with firestoreCollection prop

Example Firestore Document:

{
  "type": "video",
  "url": "https://example.com/video.mp4",
  "title": "My Video",
  "description": "Video description",
  "createdAt": Timestamp
}

Usage Examples

Import Components:

import { MediaPlayer, YouTubeEmbed, CSVDataDisplay, MediaGallery } from '@/components/media';

Use MediaPlayer:

<MediaPlayer 
  url="https://example.com/image.jpg" 
  type={MediaType.IMAGE}
  title="My Image"
/>

Use YouTubeEmbed:

<YouTubeEmbed 
  videoId="dQw4w9WgXcQ"
  title="My Video"
  privacyEnhanced={true}
/>

Use CSVDataDisplay with Firestore:

<CSVDataDisplay 
  firestoreDocId="document-id"
  firestoreCollection="media"
  searchable={true}
  exportable={true}
/>

Use MediaGallery with Firestore:

<MediaGallery 
  firestoreCollection="media"
  columns={3}
/>