From da35e889f2d4d14395f0d4e2e857bd66f7e1a98a Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Sat, 24 Sep 2022 22:29:07 -0400
Subject: [PATCH] Add option to disable segment names beside timestamp in video
 player

---
 public/_locales/en/messages.json                |  3 +++
 public/options/options.css                      |  4 ++--
 .../options/CategorySkipOptionsComponent.tsx    | 17 ++++++++++++++---
 .../options/ToggleOptionComponent.tsx           |  2 +-
 src/config.ts                                   |  2 ++
 src/js-components/previewBar.ts                 |  3 ++-
 6 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 70d93913..52c07049 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -35,6 +35,9 @@
         "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"
     },
+    "showSegmentNameInChapterBar": {
+        "message": "Show Current Segment Beside Video Time"
+    },
     "upvoteButtonInfo": {
         "message": "Upvote this submission"
     },
diff --git a/public/options/options.css b/public/options/options.css
index 588d6127..00035cd0 100644
--- a/public/options/options.css
+++ b/public/options/options.css
@@ -317,12 +317,12 @@ input[type='number'] {
     color: grey;
 }
 
-.disabled .slider {
+.sb-toggle-option.disabled .slider {
     cursor: default;
 }
 
 /* To hide everything except upsell button */
-.disabled td:not(.skipOption), .disabled td.skipOption > :not(.upsellButton) {
+.disabled td:not(.skipOption, .categoryExtraOptions), .disabled td.skipOption > :not(.upsellButton) {
     opacity: 0.3;
 }
 
diff --git a/src/components/options/CategorySkipOptionsComponent.tsx b/src/components/options/CategorySkipOptionsComponent.tsx
index e1180e4b..a7aa55d9 100644
--- a/src/components/options/CategorySkipOptionsComponent.tsx
+++ b/src/components/options/CategorySkipOptionsComponent.tsx
@@ -5,7 +5,7 @@ import * as CompileConfig from "../../../config.json";
 import { Category, CategorySkipOption } from "../../types";
 
 import { getCategorySuffix } from "../../utils/categoryUtils";
-import ToggleOptionComponent, { ToggleOptionProps } from "./ToggleOptionComponent";
+import ToggleOptionComponent from "./ToggleOptionComponent";
 import { fetchingChaptersAllowed } from "../../utils/licenseKey";
 import LockSvg from "../../svg-icons/lock_svg";
 
@@ -21,6 +21,12 @@ export interface CategorySkipOptionsState {
     hideChapter: boolean;
 }
 
+export interface ToggleOption {
+    configKey: string;
+    label: string;
+    dontDisable?: boolean;
+}
+
 class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsProps, CategorySkipOptionsState> {
     setBarColorTimeout: NodeJS.Timeout;
 
@@ -237,7 +243,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                         <ToggleOptionComponent 
                             configKey={option.configKey} 
                             label={option.label}
-                            disabled={disabled}
+                            disabled={!option.dontDisable && disabled}
                             style={{width: "inherit"}}
                         />
                     </td>
@@ -248,12 +254,17 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
         return result;
     }
 
-    getExtraOptions(category: string): ToggleOptionProps[] {
+    getExtraOptions(category: string): ToggleOption[] {
         switch (category) {
             case "chapter":
                 return [{
                     configKey: "renderSegmentsAsChapters",
                     label: chrome.i18n.getMessage("renderAsChapters"),
+                    dontDisable: true
+                }, {
+                    configKey: "showSegmentNameInChapterBar",
+                    label: chrome.i18n.getMessage("showSegmentNameInChapterBar"),
+                    dontDisable: true
                 }];
             case "music_offtopic":
                 return [{
diff --git a/src/components/options/ToggleOptionComponent.tsx b/src/components/options/ToggleOptionComponent.tsx
index 03b997aa..fa7434d6 100644
--- a/src/components/options/ToggleOptionComponent.tsx
+++ b/src/components/options/ToggleOptionComponent.tsx
@@ -26,7 +26,7 @@ class ToggleOptionComponent extends React.Component<ToggleOptionProps, ToggleOpt
 
     render(): React.ReactElement {
         return (
-            <div>
+            <div className={`sb-toggle-option ${this.props.disabled ? "disabled" : ""}`}>
                 <div className="switch-container" style={this.props.style}>
                     <label className="switch">
                         <input id={this.props.configKey} 
diff --git a/src/config.ts b/src/config.ts
index a0761cbf..bed908a1 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -66,6 +66,7 @@ interface SBConfig {
     darkMode: boolean,
     showCategoryGuidelines: boolean,
     showCategoryWithoutPermission: boolean,
+    showSegmentNameInChapterBar: boolean,
 
     // Used to cache calculated text color info
     categoryPillColors: {
@@ -197,6 +198,7 @@ const Config: SBObject = {
         darkMode: true,
         showCategoryGuidelines: true,
         showCategoryWithoutPermission: false,
+        showSegmentNameInChapterBar: true,
 
         categoryPillColors: {},
 
diff --git a/src/js-components/previewBar.ts b/src/js-components/previewBar.ts
index 922b6b2a..05428e54 100644
--- a/src/js-components/previewBar.ts
+++ b/src/js-components/previewBar.ts
@@ -717,7 +717,8 @@ class PreviewBar {
     }
 
     updateChapterText(segments: SponsorTime[], submittingSegments: SponsorTime[], currentTime: number): void {
-        if ((!segments || segments.length <= 0) && submittingSegments?.length <= 0) {
+        if (!Config.config.showSegmentNameInChapterBar 
+                || ((!segments || segments.length <= 0) && submittingSegments?.length <= 0)) {
             const chaptersContainer = this.getChaptersContainer();
             const chapterButton = this.getChapterButton(chaptersContainer);
             if (chapterButton.classList.contains("ytp-chapter-container-disabled")) {