Skip to content

Commit

Permalink
refactoring advance skip notice
Browse files Browse the repository at this point in the history
  • Loading branch information
@etherfun @hanydd
etherfun authored and hanydd committed Dec 9, 2024
1 parent 5cfcd76 commit d032910
Show file tree
Hide file tree
Showing 14 changed files with 266 additions and 72 deletions.
2 changes: 1 addition & 1 deletion public/_locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@
"message": "插件相关选项"
},
"advanceSkipNotice": {
"message": "提前显示“空降提醒弹窗”"
"message": "提前显示“空降提醒弹窗”（仅启用＂自动跳过＂的片段）"
},
"skipNoticeDurationBefore": {
"message": "“空降提醒弹窗”提前显示时间（秒）："
Expand Down
2 changes: 1 addition & 1 deletion public/_locales/zh_CN/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@
"message": "插件相关选项"
},
"advanceSkipNotice": {
"message": "提前显示“空降提醒弹窗”"
"message": "提前显示“空降提醒弹窗”（仅启用＂自动跳过＂的片段）"
},
"skipNoticeDurationBefore": {
"message": "“空降提醒弹窗”提前显示时间（秒）："
Expand Down
2 changes: 1 addition & 1 deletion public/_locales/zh_TW/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@
"message": "插件相關選項"
},
"advanceSkipNotice": {
"message": "提前顯示跳過提醒視窗"
"message": "提前顯示跳過提醒視窗（仅启用＂自动跳过＂的片段）"
},
"skipNoticeDurationBefore": {
"message": "跳過提醒提前跳出視窗時間（秒）："
Expand Down
1 change: 1 addition & 0 deletions public/options/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,7 @@ <h3>__MSG_optionSectionSkipNotice__</h3>
<span class="optionLabel">__MSG_skipNoticeDurationBefore__</span>
<input type="number" step="1" min="1">
</label>
<span > + 1 </span>

<div class="small-description">__MSG_skipNoticeDurationBeforeDescription__</div>
</div>
Expand Down
9 changes: 7 additions & 2 deletions src/components/NoticeComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ export interface NoticeProps {
idSuffix?: string;

fadeIn?: boolean;
fadeOut?: boolean;

startFaded?: boolean;
firstColumn?: React.ReactElement[] | React.ReactElement;
firstRow?: React.ReactElement;
Expand All @@ -39,6 +41,8 @@ export interface NoticeProps {
style?: React.CSSProperties;
biggerCloseButton?: boolean;
children?: React.ReactNode;

advanceSkipNoticeShow: boolean;
}

interface MouseDownInfo {
Expand Down Expand Up @@ -84,6 +88,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
this.parentRef = React.createRef();

const maxCountdownTime = () => {
if (this.props.advanceSkipNoticeShow) return Number(Config.config.skipNoticeDurationBefore) + 1;
if (this.props.maxCountdownTime) return this.props.maxCountdownTime();
else return Config.config.skipNoticeDuration;
};
Expand Down Expand Up @@ -310,7 +315,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
});
}

