From f72f5c100badb8ad744a20b9110f9f5e7a9bf774 Mon Sep 17 00:00:00 2001
From: StarKnightt <prasenjitt4e@gmail.com>
Date: Mon, 23 Jun 2025 20:01:12 +0530
Subject: Add video speed control and improve playback smoothness

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.
---
 apps/web/src/components/editor/speed-control.tsx | 46 ++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 apps/web/src/components/editor/speed-control.tsx

(limited to 'apps/web/src/components/editor/speed-control.tsx')

diff --git a/apps/web/src/components/editor/speed-control.tsx b/apps/web/src/components/editor/speed-control.tsx
new file mode 100644
index 00000000..39281a9a
--- /dev/null
+++ b/apps/web/src/components/editor/speed-control.tsx
@@ -0,0 +1,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>
+  );
+} 
\ No newline at end of file
-- 
cgit v1.3.1