Video Player

import { MediaPlayer } from '@hanzo/ui'

export function Default() {
  return (
    <MediaPlayer
      sources={bigBuckBunny}
      poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
    />
  )
}

export function Sizes() {
  return (
    <YStack gap="$4" items="center">
      <MediaPlayer sources={bigBuckBunny} size="sm" />
      <MediaPlayer sources={bigBuckBunny} size="lg" />
    </YStack>
  )
}

export function MultipleQualities() {
  const sources: MediaSource[] = [
    { src: "https://example.com/video-480p.mp4", type: "video/mp4", quality: "480p" },
    { src: "https://example.com/video-720p.mp4", type: "video/mp4", quality: "720p" },
    { src: "https://example.com/video-1080p.mp4", type: "video/mp4", quality: "1080p" },
  ]
  return <MediaPlayer sources={sources} />
}

export function Subtitles() {
  return (
    <MediaPlayer
      sources={bigBuckBunny}
      subtitles={[
        { src: "/captions/en.vtt", label: "English", srcLang: "en", default: true },
        { src: "/captions/fr.vtt", label: "Français", srcLang: "fr" },
      ]}
    />
  )
}

Types

export type MediaSource = {
  src: string
  type: string
  quality?: string
}

export type MediaSubtitleTrack = {
  src: string
  label: string
  srcLang: string
  default?: boolean
}

export type MediaPlayerSize = 'sm' | 'md' | 'lg' | 'full'

export type MediaPlayerProps = Omit<
  React.ComponentPropsWithoutRef<typeof Frame>,
  'onPlay' | 'onPause' | 'onEnded' | 'children'
> & {
  sources: MediaSource[]
  poster?: string
  subtitles?: MediaSubtitleTrack[]
  size?: MediaPlayerSize
  autoPlay?: boolean
  loop?: boolean
  muted?: boolean
  preload?: 'auto' | 'metadata' | 'none'
  controls?: boolean
  disableKeyboard?: boolean
  disablePictureInPicture?: boolean
  onPlay?: () => void
  onPause?: () => void
  onEnded?: () => void
  onTimeUpdate?: (currentTime: number, duration: number) => void
  onVolumeChange?: (volume: number) => void
  onQualityChange?: (quality: string) => void
  onSpeedChange?: (speed: number) => void
}

Exports