Fix upcoming notice behavior

2025-12-11 14:07:13 +03:00 · 2024-11-26 02:25:42 -05:00
parent dfdc052f4b
commit 3a488a9110
7 changed files with 76 additions and 147 deletions
--- a/src/components/NoticeComponent.tsx
+++ b/src/components/NoticeComponent.tsx
@@ -19,6 +19,7 @@ export interface NoticeProps {
    idSuffix?: string;

    fadeIn?: boolean;
+    fadeOut?: boolean;
    startFaded?: boolean;
    firstColumn?: React.ReactElement[] | React.ReactElement;
    firstRow?: React.ReactElement;
@@ -326,7 +327,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");
--- a/src/components/SkipNoticeComponent.tsx
+++ b/src/components/SkipNoticeComponent.tsx
@@ -6,7 +6,7 @@ import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 import Utils from "../utils";
 const utils = new Utils();
-import { getSkippingText } from "../utils/categoryUtils";
+import { getSkippingText, getUpcomingText } from "../utils/categoryUtils";

 import ThumbsUpSvg from "../svg-icons/thumbs_up_svg";
 import ThumbsDownSvg from "../svg-icons/thumbs_down_svg";
@@ -28,12 +28,16 @@ export interface SkipNoticeProps {

    autoSkip: boolean;
    startReskip?: boolean;
+    upcomingNotice?: boolean;
    // Contains functions and variables from the content script needed by the skip notice
    contentContainer: ContentContainer;

    closeListener: () => void;
    showKeybindHint?: boolean;
    smaller: boolean;
+    fadeIn: boolean;
+
+    componentDidMount?: () => void;

    unskipTime?: number;
 }
@@ -97,9 +101,9 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
        this.autoSkip = props.autoSkip;
        this.contentContainer = props.contentContainer;

-        const noticeTitle = getSkippingText(this.segments, this.props.autoSkip);
+        const noticeTitle = !this.props.upcomingNotice ? getSkippingText(this.segments, this.props.autoSkip) : getUpcomingText(this.segments);

-        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 = previousSkipNotices.length > 0 && [...previousSkipNotices].some(notice => !notice.classList.contains("secondSkipNotice"));
@@ -171,12 +175,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
            noticeStyle.transform = "scale(0.8) translate(10%, 10%)";
        }

-        // If it started out as smaller, always keep the
-        // skip button there
-        const showFirstSkipButton = this.props.smaller || this.segments[0].actionType === ActionType.Mute;
-        const firstColumn = showFirstSkipButton ? (
-            this.getSkipButton(0)
-        ) : null;
+        const firstColumn = this.getSkipButton(0);

        return (
            <NoticeComponent 
@@ -184,7 +183,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.upcomingNotice}
                startFaded={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll
                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)}
                timed={true}
@@ -197,12 +197,20 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                logoFill={Config.config.barTypes[this.segments[0].category].color}
                limitWidth={true}
                firstColumn={firstColumn}
+                dontPauseCountdown={!!this.props.upcomingNotice}
                bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
+                extraClass={this.props.upcomingNotice ? "sponsorSkipUpcomingNotice" : ""}
                onMouseEnter={() => this.onMouseEnter() } >
            </NoticeComponent>
        );
    }

