Add option to not render as chapters

public/_locales/en/messages.json

@@ -31,6 +31,10 @@
     "Chapters": {
         "message": "Chapters"
     },
+    "renderAsChapters": {
+        "message": "Render segments as chapters",
+        "description": "Refers to drawing segments on the YouTube seek bar as split up chapters, similar to the existing chapter system"
+    },
     "upvoteButtonInfo": {
         "message": "Upvote this submission"
     },

public/options/options.html

@@ -78,6 +78,18 @@
 					</div>
 				</div>
 
+				<div data-type="toggle" data-sync="renderAsChapters">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="renderAsChapters" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="renderAsChapters">
+							__MSG_renderAsChapters__
+						</label>
+					</div>
+				</div>
+	
 				<div data-type="toggle" data-sync="muteSegments">
 					<div class="switch-container">
 						<label class="switch">

src/config.ts

@@ -10,6 +10,7 @@ interface SBConfig {
     /* Contains unsubmitted segments that the user has created. */
     unsubmittedSegments: Record<string, SponsorTime[]>,
     defaultCategory: Category,
+    renderAsChapters: boolean,
     whitelistedChannels: string[],
     forceChannelCheck: boolean,
     minutesSaved: number,
@@ -127,6 +128,7 @@ const Config: SBObject = {
         lastIsVipUpdate: 0,
         unsubmittedSegments: {},
         defaultCategory: "chooseACategory" as Category,
+        renderAsChapters: true,
         whitelistedChannels: [],
         forceChannelCheck: false,
         minutesSaved: 0,

src/js-components/previewBar.ts

@@ -226,7 +226,10 @@ class PreviewBar {
 
         bar.style.position = "absolute";
         const duration = Math.min(segment[1], this.videoDuration) - segment[0];
-        if (duration > 0) bar.style.width = `calc(${this.timeToPercentage(segment[1] - segment[0])}${this.chapterFilter(barSegment) ? ' - 2px' : ''})`;
+        if (duration > 0) {
+            bar.style.width = `calc(${this.timeToPercentage(segment[1] - segment[0])}${
+                Config.config.renderAsChapters && this.chapterFilter(barSegment) ? ' - 2px' : ''})`;
+        }
         
         const time = segment[1] ? Math.min(this.videoDuration, segment[0]) : segment[0];
         bar.style.left = this.timeToPercentage(time);
@@ -240,6 +243,10 @@ class PreviewBar {
         if (!progressBar || !chapterBar) return;
 
         this.customChaptersBar?.remove();
+        if (!Config.config.renderAsChapters) {
+            chapterBar.style.removeProperty("display");
+            return;
+        }
 
         // Merge overlapping chapters
         const filteredSegments = segments?.filter((segment) => this.chapterFilter(segment));