fix: Skip if no video or no active segment

frontend-tools/video-editor/client/src/components/EditingTools.tsx

@@ -49,7 +49,7 @@ const EditingTools = ({
           <button 
             className="button segments-button"
             onClick={onPlaySegments}
-            data-tooltip={isPlayingSegments ? "Stop segments playback" : "Play all segments once"}
+            data-tooltip={isPlayingSegments ? "Stop segments playback" : "Play all segments continuously until the end"}
             style={{ fontSize: '0.875rem' }}
           >
             {isPlayingSegments ? (
@@ -59,8 +59,8 @@ const EditingTools = ({
                   <line x1="10" y1="15" x2="10" y2="9" />
                   <line x1="14" y1="15" x2="14" y2="9" />
                 </svg>
-                <span className="full-text">Stop Segments</span>
+                <span className="full-text">Stop Preview</span>
-                <span className="short-text">Stop</span>
+                <span className="short-text">Stop Preview</span>
               </>
             ) : (
               <>
@@ -68,14 +68,14 @@ const EditingTools = ({
                   <circle cx="12" cy="12" r="10" />
                   <polygon points="10 8 16 12 10 16 10 8" />
                 </svg>
-                <span className="full-text">Play Segments</span>
+                <span className="full-text">Play Preview</span>
-                <span className="short-text">Segments</span>
+                <span className="short-text">Play Preview</span>
               </>
             )}
           </button>
 
           {/* Play Preview button */}
-          <button 
+          {/* <button 
             className="button preview-button"
             onClick={onPreview}
             data-tooltip={isPreviewMode ? "Stop preview playback" : "Play only segments (skips gaps between segments)"}
@@ -101,7 +101,7 @@ const EditingTools = ({
                 <span className="short-text">Preview</span>
               </>
             )}
-          </button>
+          </button> */}
 
           {/* Standard Play button (only shown when not in preview mode or segments playback) */}
           {!isPreviewMode && !isPlayingSegments && (
@@ -142,7 +142,7 @@ const EditingTools = ({
                 <line x1="12" y1="16" x2="12" y2="12" />
                 <line x1="12" y1="8" x2="12" y2="8" />
               </svg>
-              Segments Playback
+              Preview Mode
             </div>
           )}
           

frontend-tools/video-editor/client/src/components/TimelineControls.tsx

@@ -545,19 +545,20 @@ const TimelineControls = ({
   
   // Effect to check active segment boundaries during playback
   useEffect(() => {
+    // Skip if no video or no active segment
     const video = videoRef.current;
-    if (!video || !activeSegment || !isPlayingSegment) {
+    if (!video || !activeSegment || !isPlayingSegment || isPreviewMode) {
-      logger.debug("Segment boundary check not active:", {
+      // Log why we're skipping
-        hasVideo: !!video,
+      if (!video) logger.debug("Skipping segment boundary check - no video element");
-        hasActiveSegment: !!activeSegment,
+      else if (!activeSegment) logger.debug("Skipping segment boundary check - no active segment");
-        isPlaying: isPlayingSegment
+      else if (!isPlayingSegment) logger.debug("Skipping segment boundary check - not in segment playback mode");
-      });
+      else if (isPreviewMode) logger.debug("Skipping segment boundary check in preview mode");
       return;
     }
     
-    // Skip segment boundary checking in preview mode (it has its own handler)
+    // Skip boundary checking when playing all segments
-    if (isPreviewMode) {
+    if (isPlayingSegments) {
-      logger.debug("Skipping segment boundary check in preview mode");
+      logger.debug("Skipping segment boundary check during segments playback");
       return;
     }
     

frontend-tools/video-editor/client/src/hooks/useVideoTrimmer.tsx

@@ -1004,9 +1004,16 @@ const useVideoTrimmer = () => {
           const nextSegment = orderedSegments[currentSegmentIndex + 1];
           video.currentTime = nextSegment.startTime;
           setCurrentSegmentIndex(currentSegmentIndex + 1);
-          video.play().catch(console.error);
+          
+          // If video is somehow paused, ensure it keeps playing
+          if (video.paused) {
+            logger.debug("Ensuring playback continues to next segment");
+            video.play().catch(err => {
+              console.error("Error continuing segment playback:", err);
+            });
+          }
         } else {
-          // End of all segments
+          // End of all segments - only pause when we reach the very end
           video.pause();
           setIsPlayingSegments(false);
           setCurrentSegmentIndex(0);
@@ -1042,8 +1049,25 @@ const useVideoTrimmer = () => {
       // Start segments playback
       setIsPlayingSegments(true);
       setCurrentSegmentIndex(0);
-      video.currentTime = clipSegments[0].startTime;
+      
-      video.play().catch(console.error);
+      // Exit preview mode if active
+      if (isPreviewMode) {
+        setIsPreviewMode(false);
+      }
+      
+      // Sort segments by start time
+      const orderedSegments = [...clipSegments].sort((a, b) => a.startTime - b.startTime);
+      
+      // Start from the first segment
+      video.currentTime = orderedSegments[0].startTime;
+      
+      // Start playback with proper error handling
+      video.play().catch(err => {
+        console.error("Error starting segments playback:", err);
+        setIsPlayingSegments(false);
+      });
+      
+      logger.debug("Starting playback of all segments continuously");
     }
   };