+    componentDidMount(): void {
+        if (this.props.componentDidMount) {
+            this.props.componentDidMount();
+        }
+    }
+
    getBottomRow(): JSX.Element[] {
        return [
            /* Bottom Row */
@@ -365,8 +373,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                style.minWidth = "100px";
            }

+            const showSkipButton = (buttonIndex !== 0 || this.props.smaller || this.segments[0].actionType === ActionType.Mute) && !this.props.upcomingNotice;
+
            return (
-                <span className="sponsorSkipNoticeUnskipSection">
+                <span className="sponsorSkipNoticeUnskipSection" style={{ visibility: !showSkipButton ? "hidden" : null }}>
                    <button id={"sponsorSkipUnskipButton" + this.idSuffix}
                            className="sponsorSkipObject sponsorSkipNoticeButton"
                            style={style}
@@ -420,7 +430,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
    }

    onMouseEnter(): void {
-        if (this.state.smaller) {
+        if (this.state.smaller && !this.props.upcomingNotice) {
            this.setState({
                smaller: false
            });
--- a/src/components/UpcomingNoticeComponent.tsx
+++ b/src/components/UpcomingNoticeComponent.tsx
@@ -1,99 +0,0 @@
-import * as React from "react";
-import { ContentContainer, NoticeVisbilityMode, SponsorTime } from "../types";
-import NoticeComponent from "./NoticeComponent";
-import Config from "../config";
-import { getUpcomingText } from "../utils/categoryUtils";
-
-export interface UpcomingNoticeProps {
-    segments: SponsorTime[];
-
-    autoSkip: boolean;
-    timeUntilSegment: number;
-    contentContainer: ContentContainer;
-
-    closeListener: () => void;
-    showKeybindHint?: boolean;
-}
-
-class UpcomingNoticeComponent extends React.Component<UpcomingNoticeProps> {
-    noticeTitle: string;
-    segments: SponsorTime[];
-    autoSkip: boolean;
-    contentContainer: ContentContainer;
-
-    amountOfPreviousNotices: number;
-    timeUntilSegment: number;
-
-    idSuffix: string;
-
-    noticeRef: React.MutableRefObject<NoticeComponent>;
-
-    configListener: () => void;
-
-    constructor(props: UpcomingNoticeProps) {
-        super(props);
-        this.noticeRef = React.createRef();
-
-        this.segments = props.segments;
-        this.autoSkip = props.autoSkip;
-        this.contentContainer = props.contentContainer;
-        this.timeUntilSegment = props.timeUntilSegment;
-
-        const previousUpcomingNotices = document.getElementsByClassName("sponsorSkipNoticeParent");
-        this.amountOfPreviousNotices = previousUpcomingNotices.length;
-        
-        if (this.segments.length > 1) {
-            this.segments.sort((a, b) => a.segment[0] - b.segment[0]);
-        }
-        
-        // This is the suffix added at the end of every id
-        for (const segment of this.segments) {
-            this.idSuffix += segment.UUID;
-        }
-        this.idSuffix += this.amountOfPreviousNotices;
-
-        this.noticeTitle = getUpcomingText(this.segments);
-    }
-
-    render(): React.ReactElement {
-        const noticeStyle: React.CSSProperties = { };
-        if (this.contentContainer().onMobileYouTube) {
-            noticeStyle.bottom = "4em";
-            noticeStyle.transform = "scale(0.8) translate(10%, 10%)";
-        }
-
-        return (
-            <NoticeComponent
-                noticeTitle={this.noticeTitle}
-                amountOfPreviousNotices={this.amountOfPreviousNotices}
-                idSuffix={this.idSuffix}
-                fadeIn
-                startFaded={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll
-                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)}
-                timed
-                maxCountdownTime={() => Math.round(this.timeUntilSegment / 1000)}
-                style={noticeStyle}
-                biggerCloseButton={this.contentContainer().onMobileYouTube}
-                ref={this.noticeRef}
-                closeListener={() => this.closeListener()}
-                logoFill={Config.config.barTypes[this.segments[0].category].color}
-                limitWidth
-                dontPauseCountdown />
-        )
-    }
-
-    closeListener(): void {
-        this.clearConfigListener();
-
-        this.props.closeListener();
-    }
-
-    clearConfigListener(): void {
-        if (this.configListener) {
-            Config.configSyncListeners.splice(Config.configSyncListeners.indexOf(this.configListener), 1);
-            this.configListener = null;
-        }
-    }
-}
-
-export default UpcomingNoticeComponent;
--- a/src/content.ts
+++ b/src/content.ts
@@ -78,7 +78,7 @@ let importingChaptersWaiting = false;
 let triedImportingChapters = false;
 // List of open skip notices
 const skipNotices: SkipNotice[] = [];
-const upcomingNotices: UpcomingNotice[] = [];
+let upcomingNotice: UpcomingNotice | null = null;
 let activeSkipKeybindElement: ToggleSkippable = null;
 let retryFetchTimeout: NodeJS.Timeout = null;
 let shownSegmentFailedToFetchWarning = false;
@@ -180,7 +180,6 @@ const skipNoticeContentContainer: ContentContainer = () => ({
    sponsorTimes,
    sponsorTimesSubmitting,
    skipNotices,
-    upcomingNotices,
    sponsorVideoID: getVideoID(),
    reskipSponsorTime,
    updatePreviewBar,
@@ -421,8 +420,9 @@ function resetValues() {
        skipNotices.pop()?.close();
    }

-    for (let i = 0; i < upcomingNotices.length; i++) {
-        upcomingNotices.pop()?.close();
+    if (upcomingNotice) {
+        upcomingNotice.close();
+        upcomingNotice = null;
    }

    hideDeArrowPromotion();
@@ -802,9 +802,13 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
            if (Config.config.showUpcomingNotice && getCurrentTime() < skippingSegments[0].segment[0]) {
                const maxPopupTime = 3000;
                const timeUntilPopup = Math.max(0, offsetDelayTime - maxPopupTime);
-                const popupTime = offsetDelayTime - timeUntilPopup;
-                const autoSkip = shouldAutoSkip(skippingSegments[0])
-                currentUpcomingSchedule = setTimeout(createUpcomingNotice, timeUntilPopup, skippingSegments, popupTime, autoSkip);
+                const popupTime = Math.min(maxPopupTime, timeUntilPopup);
+                const autoSkip = shouldAutoSkip(skippingSegments[0]);
+
+                if (timeUntilPopup > 0) {
+                    if (currentUpcomingSchedule) clearTimeout(currentUpcomingSchedule);
+                    currentUpcomingSchedule = setTimeout(createUpcomingNotice, timeUntilPopup, skippingSegments, popupTime, autoSkip);
+                }
            }
        }
    }
@@ -1799,7 +1803,12 @@ function createSkipNotice(skippingSegments: SponsorTime[], autoSkip: boolean, un
        }
    }

-    const newSkipNotice = new SkipNotice(skippingSegments, autoSkip, skipNoticeContentContainer, unskipTime, startReskip);
+    const upcomingNoticeShown = !!upcomingNotice && !upcomingNotice.closed;
+
+    const newSkipNotice = new SkipNotice(skippingSegments, autoSkip, skipNoticeContentContainer, () => {
+        upcomingNotice?.close();
+        upcomingNotice = null;
+    }, unskipTime, startReskip, upcomingNoticeShown);
    if (isOnMobileYouTube() || Config.config.skipKeybind == null) newSkipNotice.setShowKeybindHint(false);
    skipNotices.push(newSkipNotice);

@@ -1807,17 +1816,15 @@ function createSkipNotice(skippingSegments: SponsorTime[], autoSkip: boolean, un
    activeSkipKeybindElement = newSkipNotice;
 }

-function createUpcomingNotice(skippingSegments: SponsorTime[], timeLeft: number, autoSkip: boolean) {
-    for (const upcomingNotice of upcomingNotices) {
-        if (skippingSegments.length === upcomingNotice.segments.length
-                && skippingSegments.every((segment) => upcomingNotice.segments.some((s) => s.UUID === segment.UUID))) {
-            // Upcoming notice already exists
-            return;
-        }
+function createUpcomingNotice(skippingSegments: SponsorTime[], timeLeft: number, autoSkip: boolean): void {
+    if (upcomingNotice 
+            && !upcomingNotice.closed
+            && upcomingNotice.sameNotice(skippingSegments)) {
+        return;
    }

-    const newUpcomingNotice = new UpcomingNotice(skippingSegments, skipNoticeContentContainer, timeLeft, autoSkip);
-    upcomingNotices.push(newUpcomingNotice);
+    upcomingNotice?.close();
+    upcomingNotice = new UpcomingNotice(skippingSegments, skipNoticeContentContainer, timeLeft, autoSkip);
 }

 function unskipSponsorTime(segment: SponsorTime, unskipTime: number = null, forceSeek = false) {
@@ -2599,10 +2606,8 @@ function hotkeyListener(e: KeyboardEvent): void {
            skipNotices.pop().close();
        }
        
-        for (let i = 0; i < upcomingNotices.length; i++) {
-            upcomingNotices.pop().close();
-        }
-
+        upcomingNotice?.close();
+        upcomingNotice = null;
        return;
    } else if (keybindEquals(key, startSponsorKey)) {
        startOrEndTimingNewSegment();
--- a/src/render/SkipNotice.tsx
+++ b/src/render/SkipNotice.tsx
@@ -20,7 +20,7 @@ class SkipNotice {
    skipNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
    root: Root;

-    constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, unskipTime: number = null, startReskip = false) {
+    constructor(segments: SponsorTime[], autoSkip = false, contentContainer: ContentContainer, componentDidMount: () => void, unskipTime: number = null, startReskip = false, upcomingNoticeShown: boolean) {
        this.skipNoticeRef = React.createRef();

        this.segments = segments;
@@ -53,7 +53,9 @@ class SkipNotice {
                closeListener={() => this.close()}
                smaller={Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAll 
                    || (Config.config.noticeVisibilityMode >= NoticeVisbilityMode.MiniForAutoSkip && autoSkip)}
-                unskipTime={unskipTime} />
+                fadeIn={!upcomingNoticeShown}
+                unskipTime={unskipTime}
+                componentDidMount={componentDidMount} />
        );
    }

--- a/src/render/UpcomingNotice.tsx
+++ b/src/render/UpcomingNotice.tsx
@@ -1,9 +1,9 @@
 import * as React from "react";
 import { createRoot, Root } from "react-dom/client";
 import { ContentContainer, SponsorTime } from "../types";
-import UpcomingNoticeComponent from "../components/UpcomingNoticeComponent";

 import Utils from "../utils";
+import SkipNoticeComponent from "../components/SkipNoticeComponent";
 const utils = new Utils();

 class UpcomingNotice {
@@ -13,9 +13,11 @@ class UpcomingNotice {

    noticeElement: HTMLDivElement;

-    upcomingNoticeRef: React.MutableRefObject<UpcomingNoticeComponent>;
+    upcomingNoticeRef: React.MutableRefObject<SkipNoticeComponent>;
    root: Root;

+    closed = false;
+
    constructor(segments: SponsorTime[], contentContainer: ContentContainer, timeLeft: number, autoSkip: boolean) {
        this.upcomingNoticeRef = React.createRef();

@@ -31,23 +33,33 @@ class UpcomingNotice {

        this.root = createRoot(this.noticeElement);
        this.root.render(
-            <UpcomingNoticeComponent
-                segments={segments}
+            <SkipNoticeComponent segments={segments} 
                autoSkip={autoSkip} 
+                upcomingNotice={true}
                contentContainer={contentContainer}
-                timeUntilSegment={timeLeft}
                ref={this.upcomingNoticeRef}
-                closeListener={() => this.close()} />
+                closeListener={() => this.close()}
+                smaller={true}
+                fadeIn={true}
+                unskipTime={timeLeft} />
        );
    }

    close(): void {
        this.root.unmount();
-
        this.noticeElement.remove();

-        const upcomingNotices = this.contentContainer().upcomingNotices;
-        upcomingNotices.splice(upcomingNotices.indexOf(this), 1);
+        this.closed = true;
+    }
+
+    sameNotice(segments: SponsorTime[]): boolean {
+        if (segments.length !== this.segments.length) return false;
+
+        for (let i = 0; i < segments.length; i++) {
+            if (segments[i].UUID !== this.segments[i].UUID) return false;
+        }
+
+        return true;
    }
 }

--- a/src/types.ts
+++ b/src/types.ts
@@ -1,7 +1,6 @@
 import SubmissionNotice from "./render/SubmissionNotice";
 import SkipNoticeComponent from "./components/SkipNoticeComponent";
 import SkipNotice from "./render/SkipNotice";
-import UpcomingNotice from "./render/UpcomingNotice";

 export interface ContentContainer {
    (): {
@@ -11,7 +10,6 @@ export interface ContentContainer {
        sponsorTimes: SponsorTime[];
        sponsorTimesSubmitting: SponsorTime[];
        skipNotices: SkipNotice[];
-        upcomingNotices: UpcomingNotice[];
        sponsorVideoID;
        reskipSponsorTime: (segment: SponsorTime, forceSeek?: boolean) => void;
        updatePreviewBar: () => void;