diff --git a/manifest/manifest.json b/manifest/manifest.json index a534d61c..d3b59688 100644 --- a/manifest/manifest.json +++ b/manifest/manifest.json @@ -40,6 +40,8 @@ "icons/report.png", "icons/close.png", "icons/beep.ogg", + "icons/pause.svg", + "icons/stop.svg", "icons/PlayerInfoIconSponsorBlocker256px.png", "icons/PlayerDeleteIconSponsorBlocker256px.png", "popup.html", diff --git a/public/content.css b/public/content.css index a9a6c6eb..611a2642 100644 --- a/public/content.css +++ b/public/content.css @@ -116,6 +116,10 @@ border-collapse: unset; } +.sponsorSkipNotice .hidden { + display: none; +} + .sponsorSkipNoticeFadeIn { animation: fadeIn 0.5s; } @@ -131,9 +135,20 @@ padding: 2px 5px; font-size: 12px; + display: flex; + align-items: center; + border: 1px solid #eeeeee; } +.sponsorSkipNoticeTimeLeft img { + vertical-align: middle; + height: 13px; + + padding-top: 7.8%; + padding-bottom: 7.8%; +} + /* if two are very close to eachother */ .secondSkipNotice { bottom: 250px; @@ -141,6 +156,11 @@ transition: bottom 0.2s; } +.noticeLeftIcon { + display: flex; + align-items: center; +} + .sponsorSkipNoticeUnskipSection { float: left; @@ -183,6 +203,8 @@ float: right; margin-right: 5px; + display: flex; + align-items: center; } .sponsorSkipNoticeRightButton { @@ -205,7 +227,9 @@ font-weight: bold; color: rgb(235, 235, 235); + margin-top: auto; display: inline-block; + margin-right: 10px; } .sponsorSkipInfo { @@ -406,10 +430,6 @@ input::-webkit-inner-spin-button { padding: 3px; } -.helpButton { - -} - .helpButton { height: 25px; cursor: pointer; diff --git a/public/icons/pause.svg b/public/icons/pause.svg new file mode 100644 index 00000000..81f56b48 --- /dev/null +++ b/public/icons/pause.svg @@ -0,0 +1,59 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/public/icons/stop.svg b/public/icons/stop.svg new file mode 100644 index 00000000..229a2148 --- /dev/null +++ b/public/icons/stop.svg @@ -0,0 +1,59 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx index bbcbb2a9..16c85baa 100644 --- a/src/components/NoticeComponent.tsx +++ b/src/components/NoticeComponent.tsx @@ -1,5 +1,11 @@ import * as React from "react"; +enum CountdownMode { + Timer, + Paused, + Stopped +} + export interface NoticeProps { noticeTitle: string, @@ -11,6 +17,10 @@ export interface NoticeProps { videoSpeed?: () => number, fadeIn?: boolean, + firstColumn?: React.ReactElement, + firstRow?: React.ReactElement, + + smaller?: boolean, // Callback for when this is closed closeListener: () => void, @@ -24,8 +34,9 @@ export interface NoticeState { maxCountdownTime: () => number, countdownTime: number, - countdownText: string, - countdownManuallyPaused: boolean, + countdownMode: CountdownMode, + + mouseHovering: boolean; } class NoticeComponent extends React.Component { @@ -59,8 +70,8 @@ class NoticeComponent extends React.Component { //the countdown until this notice closes countdownTime: maxCountdownTime(), - countdownText: null, - countdownManuallyPaused: false + countdownMode: CountdownMode.Timer, + mouseHovering: false } } @@ -86,7 +97,7 @@ class NoticeComponent extends React.Component { {/* First row */} {/* Left column */} - + {/* Logo */} { {this.state.noticeTitle} + + {this.props.firstColumn} + {this.props.firstRow} + {/* Right column */} + style={{top: this.props.smaller ? "9.32px" : "8px"}}> {/* Time left */} {this.props.timed ? ( @@ -111,7 +126,8 @@ class NoticeComponent extends React.Component { onClick={() => this.toggleManualPause()} className="sponsorSkipObject sponsorSkipNoticeTimeLeft"> - {this.state.countdownText || (this.state.countdownTime + "s")} + {this.getCountdownElements()} + ) : ""} @@ -131,23 +147,56 @@ class NoticeComponent extends React.Component { ); } + getCountdownElements(): React.ReactElement[] { + return [( + + {this.state.countdownTime + "s"} + + ),( + {chrome.i18n.getMessage("paused")} + ),( + {chrome.i18n.getMessage("manualPaused")} + )]; + } + timerMouseEnter(): void { - if (this.state.countdownManuallyPaused) return; + if (this.state.countdownMode === CountdownMode.Stopped) return; this.pauseCountdown(); + + this.setState({ + mouseHovering: true + }); } timerMouseLeave(): void { - if (this.state.countdownManuallyPaused) return; + if (this.state.countdownMode === CountdownMode.Stopped) return; this.startCountdown(); + + this.setState({ + mouseHovering: false + }); } toggleManualPause(): void { this.setState({ - countdownManuallyPaused: !this.state.countdownManuallyPaused + countdownMode: this.state.countdownMode === CountdownMode.Stopped ? CountdownMode.Timer : CountdownMode.Stopped }, () => { - if (this.state.countdownManuallyPaused) { + if (this.state.countdownMode === CountdownMode.Stopped || this.state.mouseHovering) { this.pauseCountdown(); } else { this.startCountdown(); @@ -204,7 +253,7 @@ class NoticeComponent extends React.Component { //reset countdown and inform the user this.setState({ countdownTime: this.state.maxCountdownTime(), - countdownText: this.state.countdownManuallyPaused ? chrome.i18n.getMessage("manualPaused") : chrome.i18n.getMessage("paused") + countdownMode: this.state.countdownMode === CountdownMode.Timer ? CountdownMode.Paused : this.state.countdownMode }); this.removeFadeAnimation(); @@ -218,7 +267,7 @@ class NoticeComponent extends React.Component { this.setState({ countdownTime: this.state.maxCountdownTime(), - countdownText: null + countdownMode: CountdownMode.Timer }); this.setupInterval(); @@ -240,7 +289,7 @@ class NoticeComponent extends React.Component { this.setState({ countdownTime: this.state.maxCountdownTime(), - countdownText: null + countdownMode: CountdownMode.Timer }); this.removeFadeAnimation(); diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx index 275a94d4..220974b8 100644 --- a/src/components/SkipNoticeComponent.tsx +++ b/src/components/SkipNoticeComponent.tsx @@ -25,6 +25,7 @@ export interface SkipNoticeProps { closeListener: () => void; showKeybindHint?: boolean; + smaller: boolean; } export interface SkipNoticeState { @@ -142,6 +143,10 @@ class SkipNoticeComponent extends React.Component this.contentContainer().v?.playbackRate} ref={this.noticeRef} - closeListener={() => this.closeListener()}> + closeListener={() => this.closeListener()} + smaller={this.props.smaller} + firstColumn={firstColumn}> {(Config.config.audioNotificationOnSkip) && } {/* Text Boxes */} - {this.getMessageBoxes()} + {!this.props.smaller ? + this.getMessageBoxes() + : ""} {/* Bottom Row */} - + {!this.props.smaller ? + ( - {/* Vote Button Container */} - {!this.state.thanksForVotingText ? - + {/* Vote Button Container */} + {!this.state.thanksForVotingText ? + - {/* Upvote Button */} - this.prepAction(SkipNoticeAction.Upvote)}> - - + {/* Upvote Button */} + this.prepAction(SkipNoticeAction.Upvote)}> + + - {/* Report Button */} - this.adjustDownvotingState(true)}> - - + {/* Report Button */} + this.adjustDownvotingState(true)}> + + - + - : + : - - {this.state.thanksForVotingText} - - } + + {this.state.thanksForVotingText} + + } - {/* Unskip/Skip Button */} - - - + {/* Never show button if autoSkip is enabled */} + {!this.autoSkip ? "" : + + - - } - + {chrome.i18n.getMessage("Hide")} + + + } + ) + : ""} {/* Downvote Options Row */} {this.state.downvoting && @@ -283,6 +286,20 @@ class SkipNoticeComponent extends React.Component + + + ); + } + getSubmissionChooser(): JSX.Element[] { const elements: JSX.Element[] = []; diff --git a/src/components/SubmissionNoticeComponent.tsx b/src/components/SubmissionNoticeComponent.tsx index ea94bb85..4c019bdc 100644 --- a/src/components/SubmissionNoticeComponent.tsx +++ b/src/components/SubmissionNoticeComponent.tsx @@ -13,7 +13,6 @@ export interface SubmissionNoticeProps { callback: () => unknown; closeListener: () => void; - smaller: boolean; } export interface SubmissionNoticeeState { diff --git a/src/render/SkipNotice.tsx b/src/render/SkipNotice.tsx index 91ed8dd1..5f14822e 100644 --- a/src/render/SkipNotice.tsx +++ b/src/render/SkipNotice.tsx @@ -62,7 +62,8 @@ class SkipNotice { autoSkip={autoSkip} contentContainer={contentContainer} ref={this.skipNoticeRef} - closeListener={() => this.close()} />, + closeListener={() => this.close()} + smaller={true} />, this.noticeElement ); } diff --git a/src/render/SubmissionNotice.tsx b/src/render/SubmissionNotice.tsx index 7b06296f..8c267854 100644 --- a/src/render/SubmissionNotice.tsx +++ b/src/render/SubmissionNotice.tsx @@ -47,8 +47,7 @@ class SubmissionNotice { contentContainer={contentContainer} callback={callback} ref={this.noticeRef} - closeListener={() => this.close()} - smaller={true} />, + closeListener={() => this.close()} />, this.noticeElement ); }