Scrub Bar

1<script lang="ts">
2	import type { Snippet } from "svelte";
3	import type { HTMLAttributes } from "svelte/elements";
4	import { cn } from "$UTILS$.js";
5	import { setScrubBarContext } from "./context.js";
6 
7	let {
8		class: className,
9		duration,
10		value,
11		onScrub,
12		onScrubStart,
13		onScrubEnd,
14		children,
15		...restProps
16	}: HTMLAttributes<HTMLDivElement> & {
17		/** Total duration of the timeline, in seconds. */
18		duration: number;
19		/** Current playback time, in seconds. */
20		value: number;
21		/** Called with the new time (in seconds) as the user scrubs. */
22		onScrub?: (time: number) => void;
23		/** Called when the user presses down on the track or thumb. */
24		onScrubStart?: () => void;
25		/** Called when the user releases the pointer after scrubbing. */
26		onScrubEnd?: () => void;
27		children?: Snippet;
28	} = $props();
29 
30	const progress = $derived(duration > 0 ? (value / duration) * 100 : 0);
31 
32	setScrubBarContext({
33		get duration() {
34			return duration;
35		},
36		get value() {
37			return value;
38		},
39		get progress() {
40			return progress;
41		},
42		get onScrub() {
43			return onScrub;
44		},
45		get onScrubStart() {
46			return onScrubStart;
47		},
48		get onScrubEnd() {
49			return onScrubEnd;
50		},
51	});
52</script>
53 
54<div data-slot="scrub-bar-root" class={cn("flex w-full items-center", className)} {...restProps}>
55	{@render children?.()}
56</div>