Make highlight bigger on timeline when skip to highlight button hovered

2 files changed, 21 insertions, 5 deletions

diff --git a/src/content.ts b/src/content.ts
index de537005..03afcb16 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -302,8 +302,7 @@ function messageListener(request: Message, sender: unknown, sendResponse: (respo
             reskipSponsorTime(sponsorTimes.find((segment) => segment.UUID === request.UUID), true);
             break;
         case "selectSegment":
-            selectedSegment = request.UUID;
-            updatePreviewBar();
+            selectSegment(request.UUID);
             break;
         case "submitVote":
             vote(request.type, request.UUID).then((response) => sendResponse(response));
@@ -1071,6 +1070,7 @@ function setupSkipButtonControlBar() {
                 openNotice: true,
                 forceAutoSkip: true
             }),
+            selectSegment,
             onMobileYouTube: isOnMobileYouTube()
         });
     }
@@ -1349,6 +1349,11 @@ function updatePreviewBarPositionMobile(parent: HTMLElement) {
     }
 }
 
+function selectSegment(UUID: SegmentUUID): void {
+    selectedSegment = UUID;
+    updatePreviewBar();
+}
+
 function updatePreviewBar(): void {
     if (previewBar === null) return;
 
diff --git a/src/js-components/skipButtonControlBar.ts b/src/js-components/skipButtonControlBar.ts
index a4cf31a5..b14eed18 100644
--- a/src/js-components/skipButtonControlBar.ts
+++ b/src/js-components/skipButtonControlBar.ts
@@ -1,11 +1,12 @@
 import Config from "../config";
-import { SponsorTime } from "../types";
+import { SegmentUUID, SponsorTime } from "../types";
 import { getSkippingText } from "../utils/categoryUtils";
 import { AnimationUtils } from "../utils/animationUtils";
 import { keybindToString } from "../../maze-utils/src/config";
 
 export interface SkipButtonControlBarProps {
     skip: (segment: SponsorTime) => void;
+    selectSegment: (UUID: SegmentUUID) => void;
     onMobileYouTube: boolean;
 }
 
@@ -54,8 +55,18 @@ export class SkipButtonControlBar {
         this.container.appendChild(this.skipIcon);
         this.container.appendChild(this.textContainer);
         this.container.addEventListener("click", () => this.toggleSkip());
-        this.container.addEventListener("mouseenter", () => this.stopTimer());
-        this.container.addEventListener("mouseleave", () => this.startTimer());
+        this.container.addEventListener("mouseenter", () => {
+            this.stopTimer();
+
+            if (this.segment) {
+                props.selectSegment(this.segment.UUID);
+            }
+        });
+        this.container.addEventListener("mouseleave", () => {
+            this.startTimer();
+
+            props.selectSegment(null);
+        });
         if (this.onMobileYouTube) {
             this.container.addEventListener("touchstart", (e) => this.handleTouchStart(e));
             this.container.addEventListener("touchmove", (e) => this.handleTouchMove(e));