From 7ff1734db76f2fe2bb6f6810d19a43cf1f48f201 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Tue, 28 Apr 2026 17:31:49 -0400
Subject: [PATCH] fix(studio): capture timeline pinch zoom

---
 packages/studio/src/player/components/Timeline.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/studio/src/player/components/Timeline.tsx b/packages/studio/src/player/components/Timeline.tsx
index d4b75f59f..810975875 100644
--- a/packages/studio/src/player/components/Timeline.tsx
+++ b/packages/studio/src/player/components/Timeline.tsx
@@ -1042,8 +1042,8 @@ export const Timeline = memo(function Timeline({
     [onAssetDrop, onFileDrop],
   );
 
-  const handleWheel = useCallback(
-    (e: React.WheelEvent<HTMLDivElement>) => {
+  const handlePinchWheel = useCallback(
+    (e: WheelEvent) => {
       if (!e.ctrlKey) return;
       const scroll = scrollRef.current;
       if (!scroll || durationRef.current <= 0 || fitPpsRef.current <= 0 || ppsRef.current <= 0) {
@@ -1084,6 +1084,15 @@ export const Timeline = memo(function Timeline({
     [setManualZoomPercent, setZoomMode],
   );
 
+  useEffect(() => {
+    const scroll = scrollRef.current;
+    if (!scroll) return;
+    scroll.addEventListener("wheel", handlePinchWheel, { passive: false, capture: true });
+    return () => {
+      scroll.removeEventListener("wheel", handlePinchWheel, { capture: true });
+    };
+  }, [handlePinchWheel, timelineReady, elements.length]);
+
   if (!timelineReady || elements.length === 0) {
     return (
       <div
@@ -1259,7 +1268,6 @@ export const Timeline = memo(function Timeline({
         onDragOver={handleAssetDragOver}
         onDragLeave={() => setIsDragOver(false)}
         onDrop={handleAssetDrop}
-        onWheel={handleWheel}
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}