toggleManualPause(): void {
toggleManualPause = (): void => {
this.setState(
{
countdownMode:
Expand Down Expand Up @@ -342,7 +347,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");
Expand Down
67 changes: 35 additions & 32 deletions src/components/SkipNoticeComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
SponsorTime,
} from "../types";
import Utils from "../utils";
import { getSkippingText } from "../utils/categoryUtils";
import { getSkippingText, getAdvanceSkipText } from "../utils/categoryUtils";
import NoticeComponent from "./NoticeComponent";
import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
const utils = new Utils();
Expand All @@ -36,14 +36,21 @@ export interface SkipNoticeProps {

autoSkip: boolean;
startReskip?: boolean;
advanceSkipNotice?: boolean;
// Contains functions and variables from the content script needed by the skip notice
contentContainer: ContentContainer;

closeListener: () => void;
showKeybindHint?: boolean;
smaller: boolean;
fadeIn: boolean;
fadeOut: boolean;

componentDidMount?: () => void;

unskipTime?: number;

advanceSkipNoticeShow: boolean;
}

export interface SkipNoticeState {
Expand Down Expand Up @@ -79,6 +86,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
autoSkip: boolean;
// Contains functions and variables from the content script needed by the skip notice
contentContainer: ContentContainer;
advanceSkipNoticeShow: boolean;

amountOfPreviousNotices: number;
showInSecondSlot: boolean;
Expand All @@ -103,10 +111,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
this.segments = props.segments;
this.autoSkip = props.autoSkip;
this.contentContainer = props.contentContainer;
this.advanceSkipNoticeShow = props.advanceSkipNotice

const noticeTitle = getSkippingText(this.segments, this.props.autoSkip);
const noticeTitle = !this.props.advanceSkipNotice ?
getSkippingText(this.segments, this.props.autoSkip) : getAdvanceSkipText(this.segments, this.props.autoSkip);

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 =
Expand All @@ -128,15 +138,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
this.unselectedColor = Config.config.colorPalette.white;
this.lockedColor = Config.config.colorPalette.locked;

const calculateCountDown = () => {
if (Config.config.advanceSkipNotice && Config.config.skipNoticeDurationBefore > 0) {
return Config.config.skipNoticeDurationBefore + Config.config.skipNoticeDuration;
} else {
return Config.config.skipNoticeDuration;
}
};
const isMuteSegment = this.segments[0].actionType === ActionType.Mute;
const maxCountdownTime = isMuteSegment ? this.getFullDurationCountdown(0) : calculateCountDown;
const maxCountdownTime = isMuteSegment
? this.getFullDurationCountdown(0)
: () => Config.config.skipNoticeDuration;

const defaultSkipButtonState = this.props.startReskip ? SkipButtonState.Redo : SkipButtonState.Undo;
const skipButtonStates = [
Expand Down Expand Up @@ -200,7 +205,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.fadeOut}
startFaded={
Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAll ||
(Config.config.noticeVisibilityMode >= NoticeVisbilityMode.FadedForAutoSkip && this.autoSkip)
Expand All @@ -215,12 +221,20 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
logoFill={Config.config.barTypes[this.segments[0].category].color}
limitWidth={true}
firstColumn={firstColumn}
bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow()]}
bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
extraClass={this.props.advanceSkipNotice ? "sponsorSkipUpcomingNotice" : ""}
onMouseEnter={() => this.onMouseEnter()}
advanceSkipNoticeShow={this.advanceSkipNoticeShow}
></NoticeComponent>
);
}

componentDidMount(): void {
if (this.props.componentDidMount) {
this.props.componentDidMount();
}
}

getBottomRow(): JSX.Element[] {
return [
/* Bottom Row */
Expand Down Expand Up @@ -420,8 +434,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
: this.unselectedColor,
};

const showSkipButton = (buttonIndex !== 0 || this.props.smaller || this.segments[0].actionType === ActionType.Mute) && !this.props.advanceSkipNotice;

return (
<span className="sponsorSkipNoticeUnskipSection">
<span className="sponsorSkipNoticeUnskipSection" style={{ visibility: !showSkipButton ? "hidden" : null }}>
<button
id={"sponsorSkipUnskipButton" + this.idSuffix}
className="sponsorSkipObject sponsorSkipNoticeButton"
Expand Down Expand Up @@ -483,7 +499,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
}

onMouseEnter(): void {
if (this.state.smaller) {
if (this.state.smaller && !this.props.advanceSkipNotice) {
this.setState({
smaller: false,
});
Expand Down Expand Up @@ -697,26 +713,13 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
const skipButtonCallbacks = this.state.skipButtonCallbacks;
skipButtonCallbacks[buttonIndex] = this.unskip.bind(this);

let countDown: number;
if (Config.config.advanceSkipNotice && Config.config.skipNoticeDurationBefore > 0) {
if (this.props.segments[0].segment[0] > getVideo().currentTime) {
countDown = Config.config.skipNoticeDurationBefore + Config.config.skipNoticeDuration;
} else {
if (Config.config.skipNoticeDuration < 1) {
countDown = Config.config.skipNoticeDurationBefore;
} else {
countDown = Config.config.skipNoticeDuration;
}
}
} else {
countDown = Config.config.skipNoticeDuration;
}

const newState: SkipNoticeState = {
skipButtonStates,
skipButtonCallbacks,

maxCountdownTime: () => countDown,
countdownTime: countDown,
maxCountdownTime: () => Config.config.skipNoticeDuration,
countdownTime: Config.config.skipNoticeDuration,
};

//reset countdown
Expand Down Expand Up @@ -773,7 +776,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
(sponsorTime.segment[1] - getVideo().currentTime) * (1 / getVideo().playbackRate)
);

return Math.max(duration, Config.config.skipNoticeDurationBefore);
return Math.max(duration, Config.config.skipNoticeDuration);
};
}

Expand Down
1 change: 1 addition & 0 deletions src/components/SubmissionNoticeComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ class SubmissionNoticeComponent extends React.Component<SubmissionNoticeProps, S
closeListener={this.cancel.bind(this)}
zIndex={5000}
firstColumn={[sortButton, exportButton]}
advanceSkipNoticeShow={false}
>
{/* Text Boxes */}
{this.getMessageBoxes()}
Expand Down
2 changes: 1 addition & 1 deletion src/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ const syncDefaults = {
serverAddress: CompileConfig.serverAddress,
minDuration: 0,
skipNoticeDuration: 4,
skipNoticeDurationBefore: 4,
skipNoticeDurationBefore: 3,
advanceSkipNotice:false,
audioNotificationOnSkip: false,
checkForUnlistedVideos: false,
Expand Down
Loading

0 comments on commit d032910

Please sign in to comment.