Add skip keybind

https://github.com/ajayyy/SponsorBlock/issues/299

src/components/NoticeComponent.tsx

@@ -177,12 +177,19 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
             countdownTime
         })
     }
+    
+    removeFadeAnimation(): void {
+        //remove the fade out class if it exists
+        const notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
+        notice.classList.remove("sponsorSkipNoticeFadeOut");
+        notice.style.animation = "none";
+    }
 
     pauseCountdown(): void {
         if (!this.props.timed) return;
 
         //remove setInterval
-        clearInterval(this.countdownInterval);
+        if (this.countdownInterval) clearInterval(this.countdownInterval);
         this.countdownInterval = null;
 
         //reset countdown and inform the user
@@ -191,10 +198,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
             countdownText: this.state.countdownManuallyPaused ? chrome.i18n.getMessage("manualPaused") : chrome.i18n.getMessage("paused")
         });
         
-        //remove the fade out class if it exists
-        const notice = document.getElementById("sponsorSkipNotice" + this.idSuffix);
-        notice.classList.remove("sponsorSkipNoticeFadeOut");
-        notice.style.animation = "none";
+        this.removeFadeAnimation();
     }
 
     startCountdown(): void {
@@ -208,16 +212,25 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
             countdownText: null
         });
 
+        this.setupInterval();
+    }
+
+    setupInterval(): void {
+        if (this.countdownInterval) clearInterval(this.countdownInterval);
         this.countdownInterval = setInterval(this.countdown.bind(this), 1000);
     }
 
     resetCountdown(): void {
         if (!this.props.timed) return;
 
+        this.setupInterval();
+
         this.setState({
             countdownTime: this.state.maxCountdownTime(),
             countdownText: null
         });
+
+        this.removeFadeAnimation();
     }
     
     /**

src/components/SkipNoticeComponent.tsx

@@ -5,7 +5,7 @@ import { ContentContainer, SponsorHideType, SponsorTime } from "../types";
 import NoticeComponent from "./NoticeComponent";
 import NoticeTextSelectionComponent from "./NoticeTextSectionComponent";
 
-enum SkipNoticeAction {
+export enum SkipNoticeAction {
     None,
     Upvote,
     Downvote,
@@ -24,23 +24,23 @@ export interface SkipNoticeProps {
 }
 
 export interface SkipNoticeState {
-    noticeTitle: string;
+    noticeTitle?: string;
 
-    messages: string[];
-    messageOnClick: (event: React.MouseEvent) => unknown;
+    messages?: string[];
+    messageOnClick?: (event: React.MouseEvent) => unknown;
 
-    countdownTime: number;
-    maxCountdownTime: () => number;
-    countdownText: string;
+    countdownTime?: number;
+    maxCountdownTime?: () => number;
+    countdownText?: string;
 
-    unskipText: string;
-    unskipCallback: (index: number) => void;
+    unskipText?: string;
+    unskipCallback?: (index: number) => void;
 
-    downvoting: boolean;
-    choosingCategory: boolean;
-    thanksForVotingText: string; //null until the voting buttons should be hidden
+    downvoting?: boolean;
+    choosingCategory?: boolean;
+    thanksForVotingText?: string; //null until the voting buttons should be hidden
 
-    actionState: SkipNoticeAction;
+    actionState?: SkipNoticeAction;
 }
 
 class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeState> {
@@ -196,7 +196,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                             style={{marginLeft: "4px"}}
                             onClick={() => this.prepAction(SkipNoticeAction.Unskip)}>
 
-                            {this.state.unskipText}
+                            {this.state.unskipText + " (" + Config.config.skipKeybind + ")"}
                         </button>
                     </td>
 
@@ -456,21 +456,23 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     reskip(index: number): void {
         this.contentContainer().reskipSponsorTime(this.segments[index]);
 
-        //reset countdown
-        this.setState({
+        const newState: SkipNoticeState = {
             unskipText: chrome.i18n.getMessage("unskip"),
             unskipCallback: this.unskip.bind(this),
 
             maxCountdownTime: () => 4,
             countdownTime: 4
-        });
+        };
 
         // See if the title should be changed
         if (!this.autoSkip) {
-            this.setState({
-                noticeTitle: chrome.i18n.getMessage("noticeTitle")
-            });
-        }
+            newState.noticeTitle = chrome.i18n.getMessage("noticeTitle");
+        }       
+
+        //reset countdown
+        this.setState(newState, () => {
+            this.noticeRef.current.resetCountdown();
+        });
     }
 
     afterVote(segment: SponsorTime, type: number, category: string): void {