make mouse wheel scroll work also when the cursor is over the video, not just timeline #248 #553

src/App.jsx

@@ -19,6 +19,7 @@ import sortBy from 'lodash/sortBy';
 import flatMap from 'lodash/flatMap';
 import isEqual from 'lodash/isEqual';
 
+import useTimelineScroll from './hooks/useTimelineScroll';
 import NoFileLoaded from './NoFileLoaded';
 import Canvas from './Canvas';
 import TopMenu from './TopMenu';
@@ -344,6 +345,8 @@ const App = memo(() => {
     });
   }, [comfortZoom]);
 
+  const onTimelineWheel = useTimelineScroll({ wheelSensitivity, invertTimelineScroll, zoomRel, seekRel });
+
   const getSegApparentEnd = useCallback((seg) => {
     const time = seg.end;
     if (time !== undefined) return time;
@@ -2070,7 +2073,7 @@ const App = memo(() => {
         )}
       </AnimatePresence>
 
-      <div className="no-user-select" style={{ position: 'absolute', top: topBarHeight, left: 0, right: sideBarWidth, bottom: bottomBarHeight, visibility: !isFileOpened ? 'hidden' : undefined }}>
+      <div className="no-user-select" style={{ position: 'absolute', top: topBarHeight, left: 0, right: sideBarWidth, bottom: bottomBarHeight, visibility: !isFileOpened ? 'hidden' : undefined }} onWheel={onTimelineWheel}>
         {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
         <video
           muted={muted}
@@ -2174,8 +2177,6 @@ const App = memo(() => {
           commandedTime={commandedTime}
           zoom={zoom}
           seekAbs={seekAbs}
-          seekRel={seekRel}
-          zoomRel={zoomRel}
           durationSafe={durationSafe}
           apparentCutSegments={apparentCutSegments}
           setCurrentSegIndex={setCurrentSegIndex}
@@ -2185,10 +2186,9 @@ const App = memo(() => {
           formatTimecode={formatTimecode}
           timelineHeight={timelineHeight}
           onZoomWindowStartTimeChange={setZoomWindowStartTime}
-          wheelSensitivity={wheelSensitivity}
-          invertTimelineScroll={invertTimelineScroll}
           playing={playing}
           isFileOpened={isFileOpened}
+          onWheel={onTimelineWheel}
         />
 
         <TimelineControls

src/Timeline.jsx

@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next';
 
 import TimelineSeg from './TimelineSeg';
 import InverseCutSegment from './InverseCutSegment';
-import normalizeWheel from './normalizeWheel';
 
 
 import { timelineBackground } from './colors';
@@ -40,11 +39,11 @@ const Waveform = memo(({ calculateTimelinePercent, durationSafe, waveform, zoom,
 
 const Timeline = memo(({
   durationSafe, getCurrentTime, startTimeOffset, playerTime, commandedTime,
-  zoom, neighbouringFrames, seekAbs, seekRel, apparentCutSegments, zoomRel,
+  zoom, neighbouringFrames, seekAbs, apparentCutSegments,
   setCurrentSegIndex, currentSegIndexSafe, invertCutSegments, inverseCutSegments, formatTimecode,
   waveform, shouldShowWaveform, shouldShowKeyframes, timelineHeight, thumbnails,
-  onZoomWindowStartTimeChange, waveformEnabled, thumbnailsEnabled, wheelSensitivity,
-  invertTimelineScroll, playing, isFileOpened,
+  onZoomWindowStartTimeChange, waveformEnabled, thumbnailsEnabled,
+  playing, isFileOpened, onWheel,
 }) => {
   const { t } = useTranslation();
 
@@ -158,19 +157,6 @@ const Timeline = memo(({
     seekAbs((getMouseTimelinePos(e.srcEvent)));
   }, [seekAbs, getMouseTimelinePos]);
 
-  const onWheel = useCallback((e) => {
-    const { pixelX, pixelY } = normalizeWheel(e);
-    // console.log({ spinX, spinY, pixelX, pixelY });
-
-    const direction = invertTimelineScroll ? 1 : -1;
-
-    if (e.ctrlKey) {
-      zoomRel(direction * (pixelY) * wheelSensitivity * 0.4);
-    } else {
-      seekRel(direction * (pixelX + pixelY) * wheelSensitivity * 0.2);
-    }
-  }, [seekRel, zoomRel, wheelSensitivity, invertTimelineScroll]);
-
   useEffect(() => {
     setHoveringTime();
   }, [playerTime, commandedTime]);

src/hooks/useTimelineScroll.js

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+
+import normalizeWheel from './normalizeWheel';
+
+function useTimelineScroll({ wheelSensitivity, invertTimelineScroll, zoomRel, seekRel }) {
+  const onWheel = useCallback((e) => {
+    const { pixelX, pixelY } = normalizeWheel(e);
+    // console.log({ spinX, spinY, pixelX, pixelY });
+
+    const direction = invertTimelineScroll ? 1 : -1;
+
+    if (e.ctrlKey) {
+      zoomRel(direction * (pixelY) * wheelSensitivity * 0.4);
+    } else {
+      seekRel(direction * (pixelX + pixelY) * wheelSensitivity * 0.2);
+    }
+  }, [seekRel, zoomRel, wheelSensitivity, invertTimelineScroll]);
+
+  return onWheel;
+}
+
+export default useTimelineScroll;