From ce9a27bebc5dabf9edfe3cea532df9763f0480e8 Mon Sep 17 00:00:00 2001
From: Zacchary Dempsey-Plante <zacc@ztdp.ca>
Date: Sat, 2 Apr 2022 21:41:48 -0400
Subject: [PATCH] Implement channel-specific categories.

---
 public/_locales/en/messages.json              |  12 ++
 public/options/options.css                    |   6 +-
 public/popup.html                             |   2 +-
 src/components/CategoryChooserComponent.tsx   | 122 +++++++++++--
 .../CategorySkipOptionsComponent.tsx          | 124 ++++++++-----
 src/config.ts                                 |  18 +-
 src/content.ts                                |  76 +++++---
 src/messageTypes.ts                           |   9 +-
 src/options.ts                                |   9 +-
 src/popup.ts                                  | 165 ++++++++++--------
 src/types.ts                                  |  10 +-
 src/utils.ts                                  |  30 +++-
 12 files changed, 403 insertions(+), 180 deletions(-)

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 1d3e9f1580..f939a247f4 100644
--- a/public/_locales/en/messages.json
+++ b/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"
     },
diff --git a/public/options/options.css b/public/options/options.css
index a2a829a14b..b0d0adbef2 100644
--- a/public/options/options.css
+++ b/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%;
     }
-}
\ No newline at end of file
+}
diff --git a/public/popup.html b/public/popup.html
index 78001e86a1..21f3e24921 100644
--- a/public/popup.html
+++ b/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" />
diff --git a/src/components/CategoryChooserComponent.tsx b/src/components/CategoryChooserComponent.tsx
index 763254b914..f7c03d7224 100644
--- a/src/components/CategoryChooserComponent.tsx
+++ b/src/components/CategoryChooserComponent.tsx
@@ -1,15 +1,16 @@
 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> {
@@ -17,20 +18,30 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
     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,6 +127,7 @@ 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>
             );
@@ -70,6 +135,25 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
 
         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;
\ No newline at end of file
+export default CategoryChooserComponent;
diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx
index deb98b229e..b3ca998835 100644
--- a/src/components/CategorySkipOptionsComponent.tsx
+++ b/src/components/CategorySkipOptionsComponent.tsx
@@ -2,12 +2,13 @@ import * as React from "react";
 
 import Config from "../config"
 import * as CompileConfig from "../../config.json";
-import { Category, CategorySkipOption } from "../types";
+import { Category, CategorySelection, CategorySkipOption } from "../types";
 
 import { getCategorySuffix } from "../utils/categoryUtils";
 
 export interface CategorySkipOptionsProps { 
     category: Category;
+    selectedChannel: string;
     defaultColor?: string;
     defaultPreviewColor?: string;
 }
