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:T1367,"use client" import * as React from "react" import { cn } from "@/lib/utils" export type ScrubBarProps = Omit< React.HTMLAttributes, "onChange" | "defaultValue" > & { /** Seconds. */ duration: number value?: number defaultValue?: number onValueChange?: (seconds: number) => void /** Called once, when the drag ends. */ onCommit?: (seconds: number) => void /** How far arrow keys move, in seconds. */ step?: number /** Already downloaded, in seconds. Drawn behind the played part. */ buffered?: number label?: string disabled?: boolean } function clock(seconds: number) { const whole = Math.max(0, Math.round(seconds)) return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}` } /** * The seek control on its own: a slider that happens to be a timeline. It is a * real slider to the keyboard and to assistive technology, announced in * minutes and seconds rather than as a number between nought and one. */ export function ScrubBar({ duration, value, defaultValue = 0, onValueChange, onCommit, step = 5, buffered, label = "Seek", disabled = false, className, ...rootProps }: ScrubBarProps) { const [uncontrolled, setUncontrolled] = React.useState(defaultValue) const at = Math.min(Math.max(value ?? uncontrolled, 0), duration) const trackRef = React.useRef(null) const dragging = React.useRef(false) const set = (seconds: number, commit = false) => { const next = Math.min(Math.max(seconds, 0), duration) if (value === undefined) setUncontrolled(next) onValueChange?.(next) if (commit) onCommit?.(next) } const secondsAt = (clientX: number) => { const track = trackRef.current if (!track) return at const box = track.getBoundingClientRect() if (box.width === 0) return at return ((clientX - box.left) / box.width) * duration } const portion = duration > 0 ? at / duration : 0 const ready = buffered === undefined ? undefined : Math.min(buffered, duration) return (

{clock(at)}

{ if (disabled) return dragging.current = true event.currentTarget.setPointerCapture(event.pointerId) set(secondsAt(event.clientX)) }} onPointerMove={(event) => { if (!dragging.current) return set(secondsAt(event.clientX)) }} onPointerUp={(event) => { if (!dragging.current) return dragging.current = false event.currentTarget.releasePointerCapture(event.pointerId) set(secondsAt(event.clientX), true) }} onKeyDown={(event) => { if (disabled) return const jump: Record = { ArrowLeft: -step, ArrowRight: step, ArrowDown: -step, ArrowUp: step, } if (event.key in jump) { event.preventDefault() set(at + jump[event.key]!, true) return } if (event.key === "Home") { event.preventDefault() set(0, true) } if (event.key === "End") { event.preventDefault() set(duration, true) } }} >

{ready !== undefined ? (

) : null}

{clock(duration)}

) } 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":[null,["$","$L4c",null,{"namespace":"@mischief","registryDependencies":["utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/default/scrub-bar/scrub-bar.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]