From 3a2d9c0e0e63c0302200304a9da5884a61c4ebe3 Mon Sep 17 00:00:00 2001
From: Ajay Ramachandran <dev@ajay.app>
Date: Sun, 7 Nov 2021 01:12:01 -0500
Subject: [PATCH] Update options page for chapters

---
 config.json.example                           |  3 +-
 .../CategorySkipOptionsComponent.tsx          | 39 +++++++++++--------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/config.json.example b/config.json.example
index 787aab2e..a77a3646 100644
--- a/config.json.example
+++ b/config.json.example
@@ -24,6 +24,7 @@
         "music_offtopic": "https://wiki.sponsor.ajay.app/w/Music:_Non-Music_Section",
         "poi_highlight": "https://wiki.sponsor.ajay.app/w/Highlight",
         "guidelines": "https://wiki.sponsor.ajay.app/w/Guidelines",
-        "mute": "https://wiki.sponsor.ajay.app/w/Mute_Segment"
+        "mute": "https://wiki.sponsor.ajay.app/w/Mute_Segment",
+        "chapter": "https://wiki.sponsor.ajay.app/w/Chapter"
     }
 }
diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx
index 2d18000a..b65898df 100644
--- a/src/components/CategorySkipOptionsComponent.tsx
+++ b/src/components/CategorySkipOptionsComponent.tsx
@@ -69,23 +69,27 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                         </select>
                     </td>
                     
-                    <td id={this.props.category + "ColorOption"}
-                        className="colorOption">
-                        <input
-                            className="categoryColorTextBox option-text-box"
-                            type="color"
-                            onChange={(event) => this.setColorState(event, false)}
-                            value={this.state.color} />
-                    </td>
+                    {this.props.category !== "chapter" &&
+                        <td id={this.props.category + "ColorOption"}
+                            className="colorOption">
+                            <input
+                                className="categoryColorTextBox option-text-box"
+                                type="color"
+                                onChange={(event) => this.setColorState(event, false)}
+                                value={this.state.color} />
+                        </td>
+                    }
 
-                    <td id={this.props.category + "PreviewColorOption"}
-                        className="previewColorOption">
-                        <input
-                            className="categoryColorTextBox option-text-box"
-                            type="color"
-                            onChange={(event) => this.setColorState(event, true)}
-                            value={this.state.previewColor} />
-                    </td>
+                    {this.props.category !== "chapter" &&
+                        <td id={this.props.category + "PreviewColorOption"}
+                            className="previewColorOption">
+                            <input
+                                className="categoryColorTextBox option-text-box"
+                                type="color"
+                                onChange={(event) => this.setColorState(event, true)}
+                                value={this.state.previewColor} />
+                        </td>
+                    }
 
                 </tr>
 
@@ -154,7 +158,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
     getCategorySkipOptions(): JSX.Element[] {
         const elements: JSX.Element[] = [];
 
-        const optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
+        let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
+        if (this.props.category === "chapter") optionNames = ["disable", "showOverlay"]
 
         for (const optionName of optionNames) {
             elements.push(