Add options for smaller and faded notice

src/components/CategorySkipOptionsComponent.tsx

@@ -61,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;
@@ -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;
         }
     }
 

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

@@ -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
 }