From 87df1c5e5f556ce4274fe914bdb64756c0c4839e Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Fri, 14 Jan 2022 22:54:33 +0700
Subject: [PATCH] implement go to timecode #625

inputted value
`g` key or right click timeline context menu
---
 src/App.jsx       | 24 ++++++++++++++++++++----
 src/HelpSheet.jsx |  1 +
 src/Timeline.jsx  | 11 ++++++++---
 src/dialogs.jsx   | 10 +++++-----
 4 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 96143b5b..bdbce9b3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1648,6 +1648,18 @@ const App = memo(() => {
     }
   }, [customOutDir, filePath, html5ifyAndLoad, hasVideo, hasAudio, rememberConvertToSupportedFormat, setWorking]);
 
+  const goToTimecode = useCallback(async () => {
+    if (!filePath) return;
+    const timeCode = await promptTimeOffset({
+      initialValue: formatDuration({ seconds: commandedTimeRef.current }),
+      title: i18n.t('Seek to timecode'),
+    });
+
+    if (timeCode === undefined) return;
+
+    seekAbs(timeCode);
+  }, [filePath, seekAbs]);
+
 
   // TODO split up?
   useEffect(() => {
@@ -1704,6 +1716,7 @@ const App = memo(() => {
     mousetrap.bind('d', () => cleanupFiles());
     mousetrap.bind('b', () => splitCurrentSegment());
     mousetrap.bind('r', () => increaseRotation());
+    mousetrap.bind('g', () => goToTimecode());
 
     mousetrap.bind('left', () => seekBackwards());
     mousetrap.bind('left', () => seekReset(), 'keyup');
@@ -1746,7 +1759,7 @@ const App = memo(() => {
     setCutEnd, setCutStart, seekRel, seekRelPercent, shortStep, cleanupFiles, jumpSeg,
     seekClosestKeyframe, zoomRel, toggleComfortZoom, splitCurrentSegment, exportConfirmVisible,
     increaseRotation, jumpCutStart, jumpCutEnd, cutSegmentsHistory, keyboardSeekAccFactor,
-    keyboardNormalSeekSpeed, onLabelSegmentPress, currentSegIndexSafe, batchFileJump,
+    keyboardNormalSeekSpeed, onLabelSegmentPress, currentSegIndexSafe, batchFileJump, goToTimecode,
   ]);
 
   const onVideoError = useCallback(async () => {
@@ -1797,9 +1810,11 @@ const App = memo(() => {
     }
 
     async function setStartOffset() {
-      const newStartTimeOffset = await promptTimeOffset(
-        startTimeOffset !== undefined ? formatDuration({ seconds: startTimeOffset }) : undefined,
-      );
+      const newStartTimeOffset = await promptTimeOffset({
+        initialValue: startTimeOffset !== undefined ? formatDuration({ seconds: startTimeOffset }) : undefined,
+        title: i18n.t('Set custom start time offset'),
+        text: i18n.t('Instead of video apparently starting at 0, you can offset by a specified value. This only applies to the preview inside LosslessCut and does not modify the file in any way. (Useful for viewing/cutting videos according to timecodes)'),
+      });
 
       if (newStartTimeOffset === undefined) return;
 
@@ -2415,6 +2430,7 @@ const App = memo(() => {
             playing={playing}
             isFileOpened={isFileOpened}
             onWheel={onTimelineWheel}
+            goToTimecode={goToTimecode}
           />
 
           <TimelineControls
diff --git a/src/HelpSheet.jsx b/src/HelpSheet.jsx
index d9d7bf68..b802c7ab 100644
--- a/src/HelpSheet.jsx
+++ b/src/HelpSheet.jsx
@@ -60,6 +60,7 @@ const HelpSheet = memo(({ visible, onTogglePress, ffmpegCommandLog, currentCutSe
         <div><kbd>CTRL</kbd> / <kbd>CMD</kbd> + <kbd>→</kbd> {t('Seek forward 1% of timeline at current zoom')}</div>
         <div style={{ lineHeight: 1.7 }}><SegmentCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaStepBackward} style={{ verticalAlign: 'middle' }} />, <kbd>SHIFT</kbd> + <kbd>←</kbd> {t('Jump to cut start')}</div>
         <div style={{ lineHeight: 1.7 }}><SegmentCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaStepForward} style={{ verticalAlign: 'middle' }} />, <kbd>SHIFT</kbd> + <kbd>→</kbd> {t('Jump to cut end')}</div>
+        <div><kbd>G</kbd> {t('Seek to timecode')}</div>
 
         <h2>{t('Segments and cut points')}</h2>
 
diff --git a/src/Timeline.jsx b/src/Timeline.jsx
index 79ed56ec..e984fd0f 100644
--- a/src/Timeline.jsx
+++ b/src/Timeline.jsx
@@ -7,6 +7,7 @@ import { FaCaretDown, FaCaretUp } from 'react-icons/fa';
 
 import TimelineSeg from './TimelineSeg';
 import BetweenSegments from './BetweenSegments';
+import useContextMenu from './hooks/useContextMenu';
 
 
 import { timelineBackground } from './colors';
@@ -41,14 +42,14 @@ const Waveform = memo(({ calculateTimelinePercent, durationSafe, waveform, zoom,
 
 const CommandedTime = memo(({ commandedTimePercent }) => {
   const color = 'white';
-  const commonStyle = { left: commandedTimePercent, position: 'absolute', zIndex: 4, pointerEvents: 'none' }
+  const commonStyle = { left: commandedTimePercent, position: 'absolute', zIndex: 4, pointerEvents: 'none' };
   return (
     <>
       <FaCaretDown style={{ ...commonStyle, top: 0, color, fontSize: 14, marginLeft: -7, marginTop: -6 }} />
       <div style={{ ...commonStyle, bottom: 0, top: 0, backgroundColor: color, width: currentTimeWidth }} />
       <FaCaretUp style={{ ...commonStyle, bottom: 0, color, fontSize: 14, marginLeft: -7, marginBottom: -5 }} />
     </>
-  )
+  );
 });
 
 const Timeline = memo(({
@@ -57,7 +58,7 @@ const Timeline = memo(({
   setCurrentSegIndex, currentSegIndexSafe, invertCutSegments, inverseCutSegments, formatTimecode,
   waveform, shouldShowWaveform, shouldShowKeyframes, timelineHeight, thumbnails,
   onZoomWindowStartTimeChange, waveformEnabled, thumbnailsEnabled,
-  playing, isFileOpened, onWheel, commandedTimeRef,
+  playing, isFileOpened, onWheel, commandedTimeRef, goToTimecode,
 }) => {
   const { t } = useTranslation();
 
@@ -191,6 +192,10 @@ const Timeline = memo(({
   const onMouseMove = useCallback((e) => setHoveringTime(getMouseTimelinePos(e.nativeEvent)), [getMouseTimelinePos]);
   const onMouseOut = useCallback(() => setHoveringTime(), []);
 
+  useContextMenu(timelineScrollerRef, [
+    { label: t('Seek to timecode'), click: goToTimecode },
+  ]);
+
   return (
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     <Hammer
diff --git a/src/dialogs.jsx b/src/dialogs.jsx
index 2f9aac73..f7210ef0 100644
--- a/src/dialogs.jsx
+++ b/src/dialogs.jsx
@@ -21,12 +21,12 @@ const { dialog, app } = electron.remote;
 
 const ReactSwal = withReactContent(Swal);
 
-export async function promptTimeOffset(inputValue) {
+export async function promptTimeOffset({ initialValue, title, text }) {
   const { value } = await Swal.fire({
-    title: i18n.t('Set custom start time offset'),
-    text: i18n.t('Instead of video apparently starting at 0, you can offset by a specified value. This only applies to the preview inside LosslessCut and does not modify the file in any way. (Useful for viewing/cutting videos according to timecodes)'),
+    title,
+    text,
     input: 'text',
-    inputValue: inputValue || '',
+    inputValue: initialValue || '',
     showCancelButton: true,
     inputPlaceholder: '00:00:00.000',
   });
@@ -37,7 +37,7 @@ export async function promptTimeOffset(inputValue) {
 
   const duration = parseDuration(value);
   // Invalid, try again
-  if (duration === undefined) return promptTimeOffset(value);
+  if (duration === undefined) return promptTimeOffset({ initialValue: value, title, text });
 
   return duration;
 }