bump version

fix "cannot read properties of null" when voting on full video tag

config.json.example

@@ -2,10 +2,11 @@
     "serverAddress": "https://sponsor.ajay.app",
     "testingServerAddress": "https://sponsor.ajay.app/test",
     "serverAddressComment": "This specifies the default SponsorBlock server to connect to",
-    "categoryList": ["sponsor", "selfpromo", "interaction", "poi_highlight", "intro", "outro", "preview", "filler", "music_offtopic"],
+    "categoryList": ["sponsor", "selfpromo", "exclusive_access", "interaction", "poi_highlight", "intro", "outro", "preview", "filler", "music_offtopic"],
     "categorySupport": {
         "sponsor": ["skip", "mute", "full"],
         "selfpromo": ["skip", "mute", "full"],
+        "exclusive_access": ["full"],
         "interaction": ["skip", "mute"],
         "intro": ["skip", "mute"],
         "outro": ["skip", "mute"],
@@ -17,6 +18,7 @@
     "wikiLinks": {
         "sponsor": "https://wiki.sponsor.ajay.app/w/Sponsor",
         "selfpromo": "https://wiki.sponsor.ajay.app/w/Unpaid/Self_Promotion",
+        "exclusive_access": "https://wiki.sponsor.ajay.app/w/Exclusive_Access",
         "interaction": "https://wiki.sponsor.ajay.app/w/Interaction_Reminder_(Subscribe)",
         "intro": "https://wiki.sponsor.ajay.app/w/Intermission/Intro_Animation",
         "outro": "https://wiki.sponsor.ajay.app/w/Endcards/Credits",

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "SponsorBlock",
-    "version": "4.0",
+    "version": "4.0.1",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "homepage_url": "https://sponsor.ajay.app",

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"
     },

public/content.css

@@ -633,4 +633,17 @@ input::-webkit-inner-spin-button {
 .sponsorBlockCategoryPillTitleSection {
 	display: flex;
 	align-items: center;
+}
+
+.categoryPillClose {
+	display: none;
+	height: 10px;
+	width: 10px;
+	box-sizing: unset;
+	
+	margin: 0px 0px 0px 5px;
+}
+
+.sponsorBlockCategoryPill:hover .categoryPillClose {
+	display: inherit;
 }

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"
@@ -72,6 +73,12 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                         </div>
                     </>
                 )}
+
+                {/* Close Button */}
+                <img src={chrome.extension.getURL("icons/close.png")}
+                    className="categoryPillClose"
+                    onClick={() => this.setState({ show: false })}>
+                </img>
             </span>
         );
     }
@@ -102,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,14 +78,16 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                             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 !== "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>
 
@@ -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

@@ -189,7 +189,8 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                     </select>
 
                     {/* open in new tab */}
-                    <a href="https://wiki.sponsor.ajay.app/index.php/Segment_Categories"
+                    <a href={CompileConfig.wikiLinks[sponsorTime.category] 
+                            || "https://wiki.sponsor.ajay.app/index.php/Segment_Categories"}
                         target="_blank" rel="noreferrer">
                         <img id={"sponsorTimeCategoriesHelpButton" + this.idSuffix}
                             className="helpButton"
@@ -199,7 +200,9 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                 </div>
 
                 {/* Action Type */}
-                {CompileConfig.categorySupport[sponsorTime.category]?.length > 1 ? (
+                {CompileConfig.categorySupport[sponsorTime.category] && 
+                    (CompileConfig.categorySupport[sponsorTime.category]?.length > 1 
+                        || CompileConfig.categorySupport[sponsorTime.category]?.[0] !== "skip") ? (
                     <div style={{position: "relative"}}>
                         <select id={"sponsorTimeActionTypes" + this.idSuffix}
                             className="sponsorTimeEditSelector sponsorTimeActionTypes"
@@ -470,9 +473,13 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
             }
         }
 
-        sponsorTimesSubmitting[this.props.index].category = this.categoryOptionRef.current.value as Category;
-        sponsorTimesSubmitting[this.props.index].actionType = 
-            this.actionTypeOptionRef?.current ? this.actionTypeOptionRef.current.value as ActionType : ActionType.Skip;
+        const category = this.categoryOptionRef.current.value as Category
+        sponsorTimesSubmitting[this.props.index].category = category;
+
+        const inputActionType = this.actionTypeOptionRef?.current?.value as ActionType;
+        const actionType = inputActionType && CompileConfig.categorySupport[category]?.includes(inputActionType) ? inputActionType as ActionType 
+                                : CompileConfig.categorySupport[category]?.[0] ?? ActionType.Skip;
+        sponsorTimesSubmitting[this.props.index].actionType = actionType;
 
         Config.config.segmentTimes.set(this.props.contentContainer().sponsorVideoID, sponsorTimesSubmitting);
 

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/render/CategoryPill.tsx

@@ -23,8 +23,8 @@ export class CategoryPill {
             vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>): Promise<void> {
         const referenceNode = 
             await GenericUtils.wait(() => 
-                // YouTube, Mobile YouTube, Invidious
-                document.querySelector(".ytd-video-primary-info-renderer.title, .slim-video-information-title, #player-container + .h-box > h1") as HTMLElement);
+                // New YouTube Title, YouTube, Mobile YouTube, Invidious
+                document.querySelector("#title h1, .ytd-video-primary-info-renderer.title, .slim-video-information-title, #player-container + .h-box > h1") as HTMLElement);
 
         if (referenceNode && !referenceNode.contains(this.container)) {
             this.container = document.createElement('span');

src/utils/categoryUtils.ts

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

src/utils/noticeUtils.ts

@@ -16,6 +16,6 @@ export function downvoteButtonColor(segments: SponsorTime[], actionState: SkipNo
         return (actionState === downvoteType) ? Config.config.colorPalette.red : Config.config.colorPalette.white;
     } else {
         // You dont have segment selectors so the lockbutton needs to be colored and cannot be selected.
-        return Config.config.isVip && segments[0].locked === 1 ? Config.config.colorPalette.locked : Config.config.colorPalette.white;
+        return Config.config.isVip && segments?.[0].locked === 1 ? Config.config.colorPalette.locked : Config.config.colorPalette.white;
     }
 }