Media Components

Recording, playback, and transcription infrastructure

Overview

The media infrastructure provides a complete solution for recording and playing back video and audio content. It includes browser API abstractions via hooks, reusable UI components, and support for automatic transcription.

Key Components

RecordingModal - Full-screen recording experience with device selection, countdown, and review
VideoPlayer - Custom video player with playback controls, fullscreen, and volume
AudioPlayer - Audio playback with optional waveform visualization
DeviceSelector - Camera/microphone selection dropdowns
WaveformCanvas - Real-time audio visualization
TranscriptDisplay - Show transcripts with timestamps
MediaSourceSelector - Admin interface for upload vs record

Hooks

useMediaDevices - Device enumeration and permission handling
useMediaRecorder - MediaRecorder API abstraction with state machine
useAudioAnalyzer - Web Audio API for real-time waveform analysis

Interactive Examples

Recording Modals

Full-screen recording experience with device selection, countdown, and review.

Device Selection

Let users choose between available cameras and microphones.

No camera found

No microphone found

Live Waveform Visualization

Real-time audio visualization using Web Audio API.

Click to start live audio visualization

Processing Status

Friendly status indicators for transcript generation.

Transcript will be generated shortly...

Generating transcript...

Transcript generation failed

Transcript Display

Show transcript text with clickable timestamps.

TranscriptEN

This is a sample transcript demonstrating the transcript display component. It supports timestamps and can be expanded to show the full text with clickable segments for seeking to specific points in t...

Audio Player with Waveform

Audio playback with pre-computed waveform visualization.

0:00 / 0:00

Module Exports

The media module exports hooks, components, and types from three locations:

Import Path	Contains
`@/lib/media`	Types, format utilities, duration helpers, thumbnail generation
`@/ui/hooks/use-media`	useMediaDevices, useMediaRecorder, useAudioAnalyzer
`@/ui/components/media`	All UI components (RecordingModal, VideoPlayer, etc.)

// Hooks
import { useMediaDevices, useMediaRecorder, useAudioAnalyzer } from '@/ui/hooks/use-media';

// Components
import {
  RecordingControls,
  CountdownOverlay,
  WaveformCanvas,
  DeviceSelector,
  VideoPlayer,
  AudioPlayer,
  ProcessingStatus,
  TranscriptDisplay,
  RecordingModal,
  MediaSourceSelector,
} from '@/ui/components/media';

// Types
import type { RecordingResult, MediaReference, TranscriptData } from '@/lib/media';

// Example: Recording Modal
const [isOpen, setIsOpen] = useState(false);

<RecordingModal
  open={isOpen}
  onOpenChange={setIsOpen}
  type="video"
  mode="camera"
  constraints={{ maxDuration: 60 }}
  onComplete={(result) => {
    // Upload result.blob to storage
    // Create MediaReference from upload response
  }}
/>

// Example: Video Player
<VideoPlayer
  src={mediaUrl}
  poster={thumbnailUrl}
  showControls
  onEnded={() => console.log('Playback ended')}
/>

// Example: Audio Player with Waveform
<AudioPlayer
  src={audioUrl}
  waveformData={precomputedWaveform}
  showWaveform
/>

Import Path

Contains

@/lib/media

Types, format utilities, duration helpers, thumbnail generation

@/ui/hooks/use-media

useMediaDevices, useMediaRecorder, useAudioAnalyzer

@/ui/components/media

All UI components (RecordingModal, VideoPlayer, etc.)

// Hooks import { useMediaDevices, useMediaRecorder, useAudioAnalyzer } from '@/ui/hooks/use-media'; // Components import { RecordingControls, CountdownOverlay, WaveformCanvas, DeviceSelector, VideoPlayer, AudioPlayer, ProcessingStatus, TranscriptDisplay, RecordingModal, MediaSourceSelector, } from '@/ui/components/media'; // Types import type { RecordingResult, MediaReference, TranscriptData } from '@/lib/media'; // Example: Recording Modal const [isOpen, setIsOpen] = useState(false); <RecordingModal open={isOpen} onOpenChange={setIsOpen} type="video" mode="camera" constraints={{ maxDuration: 60 }} onComplete={(result) => { // Upload result.blob to storage // Create MediaReference from upload response }} /> // Example: Video Player <VideoPlayer src={mediaUrl} poster={thumbnailUrl} showControls onEnded={() => console.log('Playback ended')} /> // Example: Audio Player with Waveform <AudioPlayer src={audioUrl} waveformData={precomputedWaveform} showWaveform />