Fix rendering chapters in specific overlapping cases

src/js-components/previewBar.ts

@@ -324,7 +324,8 @@ class PreviewBar {
             const latestChapter = result[result.length - 1];
             if (latestChapter && latestChapter.segment[1] > segment.segment[0]) {
                 const segmentDuration = segment.segment[1] - segment.segment[0];
-                if (segmentDuration < latestChapter.originalDuration) {
+                if (segment.segment[0] < latestChapter.segment[0] 
+                        || segmentDuration < latestChapter.originalDuration) {
                     // Remove latest if it starts too late
                     let latestValidChapter = latestChapter;
                     const chaptersToAddBack: ChapterGroup[] = []
@@ -334,6 +335,7 @@ class PreviewBar {
                             if (invalidChapter.segment[0] === segment.segment[0]) {
                                 invalidChapter.segment[0] = segment.segment[1];
                             }
+
                             chaptersToAddBack.push(invalidChapter);
                         }
                         latestValidChapter = result[result.length - 1];
@@ -351,10 +353,19 @@ class PreviewBar {
                         });
                     }
 
+                    chaptersToAddBack.reverse();
+                    let lastChapterChecked: number[] = segment.segment;
+                    for (const chapter of chaptersToAddBack) {
+                        if (chapter.segment[0] < lastChapterChecked[1]) {
+                            chapter.segment[0] = lastChapterChecked[1];
+                        }
+
+                        lastChapterChecked = chapter.segment;
+                    }
                     result.push(...chaptersToAddBack);
                     if (latestValidChapter) latestValidChapter.segment[1] = segment.segment[0];
                 } else {
-                    // Start at end of old one if bigger
+                    // Start at end of old one otherwise
                     result.push({
                         segment: [latestChapter.segment[1], segment.segment[1]],
                         originalDuration: segmentDuration

test/previewBar.test.ts

@@ -322,7 +322,7 @@ describe("createChapterRenderGroups", () => {
                 "videoDuration": 315.061,
                 "userID": "e0238059ae4e711567af5b08a3afecfe45601c995b0ea2f37ca43f15fca4e298",
                 "description": ""
-        }] as unknown as PreviewBarSegment[]);
+            }] as unknown as PreviewBarSegment[]);
 
         expect(groups).toStrictEqual([
             {
@@ -572,4 +572,94 @@ describe("createChapterRenderGroups", () => {
             }
         ]);
     })
+
+    it("Multiple overlapping", () => {
+        previewBar.videoDuration = 3615.161;
+        const groups = previewBar.createChapterRenderGroups([{
+                "segment": [
+                    160,
+                    2797.323
+                ],
+                "category": "chooseACategory",
+                "unsubmitted": true,
+                "showLarger": false,
+            },{
+                "segment": [
+                    169,
+                    3432.255
+                ],
+                "category": "chooseACategory",
+                "unsubmitted": true,
+                "showLarger": false,
+            },{
+                "segment": [
+                    169,
+                    3412.413
+                ],
+                "category": "chooseACategory",
+                "unsubmitted": true,
+                "showLarger": false,
+            },{
+                "segment": [
+                    1594.92,
+                    1674.286
+                ],
+                "category": "sponsor",
+                "unsubmitted": false,
+                "showLarger": false,
+            }
+        ] as unknown as PreviewBarSegment[]);
+
+        expect(groups).toStrictEqual([
+            {
+                "segment": [
+                    0,
+                    160
+                ],
+                "originalDuration": 0
+            },
+            {
+                "segment": [
+                    160,
+                    169
+                ],
+                "originalDuration": 2637.323
+            },
+            {
+                "segment": [
+                    169,
+                    1594.92
+                ],
+                "originalDuration": 3243.413
+            },
+            {
+                "segment": [
+                    1594.92,
+                    1674.286
+                ],
+                "originalDuration": 79.36599999999999
+            },
+            {
+                "segment": [
+                    1674.286,
+                    3412.413
+                ],
+                "originalDuration": 3243.413
+            },
+            {
+                "segment": [
+                    3412.413,
+                    3432.255
+                ],
+                "originalDuration": 3263.255
+            },
+            {
+                "segment": [
+                    3432.255,
+                    3615.161
+                ],
+                "originalDuration": 0
+            }
+        ]);
+    });
 })