From ccbc0456f9996c667dfadb4665a55097e35bffad Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Mon, 9 Mar 2020 21:51:44 -0400 Subject: [PATCH] Made skip notice use react states --- src/components/SkipNoticeComponent.tsx | 141 +++++++++++++------------ 1 file changed, 73 insertions(+), 68 deletions(-) diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx index 89ac388c..28ae024c 100644 --- a/src/components/SkipNoticeComponent.tsx +++ b/src/components/SkipNoticeComponent.tsx @@ -7,19 +7,26 @@ export interface SkipNoticeProps { contentContainer: () => any; } -class SkipNoticeComponent extends React.Component { +export interface SkipNoticeState { + noticeTitle: string, + + countdownTime: number, + countdownText: string, + + unskipText: string, + unskipCallback: () => void +} + +class SkipNoticeComponent extends React.Component { UUID: string; manualSkip: boolean; // Contains functions and variables from the content script needed by the skip notice contentContainer: () => any; - noticeTitle: string; amountOfPreviousNotices: number; maxCountdownTime: () => number; - countdownTime: any; countdownInterval: NodeJS.Timeout; - unskipCallback: any; idSuffix: any; constructor(props: SkipNoticeComponent) { @@ -29,21 +36,16 @@ class SkipNoticeComponent extends React.Component { this.manualSkip = props.manualSkip; this.contentContainer = props.contentContainer; - this.noticeTitle = chrome.i18n.getMessage("noticeTitle"); + let noticeTitle = chrome.i18n.getMessage("noticeTitle"); if (this.manualSkip) { - this.noticeTitle = chrome.i18n.getMessage("noticeTitleNotSkipped"); + noticeTitle = chrome.i18n.getMessage("noticeTitleNotSkipped"); } this.maxCountdownTime = () => 4; - //the countdown until this notice closes - this.countdownTime = this.maxCountdownTime(); //the id for the setInterval running the countdown this.countdownInterval = null; - //the unskip button's callback - this.unskipCallback = this.unskip.bind(this); - //add notice this.amountOfPreviousNotices = document.getElementsByClassName("sponsorSkipNotice").length; @@ -56,6 +58,22 @@ class SkipNoticeComponent extends React.Component { let previousNotice = document.getElementsByClassName("sponsorSkipNotice")[0]; previousNotice.classList.add("secondSkipNotice") } + + // Setup state + this.state = { + noticeTitle, + + //the countdown until this notice closes + countdownTime: this.maxCountdownTime(), + countdownText: null, + + unskipText: chrome.i18n.getMessage("unskip"), + unskipCallback: this.unskip.bind(this) + } + } + + componentDidMount() { + this.startCountdown(); } render() { @@ -68,10 +86,10 @@ class SkipNoticeComponent extends React.Component { } return ( -
+ onMouseLeave={this.startCountdown.bind(this)}> {/* First row */} @@ -86,7 +104,7 @@ class SkipNoticeComponent extends React.Component { - {this.noticeTitle} + {this.state.noticeTitle} @@ -98,7 +116,7 @@ class SkipNoticeComponent extends React.Component { - {this.countdownTime + "s"} + {this.state.countdownText || (this.state.countdownTime + "s")} {/* Close button */} @@ -110,9 +128,9 @@ class SkipNoticeComponent extends React.Component { {/* Spacer */} -
- + {/* Last Row */} @@ -146,9 +164,9 @@ class SkipNoticeComponent extends React.Component { @@ -163,15 +181,15 @@ class SkipNoticeComponent extends React.Component { } -
+ ); } //called every second to lower the countdown before hiding the notice countdown() { - this.countdownTime--; + let countdownTime = this.state.countdownTime - 1; - if (this.countdownTime <= 0) { + if (countdownTime <= 0) { //remove this from setInterval clearInterval(this.countdownInterval); @@ -181,14 +199,16 @@ class SkipNoticeComponent extends React.Component { return; } - if (this.countdownTime == 3) { + if (countdownTime == 3) { //start fade out animation let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix); notice.style.removeProperty("animation"); notice.classList.add("sponsorSkipNoticeFadeOut"); } - this.updateTimerDisplay(); + this.setState({ + countdownTime + }) } pauseCountdown() { @@ -196,13 +216,12 @@ class SkipNoticeComponent extends React.Component { clearInterval(this.countdownInterval); this.countdownInterval = null; - //reset countdown - this.countdownTime = this.maxCountdownTime(); + //reset countdown and inform the user + this.setState({ + countdownTime: this.maxCountdownTime(), + countdownText: chrome.i18n.getMessage("paused") + }); - //inform the user - let timeLeft = document.getElementById("sponsorSkipNoticeTimeLeft" + this.idSuffix); - timeLeft.innerText = chrome.i18n.getMessage("paused"); - //remove the fade out class if it exists let notice = document.getElementById("sponsorSkipNotice" + this.idSuffix); notice.classList.remove("sponsorSkipNoticeFadeOut"); @@ -213,15 +232,12 @@ class SkipNoticeComponent extends React.Component { //if it has already started, don't start it again if (this.countdownInterval !== null) return; + this.setState({ + countdownTime: this.maxCountdownTime(), + countdownText: null + }); + this.countdownInterval = setInterval(this.countdown.bind(this), 1000); - - this.updateTimerDisplay(); - } - - updateTimerDisplay() { - //update the timer display - let timeLeft = document.getElementById("sponsorSkipNoticeTimeLeft" + this.idSuffix); - timeLeft.innerText = this.countdownTime + "s"; } unskip() { @@ -232,12 +248,11 @@ class SkipNoticeComponent extends React.Component { /** Sets up notice to be not skipped yet */ unskippedMode(buttonText) { - //change unskip button to a reskip button - let unskipButton = this.changeUnskipButton(buttonText); - //setup new callback - this.unskipCallback = this.reskip.bind(this); - unskipButton.addEventListener("click", this.unskipCallback); + this.setState({ + unskipText: buttonText, + unskipCallback: this.reskip.bind(this) + }); //change max duration to however much of the sponsor is left this.maxCountdownTime = function() { @@ -247,24 +262,28 @@ class SkipNoticeComponent extends React.Component { return Math.max(duration, 4); }; - this.countdownTime = this.maxCountdownTime(); - this.updateTimerDisplay(); + //reset countdown + this.setState({ + countdownTime: this.maxCountdownTime() + }); } reskip() { this.contentContainer().reskipSponsorTime(this.UUID); - //change reskip button to a unskip button - let unskipButton = this.changeUnskipButton(chrome.i18n.getMessage("unskip")); - //setup new callback - this.unskipCallback = this.unskip.bind(this); - unskipButton.addEventListener("click", this.unskipCallback); + this.setState({ + unskipText: chrome.i18n.getMessage("unskip"), + unskipCallback: this.unskip.bind(this) + }); //reset duration this.maxCountdownTime = () => 4; - this.countdownTime = this.maxCountdownTime(); - this.updateTimerDisplay(); + + //reset countdown + this.setState({ + countdownTime: this.maxCountdownTime() + }); // See if the title should be changed if (this.manualSkip) { @@ -274,20 +293,6 @@ class SkipNoticeComponent extends React.Component { } } - /** - * Changes the text on the reskip button - * - * @param {string} text - * @returns {HTMLElement} unskipButton - */ - changeUnskipButton(text) { - let unskipButton = document.getElementById("sponsorSkipUnskipButton" + this.idSuffix); - unskipButton.innerText = text; - unskipButton.removeEventListener("click", this.unskipCallback); - - return unskipButton; - } - afterDownvote() { this.addVoteButtonInfo(chrome.i18n.getMessage("voted")); this.addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack")); @@ -333,7 +338,7 @@ class SkipNoticeComponent extends React.Component { thanksForVotingText.innerText = message; //add element to div - document.getElementById("sponsorSkipNotice" + this.idSuffix).insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix)); + document.querySelector("#sponsorSkipNotice" + this.idSuffix + " > tbody").insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix)); if (message2 !== undefined) { let thanksForVotingText2 = document.createElement("p"); @@ -342,7 +347,7 @@ class SkipNoticeComponent extends React.Component { thanksForVotingText2.innerText = message2; //add element to div - document.getElementById("sponsorSkipNotice" + this.idSuffix).insertBefore(thanksForVotingText2, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix)); + document.querySelector("#sponsorSkipNotice" + this.idSuffix + " > tbody").insertBefore(thanksForVotingText2, document.getElementById("sponsorSkipNoticeSpacer" + this.idSuffix)); } }