{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"video-player","type":"registry:ui","title":"video-player","description":"A composable, shadcn/ui styled video player component that uses the media-chrome library.","author":"Hayden Bleasel <hello@haydenbleasel.com>","dependencies":["media-chrome"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","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 { ComponentProps, CSSProperties } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type VideoPlayerProps = ComponentProps<typeof MediaController>;\n\nconst variables = {\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} as CSSProperties;\n\nexport const VideoPlayer = ({ style, ...props }: VideoPlayerProps) => (\n  <MediaController\n    style={{\n      ...variables,\n      ...style,\n    }}\n    {...props}\n  />\n);\n\nexport type VideoPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;\n\nexport const VideoPlayerControlBar = (props: VideoPlayerControlBarProps) => (\n  <MediaControlBar {...props} />\n);\n\nexport type VideoPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;\n\nexport const VideoPlayerTimeRange = ({\n  className,\n  ...props\n}: VideoPlayerTimeRangeProps) => (\n  <MediaTimeRange className={cn(\"p-2.5\", className)} {...props} />\n);\n\nexport type VideoPlayerTimeDisplayProps = ComponentProps<\n  typeof MediaTimeDisplay\n>;\n\nexport const VideoPlayerTimeDisplay = ({\n  className,\n  ...props\n}: VideoPlayerTimeDisplayProps) => (\n  <MediaTimeDisplay className={cn(\"p-2.5\", className)} {...props} />\n);\n\nexport type VideoPlayerVolumeRangeProps = ComponentProps<\n  typeof MediaVolumeRange\n>;\n\nexport const VideoPlayerVolumeRange = ({\n  className,\n  ...props\n}: VideoPlayerVolumeRangeProps) => (\n  <MediaVolumeRange className={cn(\"p-2.5\", className)} {...props} />\n);\n\nexport type VideoPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;\n\nexport const VideoPlayerPlayButton = ({\n  className,\n  ...props\n}: VideoPlayerPlayButtonProps) => (\n  <MediaPlayButton className={cn(\"p-2.5\", className)} {...props} />\n);\n\nexport type VideoPlayerSeekBackwardButtonProps = ComponentProps<\n  typeof MediaSeekBackwardButton\n>;\n\nexport const VideoPlayerSeekBackwardButton = ({\n  className,\n  ...props\n}: VideoPlayerSeekBackwardButtonProps) => (\n  <MediaSeekBackwardButton className={cn(\"p-2.5\", className)} {...props} />\n);\n\nexport type VideoPlayerSeekForwardButtonProps = ComponentProps<\n  typeof MediaSeekForwardButton\n>;\n\nexport const VideoPlayerSeekForwardButton = ({\n  className,\n  ...props\n}: VideoPlayerSeekForwardButtonProps) => (\n  <MediaSeekForwardButton className={cn(\"p-2.5\", className)} {...props} />\n);\n\nexport type VideoPlayerMuteButtonProps = ComponentProps<typeof MediaMuteButton>;\n\nexport const VideoPlayerMuteButton = ({\n  className,\n  ...props\n}: VideoPlayerMuteButtonProps) => (\n  <MediaMuteButton className={cn(\"p-2.5\", className)} {...props} />\n);\n\nexport type VideoPlayerContentProps = ComponentProps<\"video\">;\n\nexport const VideoPlayerContent = ({\n  className,\n  ...props\n}: VideoPlayerContentProps) => (\n  <video className={cn(\"mt-0 mb-0\", className)} {...props} />\n);\n","target":"components/kibo-ui/video-player/index.tsx"}],"css":{}}