Add exclusive access category

public/_locales/en/messages.json

@@ -537,6 +537,16 @@
     "category_selfpromo_description": {
         "message": "Similar to \"sponsor\" except for unpaid or self promotion. This includes sections about merchandise, donations, or information about who they collaborated with."
     },
+    "category_exclusive_access": {
+        "message": "Exclusive Access"
+    },
+    "category_exclusive_access_description": {
+        "message": "Only for labeling entire videos. Used when a video showcases a product, service or location that they've recieved free or subsidized access to."
+    },
+    "category_exclusive_access_pill": {
+        "message": "This video showcases a product, service or location that they've recieved free or subsidized access to",
+        "description": "Short description for this category"
+    },
     "category_interaction": {
         "message": "Interaction Reminder (Subscribe)"
     },
@@ -618,6 +628,9 @@
     "showOverlay_POI": {
         "message": "Show In Seek Bar"
     },
+    "showOverlay_full": {
+        "message": "Show Label"
+    },
     "autoSkipOnMusicVideos": {
         "message": "Auto skip all segments when there is a non-music segment"
     },

src/components/CategoryPillComponent.tsx

@@ -33,15 +33,16 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
 
     render(): React.ReactElement {
         const style: React.CSSProperties = {
-            backgroundColor: Config.config.barTypes["preview-" + this.state.segment?.category]?.color,
+            backgroundColor: this.getColor(),
             display: this.state.show ? "flex" : "none",
-            color: this.state.segment?.category === "sponsor" ? "white" : "black",
+            color: this.state.segment?.category === "sponsor" 
+                || this.state.segment?.category === "exclusive_access" ? "white" : "black",
         }
 
         return (
             <span style={style}
                 className={"sponsorBlockCategoryPill"} 
-                title={chrome.i18n.getMessage("categoryPillTitleText")}
+                title={this.getTitleText()}
                 onClick={(e) => this.toggleOpen(e)}>
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
@@ -108,6 +109,17 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
             }
         }
     }
+
+    private getColor(): string {
+        const configObject = Config.config.barTypes["preview-" + this.state.segment?.category] 
+            || Config.config.barTypes[this.state.segment?.category];
+        return configObject?.color;
+    }
+
+    getTitleText(): string {
+        const shortDescription = chrome.i18n.getMessage(`category_${this.state.segment?.category}_pill`);
+        return (shortDescription ? shortDescription + ". ": "") + chrome.i18n.getMessage("categoryPillTitleText");
+    }
 }
 
 export default CategoryPillComponent;

src/components/CategorySkipOptionsComponent.tsx

@@ -4,7 +4,7 @@ import Config from "../config"
 import * as CompileConfig from "../../config.json";
 import { Category, CategorySkipOption } from "../types";
 
-import { getCategoryActionType } from "../utils/categoryUtils";
+import { getCategorySuffix } from "../utils/categoryUtils";
 
 export interface CategorySkipOptionsProps { 
     category: Category;
@@ -78,6 +78,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                             value={this.state.color} />
                     </td>
 
+                    {this.props.category !== "exclusive_access" &&
                         <td id={this.props.category + "PreviewColorOption"}
                             className="previewColorOption">
                             <input
@@ -86,6 +87,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                                 onChange={(event) => this.setColorState(event, true)}
                                 value={this.state.previewColor} />
                         </td>
+                    }
 
                 </tr>
 
@@ -154,12 +156,13 @@ 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 === "exclusive_access") optionNames = ["disable", "showOverlay"];
 
         for (const optionName of optionNames) {
             elements.push(
                 <option key={optionName} value={optionName}>
-                    {chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategoryActionType(this.props.category) 
+                    {chrome.i18n.getMessage(optionName !== "disable" ? optionName + getCategorySuffix(this.props.category) 
                                                                      : optionName)}
                 </option>
             );

src/components/SponsorTimeEditComponent.tsx

@@ -199,7 +199,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 </div>
 
                 {/* Action Type */}
-                {CompileConfig.categorySupport[sponsorTime.category]?.length > 1 ? (
+                {CompileConfig.categorySupport[sponsorTime.category]?.length > 1 
+                        || CompileConfig.categorySupport[sponsorTime.category][0] !== "skip" ? (
                     <div style={{position: "relative"}}>
                         <select id={"sponsorTimeActionTypes" + this.idSuffix}
                             className="sponsorTimeEditSelector sponsorTimeActionTypes"

src/config.ts

@@ -65,6 +65,7 @@ interface SBConfig {
         "preview-sponsor": PreviewBarOption,
         "selfpromo": PreviewBarOption,
         "preview-selfpromo": PreviewBarOption,
+        "exclusive_access": PreviewBarOption,
         "interaction": PreviewBarOption,
         "preview-interaction": PreviewBarOption,
         "intro": PreviewBarOption,
@@ -214,6 +215,9 @@ const Config: SBObject = {
         }, {
             name: "poi_highlight" as Category,
             option: CategorySkipOption.ManualSkip
+        }, {
+            name: "exclusive_access" as Category,
+            option: CategorySkipOption.ShowOverlay
         }],
 
         colorPalette: {
@@ -244,6 +248,10 @@ const Config: SBObject = {
                 color: "#bfbf35",
                 opacity: "0.7"
             },
+            "exclusive_access": {
+                color: "#008a5c",
+                opacity: "0.7"
+            },
             "interaction": {
                 color: "#cc00ff",
                 opacity: "0.7"
@@ -395,6 +403,17 @@ function fetchConfig(): Promise<void> {
 }
 
 function migrateOldFormats(config: SBConfig) {
+    if (!config["exclusive_accessCategoryAdded"] && !config.categorySelections.some((s) => s.name === "exclusive_access")) {
+        config["exclusive_accessCategoryAdded"] = true;
+
+        config.categorySelections.push({
+            name: "exclusive_access" as Category,
+            option: CategorySkipOption.ShowOverlay
+        });
+
+        config.categorySelections = config.categorySelections;
+    }
+
     if (config["fillerUpdate"] !== undefined) {
         chrome.storage.sync.remove("fillerUpdate");
     }

src/utils/categoryUtils.ts

@@ -45,3 +45,13 @@ export function getCategoryActionType(category: Category): CategoryActionType {
         return CategoryActionType.Skippable;
     }
 }
+
+export function getCategorySuffix(category: Category): string {
+    if (category.startsWith("poi_")) {
+        return "_POI";
+    } else if (category === "exclusive_access") {
+        return "_full";
+    } else {
+        return "";
+    }
+}