f72f5c100b
Added a speed control dropdown in the timeline toolbar that lets users change video playback speed between 0.5x to 2x. The dropdown shows the current speed and offers preset options. Made video playback smoother by: - Using better timing for speed changes - Improving video synchronization - Reducing playback stutters - Making speed changes more responsive The speed control is now easily accessible while editing and works smoothly with all video clips.
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
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>
|
|
);
|
|
}
|