diff --git a/frontend-tools/video-editor/client/src/components/EditingTools.tsx b/frontend-tools/video-editor/client/src/components/EditingTools.tsx index 889df39b..1b8c0eb2 100644 --- a/frontend-tools/video-editor/client/src/components/EditingTools.tsx +++ b/frontend-tools/video-editor/client/src/components/EditingTools.tsx @@ -49,7 +49,7 @@ const EditingTools = ({ {/* Play Preview button */} - + */} {/* Standard Play button (only shown when not in preview mode or segments playback) */} {!isPreviewMode && !isPlayingSegments && ( @@ -142,7 +142,7 @@ const EditingTools = ({ - Segments Playback + Preview Mode )} diff --git a/frontend-tools/video-editor/client/src/components/TimelineControls.tsx b/frontend-tools/video-editor/client/src/components/TimelineControls.tsx index 9403292b..d6666fac 100644 --- a/frontend-tools/video-editor/client/src/components/TimelineControls.tsx +++ b/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) { - logger.debug("Segment boundary check not active:", { - hasVideo: !!video, - hasActiveSegment: !!activeSegment, - isPlaying: isPlayingSegment - }); + if (!video || !activeSegment || !isPlayingSegment || isPreviewMode) { + // Log why we're skipping + if (!video) logger.debug("Skipping segment boundary check - no video element"); + else if (!activeSegment) logger.debug("Skipping segment boundary check - no active segment"); + 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) - if (isPreviewMode) { - logger.debug("Skipping segment boundary check in preview mode"); + // Skip boundary checking when playing all segments + if (isPlayingSegments) { + logger.debug("Skipping segment boundary check during segments playback"); return; } diff --git a/frontend-tools/video-editor/client/src/hooks/useVideoTrimmer.tsx b/frontend-tools/video-editor/client/src/hooks/useVideoTrimmer.tsx index fe93d0fa..35aa8789 100644 --- a/frontend-tools/video-editor/client/src/hooks/useVideoTrimmer.tsx +++ b/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"); } };