Arrow keys now jump percentage of timeline length (at current zoom le…

…vel) #254
mifi · Feb 24, 2020 · 74585af · 74585af
1 parent 6bf6856
commit 74585af
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/HelpSheet.jsx b/src/HelpSheet.jsx
@@ -27,8 +27,8 @@ const HelpSheet = memo(({
         <div><kbd>SPACE</kbd>, <kbd>k</kbd> Play/pause</div>
         <div><kbd>J</kbd> Slow down video</div>
         <div><kbd>L</kbd> Speed up video</div>
-        <div><kbd>←</kbd> Seek backward 1 sec</div>
-        <div><kbd>→</kbd> Seek forward 1 sec</div>
+        <div><kbd>←</kbd> Seek backward 5% of timeline</div>
+        <div><kbd>→</kbd> Seek forward 5% of timeline</div>
         <div><kbd>,</kbd> Seek backward 1 frame</div>
         <div><kbd>.</kbd> Seek forward 1 frame</div>
         <div><kbd>I</kbd> Mark in / cut start point</div>

diff --git a/src/renderer.jsx b/src/renderer.jsx
@@ -217,6 +217,10 @@ const App = memo(() => {
     seekAbs(videoRef.current.currentTime + val);
   }, [seekAbs]);
 
+  const seekRelPercent = useCallback((val) => {
+    seekRel(val * (duration / zoom));
+  }, [seekRel, duration, zoom]);
+
   const shortStep = useCallback((dir) => {
     seekRel((1 / (detectedFps || 60)) * dir);
   }, [seekRel, detectedFps]);
@@ -945,8 +949,8 @@ const App = memo(() => {
     Mousetrap.bind('k', () => playCommand());
     Mousetrap.bind('j', () => changePlaybackRate(-1));
     Mousetrap.bind('l', () => changePlaybackRate(1));
-    Mousetrap.bind('left', () => seekRel(-1));
-    Mousetrap.bind('right', () => seekRel(1));
+    Mousetrap.bind('left', () => seekRelPercent(-0.05));
+    Mousetrap.bind('right', () => seekRelPercent(0.05));
     Mousetrap.bind('up', () => jumpSeg(-1));
     Mousetrap.bind('down', () => jumpSeg(1));
     Mousetrap.bind('.', () => shortStep(1));
@@ -982,7 +986,7 @@ const App = memo(() => {
     };
   }, [
     addCutSegment, capture, changePlaybackRate, cutClick, playCommand, removeCutSegment,
-    setCutEnd, setCutStart, seekRel, shortStep, deleteSource, jumpSeg,
+    setCutEnd, setCutStart, seekRelPercent, shortStep, deleteSource, jumpSeg,
   ]);
 
   useEffect(() => {