Added support for untimed notice

This commit is contained in:
Ajay Ramachandran
2020-03-10 03:08:15 -04:00
parent d7ca56941a
commit 92a6065c98
2 changed files with 31 additions and 13 deletions

View File

@@ -1,29 +1,36 @@
import * as React from "react"; import * as React from "react";
export interface TimedNoticeProps { export interface NoticeProps {
noticeTitle: string, noticeTitle: string,
maxCountdownTime?: () => number, maxCountdownTime?: () => number,
amountOfPreviousNotices?: number, amountOfPreviousNotices?: number,
timed?: boolean,
idSuffix: string idSuffix: string
} }
export interface TimedNoticeState { export interface NoticeState {
noticeTitle: string, noticeTitle: string,
countdownTime: number, countdownTime: number,
countdownText: string, countdownText: string,
} }
class TimedNoticeComponent extends React.Component<TimedNoticeProps, TimedNoticeState> { class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
countdownInterval: NodeJS.Timeout; countdownInterval: NodeJS.Timeout;
idSuffix: any; idSuffix: any;
timed: boolean
amountOfPreviousNotices: number; amountOfPreviousNotices: number;
constructor(props: TimedNoticeProps) { constructor(props: NoticeProps) {
super(props); super(props);
// Set default to timed
this.timed = props.timed;
if (this.timed === undefined) this.timed = true;
if (props.maxCountdownTime === undefined) props.maxCountdownTime = () => 4; if (props.maxCountdownTime === undefined) props.maxCountdownTime = () => 4;
//the id for the setInterval running the countdown //the id for the setInterval running the countdown
@@ -84,11 +91,14 @@ class TimedNoticeComponent extends React.Component<TimedNoticeProps, TimedNotice
style={{top: "11px"}}> style={{top: "11px"}}>
{/* Time left */} {/* Time left */}
<span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix} {this.timed ? (
className="sponsorSkipObject sponsorSkipNoticeTimeLeft"> <span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
{this.state.countdownText || (this.state.countdownTime + "s")} {this.state.countdownText || (this.state.countdownTime + "s")}
</span> </span>
) : ""}
{/* Close button */} {/* Close button */}
<img src={chrome.extension.getURL("icons/close.png")} <img src={chrome.extension.getURL("icons/close.png")}
@@ -106,6 +116,8 @@ class TimedNoticeComponent extends React.Component<TimedNoticeProps, TimedNotice
//called every second to lower the countdown before hiding the notice //called every second to lower the countdown before hiding the notice
countdown() { countdown() {
if (!this.timed) return;
let countdownTime = this.state.countdownTime - 1; let countdownTime = this.state.countdownTime - 1;
if (countdownTime <= 0) { if (countdownTime <= 0) {
@@ -131,6 +143,8 @@ class TimedNoticeComponent extends React.Component<TimedNoticeProps, TimedNotice
} }
pauseCountdown() { pauseCountdown() {
if (!this.timed) return;
//remove setInterval //remove setInterval
clearInterval(this.countdownInterval); clearInterval(this.countdownInterval);
this.countdownInterval = null; this.countdownInterval = null;
@@ -148,6 +162,8 @@ class TimedNoticeComponent extends React.Component<TimedNoticeProps, TimedNotice
} }
startCountdown() { startCountdown() {
if (!this.timed) return;
//if it has already started, don't start it again //if it has already started, don't start it again
if (this.countdownInterval !== null) return; if (this.countdownInterval !== null) return;
@@ -160,6 +176,8 @@ class TimedNoticeComponent extends React.Component<TimedNoticeProps, TimedNotice
} }
resetCountdown() { resetCountdown() {
if (!this.timed) return;
this.setState({ this.setState({
countdownTime: this.props.maxCountdownTime(), countdownTime: this.props.maxCountdownTime(),
countdownText: null countdownText: null
@@ -220,4 +238,4 @@ class TimedNoticeComponent extends React.Component<TimedNoticeProps, TimedNotice
} }
} }
export default TimedNoticeComponent; export default NoticeComponent;

View File

@@ -1,7 +1,7 @@
import * as React from "react"; import * as React from "react";
import Config from "../config" import Config from "../config"
import TimedNoticeComponent from "./TimedNoticeComponent"; import NoticeComponent from "./NoticeComponent";
export interface SkipNoticeProps { export interface SkipNoticeProps {
UUID: string; UUID: string;
@@ -31,7 +31,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
idSuffix: any; idSuffix: any;
noticeRef: React.MutableRefObject<TimedNoticeComponent>; noticeRef: React.MutableRefObject<NoticeComponent>;
constructor(props: SkipNoticeProps) { constructor(props: SkipNoticeProps) {
super(props); super(props);
@@ -84,7 +84,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
} }
return ( return (
<TimedNoticeComponent noticeTitle={this.state.noticeTitle} <NoticeComponent noticeTitle={this.state.noticeTitle}
amountOfPreviousNotices={this.amountOfPreviousNotices} amountOfPreviousNotices={this.amountOfPreviousNotices}
idSuffix={this.idSuffix} idSuffix={this.idSuffix}
maxCountdownTime={this.state.maxCountdownTime} maxCountdownTime={this.state.maxCountdownTime}
@@ -145,7 +145,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
} }
</tr> </tr>
</TimedNoticeComponent> </NoticeComponent>
); );
} }