zoom improvements #254

- ctrl/cmd+up/down hotkey to zoom
- implement hotkey for comfort zoom

src/App.jsx

@@ -332,6 +332,16 @@ const App = memo(() => {
   const zoomRel = useCallback((rel) => setZoom(z => Math.min(Math.max(z + rel, 1), zoomMax)), []);
   const frameRenderEnabled = !!(rotationPreviewRequested || dummyVideoPath);
 
+  const comfortZoom = duration ? (duration / 100) : undefined;
+  const toggleComfortZoom = useCallback(() => {
+    if (!comfortZoom) return;
+
+    setZoom((prevZoom) => {
+      if (prevZoom === 1) return comfortZoom;
+      return 1;
+    });
+  }, [comfortZoom]);
+
   const getSegApparentEnd = useCallback((seg) => {
     const time = seg.end;
     if (time !== undefined) return time;
@@ -1053,6 +1063,9 @@ const App = memo(() => {
     Mousetrap.bind('alt+right', () => seekClosestKeyframe(1));
     Mousetrap.bind('up', () => jumpSeg(-1));
     Mousetrap.bind('down', () => jumpSeg(1));
+    Mousetrap.bind(['ctrl+up', 'command+up'], () => { zoomRel(1); return false; });
+    Mousetrap.bind(['ctrl+down', 'command+down'], () => { zoomRel(-1); return false; });
+    Mousetrap.bind('z', () => toggleComfortZoom());
     Mousetrap.bind('.', () => shortStep(1));
     Mousetrap.bind(',', () => shortStep(-1));
     Mousetrap.bind('c', () => capture());
@@ -1077,6 +1090,9 @@ const App = memo(() => {
       Mousetrap.unbind('alt+right');
       Mousetrap.unbind('up');
       Mousetrap.unbind('down');
+      Mousetrap.unbind(['ctrl+up', 'command+up']);
+      Mousetrap.unbind(['ctrl+down', 'command+down']);
+      Mousetrap.unbind('z');
       Mousetrap.unbind('.');
       Mousetrap.unbind(',');
       Mousetrap.unbind('c');
@@ -1091,7 +1107,7 @@ const App = memo(() => {
   }, [
     addCutSegment, capture, changePlaybackRate, cutClick, playCommand, removeCutSegment,
     setCutEnd, setCutStart, seekRel, seekRelPercent, shortStep, deleteSource, jumpSeg, toggleHelp,
-    seekClosestKeyframe,
+    seekClosestKeyframe, zoomRel, toggleComfortZoom,
   ]);
 
   useEffect(() => {

src/HelpSheet.jsx

@@ -39,21 +39,26 @@ const HelpSheet = memo(({
         <div><kbd>CTRL</kbd> / <kbd>CMD</kbd> + <kbd>←</kbd> Seek backward 1% of timeline at current zoom</div>
         <div><kbd>CTRL</kbd> / <kbd>CMD</kbd> + <kbd>→</kbd> Seek forward 1% of timeline at current zoom</div>
 
+        <h2>Timeline/zoom operations</h2>
+        <div><kbd>Z</kbd> Toggle zoom between 1x and a calculated comfortable zoom level</div>
+        <div><kbd>CTRL</kbd> / <kbd>CMD</kbd> + <kbd>↑</kbd> Zoom in timeline</div>
+        <div><kbd>CTRL</kbd> / <kbd>CMD</kbd> + <kbd>↓</kbd> Zoom out timeline</div>
+        <div><i>Mouse scroll up/down/left/right</i> - Pan timeline</div>
+        <div><kbd>CTRL</kbd><i> + Mouse scroll up/down</i> - Zoom in/out timeline</div>
+
         <h2>Segments and cut points</h2>
         <div><kbd>I</kbd> Mark in / cut start point for current segment</div>
         <div><kbd>O</kbd> Mark out / cut end point for current segment</div>
         <div><kbd>+</kbd> Add cut segment</div>
         <div><kbd>BACKSPACE</kbd> Remove current segment</div>
+        <div><kbd>↑</kbd> Select previous segment</div>
+        <div><kbd>↓</kbd> Select next segment</div>
 
         <h2>File system actions</h2>
         <div><kbd>E</kbd> Export segment(s)</div>
         <div><kbd>C</kbd> Capture snapshot</div>
         <div><kbd>D</kbd> Delete source file</div>
 
-        <h1>Mouse actions</h1>
-        <div><i>Mouse scroll up/down/left/right</i> - Seek / pan timeline</div>
-        <div><kbd>CTRL</kbd><i> + Mouse scroll up/down</i> - Zoom in/out timeline</div>
-
         <p style={{ fontWeight: 'bold' }}>Hover mouse over buttons in the main interface to see which function they have.</p>
 
         <h1 style={{ marginTop: 40 }}>Last ffmpeg commands</h1>

src/LeftMenu.jsx

@@ -16,6 +16,8 @@ const LeftMenu = memo(({ zoom, setZoom, invertCutSegments, setInvertCutSegments
     });
   }
 
+  const zoomOptions = Array(13).fill().map((unused, z) => 2 ** z);
+
   return (
     <div className="no-user-select" style={{ padding: '.3em', display: 'flex', alignItems: 'center' }}>
       <div style={{ marginLeft: 5 }}>
@@ -33,13 +35,11 @@ const LeftMenu = memo(({ zoom, setZoom, invertCutSegments, setInvertCutSegments
       </div>
 
       <div style={{ marginRight: 5, marginLeft: 10 }} title="Zoom">{Math.floor(zoom)}x</div>
-      <Select height={20} style={{ width: 20 }} value={zoom.toString()} title="Zoom" onChange={withBlur(e => setZoom(parseInt(e.target.value, 10)))}>
-        {Array(13).fill().map((unused, z) => {
-          const val = 2 ** z;
-          return (
-            <option key={val} value={String(val)}>Zoom {val}x</option>
-          );
-        })}
+      <Select height={20} style={{ width: 20 }} value={zoomOptions.includes(zoom) ? zoom.toString() : ''} title="Zoom" onChange={withBlur(e => setZoom(parseInt(e.target.value, 10)))}>
+        <option key="" value="" disabled>Zoom</option>
+        {zoomOptions.map(val => (
+          <option key={val} value={String(val)}>Zoom {val}x</option>
+        ))}
       </Select>
     </div>
   );