Allow labelling segments with enter key #655

src/App.jsx

@@ -53,7 +53,7 @@ import {
   isDurationValid, isWindows, filenamify, getOutFileExtension, generateSegFileName, defaultOutSegTemplate,
   hasDuplicates, havePermissionToReadFile,
 } from './util';
-import { askForOutDir, askForImportChapters, createNumSegments, createFixedDurationSegments, promptTimeOffset, askForHtml5ifySpeed, askForYouTubeInput, askForFileOpenAction, confirmExtractAllStreamsDialog, cleanupFilesDialog, showDiskFull, showCutFailedDialog } from './dialogs';
+import { askForOutDir, askForImportChapters, createNumSegments, createFixedDurationSegments, promptTimeOffset, askForHtml5ifySpeed, askForYouTubeInput, askForFileOpenAction, confirmExtractAllStreamsDialog, cleanupFilesDialog, showDiskFull, showCutFailedDialog, labelSegmentDialog } from './dialogs';
 import { openSendReportDialog } from './reporting';
 import { fallbackLng } from './i18n';
 import { createSegment, createInitialCutSegments, getCleanCutSegments, getSegApparentStart, findSegmentsAtCursor } from './segments';
@@ -373,6 +373,11 @@ const App = memo(() => {
     updateSegAtIndex(currentSegIndexSafe, { name });
   }, [currentSegIndexSafe, updateSegAtIndex]);
 
+  const onLabelSegmentPress = useCallback(async () => {
+    const value = await labelSegmentDialog(currentCutSeg.name);
+    if (value != null) setCurrentSegmentName(value);
+  }, [currentCutSeg, setCurrentSegmentName]);
+
   const updateCurrentSegOrder = useCallback((newOrder) => {
     if (newOrder > cutSegments.length - 1 || newOrder < 0) return;
     const newSegments = [...cutSegments];
@@ -1401,13 +1406,18 @@ const App = memo(() => {
       cutSegmentsHistory.forward();
     });
 
+    mousetrap.bind(['enter'], () => {
+      onLabelSegmentPress();
+      return false;
+    });
+
     return () => mousetrap.reset();
   }, [
     addCutSegment, capture, changePlaybackRate, togglePlay, removeCutSegment,
     setCutEnd, setCutStart, seekRel, seekRelPercent, shortStep, cleanupFiles, jumpSeg,
     seekClosestKeyframe, zoomRel, toggleComfortZoom, splitCurrentSegment, exportConfirmVisible,
     increaseRotation, jumpCutStart, jumpCutEnd, cutSegmentsHistory, keyboardSeekAccFactor,
-    keyboardNormalSeekSpeed,
+    keyboardNormalSeekSpeed, onLabelSegmentPress,
   ]);
 
   useEffect(() => {
@@ -2163,7 +2173,7 @@ const App = memo(() => {
                   invertCutSegments={invertCutSegments}
                   onSegClick={setCurrentSegIndex}
                   updateCurrentSegOrder={updateCurrentSegOrder}
-                  setCurrentSegmentName={setCurrentSegmentName}
+                  onLabelSegmentPress={onLabelSegmentPress}
                   currentCutSeg={currentCutSeg}
                   segmentAtCursor={segmentAtCursor}
                   addCutSegment={addCutSegment}

src/HelpSheet.jsx

@@ -64,6 +64,7 @@ const HelpSheet = memo(({ visible, onTogglePress, ffmpegCommandLog, currentCutSe
         <div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointRight} style={{ verticalAlign: 'middle' }} />, <kbd>O</kbd> {t('Mark out / cut end point for current segment')}</div>
         <div><kbd>+</kbd> {t('Add cut segment')}</div>
         <div><kbd>BACKSPACE</kbd> {t('Remove current segment')}</div>
+        <div><kbd>ENTER</kbd> {t('Label current segment')}</div>
         <div><kbd>↑</kbd> {t('Select previous segment')}</div>
         <div><kbd>↓</kbd> {t('Select next segment')}</div>
         <div><kbd>B</kbd> {t('Split segment at cursor')}</div>

src/SegmentList.jsx

@@ -72,7 +72,7 @@ const SegmentList = memo(({
   formatTimecode, cutSegments, outSegments, getFrameCount, onSegClick,
   currentSegIndex, invertCutSegments,
   updateCurrentSegOrder, addCutSegment, removeCutSegment,
-  setCurrentSegmentName, currentCutSeg, segmentAtCursor, toggleSideBar, splitCurrentSegment,
+  onLabelSegmentPress, currentCutSeg, segmentAtCursor, toggleSideBar, splitCurrentSegment,
 }) => {
   const { t } = useTranslation();
 
@@ -81,21 +81,6 @@ const SegmentList = memo(({
   if (!outSegments && invertCutSegments) headerText = t('Make sure you have no overlapping segments.');
   else if (!outSegments || outSegments.length === 0) headerText = t('No segments to export.');
 
-  async function onLabelSegmentPress() {
-    const { value } = await Swal.fire({
-      showCancelButton: true,
-      title: t('Label current segment'),
-      inputValue: currentCutSeg.name,
-      input: 'text',
-      inputValidator: (v) => {
-        const maxLength = 100;
-        return v.length > maxLength ? `${t('Max length')} ${maxLength}` : undefined;
-      },
-    });
-
-    if (value != null) setCurrentSegmentName(value);
-  }
-
   async function onReorderSegsPress() {
     if (cutSegments.length < 2) return;
     const { value } = await Swal.fire({

src/dialogs.jsx

@@ -263,3 +263,17 @@ export async function showCutFailedDialog({ detectedFileFormat }) {
   const { value } = await ReactSwal.fire({ title: i18n.t('Unable to export this file'), html, timer: null, showConfirmButton: true, showCancelButton: true, cancelButtonText: i18n.t('OK'), confirmButtonText: i18n.t('Report'), reverseButtons: true, focusCancel: true });
   return value;
 }
+
+export async function labelSegmentDialog(currentName) {
+  const { value } = await Swal.fire({
+    showCancelButton: true,
+    title: i18n.t('Label current segment'),
+    inputValue: currentName,
+    input: 'text',
+    inputValidator: (v) => {
+      const maxLength = 100;
+      return v.length > maxLength ? `${i18n.t('Max length')} ${maxLength}` : undefined;
+    },
+  });
+  return value;
+}