Implement Channel-Specific Category Selection

public/_locales/en/messages.json

@@ -200,6 +200,9 @@
     "showDeleteButton": {
         "message": "Show Delete Button On YouTube Player"
     },
+    "removeChannelSettingsButton": {
+        "message": "Remove Channel-Specific Settings"
+    },
     "enableViewTracking": {
         "message": "Enable Skip Count Tracking"
     },
@@ -621,6 +624,9 @@
     "category_livestream_messages_short": {
         "message": "Message Reading"
     },
+    "inherit": {
+        "message": "Inherit"
+    },
     "autoSkip": {
         "message": "Auto Skip"
     },
@@ -737,9 +743,15 @@
     "whatForceChannelCheck": {
         "message": "By default, it will skip segments right away before it even knows what the channel is. By default, some segments at the start of the video might be skipped on whitelisted channels. Enabling this option will prevent this but making all skipping have a slight delay as getting the channelID can take some time. This delay might be unnoticeable if you have fast internet."
     },
+    "channelSettingsPopup": {
+        "message": "Ctrl-click to open the channel-specific settings for this channel."
+    },
     "forceChannelCheckPopup": {
         "message": "Consider Enabling \"Force Channel Check Before Skipping\""
     },
+    "forceChannelCheckRequired": {
+        "message": "\"Force Channel Check Before Skipping\" is required for channel-specific category selections to work properly."
+    },
     "downvoteDescription": {
         "message": "Incorrect/Wrong Timing"
     },

public/options/options.css

@@ -558,6 +558,10 @@ svg {
 
 /* React styles */
 
+.categoryTableHeader {
+    height: 3em; /* So the height doesn't change when switching to/from global channel settings (which have two-line headers) */
+}
+
 .categoryTableElement {
     font-size: 16px;
 }
@@ -670,4 +674,4 @@ svg {
     #options > div {
         max-width: 100%;
     }
-}
+}

public/popup.html

@@ -30,7 +30,7 @@
       </div>
 
       <div class="sbControlsMenu">
-        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" title="__MSG_forceChannelCheckPopup__">
+        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" title="__MSG_channelSettingsPopup__">
           <input type="checkbox" style="display:none;" id="whitelistToggle">
           <svg viewBox="0 0 24 24" width="23" height="23" class="SBWhitelistIcon sbControlsMenu-itemIcon">
             <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />

src/components/CategoryChooserComponent.tsx

@@ -1,36 +1,47 @@
 import * as React from "react";
 
 import * as CompileConfig from "../../config.json";
-import { Category } from "../types";
+import { Category, CategorySkipOption } from "../types";
 import CategorySkipOptionsComponent from "./CategorySkipOptionsComponent";
