Allow turn off export confirm dialog #512

public/configStore.js

@@ -10,6 +10,7 @@ const defaults = {
     timecodeShowFrames: false,
     invertCutSegments: false,
     autoExportExtraStreams: true,
+    exportConfirmEnabled: true,
     askBeforeClose: false,
     enableAskForImportChapters: true,
     enableAskForFileOpenAction: true,

src/App.jsx

@@ -198,6 +198,8 @@ const App = memo(() => {
   useEffect(() => safeSetConfig('autoLoadTimecode', autoLoadTimecode), [autoLoadTimecode]);
   const [autoDeleteMergedSegments, setAutoDeleteMergedSegments] = useState(configStore.get('autoDeleteMergedSegments'));
   useEffect(() => safeSetConfig('autoDeleteMergedSegments', autoDeleteMergedSegments), [autoDeleteMergedSegments]);
+  const [exportConfirmEnabled, setExportConfirmEnabled] = useState(configStore.get('exportConfirmEnabled'));
+  useEffect(() => safeSetConfig('exportConfirmEnabled', exportConfirmEnabled), [exportConfirmEnabled]);
 
   useEffect(() => {
     i18n.changeLanguage(language || fallbackLng).catch(console.error);
@@ -232,6 +234,8 @@ const App = memo(() => {
     }
   }
 
+  const toggleExportConfirmEnabled = useCallback(() => setExportConfirmEnabled((v) => !v), []);
+
   const toggleKeyframesEnabled = useCallback(() => {
     setKeyframesEnabled((old) => {
       const enabled = !old;
@@ -968,22 +972,6 @@ const App = memo(() => {
     }
   }, [openSendReportDialogWithState, detectedFileFormat]);
 
-  const onExportPress = useCallback(async () => {
-    if (working || !filePath) return;
-
-    if (haveInvalidSegs) {
-      errorToast(i18n.t('Start time must be before end time'));
-      return;
-    }
-
-    if (!outSegments || outSegments.length < 1) {
-      errorToast(i18n.t('No segments to export'));
-      return;
-    }
-
-    setExportConfirmVisible(true);
-  }, [working, filePath, haveInvalidSegs, outSegments]);
-
   const closeExportConfirm = useCallback(() => setExportConfirmVisible(false), []);
 
   const onExportConfirm = useCallback(async ({ exportSingle } = {}) => {
@@ -1066,6 +1054,23 @@ const App = memo(() => {
     }
   }, [autoMerge, copyFileStreams, customOutDir, duration, effectiveRotation, exportExtraStreams, ffmpegExperimental, fileFormat, fileFormatData, filePath, handleCutFailed, isCustomFormatSelected, isRotationSet, keyframeCut, mainStreams, nonCopiedExtraStreams, outSegments, outputDir, shortestFlag, working, preserveMovData, avoidNegativeTs, numStreamsToCopy, hideAllNotifications, currentSegIndexSafe, autoDeleteMergedSegments]);
 
+  const onExportPress = useCallback(async () => {
+    if (working || !filePath) return;
+
+    if (haveInvalidSegs) {
+      errorToast(i18n.t('Start time must be before end time'));
+      return;
+    }
+
+    if (!outSegments || outSegments.length < 1) {
+      errorToast(i18n.t('No segments to export'));
+      return;
+    }
+
+    if (exportConfirmEnabled) setExportConfirmVisible(true);
+    else await onExportConfirm();
+  }, [working, filePath, haveInvalidSegs, outSegments, exportConfirmEnabled, onExportConfirm]);
+
   const capture = useCallback(async () => {
     if (!filePath || !isDurationValid(duration)) return;
 
@@ -2213,11 +2218,13 @@ const App = memo(() => {
             capture={capture}
             onExportPress={onExportPress}
             outSegments={outSegments}
+            exportConfirmEnabled={exportConfirmEnabled}
+            toggleExportConfirmEnabled={toggleExportConfirmEnabled}
           />
         </div>
       </motion.div>
 
-      <ExportConfirm autoMerge={autoMerge} toggleAutoMerge={toggleAutoMerge} areWeCutting={areWeCutting} outSegments={outSegments} visible={exportConfirmVisible} onClosePress={closeExportConfirm} onExportConfirm={onExportConfirm} keyframeCut={keyframeCut} toggleKeyframeCut={toggleKeyframeCut} renderOutFmt={renderOutFmt} preserveMovData={preserveMovData} togglePreserveMovData={togglePreserveMovData} avoidNegativeTs={avoidNegativeTs} setAvoidNegativeTs={setAvoidNegativeTs} changeOutDir={changeOutDir} outputDir={outputDir} numStreamsTotal={numStreamsTotal} numStreamsToCopy={numStreamsToCopy} setStreamsSelectorShown={setStreamsSelectorShown} currentSegIndex={currentSegIndexSafe} invertCutSegments={invertCutSegments} />
+      <ExportConfirm autoMerge={autoMerge} toggleAutoMerge={toggleAutoMerge} areWeCutting={areWeCutting} outSegments={outSegments} visible={exportConfirmVisible} onClosePress={closeExportConfirm} onExportConfirm={onExportConfirm} keyframeCut={keyframeCut} toggleKeyframeCut={toggleKeyframeCut} renderOutFmt={renderOutFmt} preserveMovData={preserveMovData} togglePreserveMovData={togglePreserveMovData} avoidNegativeTs={avoidNegativeTs} setAvoidNegativeTs={setAvoidNegativeTs} changeOutDir={changeOutDir} outputDir={outputDir} numStreamsTotal={numStreamsTotal} numStreamsToCopy={numStreamsToCopy} setStreamsSelectorShown={setStreamsSelectorShown} currentSegIndex={currentSegIndexSafe} invertCutSegments={invertCutSegments} exportConfirmEnabled={exportConfirmEnabled} toggleExportConfirmEnabled={toggleExportConfirmEnabled} />
 
       <HelpSheet
         visible={helpVisible}

src/ExportConfirm.jsx

@@ -10,6 +10,7 @@ import KeyframeCutButton from './components/KeyframeCutButton';
 import ExportButton from './components/ExportButton';
 import MergeExportButton from './components/MergeExportButton';
 import PreserveMovDataButton from './components/PreserveMovDataButton';
+import ToggleExportConfirm from './components/ToggleExportConfirm';
 
 import { withBlur, toast } from './util';
 import { primaryColor } from './colors';
@@ -39,6 +40,7 @@ const ExportConfirm = memo(({
   autoMerge, areWeCutting, outSegments, visible, onClosePress, onExportConfirm, keyframeCut, toggleKeyframeCut,
   toggleAutoMerge, renderOutFmt, preserveMovData, togglePreserveMovData, avoidNegativeTs, setAvoidNegativeTs,
   changeOutDir, outputDir, numStreamsTotal, numStreamsToCopy, setStreamsSelectorShown, currentSegIndex, invertCutSegments,
+  exportConfirmEnabled, toggleExportConfirmEnabled,
 }) => {
   const { t } = useTranslation();
 
@@ -131,16 +133,19 @@ const ExportConfirm = memo(({
 
           <div style={{ zIndex: 11, position: 'fixed', right: 0, bottom: 0, display: 'flex', alignItems: 'center', margin: 5 }}>
             <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
+              initial={{ opacity: 0, translateX: 50 }}
+              animate={{ opacity: 1, translateX: 0 }}
+              exit={{ opacity: 0, translateX: 50 }}
               transition={{ duration: 0.4, easings: ['easeOut'] }}
-              style={{ display: 'flex', alignItems: 'center' }}
+              style={{ display: 'flex', alignItems: 'flex-end' }}
             >
               <Button iconBefore="arrow-left" height={24} onClick={onClosePress} style={{ marginRight: 10 }}>
                 {i18n.t('Back')}
               </Button>
 
+              <ToggleExportConfirm exportConfirmEnabled={exportConfirmEnabled} toggleExportConfirmEnabled={toggleExportConfirmEnabled} />
+              <div style={{ fontSize: 13, marginLeft: 3, marginRight: 7, maxWidth: 120, lineHeight: '100%', color: exportConfirmEnabled ? 'white' : 'rgba(255,255,255,0.3)', cursor: 'pointer' }} role="button" onClick={toggleExportConfirmEnabled}>{t('Show summary before exporting?')}</div>
+
               {outSegments.length > 1 && !invertCutSegments && (
                 <div role="button" title={t('Export only the currently selected segment ({{segNum}})', { segNum: currentSegIndex + 1 })} onClick={() => onExportConfirm({ exportSingle: true })} style={{ cursor: 'pointer', background: primaryColor, borderRadius: 5, padding: '3px 10px', fontSize: 13, marginRight: 10 }}>
                   <FiScissors style={{ verticalAlign: 'middle', marginRight: 6 }} size={16} />

src/RightMenu.jsx

@@ -4,12 +4,15 @@ import { FaTrashAlt } from 'react-icons/fa';
 import { MdRotate90DegreesCcw } from 'react-icons/md';
 import { useTranslation } from 'react-i18next';
 
+import { primaryTextColor } from './colors';
+
 import ExportButton from './components/ExportButton';
+import ToggleExportConfirm from './components/ToggleExportConfirm';
 
 
 const RightMenu = memo(({
   isRotationSet, rotation, areWeCutting, increaseRotation, deleteSource, renderCaptureFormatButton,
-  capture, onExportPress, outSegments, hasVideo, autoMerge,
+  capture, onExportPress, outSegments, hasVideo, autoMerge, exportConfirmEnabled, toggleExportConfirmEnabled,
 }) => {
   const rotationStr = `${rotation}°`;
 
@@ -22,7 +25,7 @@ const RightMenu = memo(({
           <span style={{ width: 40, textAlign: 'right', display: 'inline-block' }}>{isRotationSet && rotationStr}</span>
           <MdRotate90DegreesCcw
             size={26}
-            style={{ margin: '0 5px', verticalAlign: 'middle' }}
+            style={{ margin: '0 5px', verticalAlign: 'middle', color: isRotationSet ? primaryTextColor : undefined }}
             title={`${t('Set output rotation. Current: ')} ${isRotationSet ? rotationStr : t('Don\'t modify')}`}
             onClick={increaseRotation}
             role="button"
@@ -51,6 +54,8 @@ const RightMenu = memo(({
         </>
       )}
 
+      <ToggleExportConfirm style={{ marginRight: 5 }} exportConfirmEnabled={exportConfirmEnabled} toggleExportConfirmEnabled={toggleExportConfirmEnabled} />
+
       <ExportButton outSegments={outSegments} areWeCutting={areWeCutting} autoMerge={autoMerge} onClick={onExportPress} />
     </div>
   );

src/components/ToggleExportConfirm.jsx

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MdEventNote } from 'react-icons/md';
+
+import { primaryTextColor } from '../colors';
+
+
+const ToggleExportConfirm = memo(({ exportConfirmEnabled, toggleExportConfirmEnabled, size = 23, style }) => {
+  const { t } = useTranslation();
+
+  return (
+    <MdEventNote style={{ color: exportConfirmEnabled ? primaryTextColor : 'rgba(255,255,255,0.3)', ...style }} size={size} title={t('Show summary before exporting?')} role="button" onClick={toggleExportConfirmEnabled} />
+  );
+});
+
+export default ToggleExportConfirm;