Merge pull request #99 from hanydd/feature-advance-notice

跳过提示框提前出现

public/_locales/en/messages.json

@@ -258,7 +258,7 @@
         "message": "重新显示空降提醒"
     },
     "showSkipNotice": {
-        "message": "在跳过片段后显示提醒弹窗"
+        "message": "跳过片段时显示提醒弹窗"
     },
     "showCategoryGuidelines": {
         "message": "显示类别说明"
@@ -367,6 +367,14 @@
         "message": "要跳到 {0} 吗?",
         "description": "Used for skipping to things (Skip to Highlight)"
     },
+    "autoSkipped": {
+        "message": "{0} 准备跳过",
+        "description": "Example: Ready Sponsor Skipped"
+    },
+    "autoMuted": {
+        "message": "{0} 准备静音",
+        "description": "Example: Ready Sponsor Muted"
+    },
     "skipped": {
         "message": "{0} 已跳过",
         "description": "Example: Sponsor Skipped"
@@ -471,11 +479,20 @@
     "optionSectionExtensionRelated": {
         "message": "插件相关选项"
     },
+    "advanceSkipNotice": {
+        "message": "提前显示“空降提醒弹窗”（仅启用＂自动跳过＂的片段）"
+    },
+    "skipNoticeDurationBefore": {
+        "message": "“空降提醒弹窗”提前显示时间（秒）："
+    },
+    "skipNoticeDurationBeforeDescription": {
+        "message": "提前提醒您跳过片段的弹窗的提前时间。"
+    },
     "skipNoticeDuration": {
-        "message": "“空降提醒弹窗”显示持续时间（秒）："
+        "message": "“空降提醒弹窗”跳过后或跳过提醒显示时间（秒）："
     },
     "skipNoticeDurationDescription": {
-        "message": "提醒您跳过片段的弹窗的显示时长。手动跳过片段的提醒弹窗可能会显示更久。"
+        "message": "您跳过片段或者提醒您跳过片段的弹窗的显示时长。用于您对片段投票或跳过/取消跳过。\n手动跳过片段的提醒弹窗可能会显示更久。"
     },
     "shortCheck": {
         "message": "以下的提交短于您的最小持续时间选项。这代表它们可能已经被提交，只是由于该选项被忽略了。您确定要提交吗？"

public/_locales/zh_CN/messages.json

@@ -258,7 +258,7 @@
         "message": "重新显示空降提醒"
     },
     "showSkipNotice": {
-        "message": "在跳过片段后显示提醒弹窗"
+        "message": "跳过片段时显示提醒弹窗"
     },
     "showCategoryGuidelines": {
         "message": "显示类别说明"
@@ -367,6 +367,14 @@
         "message": "要跳到 {0} 吗?",
         "description": "Used for skipping to things (Skip to Highlight)"
     },
+    "autoSkipped": {
+        "message": "{0} 准备跳过",
+        "description": "Example: Ready Sponsor Skipped"
+    },
+    "autoMuted": {
+        "message": "{0} 准备静音",
+        "description": "Example: Ready Sponsor Muted"
+    },
     "skipped": {
         "message": "{0} 已跳过",
         "description": "Example: Sponsor Skipped"
@@ -471,11 +479,20 @@
     "optionSectionExtensionRelated": {
         "message": "插件相关选项"
     },
+    "advanceSkipNotice": {
+        "message": "提前显示“空降提醒弹窗”（仅启用＂自动跳过＂的片段）"
+    },
+    "skipNoticeDurationBefore": {
+        "message": "“空降提醒弹窗”提前显示时间（秒）："
+    },
+    "skipNoticeDurationBeforeDescription": {
+        "message": "提前提醒您跳过片段的弹窗的提前时间。"
+    },
     "skipNoticeDuration": {
-        "message": "“空降提醒弹窗”显示持续时间（秒）："
+        "message": "“空降提醒弹窗”跳过后或跳过提醒显示时间（秒）："
     },
     "skipNoticeDurationDescription": {
-        "message": "提醒您跳过片段的弹窗的显示时长。手动跳过片段的提醒弹窗可能会显示更久。"
+        "message": "您跳过片段或者提醒您跳过片段的弹窗的显示时长。用于您对片段投票或跳过/取消跳过。\n手动跳过片段的提醒弹窗可能会显示更久。"
     },
     "shortCheck": {
         "message": "以下的提交短于您的最小持续时间选项。这代表它们可能已经被提交，只是由于该选项被忽略了。您确定要提交吗？"
@@ -1187,7 +1204,7 @@
         "description": "This is used on the popup to show how much time left. It will look like \"5s\". The word {seconds} will be replaced, so keep it here. Translations should only change the \"s\""
     },
     "FillerWarning": {
-        "message": "Warning: This is an incredibly aggressive category. You most likely will have to unskip stuff, or disable it sometimes. Be warned that many videos have over 50% or more of the video skipped! However, remember that there are still specific guidelines to follow when submitting.",
+        "message": "警告：这是一个非常激进的分类。 您很可能会需要取消跳过某些内容，或者有时候需要禁用它。 请注意，许多视频的跳过率超过50%甚至更多！ 但是请记住，在提交时仍需遵守特定的指导原则。",
         "description": "Warning that appears when enabling the filler tangent category"
     },
     "cleanPopup": {

public/_locales/zh_TW/messages.json

@@ -258,7 +258,7 @@
         "message": "重新顯示跳過提醒"
     },
     "showSkipNotice": {
-        "message": "在跳過片段後顯示提醒跳出視窗"
+        "message": "跳過片段時顯示提醒跳出視窗"
     },
     "showCategoryGuidelines": {
         "message": "顯示類別說明"
@@ -367,6 +367,14 @@
         "message": "要跳到 {0} 嗎?",
         "description": "Used for skipping to things (Skip to Highlight)"
     },
+    "autoSkipped": {
+        "message": "{0} 準備跳過",
+        "description": "Example: Ready Sponsor Skipped"
+    },
+    "autoMuted": {
+        "message": "{0} 準備靜音",
+        "description": "Example: Ready Sponsor Muted"
+    },
     "skipped": {
         "message": "{0} 已跳過",
         "description": "Example: Sponsor Skipped"
@@ -471,11 +479,20 @@
     "optionSectionExtensionRelated": {
         "message": "插件相關選項"
     },
+    "advanceSkipNotice": {
+        "message": "提前顯示跳過提醒視窗（仅启用＂自动跳过＂的片段）"
+    },
+    "skipNoticeDurationBefore": {
+        "message": "跳過提醒提前跳出視窗時間（秒）："
+    },
+    "skipNoticeDurationBeforeDescription": {
+        "message": "跳過提醒提前跳出視窗的提前時常。"
+    },
     "skipNoticeDuration": {
-        "message": "跳過提醒跳出視窗持續時間（秒）："
+        "message": "跳過后或跳過提醒顯示時間（秒）："
     },
     "skipNoticeDurationDescription": {
-        "message": "跳過提醒跳出視窗的顯示時常。手動跳過的提醒可能會顯示更久。"
+        "message": "您跳過片段或者跳過提醒跳出視窗的顯示時常。用於您對片段進行投票或者跳過/取消跳過。\n手動跳過的提醒可能會顯示更久。"
     },
     "shortCheck": {
         "message": "以下的提交短於您的最小持續時間選項。這代表它們可能已經被提交，只是由於該選項被忽略了。您確定要提交嗎？"

public/options/options.html

@@ -194,10 +194,34 @@ <h3>__MSG_optionSectionSkipNotice__</h3>
 							<span class="optionLabel">__MSG_skipNoticeDuration__</span>
 							<input type="number" step="1" min="1">
 						</label>
-
+					
 						<div class="small-description">__MSG_skipNoticeDurationDescription__</div>
 					</div>
 
+					<div data-type="toggle" data-toggle-type="switch" data-sync="advanceSkipNotice">
+						<div class="switch-container">
+							<label class="switch">
+								<input id="advanceSkipNotice" type="checkbox" checked>
+								<span class="slider round"></span>
+							</label>
+							<label class="switch-label" for="advanceSkipNotice">
+								__MSG_advanceSkipNotice__
+							</label>
+						</div>
+
+						<div data-type="number-change" data-sync="skipNoticeDurationBefore" data-dependent-on="advanceSkipNotice">
+							<br />
+
+							<label class="number-container">
+								<span class="optionLabel">__MSG_skipNoticeDurationBefore__</span>
+								<input type="number" step="1" min="1">
+							</label>
+							<span > + 1 </span>
+
+							<div class="small-description">__MSG_skipNoticeDurationBeforeDescription__</div>
+						</div>
+					</div>
+
 					<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
 						<div class="switch-container">
 							<label class="switch">

public/shared.css

@@ -15,7 +15,7 @@
 }
 
 .sponsorSkipNoticeParent {
-	min-width: 390px;
+	min-width: 410px;
 	max-width: 50%;
 }
 

src/components/NoticeComponent.tsx

@@ -19,6 +19,8 @@ export interface NoticeProps {
     idSuffix?: string;
 
     fadeIn?: boolean;
+    fadeOut?: boolean;
+
     startFaded?: boolean;
     firstColumn?: React.ReactElement[] | React.ReactElement;
     firstRow?: React.ReactElement;
@@ -39,6 +41,8 @@ export interface NoticeProps {
     style?: React.CSSProperties;
     biggerCloseButton?: boolean;
     children?: React.ReactNode;
+
+    advanceSkipNoticeShow: boolean;
 }
 
 interface MouseDownInfo {
@@ -84,6 +88,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
         this.parentRef = React.createRef();
 
         const maxCountdownTime = () => {
+            if (this.props.advanceSkipNoticeShow) return Number(Config.config.skipNoticeDurationBefore) + 1;
             if (this.props.maxCountdownTime) return this.props.maxCountdownTime();
             else return Config.config.skipNoticeDuration;
         };
@@ -342,7 +347,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
             return;
         }
 
-        if (countdownTime == 3) {
+        if (countdownTime == 3 && !this.props.fadeOut) {
             //start fade out animation
             const notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
             notice?.style.removeProperty("animation");

src/components/SkipNoticeComponent.tsx

@@ -11,7 +11,7 @@ import {
     SponsorTime,
 } from "../types";
 import Utils from "../utils";
-import { getSkippingText } from "../utils/categoryUtils";
+import { getSkippingText, getAdvanceSkipText } from "../utils/categoryUtils";
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 const utils = new Utils();
@@ -36,14 +36,21 @@ export interface SkipNoticeProps {
 
     autoSkip: boolean;
     startReskip?: boolean;
+    advanceSkipNotice?: boolean;
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: ContentContainer;
 
     closeListener: () => void;
     showKeybindHint?: boolean;
     smaller: boolean;
+    fadeIn: boolean;
+    fadeOut: boolean;
+
+    componentDidMount?: () => void;
 
     unskipTime?: number;
+
+    advanceSkipNoticeShow: boolean;
 }
 
 export interface SkipNoticeState {
@@ -79,6 +86,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     autoSkip: boolean;
     // Contains functions and variables from the content script needed by the skip notice
     contentContainer: ContentContainer;
+    advanceSkipNoticeShow: boolean;
 
     amountOfPreviousNotices: number;
     showInSecondSlot: boolean;
@@ -103,10 +111,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         this.segments = props.segments;
         this.autoSkip = props.autoSkip;
         this.contentContainer = props.contentContainer;
+        this.advanceSkipNoticeShow = props.advanceSkipNotice
 
-        const noticeTitle = getSkippingText(this.segments, this.props.autoSkip);
+        const noticeTitle = !this.props.advanceSkipNotice ? 
+            getSkippingText(this.segments, this.props.autoSkip) : getAdvanceSkipText(this.segments, this.props.autoSkip);
 
-        const previousSkipNotices = document.getElementsByClassName("sponsorSkipNoticeParent");
+        const previousSkipNotices = document.querySelectorAll(".sponsorSkipNoticeParent:not(.sponsorSkipUpcomingNotice)");
         this.amountOfPreviousNotices = previousSkipNotices.length;
         // If there is at least one already in the first slot
         this.showInSecondSlot =
@@ -195,7 +205,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 amountOfPreviousNotices={this.amountOfPreviousNotices}
                 showInSecondSlot={this.showInSecondSlot}
                 idSuffix={this.idSuffix}
-                fadeIn={true}
+                fadeIn={this.props.fadeIn}
+                fadeOut={!this.props.fadeOut}
                 startFaded={
                     Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll ||
                     (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)
@@ -210,12 +221,20 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 logoFill={Config.config.barTypes[this.segments[0].category].color}
                 limitWidth={true}
                 firstColumn={firstColumn}
-                bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow()]}
+                bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
+                extraClass={this.props.advanceSkipNotice ? "sponsorSkipUpcomingNotice" : ""}
                 onMouseEnter={() => this.onMouseEnter()}
+                advanceSkipNoticeShow={this.advanceSkipNoticeShow}
             ></NoticeComponent>
         );
     }
 
+    componentDidMount(): void {
+        if (this.props.componentDidMount) {
+            this.props.componentDidMount();
+        }
+    }
+
     getBottomRow(): JSX.Element[] {
         return [
             /* Bottom Row */
@@ -415,8 +434,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                     : this.unselectedColor,
             };
 
+            const showSkipButton = (buttonIndex !== 0 || this.props.smaller || this.segments[0].actionType === ActionType.Mute);
+
             return (
-                <span className="sponsorSkipNoticeUnskipSection">
+                <span className="sponsorSkipNoticeUnskipSection" style={{ visibility: !showSkipButton ? "hidden" : null }}>
                     <button
                         id={"sponsorSkipUnskipButton" + this.idSuffix}
                         className="sponsorSkipObject sponsorSkipNoticeButton"
@@ -478,7 +499,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     onMouseEnter(): void {
-        if (this.state.smaller) {
+        if (this.state.smaller && !this.props.advanceSkipNotice) {
             this.setState({
                 smaller: false,
             });
@@ -678,20 +699,31 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     }
 
     unskip(buttonIndex: number, index: number, forceSeek: boolean): void {
-        this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek);
+        if (this.props.advanceSkipNoticeShow && getVideo().currentTime < this.segments[0].segment[0]) {
+            sessionStorage.setItem('SKIPPING', 'false');
+        } else {
+            this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek);
+            document.querySelector("#sponsorSkipMessage"+ this.idSuffix).textContent = getSkippingText(this.segments, this.props.autoSkip)
+        }
 
         this.unskippedMode(buttonIndex, index, SkipButtonState.Redo);
     }
 
     reskip(buttonIndex: number, index: number, forceSeek: boolean): void {
-        this.contentContainer().reskipSponsorTime(this.segments[index], forceSeek);
+        if (this.props.advanceSkipNoticeShow && getVideo().currentTime < this.segments[0].segment[0]) {
+            sessionStorage.setItem('SKIPPING', 'true');
+        } else {
+            this.contentContainer().reskipSponsorTime(this.segments[index], forceSeek);
+            document.querySelector("#sponsorSkipMessage"+ this.idSuffix).textContent = getSkippingText(this.segments, this.props.autoSkip)
+        }
 
         const skipButtonStates = this.state.skipButtonStates;
         skipButtonStates[buttonIndex] = SkipButtonState.Undo;
 
         const skipButtonCallbacks = this.state.skipButtonCallbacks;
         skipButtonCallbacks[buttonIndex] = this.unskip.bind(this);
 
+
         const newState: SkipNoticeState = {
             skipButtonStates,
             skipButtonCallbacks,

src/components/SubmissionNoticeComponent.tsx

@@ -147,6 +147,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
                         closeListener={this.cancel.bind(this)}
                         zIndex={5000}
                         firstColumn={[sortButton, exportButton]}
+                        advanceSkipNoticeShow={false}
                     >
                         {/* Text Boxes */}
                         {this.getMessageBoxes()}

src/config.ts

@@ -57,6 +57,8 @@ interface SBConfig {
     serverAddress: string;
     minDuration: number;
     skipNoticeDuration: number;
+    skipNoticeDurationBefore: number;
+    advanceSkipNotice:boolean;
     audioNotificationOnSkip: boolean;
     checkForUnlistedVideos: boolean;
     testingServer: boolean;
@@ -239,6 +241,8 @@ const syncDefaults = {
     serverAddress: CompileConfig.serverAddress,
     minDuration: 0,
     skipNoticeDuration: 4,
+    skipNoticeDurationBefore: 3,
+    advanceSkipNotice:false,
     audioNotificationOnSkip: false,
     checkForUnlistedVideos: false,
     testingServer: false,