{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"video-player","title":"Video Player","description":"A themed media-chrome video player with composable controls.","files":[{"path":"ui/video-player.tsx","type":"registry:ui","content":"\"use client\";\n\nimport {\n  MediaControlBar,\n  MediaController,\n  MediaMuteButton,\n  MediaPlayButton,\n  MediaSeekBackwardButton,\n  MediaSeekForwardButton,\n  MediaTimeDisplay,\n  MediaTimeRange,\n  MediaVolumeRange,\n} from \"media-chrome/react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype VideoPlayerVariables = React.CSSProperties & Record<`--${string}`, string>;\ntype VideoPlayerContentProps = React.ComponentProps<\"video\"> & {\n  captionsSrc?: string;\n  captionsLabel?: string;\n  captionsSrcLang?: string;\n};\n\nconst videoPlayerVariables = {\n  \"--media-primary-color\": \"var(--primary)\",\n  \"--media-secondary-color\": \"var(--background)\",\n  \"--media-text-color\": \"var(--foreground)\",\n  \"--media-background-color\": \"var(--background)\",\n  \"--media-control-hover-background\": \"var(--accent)\",\n  \"--media-font-family\": \"var(--font-sans)\",\n  \"--media-live-button-icon-color\": \"var(--muted-foreground)\",\n  \"--media-live-button-indicator-color\": \"var(--destructive)\",\n  \"--media-range-track-background\": \"var(--border)\",\n} satisfies VideoPlayerVariables;\nconst emptyCaptionsSrc = \"data:text/vtt,WEBVTT%0A%0A\";\n\nfunction VideoPlayer({ style, ...props }: React.ComponentProps<typeof MediaController>) {\n  return <MediaController style={{ ...videoPlayerVariables, ...style }} {...props} />;\n}\n\nfunction VideoPlayerControlBar(props: React.ComponentProps<typeof MediaControlBar>) {\n  return <MediaControlBar {...props} />;\n}\n\nfunction VideoPlayerTimeRange({\n  className,\n  ...props\n}: React.ComponentProps<typeof MediaTimeRange>) {\n  return <MediaTimeRange className={cn(\"p-2.5\", className)} {...props} />;\n}\n\nfunction VideoPlayerTimeDisplay({\n  className,\n  ...props\n}: React.ComponentProps<typeof MediaTimeDisplay>) {\n  return <MediaTimeDisplay className={cn(\"p-2.5\", className)} {...props} />;\n}\n\nfunction VideoPlayerVolumeRange({\n  className,\n  ...props\n}: React.ComponentProps<typeof MediaVolumeRange>) {\n  return <MediaVolumeRange className={cn(\"p-2.5\", className)} {...props} />;\n}\n\nfunction VideoPlayerPlayButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof MediaPlayButton>) {\n  return <MediaPlayButton aria-label=\"Play\" className={cn(\"p-2.5\", className)} {...props} />;\n}\n\nfunction VideoPlayerSeekBackwardButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof MediaSeekBackwardButton>) {\n  return (\n    <MediaSeekBackwardButton\n      aria-label=\"Seek backward\"\n      className={cn(\"p-2.5\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction VideoPlayerSeekForwardButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof MediaSeekForwardButton>) {\n  return (\n    <MediaSeekForwardButton\n      aria-label=\"Seek forward\"\n      className={cn(\"p-2.5\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction VideoPlayerMuteButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof MediaMuteButton>) {\n  return <MediaMuteButton aria-label=\"Mute\" className={cn(\"p-2.5\", className)} {...props} />;\n}\n\nfunction VideoPlayerContent({\n  className,\n  children,\n  captionsSrc = emptyCaptionsSrc,\n  captionsLabel = \"Captions\",\n  captionsSrcLang = \"en\",\n  ...props\n}: VideoPlayerContentProps) {\n  return (\n    <video slot=\"media\" className={cn(\"my-0 block size-full\", className)} {...props}>\n      <track kind=\"captions\" src={captionsSrc} label={captionsLabel} srcLang={captionsSrcLang} />\n      {children}\n    </video>\n  );\n}\n\nexport {\n  VideoPlayer,\n  VideoPlayerControlBar,\n  VideoPlayerTimeRange,\n  VideoPlayerTimeDisplay,\n  VideoPlayerVolumeRange,\n  VideoPlayerPlayButton,\n  VideoPlayerSeekBackwardButton,\n  VideoPlayerSeekForwardButton,\n  VideoPlayerMuteButton,\n  VideoPlayerContent,\n};","target":"@ui/video-player.tsx"}],"type":"registry:ui","dependencies":["media-chrome"]}