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,
  },
 });