Added category update info on the notice

6 files changed, 46 insertions, 4 deletions

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 4389af20..935eabed 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -617,5 +617,11 @@
     "readTheGuidelines": {
         "message": "Read The Guidelines!!",
         "description": "Show the first time they submit or if they are \"high risk\""
+    },
+    "categoryUpdate1": {
+        "message": "Categories are here!"
+    },
+    "categoryUpdate2": {
+        "message": "Open the options to skip intros, outros, merch, etc."
     }
 }
diff --git a/src/components/NoticeTextSectionComponent.tsx b/src/components/NoticeTextSectionComponent.tsx
index 839d7448..faed5704 100644
--- a/src/components/NoticeTextSectionComponent.tsx
+++ b/src/components/NoticeTextSectionComponent.tsx
@@ -2,7 +2,8 @@ import * as React from "react";
 
 export interface NoticeTextSelectionProps {
     text: string,
-    idSuffix: string
+    idSuffix: string,
+    onClick?: (event: React.MouseEvent) => any
 }
 
 export interface NoticeTextSelectionState {
@@ -16,8 +17,16 @@ class NoticeTextSelectionComponent extends React.Component<NoticeTextSelectionPr
     }
 
     render() {
+        let style: React.CSSProperties = {};
+        if (this.props.onClick) {
+            style.cursor = "pointer";
+            style.textDecoration = "underline"
+        }
+
         return (
             <p id={"sponsorTimesInfoMessage" + this.props.idSuffix}
+                onClick={this.props.onClick}
+                style={style}
                 className="sponsorTimesInfoMessage">
                     {this.props.text}
             </p>
diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx
index 4aedacec..022490d0 100644
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -31,6 +31,7 @@ export interface SkipNoticeState {
     noticeTitle: string;
 
     messages: string[];
+    messageOnClick: (event: React.MouseEvent) => any;
 
     countdownTime: number;
     maxCountdownTime: () => number;
@@ -105,6 +106,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         this.state = {
             noticeTitle,
             messages: [],
+            messageOnClick: null,
 
             //the countdown until this notice closes
             maxCountdownTime: () => 4,
@@ -132,6 +134,13 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             this.audio.volume = this.contentContainer().v.volume * 0.1;
             this.audio.play();
         }
+
+        if (Config.config.categoryUpdateShowCount < 3 && Config.config.categorySelections.length <= 1) {
+            this.setNoticeInfoMessageWithOnClick(() => chrome.runtime.sendMessage({"message": "openConfig"})
+                , chrome.i18n.getMessage("categoryUpdate1"), chrome.i18n.getMessage("categoryUpdate2"));
+
+            Config.config.categoryUpdateShowCount = Config.config.categoryUpdateShowCount + 1
+        }
     }
 
     render() {
@@ -325,6 +334,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
             elements.push(
                 <NoticeTextSelectionComponent idSuffix={this.idSuffix}
                     text={this.state.messages[i]}
+                    onClick={this.state.messageOnClick}
                     key={i}>
                 </NoticeTextSelectionComponent>
             )
@@ -505,6 +515,13 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         }
     }
 
+    setNoticeInfoMessageWithOnClick(onClick: (event: React.MouseEvent) => any, ...messages: string[]) {
+        this.setState({
+            messages,
+            messageOnClick: (event) => onClick(event)
+        });
+    }
+
     setNoticeInfoMessage(...messages: string[]) {
         this.setState({
             messages
diff --git a/src/config.ts b/src/config.ts
index 2e82d4f1..d60cdf0d 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -30,9 +30,10 @@ interface SBConfig {
     minDuration: number,
     audioNotificationOnSkip,
     checkForUnlistedVideos: boolean,
-    mobileUpdateShowCount: number,
     testingServer: boolean,
 
+    categoryUpdateShowCount: number,
+
     // What categories should be skipped
     categorySelections: CategorySelection[],
 
@@ -146,9 +147,10 @@ var Config: SBObject = {
         minDuration: 0,
         audioNotificationOnSkip: false,
         checkForUnlistedVideos: false,
-        mobileUpdateShowCount: 0,
         testingServer: false,
 
+        categoryUpdateShowCount: 0,
+
         categorySelections: [{
             name: "sponsor",
             option: CategorySkipOption.AutoSkip
@@ -325,6 +327,11 @@ async function migrateOldFormats() {
         chrome.storage.sync.remove("autoUpvote");
     }
 
+    // mobileUpdateShowCount removal
+    if (Config.config["mobileUpdateShowCount"] !== undefined) {
+        chrome.storage.sync.remove("mobileUpdateShowCount");
+    }
+
     // Channel URLS
     if (Config.config.whitelistedChannels.length > 0 && 
             (Config.config.whitelistedChannels[0] == null || Config.config.whitelistedChannels[0].includes("/"))) {
diff --git a/src/content.ts b/src/content.ts
index c2642333..6a44dfcf 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -955,7 +955,7 @@ function skipToTime(v: HTMLVideoElement, skipTime: number[], skippingSegments: S
     if (openNotice) {
         //send out the message saying that a sponsor message was skipped
         if (!Config.config.dontShowNotice || !autoSkip) {
-            let skipNotice = new SkipNotice(skippingSegments, autoSkip, skipNoticeContentContainer);
+            new SkipNotice(skippingSegments, autoSkip, skipNoticeContentContainer);
         }
     }
 
diff --git a/src/render/SkipNotice.tsx b/src/render/SkipNotice.tsx
index 4b969098..81f4c026 100644
--- a/src/render/SkipNotice.tsx
+++ b/src/render/SkipNotice.tsx
@@ -12,6 +12,8 @@ class SkipNotice {
 
     noticeElement: HTMLDivElement;
 
+    skipNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
+
     constructor(segments: SponsorTime[], autoSkip: boolean = false, contentContainer) {
         this.segments = segments;
         this.autoSkip = autoSkip;
@@ -51,6 +53,7 @@ class SkipNotice {
             <SkipNoticeComponent segments={segments} 
                 autoSkip={autoSkip} 
                 contentContainer={contentContainer}
+                ref={this.skipNoticeRef}
                 closeListener={() => this.close()} />,
             this.noticeElement
         );