feat: proper video playback including images and videos on the timeline

4 files changed, 188 insertions, 47 deletions

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 74bf5f98..132d6c06 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -36,7 +36,7 @@ export function PreviewPanel() {
   const aspectRatio = activeMediaItem?.aspectRatio || 16 / 9;

 

   const renderContent = () => {

-    if (!activeMediaItem || !activeClip) {

+    if (!activeClip) {

       return (

         <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50">

           {tracks.length === 0 ? "Drop media to start editing" : "No clip at current time"}

@@ -44,8 +44,26 @@ export function PreviewPanel() {
       );

     }

 

-    // Calculate the relative time within the clip (accounting for trim)

-    const relativeTime = Math.max(0, currentTime - activeClip.startTime + activeClip.trimStart);

+    // Handle test clips without media items

+    if (!activeMediaItem && activeClip.mediaId === "test") {

+      return (

+        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500/20 to-purple-500/20">

+          <div className="text-center">

+            <div className="text-6xl mb-4">🎬</div>

+            <p className="text-muted-foreground">{activeClip.name}</p>

+            <p className="text-xs text-muted-foreground/70 mt-2">Test clip for playback</p>

+          </div>

+        </div>

+      );

+    }

+

+    if (!activeMediaItem) {

+      return (

+        <div className="absolute inset-0 flex items-center justify-center text-muted-foreground/50">

+          Media not found

+        </div>

+      );

+    }

 

     if (activeMediaItem.type === "video") {

       return (

@@ -53,7 +71,10 @@ export function PreviewPanel() {
           src={activeMediaItem.url}

           poster={activeMediaItem.thumbnailUrl}

           className="w-full h-full"

-          startTime={relativeTime}

+          clipStartTime={activeClip.startTime}

+          trimStart={activeClip.trimStart}

+          trimEnd={activeClip.trimEnd}

+          clipDuration={activeClip.duration}

           key={`${activeClip.id}-${activeClip.trimStart}-${activeClip.trimEnd}`}

         />

       );

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index d1bb3aa8..1d2df66d 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -13,6 +13,8 @@ import {
   MoreVertical,

   Volume2,

   VolumeX,

+  Pause,

+  Play,

 } from "lucide-react";

 import {

   Tooltip,

@@ -31,10 +33,10 @@ export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their clips.

   // You can drag media here to add it to your project.

   // Clips can be trimmed, deleted, and moved.

-  const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack } =

+  const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration } =

     useTimelineStore();

   const { mediaItems, addMediaItem } = useMediaStore();

-  const { currentTime, duration, seek } = usePlaybackStore();

+  const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle } = usePlaybackStore();

   const [isDragOver, setIsDragOver] = useState(false);

   const [isProcessing, setIsProcessing] = useState(false);

   const [zoomLevel, setZoomLevel] = useState(1);

@@ -50,6 +52,12 @@ export function Timeline() {
     y: number;

   } | null>(null);

 

+  // Update timeline duration when tracks change

+  useEffect(() => {

+    const totalDuration = getTotalDuration();

+    setDuration(Math.max(totalDuration, 10)); // Minimum 10 seconds for empty timeline

+  }, [tracks, setDuration, getTotalDuration]);

+

   // Close context menu on click elsewhere

   useEffect(() => {

     const handleClick = () => setContextMenu(null);

@@ -208,6 +216,59 @@ export function Timeline() {
       {/* Toolbar */}

       <div className="border-b flex items-center px-2 py-1 gap-1">

         <TooltipProvider delayDuration={500}>

+          {/* Play/Pause Button */}

+          <Tooltip>

+            <TooltipTrigger asChild>

+              <Button

+                variant="ghost"

+                size="icon"

+                onClick={toggle}

+                className="mr-2"

+              >

+                {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}

+              </Button>

+            </TooltipTrigger>

+            <TooltipContent>{isPlaying ? "Pause (Space)" : "Play (Space)"}</TooltipContent>

+          </Tooltip>

+

+          <div className="w-px h-6 bg-border mx-1" />

+

+          {/* Time Display */}

+          <div className="text-xs text-muted-foreground font-mono px-2">

+            {Math.floor(currentTime * 10) / 10}s / {Math.floor(duration * 10) / 10}s

+          </div>

+

+          <div className="w-px h-6 bg-border mx-1" />

+

+          {/* Test Clip Button - for debugging */}

+          {tracks.length === 0 && (

+            <Tooltip>

+              <TooltipTrigger asChild>

+                <Button

+                  variant="outline"

+                  size="sm"

+                  onClick={() => {

+                    const trackId = addTrack("video");

+                    addClipToTrack(trackId, {

+                      mediaId: "test",

+                      name: "Test Clip",

+                      duration: 5,

+                      startTime: 0,

+                      trimStart: 0,

+                      trimEnd: 0,

+                    });

+                  }}

+                  className="text-xs"

+                >

+                  Add Test Clip

+                </Button>

+              </TooltipTrigger>

+              <TooltipContent>Add a test clip to try playback</TooltipContent>

+            </Tooltip>

+          )}

+

+          <div className="w-px h-6 bg-border mx-1" />

+

           <Tooltip>

             <TooltipTrigger asChild>

               <Button variant="ghost" size="icon">

diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index d31f7113..0c4f8498 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -9,81 +9,97 @@ interface VideoPlayerProps {
     src: string;
     poster?: string;
     className?: string;
-    startTime?: number;
+    clipStartTime: number;
+    trimStart: number;
+    trimEnd: number;
+    clipDuration: number;
 }
 
-export function VideoPlayer({ src, poster, className = "", startTime = 0 }: VideoPlayerProps) {
+export function VideoPlayer({
+    src,
+    poster,
+    className = "",
+    clipStartTime,
+    trimStart,
+    trimEnd,
+    clipDuration
+}: VideoPlayerProps) {
     const videoRef = useRef<HTMLVideoElement>(null);
-    const { isPlaying, currentTime, volume, play, pause, setVolume, setDuration, setCurrentTime } = usePlaybackStore();
+    const { isPlaying, currentTime, volume, play, pause, setVolume } = usePlaybackStore();
+
+    // Calculate if we're within this clip's timeline range
+    const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
+    const isInClipRange = currentTime >= clipStartTime && currentTime < clipEndTime;
+
+    // Calculate the video's internal time based on timeline position
+    const videoTime = Math.max(trimStart, Math.min(
+        clipDuration - trimEnd,
+        currentTime - clipStartTime + trimStart
+    ));
 
     useEffect(() => {
         const video = videoRef.current;
         if (!video) return;
 
-        const handleTimeUpdate = () => {
-            setCurrentTime(video.currentTime);
+        const handleSeekEvent = (e: CustomEvent) => {
+            if (!isInClipRange) return;
+            const timelineTime = e.detail.time;
+            const newVideoTime = Math.max(trimStart, Math.min(
+                clipDuration - trimEnd,
+                timelineTime - clipStartTime + trimStart
+            ));
+            video.currentTime = newVideoTime;
         };
 
-        const handleLoadedMetadata = () => {
-            setDuration(video.duration);
-            if (startTime > 0) {
-                video.currentTime = startTime;
-            }
-        };
+        const handleUpdateEvent = (e: CustomEvent) => {
+            if (!isInClipRange) return;
+            const timelineTime = e.detail.time;
+            const targetVideoTime = Math.max(trimStart, Math.min(
+                clipDuration - trimEnd,
+                timelineTime - clipStartTime + trimStart
+            ));
 
-        const handleSeekEvent = (e: CustomEvent) => {
-            video.currentTime = e.detail.time;
+            // Only sync if there's a significant difference
+            if (Math.abs(video.currentTime - targetVideoTime) > 0.2) {
+                video.currentTime = targetVideoTime;
+            }
         };
 
-        video.addEventListener("timeupdate", handleTimeUpdate);
-        video.addEventListener("loadedmetadata", handleLoadedMetadata);
         window.addEventListener("playback-seek", handleSeekEvent as EventListener);
+        window.addEventListener("playback-update", handleUpdateEvent as EventListener);
 
         return () => {
-            video.removeEventListener("timeupdate", handleTimeUpdate);
-            video.removeEventListener("loadedmetadata", handleLoadedMetadata);
             window.removeEventListener("playback-seek", handleSeekEvent as EventListener);
+            window.removeEventListener("playback-update", handleUpdateEvent as EventListener);
         };
-    }, [setCurrentTime, setDuration]);
+    }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
 
+    // Sync video playback state - only play if in clip range
     useEffect(() => {
         const video = videoRef.current;
         if (!video) return;
 
-        if (isPlaying) {
+        if (isPlaying && isInClipRange) {
             video.play().catch(console.error);
         } else {
             video.pause();
         }
-    }, [isPlaying]);
+    }, [isPlaying, isInClipRange]);
 
+    // Sync volume
     useEffect(() => {
         const video = videoRef.current;
         if (!video) return;
         video.volume = volume;
     }, [volume]);
 
-    const handleSeek = (e: React.MouseEvent<HTMLVideoElement>) => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        const rect = video.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const percentage = x / rect.width;
-        const newTime = percentage * video.duration;
-
-        video.currentTime = newTime;
-        setCurrentTime(newTime);
-    };
-
     return (
         <div className={`relative group ${className}`}>
             <video
                 ref={videoRef}
                 src={src}
                 poster={poster}
-                className="w-full h-full object-cover cursor-pointer"
-                onClick={handleSeek}
+                className="w-full h-full object-cover"
                 playsInline
                 preload="metadata"
             />
diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts
index 7db1fb93..3c0bfdec 100644
--- a/apps/web/src/stores/playback-store.ts
+++ b/apps/web/src/stores/playback-store.ts
@@ -6,24 +6,67 @@ interface PlaybackStore extends PlaybackState, PlaybackControls {
   setCurrentTime: (time: number) => void;
 }
 
+let playbackTimer: NodeJS.Timeout | null = null;
+
+const startTimer = (store: any) => {
+  if (playbackTimer) clearInterval(playbackTimer);
+  
+  playbackTimer = setInterval(() => {
+    const state = store();
+    if (state.isPlaying && state.currentTime < state.duration) {
+      const newTime = state.currentTime + 0.1;
+      if (newTime >= state.duration) {
+        state.pause();
+      } else {
+        state.setCurrentTime(newTime);
+        // Notify video elements to sync
+        window.dispatchEvent(new CustomEvent('playback-update', { detail: { time: newTime } }));
+      }
+    }
+  }, 100);
+};
+
+const stopTimer = () => {
+  if (playbackTimer) {
+    clearInterval(playbackTimer);
+    playbackTimer = null;
+  }
+};
+
 export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
   isPlaying: false,
   currentTime: 0,
   duration: 0,
   volume: 1,
 
-  play: () => set({ isPlaying: true }),
-  pause: () => set({ isPlaying: false }),
-  toggle: () => set((state) => ({ isPlaying: !state.isPlaying })),
+  play: () => {
+    set({ isPlaying: true });
+    startTimer(get);
+  },
+
+  pause: () => {
+    set({ isPlaying: false });
+    stopTimer();
+  },
+
+  toggle: () => {
+    const { isPlaying } = get();
+    if (isPlaying) {
+      get().pause();
+    } else {
+      get().play();
+    }
+  },
+
   seek: (time: number) => {
     const { duration } = get();
     const clampedTime = Math.max(0, Math.min(duration, time));
     set({ currentTime: clampedTime });
     
-    // Notify video element to seek
-    const event = new CustomEvent('playback-seek', { detail: { time: clampedTime } });
-    window.dispatchEvent(event);
+    // Notify video elements to seek
+    window.dispatchEvent(new CustomEvent('playback-seek', { detail: { time: clampedTime } }));
   },
+  
   setVolume: (volume: number) => set({ volume: Math.max(0, Math.min(1, volume)) }),
   setDuration: (duration: number) => set({ duration }),
   setCurrentTime: (time: number) => set({ currentTime: time }),