Add option to disable segment names beside timestamp in video player

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"
     },

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

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 [{

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} 

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: {},
 

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")) {