Merge pull request #895 from ajayyy/improvements

Highlight category improvements

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

public/options/options.css

@@ -349,7 +349,7 @@ svg {
     padding-bottom: 15px;
 }
 
-.categoryOptionsSelector {
+.optionsSelector {
     background-color: #c00000;
     color: white;
     

public/options/options.html

@@ -213,6 +213,18 @@
 
 			<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/>
 

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()}

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}

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,

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;
@@ -180,22 +180,34 @@ async function init() {
                 break;
             }
             case "number-change": {
-                const numberChangeOption = optionsElements[i].getAttribute("sync-option");
+                const configValue = Config.config[option];
-                const configValue = Config.config[numberChangeOption];
                 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;

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
         );

src/types.ts

@@ -200,3 +200,11 @@ export interface ToggleSkippable {
     toggleSkip: () => void;
     setShowKeybindHint: (show: boolean) => void;
 }
+
+export enum NoticeVisbilityMode {
+    FullSize = 0,
+    MiniForAutoSkip = 1,
+    MiniForAll = 2,
+    FadedForAutoSkip = 3,
+    FadedForAll = 4
+}