Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-06 11:37:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2086 from Acors24/add-upcoming-notices

Browse Source 
add upcoming notices
This commit is contained in:
Ajay Ramachandran
2024-11-26 02:32:03 -05:00
committed by GitHub
parent 842f7b33b8 dbd51d026b
commit c1168582a9
9 changed files with 179 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/_locales

Submodule public/_locales updated: 8a2fa2acbb...ae9a9d8dc1

34
public/options/options.html
View File

@@ -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">

3
src/components/NoticeComponent.tsx
View File

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

34
src/components/SkipNoticeComponent.tsx
View File

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

2
src/config.ts
View File

@@ -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,

51
src/content.ts
View File

@@ -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();

6
src/render/SkipNotice.tsx
View File

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

66
src/render/UpcomingNotice.tsx Normal file
View File

@@ -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;

10
src/utils/categoryUtils.ts
View File

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