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");
}
};