Merge pull request #895 from ajayyy/improvements

Highlight category improvements

9 files changed, 76 insertions, 26 deletions

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 1609ab07..0ba715fe 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -224,6 +224,24 @@
     "showNotice": {
         "message": "Show Notice Again"
     },
+    "showSkipNotice": {
+        "message": "Show Notice After A Segment Is Skipped"
+    },
+    "noticeVisibilityMode0": {
+        "message": "Full Size Skip Notices"
+    },
+    "noticeVisibilityMode1": {
+        "message": "Small Skip Notices for Auto Skip"
+    },
+    "noticeVisibilityMode2": {
+        "message": "All Small Skip Notices"
+    },
+    "noticeVisibilityMode3": {
+        "message": "Faded Skip Notices for Auto Skip"
+    },
+    "noticeVisibilityMode4": {
+        "message": "All Faded Skip Notices"
+    },
     "longDescription": {
         "message": "SponsorBlock lets you skip over sponsors, intros, outros, subscription reminders, and other annoying parts of YouTube videos. SponsorBlock is a crowdsourced browser extension that let's anyone submit the start and end time's of sponsored segments and other segments of YouTube videos. Once one person submits this information, everyone else with this extension will skip right over the sponsored segment. You can also skip over non music sections of music videos.",
         "description": "Full description of the extension on the store pages."
@@ -356,9 +374,6 @@
     "createdBy": {
         "message": "Created By"
     },
-    "showSkipNotice": {
-        "message": "Show Notice After A Segment Is Skipped"
-    },
     "keybindCurrentlySet": {
         "message": ". It is currently set to:"
     },
diff --git a/public/options/options.css b/public/options/options.css
index 2990f193..e6dd3a01 100644
--- a/public/options/options.css
+++ b/public/options/options.css
@@ -349,7 +349,7 @@ svg {
     padding-bottom: 15px;
 }
 
-.categoryOptionsSelector {
+.optionsSelector {
     background-color: #c00000;
     color: white;
     
diff --git a/public/options/options.html b/public/options/options.html
index 52bce8e2..90a2e51f 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -210,9 +210,21 @@
 					</div>
 				</label>
 			</div>
-	
+
+			<br/>
 			<br/>
 			<br/>
+
+			<div option-type="selector" sync-option="noticeVisibilityMode">
+				<select class="selector-element optionsSelector" >
+					<option value="0">__MSG_noticeVisibilityMode0__</option>
+					<option value="1">__MSG_noticeVisibilityMode1__</option>
+					<option value="2">__MSG_noticeVisibilityMode2__</option>
+					<option value="3">__MSG_noticeVisibilityMode3__</option>
+					<option value="4">__MSG_noticeVisibilityMode4__</option>
+				</select>
+			</div>
+	
 			<br/>
 			<br/>
 
diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx
index fe0f180f..1095f5fe 100644
--- a/src/components/CategorySkipOptionsComponent.tsx
+++ b/src/components/CategorySkipOptionsComponent.tsx
@@ -3,9 +3,7 @@ import * as React from "react";
 import Config from "../config"
 import { Category, CategorySkipOption } from "../types";
 
-import Utils from "../utils";
 import { getCategoryActionType } from "../utils/categoryUtils";
-const utils = new Utils();
 
 export interface CategorySkipOptionsProps { 
     category: Category;
@@ -63,7 +61,7 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
                     <td id={this.props.category + "SkipOption"}
                         className="skipOption">
                         <select
-                            className="categoryOptionsSelector"
+                            className="optionsSelector"
                             defaultValue={defaultOption}
                             onChange={this.skipOptionSelected.bind(this)}>
                                 {this.getCategorySkipOptions()}
diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx
index b3231404..0af1efad 100644
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as CompileConfig from "../../config.json";
 import Config from "../config"
-import { Category, ContentContainer, CategoryActionType, SponsorHideType, SponsorTime } from "../types";
+import { Category, ContentContainer, CategoryActionType, SponsorHideType, SponsorTime, NoticeVisbilityMode } from "../types";
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 
@@ -156,7 +156,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 showInSecondSlot={this.showInSecondSlot}
                 idSuffix={this.idSuffix}
                 fadeIn={true}
-                startFaded={false}
+                startFaded={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll 
+                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)}
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
                 videoSpeed={() => this.contentContainer().v?.playbackRate}
diff --git a/src/config.ts b/src/config.ts
index f71b3b9f..f6153a5e 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,5 @@
 import * as CompileConfig from "../config.json";
-import { Category, CategorySelection, CategorySkipOption, PreviewBarOption, SponsorTime, StorageChangesObject, UnEncodedSegmentTimes as UnencodedSegmentTimes } from "./types";
+import { Category, CategorySelection, CategorySkipOption, NoticeVisbilityMode, PreviewBarOption, SponsorTime, StorageChangesObject, UnEncodedSegmentTimes as UnencodedSegmentTimes } from "./types";
 
 interface SBConfig {
     userID: string,
@@ -20,6 +20,7 @@ interface SBConfig {
     trackViewCount: boolean,
     trackViewCountInPrivate: boolean,
     dontShowNotice: boolean,
+    noticeVisibilityMode: NoticeVisbilityMode,
     hideVideoPlayerControls: boolean,
     hideInfoButtonPlayerControls: boolean,
     hideDeleteButtonPlayerControls: boolean,
@@ -162,6 +163,7 @@ const Config: SBObject = {
         trackViewCount: true,
         trackViewCountInPrivate: true,
         dontShowNotice: false,
+        noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
         hideVideoPlayerControls: false,
         hideInfoButtonPlayerControls: false,
         hideDeleteButtonPlayerControls: false,
diff --git a/src/options.ts b/src/options.ts
index ee04f1a5..dad0a52d 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -40,9 +40,10 @@ async function init() {
             continue;
         }
 
+        const option = optionsElements[i].getAttribute("sync-option");
+
         switch (optionsElements[i].getAttribute("option-type")) {
             case "toggle": {
-                const option = optionsElements[i].getAttribute("sync-option");
                 const optionResult = Config.config[option];
 
                 const checkbox = optionsElements[i].querySelector("input");
@@ -95,16 +96,15 @@ async function init() {
                 break;
             }
             case "text-change": {
-                const textChangeOption = optionsElements[i].getAttribute("sync-option");
                 const textChangeInput = <HTMLInputElement> optionsElements[i].querySelector(".option-text-box");
                 
                 const textChangeSetButton = <HTMLElement> optionsElements[i].querySelector(".text-change-set");
 
-                textChangeInput.value = Config.config[textChangeOption];
+                textChangeInput.value = Config.config[option];
 
                 textChangeSetButton.addEventListener("click", async () => {
                     // See if anything extra must be done
-                    switch (textChangeOption) {
+                    switch (option) {
                         case "serverAddress": {
                             const result = validateServerAddress(textChangeInput.value);
 
@@ -130,7 +130,7 @@ async function init() {
                         }
                     }
 
-                    Config.config[textChangeOption] = textChangeInput.value;
+                    Config.config[option] = textChangeInput.value;
                 });
 
                 // Reset to the default if needed
@@ -138,9 +138,9 @@ async function init() {
                 textChangeResetButton.addEventListener("click", () => {
                     if (!confirm(chrome.i18n.getMessage("areYouSureReset"))) return;
 
-                    Config.config[textChangeOption] = Config.defaults[textChangeOption];
+                    Config.config[option] = Config.defaults[option];
 
-                    textChangeInput.value = Config.config[textChangeOption];
+                    textChangeInput.value = Config.config[option];
                 });
 
                 break;
@@ -175,30 +175,42 @@ async function init() {
 
                 break;
             }
-            case "display":{
+            case "display": {
                 updateDisplayElement(<HTMLElement> optionsElements[i])
                 break;
             }
             case "number-change": {
-                const numberChangeOption = optionsElements[i].getAttribute("sync-option");
-                const configValue = Config.config[numberChangeOption];
+                const configValue = Config.config[option];
                 const numberInput = optionsElements[i].querySelector("input");
 
                 if (isNaN(configValue) || configValue < 0) {
-                    numberInput.value = Config.defaults[numberChangeOption];
+                    numberInput.value = Config.defaults[option];
                 } else {
                     numberInput.value = configValue;
                 }
 
                 numberInput.addEventListener("input", () => {
-                    Config.config[numberChangeOption] = numberInput.value;
+                    Config.config[option] = numberInput.value;
                 });
 
                 break;
             }
+            case "selector": {
+                const configValue = Config.config[option];
+                const selectorElement = optionsElements[i].querySelector(".selector-element") as HTMLSelectElement;
+                selectorElement.value = configValue;
+
+                selectorElement.addEventListener("change", () => {
+                    let value: string | number = selectorElement.value;
+                    if (!isNaN(Number(value))) value = Number(value);
+
+                    Config.config[option] = value;
+                });
+                break;
+            }
             case "react-CategoryChooserComponent":
                 new CategoryChooser(optionsElements[i]);
-            break;
+                break;
         }
     }
 
diff --git a/src/render/SkipNotice.tsx b/src/render/SkipNotice.tsx
index ae1b4f67..bcba9d14 100644
--- a/src/render/SkipNotice.tsx
+++ b/src/render/SkipNotice.tsx
@@ -5,7 +5,8 @@ import Utils from "../utils";
 const utils = new Utils();
 
 import SkipNoticeComponent, { SkipNoticeAction } from "../components/SkipNoticeComponent";
-import { SponsorTime, ContentContainer } from "../types";
+import { SponsorTime, ContentContainer, NoticeVisbilityMode } from "../types";
+import Config from "../config";
 
 class SkipNotice {
     segments: SponsorTime[];
@@ -45,7 +46,8 @@ class SkipNotice {
                 contentContainer={contentContainer}
                 ref={this.skipNoticeRef}
                 closeListener={() => this.close()}
-                smaller={true}
+                smaller={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAll 
+                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)}
                 unskipTime={unskipTime} />,
             this.noticeElement
         );
diff --git a/src/types.ts b/src/types.ts
index e6506469..dd72ad4b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -199,4 +199,12 @@ export interface SkipToTimeParams {
 export interface ToggleSkippable {
     toggleSkip: () => void;
     setShowKeybindHint: (show: boolean) => void;
+}
+
+export enum NoticeVisbilityMode {
+    FullSize = 0,
+    MiniForAutoSkip = 1,
+    MiniForAll = 2,
+    FadedForAutoSkip = 3,
+    FadedForAll = 4
 }
\ No newline at end of file