scrub-bar

1"use client"
2 
3import * as React from "react"
4import {
5  createContext,
6  useCallback,
7  useContext,
8  useRef,
9  type ComponentProps,
10  type HTMLAttributes,
11} from "react"
12 
13import { cn } from "@/lib/utils"
14import { Progress } from "@/components/ui/progress"
15 
16function formatTimestamp(value: number) {
17  if (!Number.isFinite(value) || value < 0) return "0:00"
18  const totalSeconds = Math.floor(value)
19  const minutes = Math.floor(totalSeconds / 60)
20  const seconds = totalSeconds % 60
21  return `${minutes}:${seconds.toString().padStart(2, "0")}`
22}
23 
24interface ScrubBarContextValue {
25  duration: number
26  value: number
27  progress: number
28  onScrub?: (time: number) => void
29  onScrubStart?: () => void
30  onScrubEnd?: () => void
31}
32 
33const ScrubBarContext = createContext<ScrubBarContextValue | null>(null)
34 
35function useScrubBarContext() {
36  const context = useContext(ScrubBarContext)
37  if (!context) {
38    throw new Error("useScrubBarContext must be used within a ScrubBar.Root")
39  }
40  return context
41}
42 
43interface ScrubBarContainerProps extends HTMLAttributes<HTMLDivElement> {
44  duration: number
45  value: number
46  onScrub?: (time: number) => void
47  onScrubStart?: () => void
48  onScrubEnd?: () => void
49}
50 
51function ScrubBarContainer({
52  duration,
53  value,
54  onScrub,
55  onScrubStart,
56  onScrubEnd,
57  children,
58  className,
59  ...props
60}: ScrubBarContainerProps) {
61  const progress = duration > 0 ? (value / duration) * 100 : 0
62 
63  const contextValue: ScrubBarContextValue = {
64    duration,
65    value,
66    progress,
67    onScrub,
68    onScrubStart,
69    onScrubEnd,
70  }
71 
72  return (
73    <ScrubBarContext.Provider value={contextValue}>
74      <div
75        data-slot="scrub-bar-root"
76        className={cn("flex w-full items-center", className)}
77        {...props}
78      >
79        {children}
80      </div>
81    </ScrubBarContext.Provider>
82  )
83}
84ScrubBarContainer.displayName = "ScrubBarContainer"
85 
86type ScrubBarTrackProps = HTMLAttributes<HTMLDivElement>
87 
88function ScrubBarTrack({ className, children, ...props }: ScrubBarTrackProps) {
89  const trackRef = useRef<HTMLDivElement | null>(null)
90  const { duration, onScrub, onScrubStart, onScrubEnd, value } =
91    useScrubBarContext()
92 
93  const getTimeFromClientX = useCallback(
94    (clientX: number) => {
95      const track = trackRef.current
96      if (!track || !duration) return null
97      const rect = track.getBoundingClientRect()
98      const ratio = (clientX - rect.left) / rect.width
99      const clamped = Math.min(Math.max(ratio, 0), 1)
100// … truncated