Add keybind support to skip to highlight

3 files changed, 37 insertions, 12 deletions

diff --git a/src/content.ts b/src/content.ts
index 9e9e5ccf..804af61d 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -1,5 +1,5 @@
 import Config from "./config";
-import { SponsorTime, CategorySkipOption, VideoID, SponsorHideType, VideoInfo, StorageChangesObject, CategoryActionType, ChannelIDInfo, ChannelIDStatus, SponsorSourceType, SegmentUUID, Category, SkipToTimeParams } from "./types";
+import { SponsorTime, CategorySkipOption, VideoID, SponsorHideType, VideoInfo, StorageChangesObject, CategoryActionType, ChannelIDInfo, ChannelIDStatus, SponsorSourceType, SegmentUUID, Category, SkipToTimeParams, ToggleSkippable } from "./types";
 
 import { ContentContainer } from "./types";
 import Utils from "./utils";
@@ -27,6 +27,7 @@ let sponsorTimes: SponsorTime[] = null;
 let sponsorVideoID: VideoID = null;
 // List of open skip notices
 const skipNotices: SkipNotice[] = [];
+let activeSkipKeybindElement: ToggleSkippable = null;
 
 // JSON video info 
 let videoInfo: VideoInfo = null;
@@ -1104,12 +1105,18 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
             && skippingSegments.length === 1 
             && getCategoryActionType(skippingSegments[0].category) === CategoryActionType.POI) {
         skipButtonControlBar.enable(skippingSegments[0]);
+
+        activeSkipKeybindElement?.setShowKeybindHint(false);
+        activeSkipKeybindElement = skipButtonControlBar;
     } else {
         if (openNotice) {
             //send out the message saying that a sponsor message was skipped
             if (!Config.config.dontShowNotice || !autoSkip) {
-                skipNotices.forEach((notice) => notice.setShowKeybindHint(false));
-                skipNotices.push(new SkipNotice(skippingSegments, autoSkip, skipNoticeContentContainer, unskipTime));
+                const newSkipNotice = new SkipNotice(skippingSegments, autoSkip, skipNoticeContentContainer, unskipTime);
+                skipNotices.push(newSkipNotice);
+
+                activeSkipKeybindElement?.setShowKeybindHint(false);
+                activeSkipKeybindElement = newSkipNotice;
             }
         }
     }
@@ -1702,9 +1709,8 @@ function hotkeyListener(e: KeyboardEvent): void {
 
     switch (key) {
         case skipKey:
-            if (skipNotices.length > 0) {
-                const latestSkipNotice = skipNotices[skipNotices.length - 1];
-                latestSkipNotice.toggleSkip.call(latestSkipNotice);
+            if (activeSkipKeybindElement) {
+                activeSkipKeybindElement.toggleSkip.call(activeSkipKeybindElement);
             }
             break; 
         case startSponsorKey:
diff --git a/src/js-components/skipButtonControlBar.ts b/src/js-components/skipButtonControlBar.ts
index d2d8d2d2..9a8af4ec 100644
--- a/src/js-components/skipButtonControlBar.ts
+++ b/src/js-components/skipButtonControlBar.ts
@@ -15,6 +15,8 @@ export class SkipButtonControlBar {
     chapterText: HTMLElement;
     segment: SponsorTime;
 
+    showKeybindHint = true;
+
     timeout: NodeJS.Timeout;
 
     skip: (segment: SponsorTime) => void;
@@ -35,7 +37,7 @@ export class SkipButtonControlBar {
         
         this.container.appendChild(this.skipIcon);
         this.container.appendChild(this.textContainer);
-        this.container.addEventListener("click", () => this.onClick());
+        this.container.addEventListener("click", () => this.toggleSkip());
         this.container.addEventListener("mouseenter", () => this.stopTimer());
         this.container.addEventListener("mouseleave", () => this.startTimer());
     }
@@ -51,18 +53,30 @@ export class SkipButtonControlBar {
 
     enable(segment: SponsorTime): void {
         this.segment = segment;
-        this.chapterText?.classList?.add("hidden");
-        this.container.classList.remove("hidden");
-        this.textContainer.innerText = getSkippingText([segment], false);
+        this.refreshText();
 
         this.startTimer();
     }
 
+    refreshText(): void {
+        if (this.segment) {
+            this.chapterText?.classList?.add("hidden");
+            this.container.classList.remove("hidden");
+            this.textContainer.innerText = getSkippingText([this.segment], false) + (this.showKeybindHint ? " (" + Config.config.skipKeybind + ")" : "");
+        }
+    }
+
+    setShowKeybindHint(show: boolean): void {
+        this.showKeybindHint = show;
+
+        this.refreshText();
+    }
+
     stopTimer(): void {
         if (this.timeout) clearTimeout(this.timeout);
     }
 
-    startTimer() {
+    startTimer(): void {
         this.stopTimer();
         this.timeout = setTimeout(() => this.disable(), Config.config.skipNoticeDuration * 1000);
     }
@@ -72,7 +86,7 @@ export class SkipButtonControlBar {
         this.chapterText?.classList?.remove("hidden");
     }
 
-    onClick(): void {
+    toggleSkip(): void {
         this.skip(this.segment);
         this.disable();
     }
diff --git a/src/types.ts b/src/types.ts
index 8d478a1a..e6506469 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -194,4 +194,9 @@ export interface SkipToTimeParams {
     openNotice: boolean, 
     forceAutoSkip?: boolean,
     unskipTime?: number
+}
+
+export interface ToggleSkippable {
+    toggleSkip: () => void;
+    setShowKeybindHint: (show: boolean) => void;
 }
\ No newline at end of file