From f72f5c100badb8ad744a20b9110f9f5e7a9bf774 Mon Sep 17 00:00:00 2001 From: StarKnightt Date: Mon, 23 Jun 2025 20:01:12 +0530 Subject: [PATCH 01/11] 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. --- .../components/editor/properties-panel.tsx | 415 +++++++++--------- .../src/components/editor/speed-control.tsx | 46 ++ apps/web/src/components/editor/timeline.tsx | 32 +- apps/web/src/components/ui/command.tsx | 2 +- apps/web/src/components/ui/video-player.tsx | 23 +- apps/web/src/stores/playback-store.ts | 34 +- apps/web/src/types/playback.ts | 2 + 7 files changed, 344 insertions(+), 210 deletions(-) create mode 100644 apps/web/src/components/editor/speed-control.tsx diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx index af80f46..2b211c2 100644 --- a/apps/web/src/components/editor/properties-panel.tsx +++ b/apps/web/src/components/editor/properties-panel.tsx @@ -1,197 +1,218 @@ -"use client"; - -import { Input } from "../ui/input"; -import { Label } from "../ui/label"; -import { Slider } from "../ui/slider"; -import { ScrollArea } from "../ui/scroll-area"; -import { Separator } from "../ui/separator"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "../ui/select"; -import { useTimelineStore } from "@/stores/timeline-store"; -import { useMediaStore } from "@/stores/media-store"; -import { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment"; -import { useState } from "react"; - -export function PropertiesPanel() { - const { tracks } = useTimelineStore(); - const { mediaItems } = useMediaStore(); - const [backgroundType, setBackgroundType] = useState< - "blur" | "mirror" | "color" - >("blur"); - const [backgroundColor, setBackgroundColor] = useState("#000000"); - - // Get the first image clip for preview (simplified) - const firstImageClip = tracks - .flatMap((track) => track.clips) - .find((clip) => { - const mediaItem = mediaItems.find((item) => item.id === clip.mediaId); - return mediaItem?.type === "image"; - }); - - const firstImageItem = firstImageClip - ? mediaItems.find((item) => item.id === firstImageClip.mediaId) - : null; - - return ( - -
- {/* Image Treatment - only show if an image is selected */} - {firstImageItem && ( - <> -
-

Image Treatment

-
- {/* Preview */} -
- -
- -
-
- - {/* Background Type */} -
- - -
- - {/* Background Color - only show for color type */} - {backgroundType === "color" && ( -
- -
- setBackgroundColor(e.target.value)} - className="w-16 h-10 p-1" - /> - setBackgroundColor(e.target.value)} - placeholder="#000000" - className="flex-1" - /> -
-
- )} -
-
- - - - )} - - {/* Transform */} -
-

Transform

-
-
-
- - -
-
- - -
-
-
- - -
-
-
- - - - {/* Effects */} -
-

Effects

-
-
- - -
-
- - -
-
-
- - - - {/* Timing */} -
-

Timing

-
-
- - -
-
- - -
-
-
-
- - ); -} +"use client"; + +import { Input } from "../ui/input"; +import { Label } from "../ui/label"; +import { Slider } from "../ui/slider"; +import { ScrollArea } from "../ui/scroll-area"; +import { Separator } from "../ui/separator"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "../ui/select"; +import { useTimelineStore } from "@/stores/timeline-store"; +import { useMediaStore } from "@/stores/media-store"; +import { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment"; +import { useState } from "react"; +import { SpeedControl } from "./speed-control"; + +export function PropertiesPanel() { + const { tracks } = useTimelineStore(); + const { mediaItems } = useMediaStore(); + const [backgroundType, setBackgroundType] = useState< + "blur" | "mirror" | "color" + >("blur"); + const [backgroundColor, setBackgroundColor] = useState("#000000"); + + // Get the first video clip for preview (simplified) + const firstVideoClip = tracks + .flatMap((track) => track.clips) + .find((clip) => { + const mediaItem = mediaItems.find((item) => item.id === clip.mediaId); + return mediaItem?.type === "video"; + }); + + const firstVideoItem = firstVideoClip + ? mediaItems.find((item) => item.id === firstVideoClip.mediaId) + : null; + + // Get the first image clip for preview (simplified) + const firstImageClip = tracks + .flatMap((track) => track.clips) + .find((clip) => { + const mediaItem = mediaItems.find((item) => item.id === clip.mediaId); + return mediaItem?.type === "image"; + }); + + const firstImageItem = firstImageClip + ? mediaItems.find((item) => item.id === firstImageClip.mediaId) + : null; + + return ( + +
+ {/* Image Treatment - only show if an image is selected */} + {firstImageItem && ( + <> +
+

Image Treatment

+
+ {/* Preview */} +
+ +
+ +
+
+ + {/* Background Type */} +
+ + +
+ + {/* Background Color - only show for color type */} + {backgroundType === "color" && ( +
+ +
+ setBackgroundColor(e.target.value)} + className="w-16 h-10 p-1" + /> + setBackgroundColor(e.target.value)} + placeholder="#000000" + className="flex-1" + /> +
+
+ )} +
+
+ + + + )} + + {/* Video Controls - only show if a video is selected */} + {firstVideoItem && ( + <> + + + + )} + + {/* Transform */} +
+

