diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 5b38a99d..3cd6ec67 100644
--- a/public/_locales/en/messages.json
+++ b/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"
},
diff --git a/public/options/options.html b/public/options/options.html
index 4f2bd730..0888f23b 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -77,6 +77,18 @@
+
+
+
+
+
+
+
diff --git a/src/config.ts b/src/config.ts
index 20484952..446b448e 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -10,6 +10,7 @@ interface SBConfig {
/* Contains unsubmitted segments that the user has created. */
unsubmittedSegments: Record,
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,
diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts
index 56f692ce..bc6d46d1 100644
--- a/src/js-components/previewBar.ts
+++ b/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));