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

Make it show skip right away instead of unskip on mute segments

Browse Source 
Fixes #1075
This commit is contained in:
Ajay
2022-04-22 15:18:58 -04:00
parent 9e02e35c4d
commit b075116502
4 changed files with 86 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/SkipNoticeComponent.tsx
View File

@@ -45,9 +45,9 @@ export interface SkipNoticeState {
maxCountdownTime?: () => number; maxCountdownTime?: () => number;
countdownText?: string; countdownText?: string;
skipButtonState?: SkipButtonState; skipButtonStates?: SkipButtonState[];
skipButtonCallback?: (index: number, forceSeek: boolean) => void; skipButtonCallbacks?: Array<(buttonIndex: number, index: number, forceSeek: boolean) => void>;
showSkipButton?: boolean; showSkipButton?: boolean[];
editing?: boolean; editing?: boolean;
choosingCategory?: boolean; choosingCategory?: boolean;
@@ -119,6 +119,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
const isMuteSegment = this.segments[0].actionType === ActionType.Mute; const isMuteSegment = this.segments[0].actionType === ActionType.Mute;
const maxCountdownTime = isMuteSegment ? this.getFullDurationCountdown(0) : () => Config.config.skipNoticeDuration; const maxCountdownTime = isMuteSegment ? this.getFullDurationCountdown(0) : () => Config.config.skipNoticeDuration;
const defaultSkipButtonState = this.props.startReskip ? SkipButtonState.Redo : SkipButtonState.Undo;
const skipButtonStates = [defaultSkipButtonState, isMuteSegment ? SkipButtonState.Start : defaultSkipButtonState];
const defaultSkipButtonCallback = this.props.startReskip ? this.reskip.bind(this) : this.unskip.bind(this);
const skipButtonCallbacks = [defaultSkipButtonCallback, isMuteSegment ? this.reskip.bind(this) : defaultSkipButtonCallback];
// Setup state // Setup state
this.state = { this.state = {
noticeTitle, noticeTitle,
@@ -130,11 +136,9 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
countdownTime: maxCountdownTime(), countdownTime: maxCountdownTime(),
countdownText: null, countdownText: null,
skipButtonState: this.props.startReskip skipButtonStates,
? SkipButtonState.Redo : SkipButtonState.Undo, skipButtonCallbacks,
skipButtonCallback: this.props.startReskip showSkipButton: [true, true],
? this.reskip.bind(this) : this.unskip.bind(this),
showSkipButton: true,
editing: false, editing: false,
choosingCategory: false, choosingCategory: false,
@@ -153,7 +157,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
if (!this.autoSkip) { if (!this.autoSkip) {
// Assume manual skip is only skipping 1 submission // Assume manual skip is only skipping 1 submission
Object.assign(this.state, this.getUnskippedModeInfo(0, SkipButtonState.Start)); Object.assign(this.state, this.getUnskippedModeInfo(null, 0, SkipButtonState.Start));
} }
} }
@@ -166,8 +170,9 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
// If it started out as smaller, always keep the // If it started out as smaller, always keep the
// skip button there // skip button there
const firstColumn = this.props.smaller || this.segments[0].actionType === ActionType.Mute ? ( const showFirstSkipButton = this.props.smaller || this.segments[0].actionType === ActionType.Mute;
this.getSkipButton() const firstColumn = showFirstSkipButton ? (
this.getSkipButton(0)
) : null; ) : null;
return ( return (
@@ -260,7 +265,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
{/* Unskip/Skip Button */} {/* Unskip/Skip Button */}
{!this.props.smaller || this.segments[0].actionType === ActionType.Mute {!this.props.smaller || this.segments[0].actionType === ActionType.Mute
? this.getSkipButton(this.segments[0].actionType === ActionType.Mute) : null} ? this.getSkipButton(1) : null}
{/* Never show button */} {/* Never show button */}
{!this.autoSkip || this.props.startReskip ? "" : {!this.autoSkip || this.props.startReskip ? "" :
@@ -337,14 +342,16 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
]; ];
} }
getSkipButton(forceSeek = false): JSX.Element { getSkipButton(buttonIndex: number): JSX.Element {
if (this.state.showSkipButton && (this.segments.length > 1 if (this.state.showSkipButton[buttonIndex] && (this.segments.length > 1
|| this.segments[0].actionType !== ActionType.Poi || this.segments[0].actionType !== ActionType.Poi
|| this.props.unskipTime)) { || this.props.unskipTime)) {
const forceSeek = buttonIndex === 1 && this.segments[0].actionType === ActionType.Mute;
const style: React.CSSProperties = { const style: React.CSSProperties = {
marginLeft: "4px", marginLeft: "4px",
color: ([SkipNoticeAction.Unskip, SkipNoticeAction.UnskipForceSeek].includes(this.state.actionState)) color: ([SkipNoticeAction.Unskip0, SkipNoticeAction.Unskip1].includes(this.state.actionState))
? this.selectedColor : this.unselectedColor ? this.selectedColor : this.unselectedColor
}; };
if (this.contentContainer().onMobileYouTube) { if (this.contentContainer().onMobileYouTube) {
@@ -357,8 +364,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
<button id={"sponsorSkipUnskipButton" + this.idSuffix} <button id={"sponsorSkipUnskipButton" + this.idSuffix}
className="sponsorSkipObject sponsorSkipNoticeButton" className="sponsorSkipObject sponsorSkipNoticeButton"
style={style} style={style}
onClick={() => this.prepAction(forceSeek ? SkipNoticeAction.UnskipForceSeek : SkipNoticeAction.Unskip)}> onClick={() => this.prepAction(buttonIndex === 1 ? SkipNoticeAction.Unskip1 : SkipNoticeAction.Unskip0)}>
{this.getSkipButtonText(forceSeek ? ActionType.Skip : null) + (!forceSeek && this.state.showKeybindHint ? " (" + keybindToString(Config.config.skipKeybind) + ")" : "")} {this.getSkipButtonText(buttonIndex, forceSeek ? ActionType.Skip : null)
+ (!forceSeek && this.state.showKeybindHint
? " (" + keybindToString(Config.config.skipKeybind) + ")" : "")}
</button> </button>
</span> </span>
); );
@@ -459,11 +468,11 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
case SkipNoticeAction.CopyDownvote: case SkipNoticeAction.CopyDownvote:
this.resetStateToStart(SkipNoticeAction.CopyDownvote, true); this.resetStateToStart(SkipNoticeAction.CopyDownvote, true);
break; break;
case SkipNoticeAction.Unskip: case SkipNoticeAction.Unskip0:
this.resetStateToStart(SkipNoticeAction.Unskip); this.resetStateToStart(SkipNoticeAction.Unskip0);
break; break;
case SkipNoticeAction.UnskipForceSeek: case SkipNoticeAction.Unskip1:
this.resetStateToStart(SkipNoticeAction.UnskipForceSeek); this.resetStateToStart(SkipNoticeAction.Unskip1);
break; break;
} }
} }
@@ -491,11 +500,11 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
case SkipNoticeAction.CopyDownvote: case SkipNoticeAction.CopyDownvote:
this.copyDownvote(index); this.copyDownvote(index);
break; break;
case SkipNoticeAction.Unskip: case SkipNoticeAction.Unskip0:
this.unskipAction(index, false); this.unskipAction(0, index, false);
break; break;
case SkipNoticeAction.UnskipForceSeek: case SkipNoticeAction.Unskip1:
this.unskipAction(index, true); this.unskipAction(1, index, true);
break; break;
default: default:
this.resetStateToStart(); this.resetStateToStart();
@@ -557,8 +566,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
}); });
} }
unskipAction(index: number, forceSeek: boolean): void { unskipAction(buttonIndex: number, index: number, forceSeek: boolean): void {
this.state.skipButtonCallback(index, forceSeek); this.state.skipButtonCallbacks[buttonIndex](buttonIndex, index, forceSeek);
} }
openEditingOptions(): void { openEditingOptions(): void {
@@ -585,18 +594,24 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
return this.props.contentContainer().lockedCategories.includes(category) ? "sponsorBlockLockedColor" : "" return this.props.contentContainer().lockedCategories.includes(category) ? "sponsorBlockLockedColor" : ""
} }
unskip(index: number, forceSeek: boolean): void { unskip(buttonIndex: number, index: number, forceSeek: boolean): void {
this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek); this.contentContainer().unskipSponsorTime(this.segments[index], this.props.unskipTime, forceSeek);
this.unskippedMode(index, SkipButtonState.Redo); this.unskippedMode(buttonIndex, index, SkipButtonState.Redo);
} }
reskip(index: number, forceSeek: boolean): void { reskip(buttonIndex: number, index: number, forceSeek: boolean): void {
this.contentContainer().reskipSponsorTime(this.segments[index], forceSeek); this.contentContainer().reskipSponsorTime(this.segments[index], forceSeek);
const skipButtonStates = this.state.skipButtonStates;
skipButtonStates[buttonIndex] = SkipButtonState.Undo;
const skipButtonCallbacks = this.state.skipButtonCallbacks;
skipButtonCallbacks[buttonIndex] = this.unskip.bind(this);
const newState: SkipNoticeState = { const newState: SkipNoticeState = {
skipButtonState: SkipButtonState.Undo, skipButtonStates,
skipButtonCallback: this.unskip.bind(this), skipButtonCallbacks,
maxCountdownTime: () => Config.config.skipNoticeDuration, maxCountdownTime: () => Config.config.skipNoticeDuration,
countdownTime: Config.config.skipNoticeDuration countdownTime: Config.config.skipNoticeDuration
@@ -614,25 +629,44 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
} }
/** Sets up notice to be not skipped yet */ /** Sets up notice to be not skipped yet */
unskippedMode(index: number, skipButtonState: SkipButtonState): void { unskippedMode(buttonIndex: number, index: number, skipButtonState: SkipButtonState): void {
//setup new callback and reset countdown //setup new callback and reset countdown
this.setState(this.getUnskippedModeInfo(index, skipButtonState), () => { this.setState(this.getUnskippedModeInfo(buttonIndex, index, skipButtonState), () => {
this.noticeRef.current.resetCountdown(); this.noticeRef.current.resetCountdown();
}); });
} }
getUnskippedModeInfo(index: number, skipButtonState: SkipButtonState): SkipNoticeState { getUnskippedModeInfo(buttonIndex: number, index: number, skipButtonState: SkipButtonState): SkipNoticeState {
const changeCountdown = this.segments[index].actionType !== ActionType.Poi; const changeCountdown = this.segments[index].actionType !== ActionType.Poi;
const maxCountdownTime = changeCountdown ? const maxCountdownTime = changeCountdown ?
this.getFullDurationCountdown(index) : this.state.maxCountdownTime; this.getFullDurationCountdown(index) : this.state.maxCountdownTime;
const skipButtonStates = this.state.skipButtonStates;
const skipButtonCallbacks = this.state.skipButtonCallbacks;
if (buttonIndex === null) {
for (let i = 0; i < this.segments.length; i++) {
skipButtonStates[i] = skipButtonState;
skipButtonCallbacks[i] = this.reskip.bind(this);
}
} else {
skipButtonStates[buttonIndex] = skipButtonState;
skipButtonCallbacks[buttonIndex] = this.reskip.bind(this);
if (buttonIndex === 1) {
// Trigger both to move at once
skipButtonStates[0] = SkipButtonState.Redo;
skipButtonCallbacks[0] = this.reskip.bind(this);
}
}
return { return {
skipButtonState: skipButtonState, skipButtonStates,
skipButtonCallback: this.reskip.bind(this), skipButtonCallbacks,
// change max duration to however much of the sponsor is left // change max duration to however much of the sponsor is left
maxCountdownTime: maxCountdownTime, maxCountdownTime,
countdownTime: maxCountdownTime() countdownTime: maxCountdownTime(),
showSkipButton: buttonIndex === 1 ? [true, true] : this.state.showSkipButton
} as SkipNoticeState; } as SkipNoticeState;
} }
@@ -715,12 +749,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
} }
} }
unmutedListener(): void { unmutedListener(time: number): void {
if (this.props.segments.length === 1 if (this.props.segments.length === 1
&& this.props.segments[0].actionType === ActionType.Mute && this.props.segments[0].actionType === ActionType.Mute
&& this.contentContainer().v.currentTime >= this.props.segments[0].segment[1]) { && time >= this.props.segments[0].segment[1]) {
this.setState({ this.setState({
showSkipButton: false showSkipButton: [false, true]
}); });
} }
} }
@@ -735,8 +769,8 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
}); });
} }
private getSkipButtonText(forceType?: ActionType): string { private getSkipButtonText(buttonIndex: number, forceType?: ActionType): string {
switch (this.state.skipButtonState) { switch (this.state.skipButtonStates[buttonIndex]) {
case SkipButtonState.Undo: case SkipButtonState.Undo:
return this.getUndoText(forceType); return this.getUndoText(forceType);
case SkipButtonState.Redo: case SkipButtonState.Redo:

2
src/content.ts
View File

@@ -478,7 +478,7 @@ function startSponsorSchedule(includeIntersectingSegments = false, currentTime?:
for (const notice of skipNotices) { for (const notice of skipNotices) {
// So that the notice can hide buttons // So that the notice can hide buttons
notice.unmutedListener(); notice.unmutedListener(currentTime);
} }
} }

6
src/render/SkipNotice.tsx
View File

@@ -71,11 +71,11 @@ class SkipNotice {
} }
toggleSkip(): void { toggleSkip(): void {
this.skipNoticeRef?.current?.prepAction(SkipNoticeAction.Unskip); this.skipNoticeRef?.current?.prepAction(SkipNoticeAction.Unskip0);
} }
unmutedListener(): void { unmutedListener(time: number): void {
this.skipNoticeRef?.current?.unmutedListener(); this.skipNoticeRef?.current?.unmutedListener(time);
} }
} }

4
src/utils/noticeUtils.ts
View File

@@ -7,8 +7,8 @@ export enum SkipNoticeAction {
Downvote, Downvote,
CategoryVote, CategoryVote,
CopyDownvote, CopyDownvote,
Unskip, Unskip0,
UnskipForceSeek Unskip1
} }
export function downvoteButtonColor(segments: SponsorTime[], actionState: SkipNoticeAction, downvoteType: SkipNoticeAction): string { export function downvoteButtonColor(segments: SponsorTime[], actionState: SkipNoticeAction, downvoteType: SkipNoticeAction): string {