Bring back merge/split button in main UI #480 #663

src/App.jsx

@@ -2066,6 +2066,11 @@ const App = memo(() => {
           numStreamsToCopy={numStreamsToCopy}
           numStreamsTotal={numStreamsTotal}
           setStreamsSelectorShown={setStreamsSelectorShown}
+          outSegments={outSegments}
+          autoMerge={autoMerge}
+          setAutoMerge={setAutoMerge}
+          autoDeleteMergedSegments={autoDeleteMergedSegments}
+          setAutoDeleteMergedSegments={setAutoDeleteMergedSegments}
         />
       </div>
 

src/TopMenu.jsx

@@ -3,12 +3,15 @@ import { IoIosHelpCircle, IoIosSettings } from 'react-icons/io';
 import { Button } from 'evergreen-ui';
 import { useTranslation } from 'react-i18next';
 
+import MergeExportButton from './components/MergeExportButton';
+
 import { withBlur } from './util';
 
 
 const TopMenu = memo(({
   filePath, copyAnyAudioTrack, toggleStripAudio, customOutDir, changeOutDir,
   renderOutFmt, toggleHelp, numStreamsToCopy, numStreamsTotal, setStreamsSelectorShown, toggleSettings,
+  outSegments, autoMerge, setAutoMerge, autoDeleteMergedSegments, setAutoDeleteMergedSegments,
 }) => {
   const { t } = useTranslation();
 
@@ -42,11 +45,9 @@ const TopMenu = memo(({
         {customOutDir ? t('Working dir set') : t('Working dir unset')}
       </Button>
 
-      {filePath && (
+      {filePath && renderOutFmt({ height: 20, maxWidth: 100 })}
-        <Fragment>
+
-          {renderOutFmt({ height: 20, maxWidth: 100 })}
+      {filePath && <MergeExportButton autoMerge={autoMerge} outSegments={outSegments} setAutoMerge={setAutoMerge} autoDeleteMergedSegments={autoDeleteMergedSegments} setAutoDeleteMergedSegments={setAutoDeleteMergedSegments} />}
-        </Fragment>
-      )}
 
       <IoIosHelpCircle size={24} role="button" onClick={toggleHelp} style={{ verticalAlign: 'middle', marginLeft: 5 }} />
       <IoIosSettings size={24} role="button" onClick={toggleSettings} style={{ verticalAlign: 'middle', marginLeft: 5 }} />

src/components/MergeExportButton.jsx

@@ -9,13 +9,14 @@ import { withBlur } from '../util';
 const MergeExportButton = memo(({ autoMerge, outSegments, setAutoMerge, autoDeleteMergedSegments, setAutoDeleteMergedSegments }) => {
   const { t } = useTranslation();
 
-  const AutoMergeIcon = autoMerge ? MdCallMerge : MdCallSplit;
+  let AutoMergeIcon;
 
   let effectiveMode;
   let title;
   let description;
   if (autoMerge && autoDeleteMergedSegments) {
     effectiveMode = 'merge';
+    AutoMergeIcon = MdCallMerge;
     title = t('Merge cuts');
     description = t('Auto merge segments to one file after export');
   } else if (autoMerge) {
@@ -24,6 +25,7 @@ const MergeExportButton = memo(({ autoMerge, outSegments, setAutoMerge, autoDele
     description = t('Auto merge segments to one file after export, but keep segments too');
   } else {
     effectiveMode = 'separate';
+    AutoMergeIcon = MdCallSplit;
     title = t('Separate files');
     description = t('Export to separate files');
   }
@@ -54,7 +56,7 @@ const MergeExportButton = memo(({ autoMerge, outSegments, setAutoMerge, autoDele
       title={description}
       onClick={withBlur(onClick)}
     >
-      <AutoMergeIcon /> {title}
+      {AutoMergeIcon && <AutoMergeIcon />} {title}
     </Button>
   );
 });