Add delay to fetch on hover to make it less easy to trigger

ajayyy · Jan 17, 2025 · 0f4c1c5 · 0f4c1c5
1 parent 9e4939e
commit 0f4c1c5
Showing 1 changed file with 21 additions and 4 deletions.
diff --git a/src/utils/thumbnails.ts b/src/utils/thumbnails.ts
@@ -58,10 +58,27 @@ function thumbnailHoverListener(e: MouseEvent) {
     if (!thumbnail) return;
 
     // Pre-fetch data for this video
-    const videoID = extractVideoID(thumbnail);
-    if (videoID) {
-        void getSegmentsForVideo(videoID, false);
-    }
+    let fetched = false;
+    const preFetch = () => {
+        fetched = true;
+        const videoID = extractVideoID(thumbnail);
+        if (videoID) {
+            void getSegmentsForVideo(videoID, false);
+        }
+    };
+    const timeout = setTimeout(preFetch, 200);
+    const onMouseDown = () => {
+        clearTimeout(timeout);
+        if (!fetched) {
+            preFetch();
+        }
+    };
+
+    e.target.addEventListener("mousedown", onMouseDown, { once: true });
+    e.target.addEventListener("mouseleave", () => {
+        clearTimeout(timeout);
+        e.target.removeEventListener("mousedown", onMouseDown);
+    }, { once: true });
 }
 
 function getLink(thumbnail: HTMLImageElement): HTMLAnchorElement | null {