From ae4f850ff4560a9ce7f7149355a4deff0a4db4f0 Mon Sep 17 00:00:00 2001
From: Acors24 <acors@protonmail.com>
Date: Tue, 3 Sep 2024 23:37:42 +0200
Subject: add upcoming notices

---
 public/options/options.html                | 12 ++++
 src/components/UpcomingNoticeComponent.tsx | 99 ++++++++++++++++++++++++++++++
 src/config.ts                              |  2 +
 src/content.ts                             | 39 +++++++++++-
 src/render/UpcomingNotice.tsx              | 54 ++++++++++++++++
 src/types.ts                               |  2 +
 src/utils/categoryUtils.ts                 | 10 ++-
 7 files changed, 216 insertions(+), 2 deletions(-)
 create mode 100644 src/components/UpcomingNoticeComponent.tsx
 create mode 100644 src/render/UpcomingNotice.tsx

diff --git a/public/options/options.html b/public/options/options.html
index b9258f33..e63b9837 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -209,6 +209,18 @@
 					<div class="small-description">__MSG_skipNoticeDurationDescription__</div>
 				</div>
 	
+				<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowUpcomingNotice">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="dontShowUpcomingNotice" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="dontShowUpcomingNotice">
+							__MSG_showUpcomingNotice__
+						</label>
+					</div>
+				</div>
+	
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
 					<div class="switch-container">
 						<label class="switch">
