From d06b7411dc828b1afcc100b439ff483106c2ab74 Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Fri, 19 Aug 2022 01:26:45 -0400
Subject: [PATCH] Move options associated with specific categories into their
 div

---
 public/options/options.css                    |  8 +++
 public/options/options.html                   | 24 ---------
 .../CategoryChooserComponent.tsx              |  4 +-
 .../CategorySkipOptionsComponent.tsx          | 46 +++++++++++++++--
 .../{ => options}/KeybindComponent.tsx        |  6 +--
 .../{ => options}/KeybindDialogComponent.tsx  |  6 +--
 .../options/ToggleOptionComponent.tsx         | 51 +++++++++++++++++++
 src/options.ts                                |  2 +-
 src/render/CategoryChooser.tsx                |  2 +-
 9 files changed, 111 insertions(+), 38 deletions(-)
 rename src/components/{ => options}/CategoryChooserComponent.tsx (95%)
 rename src/components/{ => options}/CategorySkipOptionsComponent.tsx (82%)
 rename src/components/{ => options}/KeybindComponent.tsx (94%)
 rename src/components/{ => options}/KeybindDialogComponent.tsx (98%)
 create mode 100644 src/components/options/ToggleOptionComponent.tsx

diff --git a/public/options/options.css b/public/options/options.css
index a2a829a1..36f4d5d7 100644
--- a/public/options/options.css
+++ b/public/options/options.css
@@ -123,6 +123,14 @@ html, body {
     border-image: linear-gradient(to right, var(--border-color), #00000000 80%)  1;
 }
 
+.categoryExtraOptions {
+    padding-bottom: 20px;
+}
+
+#music_offtopic_autoSkipOnMusicVideos {
+    padding-bottom: 0;
+}
+
 .option-group > div:last-child, .option-group > #keybind-dialog {
     border-bottom: inherit;
 }
diff --git a/public/options/options.html b/public/options/options.html
index 45a84b75..150212ce 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -66,30 +66,6 @@
 
 				</div>
 
-				<div data-type="toggle" data-sync="autoSkipOnMusicVideos">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="autoSkipOnMusicVideos" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="autoSkipOnMusicVideos">
-							__MSG_autoSkipOnMusicVideos__
-						</label>
-					</div>
-				</div>
-
-				<div data-type="toggle" data-sync="renderSegmentsAsChapters">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="renderSegmentsAsChapters" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="renderSegmentsAsChapters">
-							__MSG_renderAsChapters__
-						</label>
-					</div>
-				</div>
-	
 				<div data-type="toggle" data-sync="muteSegments">
 					<div class="switch-container">
 						<label class="switch">
diff --git a/src/components/CategoryChooserComponent.tsx b/src/components/options/CategoryChooserComponent.tsx
similarity index 95%
rename from src/components/CategoryChooserComponent.tsx
rename to src/components/options/CategoryChooserComponent.tsx
index 763254b9..1da4f641 100644
--- a/src/components/CategoryChooserComponent.tsx
+++ b/src/components/options/CategoryChooserComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 
-import * as CompileConfig from "../../config.json";
-import { Category } from "../types";
+import * as CompileConfig from "../../../config.json";
+import { Category } from "../../types";
 import CategorySkipOptionsComponent from "./CategorySkipOptionsComponent";
 
 export interface CategoryChooserProps { 
diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/options/CategorySkipOptionsComponent.tsx
similarity index 82%
rename from src/components/CategorySkipOptionsComponent.tsx
rename to src/components/options/CategorySkipOptionsComponent.tsx
index 56191f3b..32083ccb 100644
--- a/src/components/CategorySkipOptionsComponent.tsx
+++ b/src/components/options/CategorySkipOptionsComponent.tsx
@@ -1,10 +1,11 @@
 import * as React from "react";
 
-import Config from "../config"
-import * as CompileConfig from "../../config.json";
-import { Category, CategorySkipOption } from "../types";
+import Config from "../../config"
+import * as CompileConfig from "../../../config.json";
+import { Category, CategorySkipOption } from "../../types";
 
-import { getCategorySuffix } from "../utils/categoryUtils";
+import { getCategorySuffix } from "../../utils/categoryUtils";
+import ToggleOptionComponent, { ToggleOptionProps } from "./ToggleOptionComponent";
 
 export interface CategorySkipOptionsProps { 
     category: Category;
@@ -105,6 +106,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                             </a>
                         </td>
                 </tr>
+                
+                {this.getExtraOptionComponents(this.props.category)}
 
             </>
         );
@@ -198,6 +201,41 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
             Config.config.barTypes = Config.config.barTypes;
         }, 50);
     }
