From 0f4c1c50cb39fce6d7f4f583de138c4eb7e12fdc Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Fri, 17 Jan 2025 04:33:56 -0500
Subject: [PATCH] Add delay to fetch on hover to make it less easy to trigger

---
 src/utils/thumbnails.ts | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/utils/thumbnails.ts b/src/utils/thumbnails.ts
index 68ad8169..f6f82a60 100644
--- 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 {