Improvements #315

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' }}>

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>
         )}