apps/web/src/components/editor/speed-control.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import { Slider } from "../ui/slider";
import { Label } from "../ui/label";
import { Button } from "../ui/button";
import { usePlaybackStore } from "@/stores/playback-store";

const SPEED_PRESETS = [
	{ label: "0.5x", value: 0.5 },
	{ label: "1x", value: 1.0 },
	{ label: "1.5x", value: 1.5 },
	{ label: "2x", value: 2.0 },
];

export function SpeedControl() {
	const { speed, setSpeed } = usePlaybackStore();

	return (
		<div className="space-y-4">
			<h3 className="text-sm font-medium">Playback Speed</h3>
			<div className="space-y-4">
				<div className="flex gap-2">
					{SPEED_PRESETS.map((preset) => (
						<Button
							key={preset.value}
							variant={speed === preset.value ? "default" : "outline"}
							className="flex-1"
							onClick={() => setSpeed(preset.value)}
						>
							{preset.label}
						</Button>
					))}
				</div>
				<div className="space-y-1">
					<Label>Custom ({speed.toFixed(1)}x)</Label>
					<Slider
						value={[speed]}
						min={0.1}
						max={2.0}
						step={0.1}
						onValueChange={(value) => setSpeed(value[0])}
						className="mt-2"
					/>
				</div>
			</div>
		</div>
	);
}