allow configure wheel sensitivity #254

src/App.jsx

@@ -190,10 +190,13 @@ const App = memo(() => {
   useEffect(() => configStore.set('muted', muted), [muted]);
   const [autoSaveProjectFile, setAutoSaveProjectFile] = useState(configStore.get('autoSaveProjectFile'));
   useEffect(() => configStore.set('autoSaveProjectFile', autoSaveProjectFile), [autoSaveProjectFile]);
+  const [wheelSensitivity, setWheelSensitivity] = useState(configStore.get('wheelSensitivity'));
+  useEffect(() => configStore.set('wheelSensitivity', wheelSensitivity), [wheelSensitivity]);
 
   // Global state
   const [helpVisible, setHelpVisible] = useState(false);
   const [settingsVisible, setSettingsVisible] = useState(false);
+  const [wheelTunerVisible, setWheelTunerVisible] = useState(false);
   const [mifiLink, setMifiLink] = useState();
 
   const videoRef = useRef();
@@ -1375,6 +1378,12 @@ const App = memo(() => {
     />
   ), [autoExportExtraStreams]);
 
+  const onWheelTunerRequested = useCallback(() => {
+    console.log('wat');
+    setSettingsVisible(false);
+    setWheelTunerVisible(true);
+  }, []);
+
   const renderSettings = useCallback(() => (
     <Settings
       setOutputDir={setOutputDir}
@@ -1395,8 +1404,9 @@ const App = memo(() => {
       renderOutFmt={renderOutFmt}
       AutoExportToggler={AutoExportToggler}
       renderCaptureFormatButton={renderCaptureFormatButton}
+      onWheelTunerRequested={onWheelTunerRequested}
     />
-  ), [AutoExportToggler, askBeforeClose, autoMerge, autoSaveProjectFile, customOutDir, invertCutSegments, keyframeCut, renderCaptureFormatButton, renderOutFmt, timecodeShowFrames, setOutputDir]);
+  ), [AutoExportToggler, askBeforeClose, autoMerge, autoSaveProjectFile, customOutDir, invertCutSegments, keyframeCut, renderCaptureFormatButton, renderOutFmt, timecodeShowFrames, setOutputDir, onWheelTunerRequested]);
 
   useEffect(() => {
     loadMifiLink().then(setMifiLink);
@@ -1649,6 +1659,7 @@ const App = memo(() => {
           formatTimecode={formatTimecode}
           timelineHeight={timelineHeight}
           onZoomWindowStartTimeChange={setZoomWindowStartTime}
+          wheelSensitivity={wheelSensitivity}
         />
 
         <TimelineControls
@@ -1687,6 +1698,7 @@ const App = memo(() => {
             setZoom={setZoom}
             invertCutSegments={invertCutSegments}
             setInvertCutSegments={setInvertCutSegments}
+            toggleComfortZoom={toggleComfortZoom}
           />
 
           <RightMenu
@@ -1714,6 +1726,14 @@ const App = memo(() => {
         onTogglePress={toggleSettings}
         renderSettings={renderSettings}
       />
+
+      {wheelTunerVisible && (
+        <div style={{ display: 'flex', alignItems: 'center', background: 'white', color: 'black', padding: 10, margin: 10, borderRadius: 10, width: '100%', maxWidth: 500, position: 'fixed', left: 0, bottom: bottomBarHeight, zIndex: 10 }}>
+          Scroll sensitivity
+          <input style={{ flexGrow: 1 }} type="range" min="0" max="1000" step="1" value={wheelSensitivity * 1000} onChange={e => setWheelSensitivity(e.target.value / 1000)} />
+          <Button height={20} intent="success" onClick={() => setWheelTunerVisible(false)}>Done</Button>
+        </div>
+      )}
     </div>
   );
 });

src/Settings.jsx

@@ -4,7 +4,7 @@ import { Button, Table, SegmentedControl, Checkbox } from 'evergreen-ui';
 const Settings = memo(({
   setOutputDir, customOutDir, autoMerge, setAutoMerge, keyframeCut, setKeyframeCut, invertCutSegments, setInvertCutSegments,
   autoSaveProjectFile, setAutoSaveProjectFile, timecodeShowFrames, setTimecodeShowFrames, askBeforeClose, setAskBeforeClose,
-  renderOutFmt, AutoExportToggler, renderCaptureFormatButton,
+  renderOutFmt, AutoExportToggler, renderCaptureFormatButton, onWheelTunerRequested,
 }) => {
   // eslint-disable-next-line react/jsx-props-no-spreading
   const Row = (props) => <Table.Row height="auto" paddingY={12} {...props} />;
@@ -116,6 +116,13 @@ const Settings = memo(({
         </Table.TextCell>
       </Row>
 
+      <Row>
+        <KeyCell>Scroll/wheel sensitivity</KeyCell>
+        <Table.TextCell>
+          <Button onClick={onWheelTunerRequested}>Change sensitivity</Button>
+        </Table.TextCell>
+      </Row>
+
       <Row>
         <KeyCell>Ask for confirmation when closing app or file?</KeyCell>
         <Table.TextCell>

src/Timeline.jsx

@@ -42,7 +42,7 @@ const Timeline = memo(({
   zoom, neighbouringFrames, seekAbs, seekRel, duration, apparentCutSegments, zoomRel,
   setCurrentSegIndex, currentSegIndexSafe, invertCutSegments, inverseCutSegments, formatTimecode,
   waveform, shouldShowWaveform, shouldShowKeyframes, timelineHeight, thumbnails,
-  onZoomWindowStartTimeChange, waveformEnabled, thumbnailsEnabled,
+  onZoomWindowStartTimeChange, waveformEnabled, thumbnailsEnabled, wheelSensitivity,
 }) => {
   const timelineScrollerRef = useRef();
   const timelineScrollerSkipEventRef = useRef();
@@ -148,11 +148,11 @@ const Timeline = memo(({
     const { pixelX, pixelY } = normalizeWheel(e);
     // console.log({ spinX, spinY, pixelX, pixelY });
     if (e.ctrlKey) {
-      zoomRel(-pixelY / 10);
+      zoomRel(-pixelY * wheelSensitivity * 0.4);
     } else {
-      seekRel((pixelX + pixelY) / 15);
+      seekRel((pixelX + pixelY) * wheelSensitivity * 0.2);
     }
-  }, [seekRel, zoomRel]);
+  }, [seekRel, zoomRel, wheelSensitivity]);
 
   return (
     <Hammer

src/store.js

@@ -12,5 +12,6 @@ export default new Store({
     askBeforeClose: false,
     muted: false,
     autoSaveProjectFile: true,
+    wheelSensitivity: 0.2,
   },
 });