+
+    getExtraOptionComponents(category: string): JSX.Element[] {
+        const result = [];
+        for (const option of this.getExtraOptions(category)) {
+            result.push(
+                <tr key={option.configKey}>
+                    <td id={`${category}_${option.configKey}`} className="categoryExtraOptions">
+                        <ToggleOptionComponent 
+                            configKey={option.configKey} 
+                            label={option.label} 
+                        />
+                    </td>
+                </tr>
+            )
+        }
+
+        return result;
+    }
+
+    getExtraOptions(category: string): ToggleOptionProps[] {
+        switch (category) {
+            case "chapter":
+                return [{
+                    configKey: "renderSegmentsAsChapters",
+                    label: chrome.i18n.getMessage("renderAsChapters"),
+                }];
+            case "music_offtopic":
+                return [{
+                    configKey: "autoSkipOnMusicVideos",
+                    label: chrome.i18n.getMessage("autoSkipOnMusicVideos"),
+                }];
+            default:
+                return [];
+        }
+    }
 }
 
 export default CategorySkipOptionsComponent;
\ No newline at end of file
diff --git a/src/components/KeybindComponent.tsx b/src/components/options/KeybindComponent.tsx
similarity index 94%
rename from src/components/KeybindComponent.tsx
rename to src/components/options/KeybindComponent.tsx
index 17aefcbb..34345301 100644
--- a/src/components/KeybindComponent.tsx
+++ b/src/components/options/KeybindComponent.tsx
@@ -1,9 +1,9 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import Config from "../config";
-import { Keybind } from "../types";
+import Config from "../../config";
+import { Keybind } from "../../types";
 import KeybindDialogComponent from "./KeybindDialogComponent";
-import { keybindEquals, keybindToString, formatKey } from "../utils/configUtils";
+import { keybindEquals, keybindToString, formatKey } from "../../utils/configUtils";
 
 export interface KeybindProps { 
     option: string;
diff --git a/src/components/KeybindDialogComponent.tsx b/src/components/options/KeybindDialogComponent.tsx
similarity index 98%
rename from src/components/KeybindDialogComponent.tsx
rename to src/components/options/KeybindDialogComponent.tsx
index c4e7cf48..7c8684a7 100644
--- a/src/components/KeybindDialogComponent.tsx
+++ b/src/components/options/KeybindDialogComponent.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { ChangeEvent } from "react";
-import Config from "../config";
-import { Keybind } from "../types";
-import { keybindEquals, formatKey } from "../utils/configUtils";
+import Config from "../../config";
+import { Keybind } from "../../types";
+import { keybindEquals, formatKey } from "../../utils/configUtils";
 
 export interface KeybindDialogProps { 
     option: string;
diff --git a/src/components/options/ToggleOptionComponent.tsx b/src/components/options/ToggleOptionComponent.tsx
new file mode 100644
index 00000000..b67024f4
--- /dev/null
+++ b/src/components/options/ToggleOptionComponent.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+
+import Config from "../../config";
+
+export interface ToggleOptionProps { 
+    configKey: string;
+    label: string;
+}
+
+export interface ToggleOptionState {
+    enabled: boolean;
+}
+
+class ToggleOptionComponent extends React.Component<ToggleOptionProps, ToggleOptionState> {
+
+    constructor(props: ToggleOptionProps) {
+        super(props);
+
+        // Setup state
+        this.state = {
+            enabled: Config.config[props.configKey]
+        }
+    }
+
+    render(): React.ReactElement {
+        return (
+            <div>
+                <div className="switch-container">
+                    <label className="switch">
+                        <input id={this.props.configKey} type="checkbox" checked={this.state.enabled} onChange={(e) => this.clicked(e)}/>
+                        <span className="slider round"></span>
+                    </label>
+                    <label className="switch-label" htmlFor={this.props.configKey}>
+                        {this.props.label}
+                    </label>
+                </div>
+            </div>
+        );
+    }
+
+    clicked(event: React.ChangeEvent<HTMLInputElement>): void {
+        Config.config[this.props.configKey] = event.target.checked;
+
+        this.setState({
+            enabled: event.target.checked
+        });
+    }
+
+}
+
+export default ToggleOptionComponent;
\ No newline at end of file
diff --git a/src/options.ts b/src/options.ts
index 8d074e38..dc3314cf 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -10,7 +10,7 @@ window.SB = Config;
 
 import Utils from "./utils";
 import CategoryChooser from "./render/CategoryChooser";
-import KeybindComponent from "./components/KeybindComponent";
+import KeybindComponent from "./components/options/KeybindComponent";
 import { showDonationLink } from "./utils/configUtils";
 import { localizeHtmlPage } from "./utils/pageUtils";
 const utils = new Utils();
diff --git a/src/render/CategoryChooser.tsx b/src/render/CategoryChooser.tsx
index eab9edf6..97c33cf9 100644
--- a/src/render/CategoryChooser.tsx
+++ b/src/render/CategoryChooser.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import CategoryChooserComponent from "../components/CategoryChooserComponent";
+import CategoryChooserComponent from "../components/options/CategoryChooserComponent";
 
 class CategoryChooser {