Invert timeline trackpad/wheel #310

Also add setting to change back

src/App.jsx

@@ -218,6 +218,8 @@ const App = memo(() => {
   useEffect(() => safeSetConfig('autoSaveProjectFile', autoSaveProjectFile), [autoSaveProjectFile]);
   const [wheelSensitivity, setWheelSensitivity] = useState(configStore.get('wheelSensitivity'));
   useEffect(() => safeSetConfig('wheelSensitivity', wheelSensitivity), [wheelSensitivity]);
+  const [invertTimelineScroll, setInvertTimelineScroll] = useState(configStore.get('invertTimelineScroll'));
+  useEffect(() => safeSetConfig('invertTimelineScroll', invertTimelineScroll), [invertTimelineScroll]);
   const [language, setLanguage] = useState(configStore.get('language'));
   useEffect(() => safeSetConfig('language', language), [language]);
 
@@ -1645,6 +1647,8 @@ const App = memo(() => {
       setTimecodeShowFrames={setTimecodeShowFrames}
       askBeforeClose={askBeforeClose}
       setAskBeforeClose={setAskBeforeClose}
+      invertTimelineScroll={invertTimelineScroll}
+      setInvertTimelineScroll={setInvertTimelineScroll}
       language={language}
       setLanguage={setLanguage}
 
@@ -1653,7 +1657,7 @@ const App = memo(() => {
       renderCaptureFormatButton={renderCaptureFormatButton}
       onWheelTunerRequested={onWheelTunerRequested}
     />
-  ), [AutoExportToggler, askBeforeClose, autoMerge, autoSaveProjectFile, customOutDir, invertCutSegments, keyframeCut, renderCaptureFormatButton, renderOutFmt, timecodeShowFrames, changeOutDir, onWheelTunerRequested, language]);
+  ), [AutoExportToggler, askBeforeClose, autoMerge, autoSaveProjectFile, customOutDir, invertCutSegments, keyframeCut, renderCaptureFormatButton, renderOutFmt, timecodeShowFrames, changeOutDir, onWheelTunerRequested, language, invertTimelineScroll]);
 
   useEffect(() => {
     if (!isStoreBuild) loadMifiLink().then(setMifiLink);
@@ -1916,6 +1920,7 @@ const App = memo(() => {
           timelineHeight={timelineHeight}
           onZoomWindowStartTimeChange={setZoomWindowStartTime}
           wheelSensitivity={wheelSensitivity}
+          invertTimelineScroll={invertTimelineScroll}
         />
 
         <TimelineControls
@@ -1986,7 +1991,7 @@ const App = memo(() => {
 
       {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 }}>
-          {t('Scroll sensitivity')}
+          {t('Timeline trackpad/wheel 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)}>{t('Done')}</Button>
         </div>

src/Settings.jsx

@@ -7,6 +7,7 @@ const Settings = memo(({
   changeOutDir, customOutDir, autoMerge, setAutoMerge, keyframeCut, setKeyframeCut, invertCutSegments, setInvertCutSegments,
   autoSaveProjectFile, setAutoSaveProjectFile, timecodeShowFrames, setTimecodeShowFrames, askBeforeClose, setAskBeforeClose,
   renderOutFmt, AutoExportToggler, renderCaptureFormatButton, onWheelTunerRequested, language, setLanguage,
+  invertTimelineScroll, setInvertTimelineScroll,
 }) => {
   const { t } = useTranslation();
 
@@ -137,12 +138,23 @@ const Settings = memo(({
       </Row>
 
       <Row>
-        <KeyCell>{t('Scroll/wheel sensitivity')}</KeyCell>
+        <KeyCell>{t('Timeline trackpad/wheel sensitivity')}</KeyCell>
         <Table.TextCell>
           <Button onClick={onWheelTunerRequested}>{t('Change sensitivity')}</Button>
         </Table.TextCell>
       </Row>
 
+      <Row>
+        <KeyCell>{t('Invert timeline trackpad/wheel direction?')}</KeyCell>
+        <Table.TextCell>
+          <Checkbox
+            label={t('Invert direction')}
+            checked={invertTimelineScroll}
+            onChange={e => setInvertTimelineScroll(e.target.checked)}
+          />
+        </Table.TextCell>
+      </Row>
+
       <Row>
         <KeyCell>{t('Ask for confirmation when closing app or file?')}</KeyCell>
         <Table.TextCell>

src/Timeline.jsx

@@ -44,6 +44,7 @@ const Timeline = memo(({
   setCurrentSegIndex, currentSegIndexSafe, invertCutSegments, inverseCutSegments, formatTimecode,
   waveform, shouldShowWaveform, shouldShowKeyframes, timelineHeight, thumbnails,
   onZoomWindowStartTimeChange, waveformEnabled, thumbnailsEnabled, wheelSensitivity,
+  invertTimelineScroll,
 }) => {
   const { t } = useTranslation();
 
@@ -150,12 +151,16 @@ const Timeline = memo(({
   const onWheel = useCallback((e) => {
     const { pixelX, pixelY } = normalizeWheel(e);
     // console.log({ spinX, spinY, pixelX, pixelY });
+
+    const seekDirection = invertTimelineScroll ? 1 : -1;
+    const zoomDirection = invertTimelineScroll ? -1 : 1;
+
     if (e.ctrlKey) {
-      zoomRel(-pixelY * wheelSensitivity * 0.4);
+      zoomRel(zoomDirection * (pixelY) * wheelSensitivity * 0.4);
     } else {
-      seekRel((pixelX + pixelY) * wheelSensitivity * 0.2);
+      seekRel(seekDirection * (pixelX + pixelY) * wheelSensitivity * 0.2);
     }
-  }, [seekRel, zoomRel, wheelSensitivity]);
+  }, [seekRel, zoomRel, wheelSensitivity, invertTimelineScroll]);
 
   return (
     <Hammer