Fix upcoming notice behavior

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

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

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;