From 74585af4092b1df8640d07523fb70608eeb20d10 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Mon, 24 Feb 2020 18:33:56 +0800
Subject: [PATCH] Arrow keys now jump percentage of timeline length (at current
 zoom level) #254

---
 src/HelpSheet.jsx |  4 ++--
 src/renderer.jsx  | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/HelpSheet.jsx b/src/HelpSheet.jsx
index f5aeb47a..f175f4cf 100644
--- 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
index 7139067f..218a7a24 100644
--- 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(() => {