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

Added the ability to stop the notice timer by clicking it

Browse Source
This commit is contained in:
Ajay Ramachandran
2020-05-16 23:58:02 -04:00
parent 99373c3e55
commit 252da8c56a
3 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/NoticeComponent.tsx
View File

@@ -23,6 +23,7 @@ export interface NoticeState {
countdownTime: number,
countdownText: string,
countdownManuallyPaused: boolean,
}
class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
@@ -55,6 +56,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
//the countdown until this notice closes
countdownTime: maxCountdownTime(),
countdownText: null,
countdownManuallyPaused: false
}
}
@@ -71,8 +73,8 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
<table id={"sponsorSkipNotice" + this.idSuffix}
className={"sponsorSkipObject sponsorSkipNotice" + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")}
style={noticeStyle}
onMouseEnter={this.pauseCountdown.bind(this)}
onMouseLeave={this.startCountdown.bind(this)}>
onMouseEnter={() => this.timerMouseEnter()}
onMouseLeave={() => this.timerMouseLeave()}>
<tbody>
{/* First row */}
@@ -99,6 +101,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
{/* Time left */}
{this.props.timed ? (
<span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
onClick={() => this.toggleManualPause()}
className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
{this.state.countdownText || (this.state.countdownTime + "s")}
@@ -121,6 +124,30 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
);
}
timerMouseEnter() {
if (this.state.countdownManuallyPaused) return;
this.pauseCountdown();
}
timerMouseLeave() {
if (this.state.countdownManuallyPaused) return;
this.startCountdown();
}
toggleManualPause() {
this.setState({
countdownManuallyPaused: !this.state.countdownManuallyPaused
}, () => {
if (this.state.countdownManuallyPaused) {
this.pauseCountdown();
} else {
this.startCountdown();
}
});
}
//called every second to lower the countdown before hiding the notice
countdown() {
if (!this.props.timed) return;
@@ -159,7 +186,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
//reset countdown and inform the user
this.setState({
countdownTime: this.state.maxCountdownTime(),
countdownText: chrome.i18n.getMessage("paused")
countdownText: this.state.countdownManuallyPaused ? chrome.i18n.getMessage("manualPaused") : chrome.i18n.getMessage("paused")
});
//remove the fade out class if it exists