Finalized implementing channel specific settings

package.json

@@ -23,7 +23,7 @@
     "@types/wicg-mediasession": "^1.1.4",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
-    "chromedriver": "^110.0.0",
+    "chromedriver": "^134.0.0",
     "concurrently": "^7.6.0",
     "copy-webpack-plugin": "^11.0.0",
     "eslint": "^8.35.0",

public/options/options.css

@@ -581,6 +581,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;
 }

public/popup.css

@@ -300,24 +300,6 @@
   margin-bottom: 6px;
 }
 
-/*
- * Whitelist add/remove icon
- */
-.SBWhitelistIcon > path {
-  fill: var(--sb-main-fg-color);
-}
-.SBWhitelistIcon.rotated {
-  transform: rotate(45deg);
-}
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 /*
  * "Skipping is enabled" toggle
  */
@@ -372,17 +354,51 @@
   opacity: 0;
 }
 
+
+ /* "Channel Overrides are enabled" toggle
+ */
+#channelSpecificSettingsToggleSwitch:checked ~ .switchDot {
+  transform: translateX(27px);
+}
+#channelSpecificSettingsToggleSwitch:checked ~ .switchBg.green {
+  opacity: 1;
+}
+#channelSpecificSettingsToggleSwitch:checked ~ .switchBg.white {
+  transition: opacity 0.2s step-end;
+  opacity: 0;
+}
+
+#channelSpecificSettingsList {
+  margin: 16px;
+  margin-top: 0;
+  padding: 8px 12px;
+  text-align: left;
+  border-radius: 8px;
+  border: 2px solid var(--sb-grey-bg-color);
+}
+
+.popupCategory {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: right;
+  justify-content: space-between;
+  padding: 4px 8px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
 /*
- * Notice that appears when whitelisting a channel, that recommends
- * enabling the "Force Channel Check Before Skipping" option
+ * Notice that appears when creating channel specific settings, that informs to
+ * enable the "Force Channel Check Before Skipping" option
  */
-#whitelistForceCheck {
+#channelSettingsForceCheck {
   background-color: #fff3cd;
   padding: 10px 15px;
   display: block;
   color: #664d03;
 }
-#whitelistForceCheck:hover {
+#channelSettingsForceCheck:hover {
   background-color: #f2e4b7;
 }
 

public/popup.html

@@ -67,14 +67,6 @@
 
       <!-- Toggle Box -->
       <div class="sbControlsMenu">
-        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
-          <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" />
-          </svg>
-          <span id="whitelistChannel">__MSG_whitelistChannel__</span>
-          <span id="unwhitelistChannel" style="display: none">__MSG_removeFromWhitelist__</span>
-        </label>
         <!--github: mbledkowski/toggle-switch-->
         <label id="disableExtension" for="toggleSwitch" class="toggleSwitchContainer sbControlsMenu-item">
           <span class="toggleSwitchContainer-switch">
@@ -93,10 +85,36 @@
         </button>
       </div>
 
-      <a id="whitelistForceCheck" class="hidden">
-        __MSG_forceChannelCheckPopup__
+      <!-- Channel specific settings box -->
+      <!--github: scaccoman/SponsorBlock-->
+      <div class="sbControlsMenu">
+        <label id="channelSpecificSettings" for="channelSpecificSettingsToggleSwitch" class="hidden toggleSwitchContainer sbControlsMenu-item">
+        <span class="toggleSwitchContainer-switch">
+          <input type="checkbox" style="display:none;" id="channelSpecificSettingsToggleSwitch" checked="false">
+          <span class="switchBg shadow"></span>
+          <span class="switchBg white"></span>
+          <span class="switchBg green"></span>
+          <span class="switchDot"></span>
+        </span>
+        <span id="disableChannelSpecificSettings">__MSG_disableChannelSpecificSettings__</span>
+        <span id="enableChannelSpecificSettings" style="display: none">__MSG_enableChannelSpecificSettings__</span>
+        </label>
+        <button id="channelSpecificSettingsDeleteButton" class = "hidden sbControlsMenu-item">
+          <img src="/icons/deleteChannelSpecificSettings.svg" alt="Delete settings icon" height="24" class="sbControlsMenu-itemIcon" />
+          __MSG_deleteChannelSpecificSettings__
+        </button>
+      </div>
+
+      <a id="channelSettingsForceCheck" class="hidden">
+        __MSG_forceChannelCheckRequired__
       </a>
 
+      <!-- Channel specific settings container -->
+      <div id="channelSpecificSettingsContainer" style="display: none">
+        <ul id="channelSpecificSettingsList">
+        </ul>
+      </div>
+
       <!-- Submit box -->
       <div id="mainControls" style="display: none">
         <h1 class="sbHeader">

src/components/PopupCategorySkipOptionsComponent.tsx

