From e6d71754fe4bbc0de50a560c83b9e294c3abd842 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Sat, 18 Apr 2020 13:25:48 +0800
Subject: [PATCH] Improvements #315

---
 src/App.jsx              | 12 +++++++++++-
 src/TimelineControls.jsx |  4 ++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 804a45b6..0dac4a76 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -255,6 +255,16 @@ const App = memo(() => {
     }
   }
 
+  const toggleKeyframesEnabled = useCallback(() => {
+    setKeyframesEnabled((old) => {
+      const enabled = !old;
+      if (enabled && !calcShouldShowKeyframes(zoomedDuration)) {
+        toast.fire({ text: i18n.t('Key frames will now show on the timeline. You need to zoom in to view them') });
+      }
+      return enabled;
+    });
+  }, [zoomedDuration]);
+
   function appendFfmpegCommandLog(command) {
     setFfmpegCommandLog(old => [...old, { command, time: new Date() }]);
   }
@@ -1935,7 +1945,7 @@ const App = memo(() => {
           hasAudio={hasAudio}
           hasVideo={hasVideo}
           keyframesEnabled={keyframesEnabled}
-          setKeyframesEnabled={setKeyframesEnabled}
+          toggleKeyframesEnabled={toggleKeyframesEnabled}
         />
 
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
diff --git a/src/TimelineControls.jsx b/src/TimelineControls.jsx
index b6884dff..efbdbbcf 100644
--- a/src/TimelineControls.jsx
+++ b/src/TimelineControls.jsx
@@ -14,7 +14,7 @@ const TimelineControls = memo(({
   setCurrentSegIndex, cutStartTimeManual, setCutStartTimeManual, cutEndTimeManual, setCutEndTimeManual,
   duration, jumpCutEnd, jumpCutStart, startTimeOffset, setCutTime, currentApparentCutSeg,
   playing, shortStep, togglePlay, setTimelineMode, hasAudio, hasVideo, timelineMode,
-  keyframesEnabled, setKeyframesEnabled, seekClosestKeyframe,
+  keyframesEnabled, toggleKeyframesEnabled, seekClosestKeyframe,
 }) => {
   const { t } = useTranslation();
 
@@ -144,7 +144,7 @@ const TimelineControls = memo(({
               style={{ padding: '0 5px', color: keyframesEnabled ? primaryTextColor : undefined }}
               role="button"
               title={t('Show keyframes')}
-              onClick={() => setKeyframesEnabled(v => !v)}
+              onClick={toggleKeyframesEnabled}
             />
           </Fragment>
         )}