fix Format segments data for API request - use ref to get latest segments and sort by start time

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

@@ -190,12 +190,14 @@ const TimelineControls = ({
         try {
             setIsAutoSaving(true);
 
-            // Format segments data for API request - use ref to get latest segments
+            // Format segments data for API request - use ref to get latest segments and sort by start time
-            const chapters = clipSegmentsRef.current.map((chapter) => ({
+            const chapters = clipSegmentsRef.current
-                startTime: formatDetailedTime(chapter.startTime),
+                .sort((a, b) => a.startTime - b.startTime) // Sort by start time chronologically
-                endTime: formatDetailedTime(chapter.endTime),
+                .map((chapter) => ({
-                chapterTitle: chapter.chapterTitle,
+                    startTime: formatDetailedTime(chapter.startTime),
-            }));
+                    endTime: formatDetailedTime(chapter.endTime),
+                    chapterTitle: chapter.chapterTitle,
+                }));
 
             logger.debug('chapters', chapters);
 
@@ -496,9 +498,10 @@ const TimelineControls = ({
         setSaveType('chapters');
 
         try {
-            // Format chapters data for API request
+            // Format chapters data for API request - sort by start time first
             const chapters = clipSegments
                 .filter((segment) => segment.chapterTitle && segment.chapterTitle.trim())
+                .sort((a, b) => a.startTime - b.startTime) // Sort by start time chronologically
                 .map((segment) => ({
                     chapterTitle: segment.chapterTitle || `Chapter ${segment.id}`,
                     from: formatDetailedTime(segment.startTime),

frontend-tools/chapters-editor/client/src/hooks/useVideoChapters.tsx

@@ -24,6 +24,18 @@ const useVideoChapters = () => {
         return `Chapter ${chapterIndex + 1}`;
     };
 
+    // Helper function to renumber all segments in chronological order
+    const renumberAllSegments = (segments: Segment[]): Segment[] => {
+        // Sort segments by start time
+        const sortedSegments = [...segments].sort((a, b) => a.startTime - b.startTime);
+        
+        // Renumber each segment based on its chronological position
+        return sortedSegments.map((segment, index) => ({
+            ...segment,
+            chapterTitle: `Chapter ${index + 1}`
+        }));
+    };
+
     // Helper function to parse time string (HH:MM:SS.mmm) to seconds
     const parseTimeToSeconds = (timeString: string): number => {
         const parts = timeString.split(':');
@@ -632,19 +644,16 @@ const useVideoChapters = () => {
 
                 newSegments.splice(segmentIndex, 1);
 
-                // Remove the original segment first to get accurate positioning for new segments
-                const segmentsWithoutOriginal = newSegments;
-
                 const firstHalf: Segment = {
                     id: Date.now(),
-                    chapterTitle: generateChapterName(segmentToSplit.startTime, segmentsWithoutOriginal),
+                    chapterTitle: '', // Temporary title, will be set by renumberAllSegments
                     startTime: segmentToSplit.startTime,
                     endTime: timeToSplit,
                 };
 
                 const secondHalf: Segment = {
                     id: Date.now() + 1,
-                    chapterTitle: generateChapterName(timeToSplit, [...segmentsWithoutOriginal, firstHalf]),
+                    chapterTitle: '', // Temporary title, will be set by renumberAllSegments
                     startTime: timeToSplit,
                     endTime: segmentToSplit.endTime,
                 };
@@ -652,11 +661,11 @@ const useVideoChapters = () => {
                 // Add the new segments
                 newSegments.push(firstHalf, secondHalf);
 
-                // Sort segments by start time
+                // Renumber all segments to ensure proper chronological naming
-                newSegments.sort((a, b) => a.startTime - b.startTime);
+                const renumberedSegments = renumberAllSegments(newSegments);
 
                 // Update state
-                setClipSegments(newSegments);
+                setClipSegments(renumberedSegments);
                 saveState('split_segment');
             }
         };
@@ -687,8 +696,9 @@ const useVideoChapters = () => {
                         setSplitPoints([]);
                         setClipSegments([defaultSegment]);
                     } else {
-                        // Just update the segments normally
+                        // Renumber remaining segments to ensure proper chronological naming
-                        setClipSegments(newSegments);
+                        const renumberedSegments = renumberAllSegments(newSegments);
+                        setClipSegments(renumberedSegments);
                     }
                     saveState('delete_segment');
                 }
@@ -907,12 +917,19 @@ const useVideoChapters = () => {
                 return;
             }
 
-            // Convert chapters to backend expected format
+            // Convert chapters to backend expected format and sort by start time
-            const backendChapters = chapters.map((chapter) => ({
+            const backendChapters = chapters
-                startTime: chapter.from,
+                .map((chapter) => ({
-                endTime: chapter.to,
+                    startTime: chapter.from,
-                chapterTitle: chapter.chapterTitle,
+                    endTime: chapter.to,
-            }));
+                    chapterTitle: chapter.chapterTitle,
+                }))
+                .sort((a, b) => {
+                    // Parse time strings to seconds for proper comparison
+                    const aStartSeconds = parseTimeToSeconds(a.startTime);
+                    const bStartSeconds = parseTimeToSeconds(b.startTime);
+                    return aStartSeconds - bStartSeconds;
+                });
 
             // Create the API request body
             const requestData = {

frontend-tools/video-js/src/components/video-player/VideoJSPlayer.css

@@ -1,6 +1,9 @@
 button {
     cursor: pointer;
 }
+.playlist-items a {
+    text-decoration: none !important;
+}
 
 .video-js,
 .video-js[tabindex],