@@ -0,0 +1,155 @@
+import * as React from "react";
+
+import Config from "../config"
+import { Category, CategorySkipOption } from "../types";
+
+import { getCategorySuffix } from "../utils/categoryUtils";
+
+export interface PopupCategorySkipOptionsProps { 
+    category: Category;
+    channelID: string;
+    deleteButton: HTMLElement;
+}
+
+class PopupCategorySkipOptionsComponent extends React.Component<PopupCategorySkipOptionsProps> {
+    constructor(props: PopupCategorySkipOptionsProps) {
+        super(props);
+    }
+
+    render(): React.ReactElement {
+        let defaultOption = "global";
+        // Set the default option properly
+        if (Config.config.channelSpecificSettings?.[this.props.channelID]){
+            for (const categorySelection of Config.config.channelSpecificSettings[this.props.channelID].categorySelections) {
+                if (categorySelection.name === this.props.category) {
+                    switch (categorySelection.option) {
+                        case CategorySkipOption.ShowOverlay:
+                            defaultOption = "showOverlay";
+                            break;
+                        case CategorySkipOption.ManualSkip:
+                            defaultOption = "manualSkip";
+                            break;
+                        case CategorySkipOption.AutoSkip:
+                            defaultOption = "autoSkip";
+                            break;
+                        case CategorySkipOption.Disabled:
+                            defaultOption = "disable";
+                    }
+
+                    break;
+                }
+            }
+        }
+
+        return (
+            <>
+                <span id={this.props.category + "OptionsRow"}
+                    className={"popupCategory"} >
+                    <span id={this.props.category + "OptionName"}
+                        className="categoryTableLabel">
+                            {chrome.i18n.getMessage("category_" + this.props.category)}
+                    </span>
+                    <select
+                        defaultValue={defaultOption}
+                        onChange={this.skipOptionSelected.bind(this)}>
+                            {this.getCategorySkipOptions()}
+                    </select>
+
+                </span>
+            </>
+        );
+    }
+
+    skipOptionSelected(event: React.ChangeEvent<HTMLSelectElement>): void {
+        if (!Config.config.channelSpecificSettings[this.props.channelID]) {
+            Config.config.channelSpecificSettings[this.props.channelID] = {
+                toggle : true,
+                categorySelections: []
+            };
+            this.props.deleteButton.classList.remove("hidden");
+        }
+        const channelSettings = Config.config.channelSpecificSettings[this.props.channelID];
+        let option: CategorySkipOption;
+
+        switch (event.target.value) {
+            case "global":
+                channelSettings.categorySelections = channelSettings.categorySelections.filter(
+                    categorySelection => categorySelection.name !== this.props.category);
+                Config.forceSyncUpdate("channelSpecificSettings");
+                return;
+            case "disable":
+                option = CategorySkipOption.Disabled;
+
+                break;
+            case "showOverlay":
+                option = CategorySkipOption.ShowOverlay;
+
+                break;
+            case "manualSkip":
+                option = CategorySkipOption.ManualSkip;
+
+                break;
+            case "autoSkip":
+                option = CategorySkipOption.AutoSkip;
+
+                if (this.props.category === "filler" && !Config.config.isVip) {
+                    if (!confirm(chrome.i18n.getMessage("FillerWarning"))) {
+                        event.target.value = "disable";
+                    }
+                }
+
+                break;
+        }
+
+        const existingSelection = channelSettings.categorySelections.find(selection => selection.name === this.props.category);
+        if (existingSelection) {
+            existingSelection.option = option;
+        } else {
+            channelSettings.categorySelections.push({
+                name: this.props.category,
+                option: option
+            });
+        }
+
+        Config.forceSyncUpdate("channelSpecificSettings");
+    }
+
+    getCategorySkipOptions(): JSX.Element[] {
+        const elements: JSX.Element[] = [];
+
+        let optionNames = ["global", "disable", "showOverlay", "manualSkip", "autoSkip"];
+        if (this.props.category === "chapter") optionNames = ["global", "disable", "showOverlay"]
+        else if (this.props.category === "exclusive_access") optionNames = ["global", "disable", "showOverlay"];
+
+        function optionToString(option: CategorySkipOption, category: Category) : string {
+            let optionName = "disable";
+            switch (option) {
+                case CategorySkipOption.ShowOverlay:
+                    optionName = "showOverlay";
+                    break;
+                case CategorySkipOption.ManualSkip:
+                    optionName = "manualSkip";
+                    break;
+                case CategorySkipOption.AutoSkip:
+                    optionName = "autoSkip";
+                    break;
+                default:
+                    return `(${chrome.i18n.getMessage(optionName)})`;
+            }
+            return `(${chrome.i18n.getMessage( optionName + getCategorySuffix(category))})`;
+        }
+
+        for (const optionName of optionNames) {
+            elements.push(
+                <option key={optionName} value={optionName}>
+                    {`${chrome.i18n.getMessage( (optionName !== "disable" && optionName !== "global") ? optionName + getCategorySuffix(this.props.category) 
+                                                                     : optionName)} ${optionName === "global" ? (optionToString(Config.config.categorySelections.find(selection => selection.name === this.props.category)?.option, this.props.category)) : ""}`}
+                </option>
+            );
+        }
+
+        return elements;
+    }
+}
+
+export default PopupCategorySkipOptionsComponent;