From 5c3ac75c315136ce5b6305af5ebd0b8a08ad50d2 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 2 May 2025 18:35:55 -0500
Subject: [PATCH] Listen on timeline ref instead of window (#18006)

---
 web/src/hooks/use-timeline-zoom.ts | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/web/src/hooks/use-timeline-zoom.ts b/web/src/hooks/use-timeline-zoom.ts
index bcd996f77..aabd6d22b 100644
--- a/web/src/hooks/use-timeline-zoom.ts
+++ b/web/src/hooks/use-timeline-zoom.ts
@@ -159,16 +159,30 @@ export function useTimelineZoom({
   );
 
   useEffect(() => {
-    window.addEventListener("wheel", handleWheel, { passive: false });
-    window.addEventListener("touchstart", handleTouchStart, { passive: false });
-    window.addEventListener("touchmove", handleTouchMove, { passive: false });
+    const timelineElement = timelineRef.current;
+
+    if (timelineElement) {
+      timelineElement.addEventListener("wheel", handleWheel, {
+        passive: false,
+      });
+      timelineElement.addEventListener("touchstart", handleTouchStart, {
+        passive: false,
+      });
+      timelineElement.addEventListener("touchmove", handleTouchMove, {
+        passive: false,
+      });
+    }
 
     return () => {
-      window.removeEventListener("wheel", handleWheel);
-      window.removeEventListener("touchstart", handleTouchStart);
-      window.removeEventListener("touchmove", handleTouchMove);
+      if (timelineElement) {
+        timelineElement.removeEventListener("wheel", handleWheel);
+        timelineElement.removeEventListener("touchstart", handleTouchStart);
+        timelineElement.removeEventListener("touchmove", handleTouchMove);
+      }
     };
-  }, [handleWheel, handleTouchStart, handleTouchMove]);
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleWheel, handleTouchStart, handleTouchMove, timelineRef.current]);
 
   return { zoomLevel, handleZoom, isZooming, zoomDirection };
 }