aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/NoticeComponent.tsx3
-rw-r--r--src/components/SkipNoticeComponent.tsx34
-rw-r--r--src/components/UpcomingNoticeComponent.tsx99
-rw-r--r--src/content.ts47
-rw-r--r--src/render/SkipNotice.tsx6
-rw-r--r--src/render/UpcomingNotice.tsx32
-rw-r--r--src/types.ts2
7 files changed, 76 insertions, 147 deletions
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;
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 05:54:32 +0000