+import Config from "../config";
 
 export interface CategoryChooserProps { 
 
 }
 
 export interface CategoryChooserState {
-
+    selectedChannel: string
 }
 
 class CategoryChooserComponent extends React.Component<CategoryChooserProps, CategoryChooserState> {
 
     constructor(props: CategoryChooserProps) {
         super(props);
 
+        // Set the selected channel from the part of the document hash after the slash
+        const hashSlashIndex = document.location.hash.indexOf("/");
+        let selectedChannel = hashSlashIndex > -1 ? document.location.hash.slice(hashSlashIndex + 1) : null;
+
+        const channelSpecificSettings = Config.config.channelSpecificSettings;
+        if (channelSpecificSettings[selectedChannel] == undefined)
+            selectedChannel = null;
+
         // Setup state
         this.state = {
-
+            selectedChannel: selectedChannel
         }
     }
 
     render(): React.ReactElement {
         return (
-            <table id="categoryChooserTable"
-                className="categoryChooserTable"> 
-                <tbody>
+            <>
+                {this.getChannelSettings()}
+                <table id="categoryChooserTable"
+                       className="categoryChooserTable">
+                    <tbody>
                     {/* Headers */}
                     <tr id={"CategoryOptionsRow"}
-                            className="categoryTableElement categoryTableHeader">
+                        className="categoryTableElement categoryTableHeader">
                         <th id={"CategoryOptionName"}>
                             {chrome.i18n.getMessage("category")}
                         </th>
@@ -40,20 +51,73 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
                             {chrome.i18n.getMessage("skipOption")}
                         </th>
 
-                        <th id={"CategoryColorOption"}
-                            className="colorOption">
-                            {chrome.i18n.getMessage("seekBarColor")}
-                        </th>
-
-                        <th id={"CategoryPreviewColorOption"}
-                            className="previewColorOption">
-                            {chrome.i18n.getMessage("previewColor")}
-                        </th>
+                        { // Colour options are only available when configuring global skip settings
+                            this.state.selectedChannel == null &&
+                            <>
+                                <th id={"CategoryColorOption"}
+                                    className="colorOption">
+                                    {chrome.i18n.getMessage("seekBarColor")}
+                                </th>
+
+                                <th id={"CategoryPreviewColorOption"}
+                                    className="previewColorOption">
+                                    {chrome.i18n.getMessage("previewColor")}
+                                </th>
+                            </>
+                        }
                     </tr>
 
                     {this.getCategorySkipOptions()}
-                </tbody> 
-            </table>
+                    </tbody>
+                </table>
+            </>
+        );
+    }
+
+    // Renders the channel chooser and associated buttons
+    getChannelSettings(): JSX.Element {
+        const channelSpecificSettings = Config.config.channelSpecificSettings;
+        const channelOptions = [];
+        for (const channelID in channelSpecificSettings) {
+            channelOptions.push({
+                name: channelSpecificSettings[channelID].name,
+                element: <option value={channelID}>{
+                    channelSpecificSettings[channelID].name ? channelSpecificSettings[channelID].name : channelID
+                }</option>
+            });
+        }
+        channelOptions.sort((a, b) => {
+            return ('' + a.name).localeCompare(b.name);
+        });
+
+        return (
+            <>
+                <select id="channelChooser"
+                        className="optionsSelector inline"
+                        style={{verticalAlign: "middle"}}
+                        defaultValue={this.state.selectedChannel == null ? "global" : this.state.selectedChannel}
+                        onChange={this.channelSelected.bind(this)}>
+                    <option value="global">- Global Settings -</option>
+                    {channelOptions.map((channelOption) => { return channelOption.element; })}
+                </select>
+                {
+                    this.state.selectedChannel != null &&
+                    <>
+                        <div id="removeChannelSelections"
+                            className="option-button inline"
+                            style={{marginLeft: "5px", padding: "5px", verticalAlign: "middle"}}
+                            onClick={this.removeSelectedChannel.bind(this)}>
+                            {chrome.i18n.getMessage("removeChannelSettingsButton")}
+                        </div>
+                        {
+                            !Config.config.forceChannelCheck &&
+                            <span className="inline"
+                                  style={{marginLeft: "5px"}}>
+                                {chrome.i18n.getMessage("forceChannelCheckRequired")}</span>
+                        }
+                    </>
+                }
+            </>
         );
     }
 
@@ -63,13 +127,33 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
         for (const category of CompileConfig.categoryList) {
             elements.push(
                 <CategorySkipOptionsComponent category={category as Category}
+                    selectedChannel={this.state.selectedChannel}
                     key={category}>
                 </CategorySkipOptionsComponent>
             );
         }
 
         return elements;
     }
+
+    // Called when a channel is selected in the channel chooser
+    channelSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
+        if (event.target.value == "global") {
+            document.location.hash = "behavior";
+            this.setState({selectedChannel: null});
+        } else {
+            document.location.hash = "behavior/" + event.target.value;
+            this.setState({selectedChannel: event.target.value});
+        }
+    }
+
+    // Removes *all* the selected channel's settings from `channelSpecificSettings`
+    removeSelectedChannel(): void {
+        delete Config.config.channelSpecificSettings[this.state.selectedChannel];
+        this.setState({selectedChannel: null});
+
+        Config.config.channelSpecificSettings = Config.config.channelSpecificSettings;
+    }
 }
 
-export default CategoryChooserComponent;
+export default CategoryChooserComponent;