{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "video", "title": "Video", "type": "registry:ui", "files": [ { "path": "packages/registry-react/components/video/Video.tsx", "content": "import * as React from 'react'\nimport { Maximize, Minimize, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport interface VideoProps extends React.HTMLAttributes {\n /** Video source URL. */\n src: string\n /** Poster image shown before playback. */\n poster?: string\n /** Autoplay on mount. Note: browsers may block autoplay with sound. */\n autoplay?: boolean\n /** Loop playback. */\n loop?: boolean\n /** Muted audio. */\n muted?: boolean\n /** Use native browser controls instead of the custom overlay. Default false. */\n nativeControls?: boolean\n /** Initial playback rate. Default 1. */\n playbackRate?: number\n /** Aspect ratio class or inline style value. Default '16/9'. */\n aspectRatio?: string\n}\n\nconst Video = React.forwardRef(\n (\n {\n src,\n poster,\n autoplay = false,\n loop = false,\n muted = false,\n nativeControls = false,\n playbackRate = 1,\n aspectRatio = '16/9',\n className,\n ...props\n },\n ref,\n ) => {\n const videoRef = React.useRef(null)\n const containerRef = React.useRef(null)\n\n const [playing, setPlaying] = React.useState(false)\n const [current, setCurrent] = React.useState(0)\n const [duration, setDuration] = React.useState(0)\n const [volume, setVolume] = React.useState(muted ? 0 : 1)\n const [isMuted, setIsMuted] = React.useState(muted)\n const [isFullscreen, setIsFullscreen] = React.useState(false)\n const [showControls, setShowControls] = React.useState(true)\n const hideTimerRef = React.useRef | null>(null)\n\n React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement)\n\n const togglePlay = React.useCallback(() => {\n const v = videoRef.current\n if (!v) return\n if (v.paused) v.play()\n else v.pause()\n }, [])\n\n const onPlay = React.useCallback(() => setPlaying(true), [])\n const onPause = React.useCallback(() => setPlaying(false), [])\n const onTimeUpdate = React.useCallback(() => {\n const v = videoRef.current\n if (!v) return\n setCurrent(v.currentTime)\n }, [])\n const onLoadedMetadata = React.useCallback(() => {\n const v = videoRef.current\n if (!v) return\n setDuration(v.duration || 0)\n v.playbackRate = playbackRate\n v.volume = volume\n }, [playbackRate, volume])\n const onVolumeChange = React.useCallback(() => {\n const v = videoRef.current\n if (!v) return\n setVolume(v.volume)\n setIsMuted(v.muted)\n }, [])\n\n const seek = (e: React.ChangeEvent) => {\n const v = videoRef.current\n if (!v) return\n v.currentTime = Number(e.target.value)\n }\n\n const setVolumeInput = (e: React.ChangeEvent) => {\n const v = videoRef.current\n if (!v) return\n v.volume = Number(e.target.value)\n v.muted = Number(e.target.value) === 0\n }\n\n const toggleMute = () => {\n const v = videoRef.current\n if (!v) return\n v.muted = !v.muted\n }\n\n const skip = (seconds: number) => {\n const v = videoRef.current\n if (!v) return\n v.currentTime = Math.min(Math.max(v.currentTime + seconds, 0), v.duration || 0)\n }\n\n const toggleFullscreen = () => {\n const el = containerRef.current\n if (!el) return\n if (document.fullscreenElement) {\n document.exitFullscreen()\n } else {\n el.requestFullscreen()\n }\n }\n\n const onFullscreenChange = React.useCallback(() => {\n setIsFullscreen(!!document.fullscreenElement)\n }, [])\n\n const onMouseMove = () => {\n setShowControls(true)\n if (hideTimerRef.current) clearTimeout(hideTimerRef.current)\n hideTimerRef.current = setTimeout(() => {\n setPlaying((p) => {\n if (p) setShowControls(false)\n return p\n })\n }, 2500)\n }\n\n const onMouseLeave = () => {\n if (hideTimerRef.current) clearTimeout(hideTimerRef.current)\n if (videoRef.current && !videoRef.current.paused) setShowControls(false)\n }\n\n const formatTime = (s: number): string => {\n if (!s || !isFinite(s)) return '0:00'\n const m = Math.floor(s / 60)\n const sec = Math.floor(s % 60)\n return `${m}:${sec.toString().padStart(2, '0')}`\n }\n\n const progress = duration > 0 ? (current / duration) * 100 : 0\n\n React.useEffect(() => {\n document.addEventListener('fullscreenchange', onFullscreenChange)\n return () => {\n document.removeEventListener('fullscreenchange', onFullscreenChange)\n if (hideTimerRef.current) clearTimeout(hideTimerRef.current)\n }\n }, [onFullscreenChange])\n\n React.useEffect(() => {\n const v = videoRef.current\n if (v) v.playbackRate = playbackRate\n }, [playbackRate])\n\n React.useEffect(() => {\n const v = videoRef.current\n if (v) v.muted = muted\n }, [muted])\n\n return (\n \n \n\n {!nativeControls && (\n \n {/* Top spacer / click target */}\n
\n\n {/* Bottom controls bar */}\n
\n {/* Progress bar */}\n
\n {formatTime(current)}\n \n {formatTime(duration)}\n
\n\n {/* Buttons row */}\n
\n \n {playing ? : }\n \n skip(-10)}\n >\n \n \n skip(10)}\n >\n \n \n\n {/* Volume */}\n
\n \n {isMuted || volume === 0 ? : }\n \n \n
\n\n
\n\n \n {isFullscreen ? : }\n \n
\n
\n
\n )}\n
\n )\n },\n)\nVideo.displayName = 'Video'\n\nexport { Video }\n", "type": "registry:ui", "target": "~/components/ui/video/Video.tsx" }, { "path": "packages/registry-react/components/video/index.ts", "content": "export { Video, type VideoProps } from './Video'\n", "type": "registry:ui", "target": "~/components/ui/video/index.ts" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [], "description": "Video player wrapper with a custom controls overlay on a native video element. Supports src, poster, autoplay, loop, muted, custom or native controls, playback rate, fullscreen, time display, a progress bar, play/pause, skip, and volume control.", "categories": [ "media", "display" ] }