diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx index f3627f06..67facd3a 100644 --- a/src/components/SkipNoticeComponent.tsx +++ b/src/components/SkipNoticeComponent.tsx @@ -45,9 +45,9 @@ export interface SkipNoticeState { maxCountdownTime?: () => number; countdownText?: string; - skipButtonState?: SkipButtonState; - skipButtonCallback?: (index: number, forceSeek: boolean) => void; - showSkipButton?: boolean; + skipButtonStates?: SkipButtonState[]; + skipButtonCallbacks?: Array<(buttonIndex: number, index: number, forceSeek: boolean) => void>; + showSkipButton?: boolean[]; editing?: boolean; choosingCategory?: boolean; @@ -119,6 +119,12 @@ class SkipNoticeComponent extends React.Component 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 this.state = { noticeTitle, @@ -130,11 +136,9 @@ class SkipNoticeComponent extends React.Component 1 + getSkipButton(buttonIndex: number): JSX.Element { + if (this.state.showSkipButton[buttonIndex] && (this.segments.length > 1 || this.segments[0].actionType !== ActionType.Poi || this.props.unskipTime)) { + const forceSeek = buttonIndex === 1 && this.segments[0].actionType === ActionType.Mute; + const style: React.CSSProperties = { marginLeft: "4px", - color: ([SkipNoticeAction.Unskip, SkipNoticeAction.UnskipForceSeek].includes(this.state.actionState)) + color: ([SkipNoticeAction.Unskip0, SkipNoticeAction.Unskip1].includes(this.state.actionState)) ? this.selectedColor : this.unselectedColor }; if (this.contentContainer().onMobileYouTube) { @@ -357,8 +364,10 @@ class SkipNoticeComponent extends React.Component this.prepAction(forceSeek ? SkipNoticeAction.UnskipForceSeek : SkipNoticeAction.Unskip)}> - {this.getSkipButtonText(forceSeek ? ActionType.Skip : null) + (!forceSeek && this.state.showKeybindHint ? " (" + keybindToString(Config.config.skipKeybind) + ")" : "")} + onClick={() => this.prepAction(buttonIndex === 1 ? SkipNoticeAction.Unskip1 : SkipNoticeAction.Unskip0)}> + {this.getSkipButtonText(buttonIndex, forceSeek ? ActionType.Skip : null) + + (!forceSeek && this.state.showKeybindHint + ? " (" + keybindToString(Config.config.skipKeybind) + ")" : "")} ); @@ -459,11 +468,11 @@ class SkipNoticeComponent extends React.Component Config.config.skipNoticeDuration, countdownTime: Config.config.skipNoticeDuration @@ -614,25 +629,44 @@ class SkipNoticeComponent extends React.Component { + this.setState(this.getUnskippedModeInfo(buttonIndex, index, skipButtonState), () => { 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 maxCountdownTime = changeCountdown ? 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 { - skipButtonState: skipButtonState, - skipButtonCallback: this.reskip.bind(this), + skipButtonStates, + skipButtonCallbacks, // change max duration to however much of the sponsor is left - maxCountdownTime: maxCountdownTime, - countdownTime: maxCountdownTime() + maxCountdownTime, + countdownTime: maxCountdownTime(), + showSkipButton: buttonIndex === 1 ? [true, true] : this.state.showSkipButton } as SkipNoticeState; } @@ -715,12 +749,12 @@ class SkipNoticeComponent extends React.Component= this.props.segments[0].segment[1]) { + unmutedListener(time: number): void { + if (this.props.segments.length === 1 + && this.props.segments[0].actionType === ActionType.Mute + && time >= this.props.segments[0].segment[1]) { this.setState({ - showSkipButton: false + showSkipButton: [false, true] }); } } @@ -735,8 +769,8 @@ class SkipNoticeComponent extends React.Component