[dyad] Constrain video preview to trimmed selection - wrote 1 file(s)

src/components/video-editor.tsx

@@ -31,17 +31,26 @@ export function VideoEditor() {
     if (!video) return;
 
     const handleTimeUpdate = () => {
-      if (video.currentTime > trimValues[1]) {
+      // When the video plays past the end of the trim selection, loop back to the start
-        video.pause();
+      if (video.currentTime >= trimValues[1]) {
+        video.currentTime = trimValues[0];
+      }
+    };
+
+    const handlePlay = () => {
+      // If the video is outside the trim range when play is clicked, jump to the start of the trim
+      if (video.currentTime < trimValues[0] || video.currentTime >= trimValues[1]) {
         video.currentTime = trimValues[0];
       }
     };
 
     video.addEventListener('timeupdate', handleTimeUpdate);
+    video.addEventListener('play', handlePlay);
 
     return () => {
       if (video) {
         video.removeEventListener('timeupdate', handleTimeUpdate);
+        video.removeEventListener('play', handlePlay);
       }
     };
   }, [trimValues]);