4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2306,"use client" import * as React from "react" import { Captions, CaptionsOff, Maximize, Minimize, Pause, Play, Volume2, VolumeX, } from "lucide-react" import { cn } from "@/lib/utils" export type VideoTrack = { src: string /** A BCP 47 language tag, such as "en". */ srcLang: string label: string kind?: "subtitles" | "captions" default?: boolean } export type VideoPlayerProps = Omit< React.HTMLAttributes, "onError" | "children" > & { src: string /** Names the video for assistive technology. */ label: string poster?: string tracks?: readonly VideoTrack[] rates?: readonly number[] } function formatTime(seconds: number) { if (!Number.isFinite(seconds) || seconds < 0) return "0:00" const whole = Math.floor(seconds) return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}` } /** * Video with controls of its own, captions that can be turned on, and a * scrubber that is a real range input rather than a bar to be dragged. */ export function VideoPlayer({ src, label, poster, tracks = [], rates = [1, 1.5, 2], className, ...rootProps }: VideoPlayerProps) { const rootRef = React.useRef(null) const videoRef = React.useRef(null) const [playing, setPlaying] = React.useState(false) const [time, setTime] = React.useState(0) const [duration, setDuration] = React.useState(0) const [muted, setMuted] = React.useState(false) const [rate, setRate] = React.useState(rates[0] ?? 1) const [captions, setCaptions] = React.useState( tracks.some((track) => track.default) ) const [full, setFull] = React.useState(false) const touched = React.useRef(false) const wanted = tracks.some((track) => track.default) // Tracks often arrive after the video does. Following the default until // someone works the toggle keeps a late arrival from being ignored, and a // deliberate choice from being overruled. React.useEffect(() => { if (!touched.current) setCaptions(wanted) }, [wanted]) React.useEffect(() => { const element = videoRef.current if (element) element.playbackRate = rate }, [rate]) // Custom controls mean the browser's caption menu is gone, so the track mode // is set by hand. The cues are still drawn by the browser once it is showing. React.useEffect(() => { const element = videoRef.current if (!element) return for (const track of Array.from(element.textTracks)) { if (track.kind === "subtitles" || track.kind === "captions") { track.mode = captions ? "showing" : "hidden" } } }, [captions, tracks]) React.useEffect(() => { const sync = () => setFull(document.fullscreenElement === rootRef.current) document.addEventListener("fullscreenchange", sync) return () => document.removeEventListener("fullscreenchange", sync) }, []) const seek = (to: number) => { const element = videoRef.current if (!element) return element.currentTime = to setTime(to) } const position = `${formatTime(time)} of ${formatTime(duration)}` return (

seek(Number(event.target.value))} className="accent-primary focus-visible:ring-ring min-w-0 flex-1 cursor-pointer rounded-full focus-visible:ring-2 focus-visible:outline-none disabled:cursor-default" /> {formatTime(time)} / {formatTime(duration)} {tracks.length > 0 ? ( ) : null} {rates.length > 1 ? ( ) : null}

) } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react@^1.31.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.31.0"}]]}]}]]}],["$","$L4c",null,{"namespace":"@mischief","registryDependencies":["utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/default/video-player/video-player.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]