aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
m---------public/_locales0
-rw-r--r--public/options/options.html34
-rw-r--r--src/components/NoticeComponent.tsx3
-rw-r--r--src/components/SkipNoticeComponent.tsx34
-rw-r--r--src/config.ts2
-rw-r--r--src/content.ts51
-rw-r--r--src/render/SkipNotice.tsx6
-rw-r--r--src/render/UpcomingNotice.tsx66
-rw-r--r--src/utils/categoryUtils.ts10
9 files changed, 178 insertions, 28 deletions
diff --git a/public/_locales b/public/_locales
-Subproject 8a2fa2acbb0f9bcb1eb32589dd5b876adb43d15
+Subproject ae9a9d8dc136d381d3d1d9b779af3955f79433e
diff --git a/public/options/options.html b/public/options/options.html
index b9258f33..4af92937 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -209,15 +209,31 @@
<div class="small-description">__MSG_skipNoticeDurationDescription__</div>
</div>
- <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 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 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">
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/config.ts b/src/config.ts
index 383bfcf6..550f15f4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -31,6 +31,7 @@ interface SBConfig {
trackDownvotes: boolean;
trackDownvotesInPrivate: boolean;
dontShowNotice: boolean;
+ showUpcomingNotice: boolean;
noticeVisibilityMode: NoticeVisbilityMode;
hideVideoPlayerControls: boolean;
hideInfoButtonPlayerControls: boolean;
@@ -293,6 +294,7 @@ const syncDefaults = {
trackDownvotes: true,
trackDownvotesInPrivate: false,
dontShowNotice: false,
+ showUpcomingNotice: false,
noticeVisibilityMode: NoticeVisbilityMode.FadedForAutoSkip,
hideVideoPlayerControls: false,
hideInfoButtonPlayerControls: false,
diff --git a/src/content.ts b/src/content.ts
index fbb73bef..663edc8a 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 importingChaptersWaitingForFocus = false;
let importingChaptersWaiting = false;
// List of open skip notices
const skipNotices: SkipNotice[] = [];
+let upcomingNotice: UpcomingNotice | null = null;
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[] = [];
@@ -426,6 +429,11 @@ function resetValues() {
skipNotices.pop()?.close();
}
+ if (upcomingNotice) {
+ upcomingNotice.close();
+ upcomingNotice = null;
+ }
+
hideDeArrowPromotion();
}
@@ -606,6 +614,11 @@ function cancelSponsorSchedule(): void {
clearInterval(currentSkipInterval);
currentSkipInterval = null;
}
+
+ if (currentUpcomingSchedule !== null) {
+ clearTimeout(currentUpcomingSchedule);
+ currentUpcomingSchedule = null;
+ }
}
/**
@@ -787,7 +800,21 @@ 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.showUpcomingNotice && getCurrentTime() < skippingSegments[0].segment[0]) {
+ const maxPopupTime = 3000;
+ const timeUntilPopup = Math.max(0, offsetDelayTime - maxPopupTime);
+ 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);
+ }
+ }
}
}
}
@@ -1774,7 +1801,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);
@@ -1782,6 +1814,17 @@ function createSkipNotice(skippingSegments: SponsorTime[], autoSkip: boolean, un
activeSkipKeybindElement = newSkipNotice;
}
+function createUpcomingNotice(skippingSegments: SponsorTime[], timeLeft: number, autoSkip: boolean): void {
+ if (upcomingNotice
+ && !upcomingNotice.closed
+ && upcomingNotice.sameNotice(skippingSegments)) {
+ return;
+ }
+
+ upcomingNotice?.close();
+ upcomingNotice = new UpcomingNotice(skippingSegments, skipNoticeContentContainer, timeLeft, autoSkip);
+}
+
function unskipSponsorTime(segment: SponsorTime, unskipTime: number = null, forceSeek = false) {
if (segment.actionType === ActionType.Mute) {
getVideo().muted = false;
@@ -2562,7 +2605,9 @@ function hotkeyListener(e: KeyboardEvent): void {
for (let i = 0; i < skipNotices.length; i++) {
skipNotices.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
new file mode 100644
index 00000000..3b8e4f90
--- /dev/null
+++ b/src/render/UpcomingNotice.tsx
@@ -0,0 +1,66 @@
+import * as React from "react";
+import { createRoot, Root } from "react-dom/client";
+import { ContentContainer, SponsorTime } from "../types";
+
+import Utils from "../utils";
+import SkipNoticeComponent from "../components/SkipNoticeComponent";
+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<SkipNoticeComponent>;
+ root: Root;
+
+ closed = false;
+
+ 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(
+ <SkipNoticeComponent segments={segments}
+ autoSkip={autoSkip}
+ upcomingNotice={true}
+ contentContainer={contentContainer}
+ ref={this.upcomingNoticeRef}
+ closeListener={() => this.close()}
+ smaller={true}
+ fadeIn={true}
+ unskipTime={timeLeft} />
+ );
+ }
+
+ close(): void {
+ this.root.unmount();
+ this.noticeElement.remove();
+
+ 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;
+ }
+}
+
+export default UpcomingNotice; \ No newline at end of file
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
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-25 04:31:05 +0000