Added the ability to stop the notice timer by clicking it

manifest/manifest.json

@@ -1,7 +1,7 @@
 {
     "name": "__MSG_fullName__",
     "short_name": "__MSG_Name__",
-    "version": "1.2.28.3",
+    "version": "1.2.28.4",
     "default_locale": "en",
     "description": "__MSG_Description__",
     "content_scripts": [{

public/_locales/en/messages.json

@@ -68,6 +68,9 @@
     "paused": {
         "message": "Paused"
     },
+    "manualPaused": {
+        "message": "Timer Stopped"
+    },
     "confirmMSG": {
         "message": "To edit or delete individual values, click the info button or open the extension popup by clicking the extension icon in the top right corner."
     },

src/components/NoticeComponent.tsx

@@ -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)}
+                onMouseEnter={() => this.timerMouseEnter()}
-                onMouseLeave={this.startCountdown.bind(this)}> 
+                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