diff --git a/src/components/UpcomingNoticeComponent.tsx b/src/components/UpcomingNoticeComponent.tsx
new file mode 100644
index 00000000..71eb2d47
--- /dev/null
+++ b/src/components/UpcomingNoticeComponent.tsx
@@ -0,0 +1,99 @@
+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;
\ No newline at end of file
diff --git a/src/config.ts b/src/config.ts
index 3fbe23ba..0aff6355 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -31,6 +31,7 @@ interface SBConfig {
     trackDownvotes: boolean;
     trackDownvotesInPrivate: boolean;
     dontShowNotice: boolean;
+    dontShowUpcomingNotice: boolean;
     noticeVisibilityMode: NoticeVisbilityMode;
     hideVideoPlayerControls: boolean;
     hideInfoButtonPlayerControls: boolean;
@@ -293,6 +294,7 @@ const syncDefaults = {
     trackDownvotes: true,
     trackDownvotesInPrivate: false,
     dontShowNotice: false,
+    dontShowUpcomingNotice: false,
     noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
     hideVideoPlayerControls: false,
     hideInfoButtonPlayerControls: false,
diff --git a/src/content.ts b/src/content.ts
index 262b51c9..5a9af1d3 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -20,6 +20,7 @@ import Utils from "./utils";
 import PreviewBar, { PreviewBarSegment } from "./js-components/previewBar";
 import SkipNotice from "./render/SkipNotice";
 import SkipNoticeComponent from "./components/SkipNoticeComponent";
+import UpcomingNotice from "./render/UpcomingNotice";
 import SubmissionNotice from "./render/SubmissionNotice";
 import { Message, MessageResponse, VoteResponse } from "./messageTypes";
 import { SkipButtonControlBar } from "./js-components/skipButtonControlBar";
@@ -77,6 +78,7 @@ let importingChaptersWaiting = false;
 let triedImportingChapters = false;
 // List of open skip notices
 const skipNotices: SkipNotice[] = [];
+const upcomingNotices: UpcomingNotice[] = [];
 let activeSkipKeybindElement: ToggleSkippable = null;
 let retryFetchTimeout: NodeJS.Timeout = null;
 let shownSegmentFailedToFetchWarning = false;
@@ -107,6 +109,7 @@ const lastNextChapterKeybind = {
 let currentSkipSchedule: NodeJS.Timeout = null;
 let currentSkipInterval: NodeJS.Timeout = null;
 let currentVirtualTimeInterval: NodeJS.Timeout = null;
+let currentUpcomingSchedule: NodeJS.Timeout = null;
 
 /** Has the sponsor been skipped */
 let sponsorSkipped: boolean[] = [];
@@ -177,6 +180,7 @@ const skipNoticeContentContainer: ContentContainer = () => ({
     sponsorTimes,
     sponsorTimesSubmitting,
     skipNotices,
+    upcomingNotices,
     sponsorVideoID: getVideoID(),
     reskipSponsorTime,
     updatePreviewBar,
@@ -417,6 +421,10 @@ function resetValues() {
         skipNotices.pop()?.close();
     }
 
+    for (let i = 0; i < upcomingNotices.length; i++) {
+        upcomingNotices.pop()?.close();
+    }
+
     hideDeArrowPromotion();
 }
 
@@ -601,6 +609,11 @@ function cancelSponsorSchedule(): void {
         clearInterval(currentSkipInterval);
         currentSkipInterval = null;
     }
+
+    if (currentUpcomingSchedule !== null) {
+        clearTimeout(currentUpcomingSchedule);
+        currentUpcomingSchedule = null;
+    }
 }
 
 /**
@@ -782,7 +795,17 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
 
             const offset = (isFirefoxOrSafari() && !isSafari() ? 600 : 150);
             // Schedule for right before to be more precise than normal timeout
-            currentSkipSchedule = setTimeout(skippingFunction, Math.max(0, delayTime - offset));
+            const offsetDelayTime = Math.max(0, delayTime - offset);
+            currentSkipSchedule = setTimeout(skippingFunction, offsetDelayTime);
+
+            // Show the notice only if the segment hasn't already started
+            if (!Config.config.dontShowUpcomingNotice && 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);
+            }
         }
     }
 }
@@ -1784,6 +1807,19 @@ 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;
+        }
+    }
+
+    const newUpcomingNotice = new UpcomingNotice(skippingSegments, skipNoticeContentContainer, timeLeft, autoSkip);
+    upcomingNotices.push(newUpcomingNotice);
+}
+
 function unskipSponsorTime(segment: SponsorTime, unskipTime: number = null, forceSeek = false) {
     if (segment.actionType === ActionType.Mute) {
         getVideo().muted = false;
@@ -2561,6 +2597,7 @@ function hotkeyListener(e: KeyboardEvent): void {
     } else if (keybindEquals(key, closeSkipNoticeKey)) {
         for (let i = 0; i < skipNotices.length; i++) {
             skipNotices.pop().close();
+            upcomingNotices.pop().close();
         }
 
         return;
diff --git a/src/render/UpcomingNotice.tsx b/src/render/UpcomingNotice.tsx
new file mode 100644
index 00000000..8c0aeffe
--- /dev/null
+++ b/src/render/UpcomingNotice.tsx
@@ -0,0 +1,54 @@
+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";
+const utils = new Utils();
+
+class UpcomingNotice {
+    segments: SponsorTime[];
+    // Contains functions and variables from the content script needed by the skip notice
+    contentContainer: ContentContainer;
+
+    noticeElement: HTMLDivElement;
+
+    upcomingNoticeRef: React.MutableRefObject<UpcomingNoticeComponent>;
+    root: Root;
+
+    constructor(segments: SponsorTime[], contentContainer: ContentContainer, timeLeft: number, autoSkip: boolean) {
+        this.upcomingNoticeRef = React.createRef();
+
+        this.segments = segments;
+        this.contentContainer = contentContainer;
+
+        const referenceNode = utils.findReferenceNode();
+
+        this.noticeElement = document.createElement("div");
+        this.noticeElement.className = "sponsorSkipNoticeContainer";
+
+        referenceNode.prepend(this.noticeElement);
+
+        this.root = createRoot(this.noticeElement);
+        this.root.render(
+            <UpcomingNoticeComponent
+                segments={segments}
+                autoSkip={autoSkip}
+                contentContainer={contentContainer}
+                timeUntilSegment={timeLeft}
+                ref={this.upcomingNoticeRef}
+                closeListener={() => this.close()} />
+        );
+    }
+
+    close(): void {
+        this.root.unmount();
+
+        this.noticeElement.remove();
+
+        const upcomingNotices = this.contentContainer().upcomingNotices;
+        upcomingNotices.splice(upcomingNotices.indexOf(this), 1);
+    }
+}
+
+export default UpcomingNotice;
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index fdaee7b8..ed43fb97 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,7 @@
 import SubmissionNotice from "./render/SubmissionNotice";
 import SkipNoticeComponent from "./components/SkipNoticeComponent";
 import SkipNotice from "./render/SkipNotice";
+import UpcomingNotice from "./render/UpcomingNotice";
 
 export interface ContentContainer {
     (): {
@@ -10,6 +11,7 @@ export interface ContentContainer {
         sponsorTimes: SponsorTime[];
         sponsorTimesSubmitting: SponsorTime[];
         skipNotices: SkipNotice[];
+        upcomingNotices: UpcomingNotice[];
         sponsorVideoID;
         reskipSponsorTime: (segment: SponsorTime, forceSeek?: boolean) => void;
         updatePreviewBar: () => void;
diff --git a/src/utils/categoryUtils.ts b/src/utils/categoryUtils.ts
index d93c2c7b..38f4b8e9 100644
--- a/src/utils/categoryUtils.ts
+++ b/src/utils/categoryUtils.ts
@@ -36,6 +36,15 @@ export function getSkippingText(segments: SponsorTime[], autoSkip: boolean): str
     }
 }
 
+export function getUpcomingText(segments: SponsorTime[]): string {
+    const categoryName = chrome.i18n.getMessage(segments.length > 1 ? "multipleSegments" 
+        : "category_" + segments[0].category + "_short") || chrome.i18n.getMessage("category_" + segments[0].category);
+        
+    const messageId = "upcoming";
+    return chrome.i18n.getMessage(messageId).replace("{0}", categoryName);
+}
+
+
 export function getCategorySuffix(category: Category): string {
     if (category.startsWith("poi_")) {
         return "_POI";
@@ -51,5 +60,4 @@ export function getCategorySuffix(category: Category): string {
 export function shortCategoryName(categoryName: string): string {
     return chrome.i18n.getMessage("category_" + categoryName + "_short") || chrome.i18n.getMessage("category_" + categoryName);
 }
-
 export const DEFAULT_CATEGORY = "chooseACategory";
\ No newline at end of file
-- 
cgit v1.2.3


From 5577b38e2b0582c1dc0b54dbb7efb751823e6444 Mon Sep 17 00:00:00 2001
From: Acors24 <acors@protonmail.com>
Date: Wed, 4 Sep 2024 00:15:17 +0200
Subject: fix upcoming notice closing

---
 src/content.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/content.ts b/src/content.ts
index 5a9af1d3..3fc59cdf 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -2597,6 +2597,9 @@ function hotkeyListener(e: KeyboardEvent): void {
     } else if (keybindEquals(key, closeSkipNoticeKey)) {
         for (let i = 0; i < skipNotices.length; i++) {
             skipNotices.pop().close();
+        }
+        
+        for (let i = 0; i < upcomingNotices.length; i++) {
             upcomingNotices.pop().close();
         }
 
-- 
cgit v1.2.3


From 7ca3b699657cf46ccf27e4e9a9a19bd84dcdfa9b Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Tue, 3 Sep 2024 18:45:55 -0400
Subject: update locales repo

---
 public/_locales | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/_locales b/public/_locales
index 7cedce21..746bc3c8 160000
--- a/public/_locales
+++ b/public/_locales
@@ -1 +1 @@
-Subproject commit 7cedce215851872be28bd50a9f690b680dd54442
+Subproject commit 746bc3c844bd879c828213863d33baf2dd7a945a
-- 
cgit v1.2.3


From dfdc052f4bcd0f4d2f50a37ef4763e3a1af5024d Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Tue, 3 Sep 2024 20:04:33 -0400
Subject: Change upcoming notice default

---
 public/options/options.html | 26 ++++++++++++++------------
 src/config.ts               |  4 ++--
 src/content.ts              |  2 +-
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/public/options/options.html b/public/options/options.html
index e63b9837..2a19599c 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -209,19 +209,21 @@
 					<div class="small-description">__MSG_skipNoticeDurationDescription__</div>
 				</div>
 	
-				<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowUpcomingNotice">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="dontShowUpcomingNotice" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="dontShowUpcomingNotice">
-							__MSG_showUpcomingNotice__
-						</label>
-					</div>
-				</div>
-	
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
+					<div data-type="toggle" data-sync="showUpcomingNotice">
+						<div class="switch-container">
+							<label class="switch">
+								<input id="showUpcomingNotice" type="checkbox" checked>
+								<span class="slider round"></span>
+							</label>
+							<label class="switch-label" for="showUpcomingNotice">
+								__MSG_showUpcomingNotice__
+							</label>
+						</div>
+					</div>
+
+					<br/>
+
 					<div class="switch-container">
 						<label class="switch">
 							<input id="dontShowNotice" type="checkbox" checked>
diff --git a/src/config.ts b/src/config.ts
index 0aff6355..7ce24123 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -31,7 +31,7 @@ interface SBConfig {
     trackDownvotes: boolean;
     trackDownvotesInPrivate: boolean;
     dontShowNotice: boolean;
-    dontShowUpcomingNotice: boolean;
+    showUpcomingNotice: boolean;
     noticeVisibilityMode: NoticeVisbilityMode;
     hideVideoPlayerControls: boolean;
     hideInfoButtonPlayerControls: boolean;
@@ -294,7 +294,7 @@ const syncDefaults = {
     trackDownvotes: true,
     trackDownvotesInPrivate: false,
     dontShowNotice: false,
-    dontShowUpcomingNotice: false,
+    showUpcomingNotice: false,
     noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
     hideVideoPlayerControls: false,
     hideInfoButtonPlayerControls: false,
diff --git a/src/content.ts b/src/content.ts
index 3fc59cdf..db60e7b9 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -799,7 +799,7 @@ async function startSponsorSchedule(includeIntersectingSegments = false, current
             currentSkipSchedule = setTimeout(skippingFunction, offsetDelayTime);
 
             // Show the notice only if the segment hasn't already started
-            if (!Config.config.dontShowUpcomingNotice && getCurrentTime() < skippingSegments[0].segment[0]) {
+            if (Config.config.showUpcomingNotice && getCurrentTime() < skippingSegments[0].segment[0]) {
                 const maxPopupTime = 3000;
                 const timeUntilPopup = Math.max(0, offsetDelayTime - maxPopupTime);
                 const popupTime = offsetDelayTime - timeUntilPopup;
-- 
cgit v1.2.3


From 3a488a9110be1c3d33edc09aa5cbf3450742837f Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Tue, 26 Nov 2024 02:25:42 -0500
Subject: Fix upcoming notice behavior

---
 src/components/NoticeComponent.tsx         |  3 +-
 src/components/SkipNoticeComponent.tsx     | 34 ++++++----
 src/components/UpcomingNoticeComponent.tsx | 99 ------------------------------
 src/content.ts                             | 47 +++++++-------
 src/render/SkipNotice.tsx                  |  6 +-
 src/render/UpcomingNotice.tsx              | 32 +++++++---
 src/types.ts                               |  2 -
 7 files changed, 76 insertions(+), 147 deletions(-)
 delete mode 100644 src/components/UpcomingNoticeComponent.tsx

diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx
index 56a96378..a6dcb768 100644
--- 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");
diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx
index 32270f9c..73612d2a 100644
--- 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
             });
diff --git a/src/components/UpcomingNoticeComponent.tsx b/src/components/UpcomingNoticeComponent.tsx
deleted file mode 100644
index 71eb2d47..00000000
--- a/src/components/UpcomingNoticeComponent.tsx
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/src/content.ts b/src/content.ts
index db60e7b9..88dfefcf 100644
--- 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();
diff --git a/src/render/SkipNotice.tsx b/src/render/SkipNotice.tsx
index a5c83fd9..c58cef4c 100644
--- 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} />
         );
     }
 
diff --git a/src/render/UpcomingNotice.tsx b/src/render/UpcomingNotice.tsx
index 8c0aeffe..3b8e4f90 100644
--- 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}
-                autoSkip={autoSkip}
+            <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;
     }
 }
 
diff --git a/src/types.ts b/src/types.ts
index ed43fb97..fdaee7b8 100644
--- 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;
-- 
cgit v1.2.3


From 61f1a8918c4bd92f722c7cfa048f82a18fd0edb5 Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Tue, 26 Nov 2024 02:25:52 -0500
Subject: Fix upcoming notice toggles on options page

---
 public/options/options.html | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/public/options/options.html b/public/options/options.html
index 2a19599c..4af92937 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -209,7 +209,7 @@
 					<div class="small-description">__MSG_skipNoticeDurationDescription__</div>
 				</div>
 	
-				<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
+				<div>
 					<div data-type="toggle" data-sync="showUpcomingNotice">
 						<div class="switch-container">
 							<label class="switch">
@@ -224,14 +224,16 @@
 
 					<br/>
 
-					<div class="switch-container">
-						<label class="switch">
-							<input id="dontShowNotice" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="dontShowNotice">
-							__MSG_showSkipNotice__
-						</label>
+					<div data-type="toggle" data-toggle-type="reverse" data-sync="dontShowNotice">
+						<div class="switch-container">
+							<label class="switch">
+								<input id="dontShowNotice" type="checkbox" checked>
+								<span class="slider round"></span>
+							</label>
+							<label class="switch-label" for="dontShowNotice">
+								__MSG_showSkipNotice__
+							</label>
+						</div>
 					</div>
 
 					<div data-type="selector" data-sync="noticeVisibilityMode" data-dependent-on="dontShowNotice">
-- 
cgit v1.2.3