Transform

+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + + + {/* Effects */} +
+

Effects

+
+
+ + +
+
+ + +
+
+
+ + + + {/* Timing */} +
+

Timing

+
+
+ + +
+
+ + +
+
+
+
+ + ); +} 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 0000000..39281a9 --- /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 ( +
+

Playback Speed

+
+
+ {SPEED_PRESETS.map((preset) => ( + + ))} +
+
+ + setSpeed(value[0])} + className="mt-2" + /> +
+
+
+ ); +} \ No newline at end of file diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx index 1d2df66..7c13bff 100644 --- a/apps/web/src/components/editor/timeline.tsx +++ b/apps/web/src/components/editor/timeline.tsx @@ -28,6 +28,13 @@ import { usePlaybackStore } from "@/stores/playback-store"; import { processMediaFiles } from "@/lib/media-processing"; import { toast } from "sonner"; import { useState, useRef, useEffect } from "react"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "../ui/select"; export function Timeline() { // Timeline shows all tracks (video, audio, effects) and their clips. @@ -36,7 +43,7 @@ export function Timeline() { const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration } = useTimelineStore(); const { mediaItems, addMediaItem } = useMediaStore(); - const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle } = usePlaybackStore(); + const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle, setSpeed, speed } = usePlaybackStore(); const [isDragOver, setIsDragOver] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const [zoomLevel, setZoomLevel] = useState(1); @@ -331,6 +338,29 @@ export function Timeline() { Delete clip (Delete) + +
+ + {/* Speed Control */} + + + + + Playback Speed +
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx index 29f29cf..11b2704 100644 --- a/apps/web/src/components/ui/command.tsx +++ b/apps/web/src/components/ui/command.tsx @@ -1,7 +1,7 @@ "use client"; import * as React from "react"; -import { type DialogProps } from "radix-ui"; +import { DialogProps } from "@radix-ui/react-dialog"; import { Command as CommandPrimitive } from "cmdk"; import { Search } from "lucide-react"; diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx index 0c4f849..8731e1a 100644 --- a/apps/web/src/components/ui/video-player.tsx +++ b/apps/web/src/components/ui/video-player.tsx @@ -25,7 +25,7 @@ export function VideoPlayer({ clipDuration }: VideoPlayerProps) { const videoRef = useRef(null); - const { isPlaying, currentTime, volume, play, pause, setVolume } = usePlaybackStore(); + const { isPlaying, currentTime, volume, speed, play, pause, setVolume } = usePlaybackStore(); // Calculate if we're within this clip's timeline range const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd); @@ -59,18 +59,26 @@ export function VideoPlayer({ timelineTime - clipStartTime + trimStart )); - // Only sync if there's a significant difference - if (Math.abs(video.currentTime - targetVideoTime) > 0.2) { + // Only sync if there's a significant difference to avoid micro-adjustments + if (Math.abs(video.currentTime - targetVideoTime) > 0.5) { video.currentTime = targetVideoTime; } }; + const handleSpeedEvent = (e: CustomEvent) => { + if (!isInClipRange) return; + // Set playbackRate directly without any additional checks + video.playbackRate = e.detail.speed; + }; + window.addEventListener("playback-seek", handleSeekEvent as EventListener); window.addEventListener("playback-update", handleUpdateEvent as EventListener); + window.addEventListener("playback-speed", handleSpeedEvent as EventListener); return () => { window.removeEventListener("playback-seek", handleSeekEvent as EventListener); window.removeEventListener("playback-update", handleUpdateEvent as EventListener); + window.removeEventListener("playback-speed", handleSpeedEvent as EventListener); }; }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]); @@ -93,6 +101,13 @@ export function VideoPlayer({ video.volume = volume; }, [volume]); + // Sync speed immediately when it changes + useEffect(() => { + const video = videoRef.current; + if (!video) return; + video.playbackRate = speed; + }, [speed]); + return (