@@ -30,11 +31,23 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
     }
 
     render(): React.ReactElement {
-        let defaultOption = "disable";
-        // Set the default opton properly
-        for (const categorySelection of Config.config.categorySelections) {
+        // Render the right settings based on whether we're configuring global or channel-specific
+        let defaultOption;
+        let categorySelections;
+        if (this.props.selectedChannel == null) {
+            defaultOption = "disable";
+            categorySelections = Config.config.categorySelections;
+        } else {
+            defaultOption = "inherit";
+            categorySelections = Config.config.channelSpecificSettings[this.props.selectedChannel].categorySelections;
+        }
+        // Set the default option properly
+        for (const categorySelection of categorySelections) {
             if (categorySelection.name === this.props.category) {
                 switch (categorySelection.option) {
+                    case CategorySkipOption.Disabled:
+                        defaultOption = "disable";
+                        break;
                     case CategorySkipOption.ShowOverlay:
                         defaultOption = "showOverlay";
                         break;
@@ -63,32 +76,36 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                         className="skipOption">
                         <select
                             className="optionsSelector"
+                            key={this.props.selectedChannel} // This is why: https://stackoverflow.com/a/39239074
                             defaultValue={defaultOption}
                             onChange={this.skipOptionSelected.bind(this)}>
                                 {this.getCategorySkipOptions()}
                         </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 !== "exclusive_access" &&
-                        <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.selectedChannel == null &&
+                        <>
+                            <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 !== "exclusive_access" &&
+                                <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>
 
                 <tr id={this.props.category + "DescriptionRow"}
@@ -108,13 +125,30 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
     }
 
     skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
-        let option: CategorySkipOption;
+        const categorySelections = this.props.selectedChannel == null ?
+            Config.config.categorySelections :
+            Config.config.channelSpecificSettings[this.props.selectedChannel].categorySelections;
+
+        // Remove the existing category selection
+        for (let i = 0; i < categorySelections.length; i++) {
+            if (categorySelections[i].name === this.props.category) {
+                categorySelections.splice(i, 1);
 
-        this.removeCurrentCategorySelection();
+                this.forceSaveCategorySelections(categorySelections);
+
+                break;
+            }
+        }
 
+        // Select the new option
+        let option: CategorySkipOption;
         switch (event.target.value) {
-            case "disable": 
+            case "inherit":
                 return;
+            case "disable":
+                option = CategorySkipOption.Disabled;
+
+                break;
             case "showOverlay":
                 option = CategorySkipOption.ShowOverlay;
 
@@ -129,41 +163,39 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                 break;
         }
 
-        Config.config.categorySelections.push({
+        // Push the new selection
+        categorySelections.push({
             name: this.props.category,
             option: option
         });
 
-        // Forces the Proxy to send this to the chrome storage API
-        Config.config.categorySelections = Config.config.categorySelections;
+        this.forceSaveCategorySelections(categorySelections);
     }
 
-    /** Removes this category from the config list of category selections */
-    removeCurrentCategorySelection(): void {
-        // Remove it if it exists
-        for (let i = 0; i < Config.config.categorySelections.length; i++) {
-            if (Config.config.categorySelections[i].name === this.props.category) {
-                Config.config.categorySelections.splice(i, 1);
-
-                // Forces the Proxy to send this to the chrome storage API
-                Config.config.categorySelections = Config.config.categorySelections;
-
-                break;
-            }
+    // Forces the Proxy to send this to the chrome storage API
+    forceSaveCategorySelections(categorySelections: CategorySelection[]) {
+        if (this.props.selectedChannel == null) {
+            Config.config.categorySelections = categorySelections;
+        } else {
+            Config.config.channelSpecificSettings[this.props.selectedChannel].categorySelections = categorySelections;
+            Config.config.channelSpecificSettings = Config.config.channelSpecificSettings;
         }
     }
 
     getCategorySkipOptions(): JSX.Element[] {
         const elements: JSX.Element[] = [];
 
-        let optionNames = ["disable", "showOverlay", "manualSkip", "autoSkip"];
-        if (this.props.category === "exclusive_access") optionNames = ["disable", "showOverlay"];
+        let optionNames = ["inherit", "disable", "showOverlay", "manualSkip", "autoSkip"];
+        if (this.props.category === "exclusive_access") optionNames = ["inherit", "disable", "showOverlay"];
 
         for (const optionName of optionNames) {
+            if (this.props.selectedChannel == null && optionName == "inherit")
+                continue;
             elements.push(
                 <option key={optionName} value={optionName}>
-                    {chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategorySuffix(this.props.category) 
-                                                                     : optionName)}
+                    {chrome.i18n.getMessage(optionName !== "inherit" && optionName !== "disable" ?
+                        optionName + getCategorySuffix(this.props.category) :
+                        optionName)}
                 </option>
             );
         }
@@ -192,4 +224,4 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
     }
 }
 
-export default CategorySkipOptionsComponent;
\ No newline at end of file
+export default CategorySkipOptionsComponent;
diff --git a/src/config.ts b/src/config.ts
index 5113460f45..56780d07f4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,6 +1,6 @@
 import * as CompileConfig from "../config.json";
 import * as invidiousList from "../ci/invidiouslist.json";
-import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, StorageChangesObject, UnEncodedSegmentTimes as UnencodedSegmentTimes, Keybind, HashedValue, VideoID, SponsorHideType } from "./types";
+import { Category, CategorySelection, CategorySkipOption, ChannelSpecificSettings, NoticeVisbilityMode, PreviewBarOption, SponsorTime, StorageChangesObject, UnEncodedSegmentTimes as UnencodedSegmentTimes, Keybind, HashedValue, VideoID, SponsorHideType } from "./types";
 import { keybindEquals } from "./utils/configUtils";
 
 interface SBConfig {
@@ -10,7 +10,6 @@ interface SBConfig {
     /* Contains unsubmitted segments that the user has created. */
     unsubmittedSegments: Record<string, SponsorTime[]>,
     defaultCategory: Category,
-    whitelistedChannels: string[],
     forceChannelCheck: boolean,
     minutesSaved: number,
     skipCount: number,
@@ -71,6 +70,7 @@ interface SBConfig {
 
     // What categories should be skipped
     categorySelections: CategorySelection[],
+    channelSpecificSettings: Record<string, ChannelSpecificSettings>,
 
     // Preview bar
     barTypes: {
@@ -127,7 +127,6 @@ const Config: SBObject = {
         lastIsVipUpdate: 0,
         unsubmittedSegments: {},
         defaultCategory: "chooseACategory" as Category,
-        whitelistedChannels: [],
         forceChannelCheck: false,
         minutesSaved: 0,
         skipCount: 0,
@@ -192,6 +191,7 @@ const Config: SBObject = {
             name: "exclusive_access" as Category,
             option: CategorySkipOption.ShowOverlay
         }],
+        channelSpecificSettings: {},
 
         colorPalette: {
             red: "#780303",
@@ -487,6 +487,18 @@ function migrateOldSyncFormats(config: SBConfig) {
     if (!config["supportInvidious"] && config["invidiousInstances"].length !== invidiousList.length) {
         config["invidiousInstances"] = invidiousList;
     }
+
+    // Migrate from whitelistedChannels to channelSpecificSettings
+    if (config["whitelistedChannels"] !== undefined) {
+        for (const whitelistedChannel of config["whitelistedChannels"]) {
+            config["channelSpecificSettings"][whitelistedChannel] = {
+                name: null, // This gets filled in when the user uses the button later on
+                whitelisted: true,
+                categorySelections: []
+            };
+        }
+        chrome.storage.sync.remove("whitelistedChannels");
+    }
 }
 
 async function setupConfig() {
diff --git a/src/content.ts b/src/content.ts
index 2212945bfd..5279a0798d 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -181,9 +181,10 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             });
 
             break;
-        case "getChannelID":
+        case "getChannelInfo":
             sendResponse({
-                channelID: channelIDInfo.id
+                channelID: channelIDInfo.id,
+                channelName: channelIDInfo.name
             });
 
             break;
@@ -254,7 +255,8 @@ function resetValues() {
     channelWhitelisted = false;
     channelIDInfo = {
         status: ChannelIDStatus.Fetching,
-        id: null
+        id: null,
+        name: null
     };
     lockedCategories = [];
 
@@ -319,7 +321,7 @@ async function videoIDChange(id) {
     // getVideoInfo(); // Seems to have been replaced
 
     // Update whitelist data when the video data is loaded
-    whitelistCheck();
+    const whitelistCheckResult = whitelistCheck(id);
 
     //setup the preview bar
     if (previewBar === null) {
@@ -346,6 +348,10 @@ async function videoIDChange(id) {
     //close popup
     closeInfoMenu();
 
+    // To attempt to ensure the channel ID has been fetched so that channel-specific categories can be requested
+    if (Config.config.forceChannelCheck)
+        await whitelistCheckResult;
+
     sponsorsLookup(id);
 
     // Make sure all player buttons are properly added
@@ -526,7 +532,7 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
                 openNotice: skipInfo.openNotice
             });
 
-            if (utils.getCategorySelection(currentSkip.category)?.option === CategorySkipOption.ManualSkip
+            if (utils.getCategorySelection(currentSkip.category, channelIDInfo.id)?.option === CategorySkipOption.ManualSkip
                     || currentSkip.actionType === ActionType.Mute) {
                 forcedSkipTime = skipTime[0] + 0.001;
             } else {
@@ -755,7 +761,7 @@ async function sponsorsLookup(id: string, keepOldSubmissions = true) {
     setupVideoMutationListener();
 
     // Create categories list
-    const categories: string[] = Config.config.categorySelections.map((category) => category.name);
+    const categories: string[] = utils.createCategorySelectionList(channelIDInfo.id).map((category) => category.name);
 
     const extraRequestData: Record<string, unknown> = {};
     const hashParams = getHashParams();
@@ -953,7 +959,7 @@ function startSkipScheduleCheckingForStartSponsors() {
             .filter((time) => time.segment[1] > video.currentTime && time.actionType === ActionType.Poi)
             .sort((a, b) => b.segment[0] - a.segment[0]);
         for (const time of poiSegments) {
-            const skipOption = utils.getCategorySelection(time.category)?.option;
+            const skipOption = utils.getCategorySelection(time.category, channelIDInfo.id)?.option;
             if (skipOption !== CategorySkipOption.ShowOverlay) {
                 skipToTime({
                     v: video,
@@ -1123,37 +1129,52 @@ function updatePreviewBar(): void {
 }
 
 //checks if this channel is whitelisted, should be done only after the channelID has been loaded
-async function whitelistCheck() {
-    const whitelistedChannels = Config.config.whitelistedChannels;
-
-    const getChannelID = () =>
-        (document.querySelector("a.ytd-video-owner-renderer") // YouTube
-        ?? document.querySelector("a.ytp-title-channel-logo") // YouTube Embed
-        ?? document.querySelector(".channel-profile #channel-name")?.parentElement.parentElement // Invidious
-        ?? document.querySelector("a.slim-owner-icon-and-title")) // Mobile YouTube
-            ?.getAttribute("href")?.match(/\/channel\/(UC[a-zA-Z0-9_-]{22})/)[1];
+async function whitelistCheck(videoID: string) {
+    const channelSpecificSettings = Config.config.channelSpecificSettings;
+
+    const getChannelInfo = (videoID: string) => {
+        const channelNameTag: HTMLElement = document.querySelector('a.ytd-video-owner-renderer')?.parentElement?.querySelector('#channel-name a') // YouTube Desktop
+            ?? document.querySelector("#channel-info #channel-name") // YouTube Desktop Channel Page
+            ?? document.querySelector("a.ytp-title-channel-logo") // YouTube Embed
+            ?? (onInvidious ? document.querySelector("a > .channel-profile > #channel-name")?.parentElement?.parentElement : null) // Invidious
+            ?? document.querySelector("a.slim-owner-icon-and-title"); // Mobile YouTube
+        if (!channelNameTag || !channelNameTag.getAttribute("href")) {
+            return null;
+        } else {
+            // This could be merged into getYouTubeVideoIDFromDocument, but they serve different purposes
+            const documentVideoId = document.querySelector("[video-id]")?.getAttribute("video-id");
+            if (documentVideoId != null && documentVideoId != videoID)
+                return null;
+        }
+        return {
+            id: channelNameTag.getAttribute("href").match(/\/channel\/(UC[a-zA-Z0-9_-]{22})/)[1],
+            name: channelNameTag.textContent.trim()
+        };
+    };
 
     try {
-        await utils.wait(() => !!getChannelID(), 6000, 20);
+        let tempChannelInfo;
+        await utils.wait(() => !!(tempChannelInfo = getChannelInfo(videoID))?.id, 6000, 20);
 
         channelIDInfo = {
             status: ChannelIDStatus.Found,
-            id: getChannelID().match(/^\/?([^\s/]+)/)[0]
+            id: tempChannelInfo.id,
+            name: tempChannelInfo.name
         }
     } catch (e) {
         channelIDInfo = {
             status: ChannelIDStatus.Failed,
-            id: null
+            id: null,
+            name: null
         }
 
         return;
     }
 
     //see if this is a whitelisted channel
-    if (whitelistedChannels != undefined &&
-            channelIDInfo.status === ChannelIDStatus.Found && whitelistedChannels.includes(channelIDInfo.id)) {
-        channelWhitelisted = true;
-    }
+    channelWhitelisted = channelSpecificSettings != undefined &&
+        channelIDInfo.status === ChannelIDStatus.Found &&
+        !!channelSpecificSettings[channelIDInfo.id]?.whitelisted;
 
     // check if the start of segments were missed
     if (Config.config.forceChannelCheck && sponsorTimes?.length > 0) startSkipScheduleCheckingForStartSponsors();
@@ -1464,15 +1485,16 @@ function createButton(baseID: string, title: string, callback: () => void, image
 }
 
 function shouldAutoSkip(segment: SponsorTime): boolean {
-    return utils.getCategorySelection(segment.category)?.option === CategorySkipOption.AutoSkip ||
+    return utils.getCategorySelection(segment.category, channelIDInfo.id)?.option === CategorySkipOption.AutoSkip ||
             (Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic")
                 && segment.actionType !== ActionType.Poi);
 }
 
 function shouldSkip(segment: SponsorTime): boolean {
-    return (segment.actionType !== ActionType.Full
-            && utils.getCategorySelection(segment.category)?.option !== CategorySkipOption.ShowOverlay)
-            || (Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic"));
+    const skipOption = utils.getCategorySelection(segment.category, channelIDInfo.id)?.option;
+    return segment.actionType !== ActionType.Full &&
+        (skipOption === CategorySkipOption.ManualSkip || skipOption === CategorySkipOption.AutoSkip
+            || (Config.config.autoSkipOnMusicVideos && sponsorTimes?.some((s) => s.category === "music_offtopic")));
 }
 
 /** Creates any missing buttons on the YouTube player if possible. */
diff --git a/src/messageTypes.ts b/src/messageTypes.ts
index adabbee59b..e4dbc35c5f 100644
--- a/src/messageTypes.ts
+++ b/src/messageTypes.ts
@@ -13,7 +13,7 @@ interface DefaultMessage {
         "update"
         | "sponsorStart"
         | "getVideoID"
-        | "getChannelID"
+        | "getChannelInfo"
         | "isChannelWhitelisted"
         | "submitTimes"
         | "refreshSegments";
@@ -53,8 +53,9 @@ interface GetVideoIdResponse {
     videoID: string;
 }
 
-interface GetChannelIDResponse {
+interface GetChannelInfoResponse {
     channelID: string;
+    channelName: string;
 }
 
 interface SponsorStartResponse {
@@ -68,7 +69,7 @@ interface IsChannelWhitelistedResponse {
 export type MessageResponse = 
     IsInfoFoundMessageResponse
     | GetVideoIdResponse
-    | GetChannelIDResponse
+    | GetChannelInfoResponse
     | SponsorStartResponse
     | IsChannelWhitelistedResponse
     | Record<string, never>
@@ -78,4 +79,4 @@ export interface VoteResponse {
     successType: number;
     statusCode: number;
     responseText: string;
-}
\ No newline at end of file
+}
diff --git a/src/options.ts b/src/options.ts
index b0245c6b11..1a494dc64d 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -22,8 +22,9 @@ async function init() {
 
     // selected tab
     if (location.hash != "") {
-        const substr = location.hash.slice(1);
-        let menuItem = document.querySelector(`[data-for='${substr}']`);
+        const slashIndex = location.hash.indexOf("/");
+        const tabName = location.hash.slice(1, slashIndex > -1 ? slashIndex : undefined);
+        let menuItem = document.querySelector(`[data-for='${tabName}']`);
         if (menuItem == null)
             menuItem = document.querySelector(`[data-for='behavior']`);
         menuItem.classList.add("selected");
@@ -648,7 +649,7 @@ function copyDebugOutputToClipboard() {
     output.config.serverAddress = (output.config.serverAddress === CompileConfig.serverAddress) 
         ? "Default server address" : "Custom server address";
     output.config.invidiousInstances = output.config.invidiousInstances.length;
-    output.config.whitelistedChannels = output.config.whitelistedChannels.length;
+    output.config.channelSpecificSettings = output.config.channelSpecificSettings.length;
 
     // Copy object to clipboard
     navigator.clipboard.writeText(JSON.stringify(output, null, 4))
@@ -662,4 +663,4 @@ function copyDebugOutputToClipboard() {
 
 function isIncognitoAllowed(): Promise<boolean> {
     return new Promise((resolve) => chrome.extension.isAllowedIncognitoAccess(resolve));
-}
\ No newline at end of file
+}
diff --git a/src/popup.ts b/src/popup.ts
index cbf92917e2..0acd72f990 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -66,6 +66,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         // Top toggles
         "whitelistChannel",
         "unwhitelistChannel",
+        "whitelistButton",
         "whitelistToggle",
         "whitelistForceCheck",
         "disableSkipping",
@@ -107,7 +108,6 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         "sponsorMessageTimes",
         //"downloadedSponsorMessageTimes",
         "refreshSegmentsButton",
-        "whitelistButton",
         "sbDonate",
         "sponsorTimesDonateContainer",
         "sbConsiderDonateLink",
@@ -122,13 +122,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
 
     //setup click listeners
     PageElements.sponsorStart.addEventListener("click", sendSponsorStartMessage);
-    PageElements.whitelistToggle.addEventListener("change", function () {
-        if (this.checked) {
-            whitelistChannel();
-        } else {
-            unwhitelistChannel();
-        }
-    });
+    PageElements.whitelistButton.addEventListener("click", whitelistChannelClick);
     PageElements.whitelistForceCheck.addEventListener("click", () => {openOptionsAt("behavior")});
     PageElements.toggleSwitch.addEventListener("change", function () {
         toggleSkipping(!this.checked);
@@ -654,7 +648,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         });
     }
 
-    function whitelistChannel() {
+    function whitelistChannelClick(event) {
         //get the channel url
         messageHandler.query({
             active: true,
@@ -662,92 +656,123 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         }, tabs => {
             messageHandler.sendMessage(
                 tabs[0].id,
-                { message: 'getChannelID' },
+                { message: 'getChannelInfo' },
                 function (response) {
                     if (!response.channelID) {
                         alert(chrome.i18n.getMessage("channelDataNotFound") + " https://github.com/ajayyy/SponsorBlock/issues/753");
                         return;
                     }
 
-                    //get whitelisted channels
-                    let whitelistedChannels = Config.config.whitelistedChannels;
-                    if (whitelistedChannels == undefined) {
-                        whitelistedChannels = [];
-                    }
-
-                    //add on this channel
-                    whitelistedChannels.push(response.channelID);
-
-                    //change button
-                    PageElements.whitelistChannel.style.display = "none";
-                    PageElements.unwhitelistChannel.style.display = "unset";
-                    document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated");
+                    // Ctrl+clicking opens the Options menu with the channel selected for customisation
+                    if (event.ctrlKey) {
+                        let channelSpecificSettings = Config.config.channelSpecificSettings;
+                        if (channelSpecificSettings == undefined) {
+                            channelSpecificSettings = {};
+                        }
 
-                    if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.classList.remove("hidden");
+                        if (channelSpecificSettings[response.channelID] == undefined) {
+                            channelSpecificSettings[response.channelID] = {
+                                name: response.channelName,
+                                whitelisted: false,
+                                categorySelections: []
+                            };
+                        } else {
+                            // Update the channel name (old whitelisted channels don't have this, and this also handles channels changing their names if it happens)
+                            channelSpecificSettings[response.channelID].name = response.channelName;
+                        }
 
-                    //save this
-                    Config.config.whitelistedChannels = whitelistedChannels;
+                        // Save the settings
+                        Config.config.channelSpecificSettings = channelSpecificSettings;
 
-                    //send a message to the client
-                    messageHandler.query({
-                        active: true,
-                        currentWindow: true
-                    }, tabs => {
-                        messageHandler.sendMessage(
-                            tabs[0].id, {
-                            message: 'whitelistChange',
-                            value: true
-                        });
+                        openOptionsAt("behavior/" + response.channelID);
+                    } else {
+                        // Otherwise, (un)whitelist the channel
+                        if ((PageElements.whitelistToggle.checked = !PageElements.whitelistToggle.checked)) {
+                            whitelistChannel(response.channelID, response.channelName);
+                        } else {
+                            unwhitelistChannel(response.channelID);
+                        }
                     }
-                    );
                 }
             );
+            event.preventDefault();
         });
     }
 
-    function unwhitelistChannel() {
-        //get the channel url
+    function whitelistChannel(channelID: string, channelName: string) {
+        //get whitelisted channels
+        let channelSpecificSettings = Config.config.channelSpecificSettings;
+        if (channelSpecificSettings == undefined) {
+            channelSpecificSettings = {};
+        }
+
+        //add on this channel
+        if (channelSpecificSettings[channelID] != undefined) {
+            channelSpecificSettings[channelID].whitelisted = true;
+        } else {
+            channelSpecificSettings[channelID] = {
+                name: channelName,
+                whitelisted: true,
+                categorySelections: []
+            };
+        }
+
+        //change button
+        PageElements.whitelistChannel.style.display = "none";
+        PageElements.unwhitelistChannel.style.display = "unset";
+        document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated");
+
+        if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.classList.remove("hidden");
+
+        //save this
+        Config.config.channelSpecificSettings = channelSpecificSettings;
+
+        //send a message to the client
         messageHandler.query({
             active: true,
             currentWindow: true
         }, tabs => {
             messageHandler.sendMessage(
                 tabs[0].id,
-                { message: 'getChannelID' },
-                function (response) {
-                    //get whitelisted channels
-                    let whitelistedChannels = Config.config.whitelistedChannels;
-                    if (whitelistedChannels == undefined) {
-                        whitelistedChannels = [];
-                    }
+                {
+                    message: 'whitelistChange',
+                    value: true
+                });
+        });
+    }
 
-                    //remove this channel
-                    const index = whitelistedChannels.indexOf(response.channelID);
-                    whitelistedChannels.splice(index, 1);
+    function unwhitelistChannel(channelID: string) {
+        //get whitelisted channels
+        let channelSpecificSettings = Config.config.channelSpecificSettings;
+        if (channelSpecificSettings == undefined) {
+            channelSpecificSettings = {};
+        }
 
-                    //change button
-                    PageElements.whitelistChannel.style.display = "unset";
-                    PageElements.unwhitelistChannel.style.display = "none";
-                    document.querySelectorAll('.SBWhitelistIcon')[0].classList.remove("rotated");
+        //Un-whitelist
+        if (channelSpecificSettings[channelID] != undefined) {
+            channelSpecificSettings[channelID].whitelisted = false;
+        }
 
-                    //save this
-                    Config.config.whitelistedChannels = whitelistedChannels;
+        //change button
+        PageElements.whitelistChannel.style.display = "unset";
+        PageElements.unwhitelistChannel.style.display = "none";
+        document.querySelectorAll('.SBWhitelistIcon')[0].classList.remove("rotated");
 
-                    //send a message to the client
-                    messageHandler.query({
-                        active: true,
-                        currentWindow: true
-                    }, tabs => {
-                        messageHandler.sendMessage(
-                            tabs[0].id, {
-                            message: 'whitelistChange',
-                            value: false
-                        });
-                    }
-                    );
-                }
-            );
-        });
+        //save this
+        Config.config.channelSpecificSettings = channelSpecificSettings;
+
+        //send a message to the client
+        messageHandler.query({
+            active: true,
+            currentWindow: true
+        }, tabs => {
+            messageHandler.sendMessage(
+                tabs[0].id, {
+                message: 'whitelistChange',
+                value: false
+            });
+        }
+        );
     }
 
     function refreshSegments() {
diff --git a/src/types.ts b/src/types.ts
index e2541c8e80..c5ea664403 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -38,6 +38,7 @@ export interface VideoDurationResponse {
 }
 
 export enum CategorySkipOption {
+    Disabled = -1,
     ShowOverlay,
     ManualSkip,
     AutoSkip
@@ -199,9 +200,16 @@ export enum ChannelIDStatus {
 
 export interface ChannelIDInfo {
     id: string,
+    name: string,
     status: ChannelIDStatus
 }
 
+export interface ChannelSpecificSettings {
+    name: string,
+    whitelisted: boolean,
+    categorySelections: CategorySelection[]
+}
+
 export interface SkipToTimeParams {
     v: HTMLVideoElement, 
     skipTime: number[], 
@@ -230,4 +238,4 @@ export type Keybind = {
     ctrl?: boolean,
     alt?: boolean,
     shift?: boolean
-}
\ No newline at end of file
+}
diff --git a/src/utils.ts b/src/utils.ts
index d89e1a3dc9..7f89a0dbbf 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,5 +1,5 @@
 import Config, { VideoDownvotes } from "./config";
-import { CategorySelection, SponsorTime, FetchResponse, BackgroundScriptContainer, Registration, HashedValue, VideoID, SponsorHideType } from "./types";
+import { CategorySelection, CategorySkipOption, SponsorTime, FetchResponse, BackgroundScriptContainer, Registration, HashedValue, VideoID, SponsorHideType } from "./types";
 
 import * as CompileConfig from "../config.json";
 import { findValidElementFromSelector } from "./utils/pageUtils";
@@ -248,11 +248,33 @@ export default class Utils {
         return sponsorTimes[this.getSponsorIndexFromUUID(sponsorTimes, UUID)];
     }
 
-    getCategorySelection(category: string): CategorySelection {
+    createCategorySelectionList(channelID: string = null): CategorySelection[] {
+        const resultList = new Map<string, CategorySelection>();
+
+        // Channel-specific selections take priority
+        if (channelID != null && Config.config.channelSpecificSettings[channelID])
+            for (const channelSelection of Config.config.channelSpecificSettings[channelID].categorySelections)
+                if (channelSelection.option != CategorySkipOption.Disabled)
+                    resultList.set(channelSelection.name, channelSelection);
+
+        // Then global settings fill in everything else
+        for (const selection of Config.config.categorySelections)
+            if (!resultList.get(selection.name) && selection.option != CategorySkipOption.Disabled)
+                resultList.set(selection.name, selection);
+
+        return [...resultList.values()];
+    }
+
+    getCategorySelection(category: string, channelID: string = null): CategorySelection {
+        if (channelID != null && Config.config.channelSpecificSettings[channelID]) {
+            for (const channelSelection of Config.config.channelSpecificSettings[channelID].categorySelections) {
+                if (channelSelection.name === category)
+                    return channelSelection;
+            }
+        }
         for (const selection of Config.config.categorySelections) {
-            if (selection.name === category) {
+            if (selection.name === category)
                 return selection;
-            }
         }
     }