Move options associated with specific categories into their div

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

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

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 { 

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;

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;

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;

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;

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

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 {