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