ui improvements

public/locales/en/translation.json

@@ -114,8 +114,6 @@
     "Cut": "Cut",
     "Cut at the nearest keyframe (not accurate time.) Equiv to": "Cut at the nearest keyframe (not accurate time.) Equiv to",
     "Cut mode": "Cut mode",
-    "Cut mode is:": "Cut mode is:",
-    "Cut mode:": "Cut mode:",
     "Cutpoints may be inaccurate.": "Cutpoints may be inaccurate.",
     "Data": "Data",
     "DaVinci Resolve / Final Cut Pro XML": "DaVinci Resolve / Final Cut Pro XML",
@@ -307,7 +305,6 @@
     "Key frames will show on the timeline. You need to zoom in to view them": "Key frames will show on the timeline. You need to zoom in to view them.",
     "Keyboard & mouse shortcuts": "Keyboard & mouse shortcuts",
     "Keyboard, mouse and input": "Keyboard, mouse and input",
-    "Keyframe cut": "Keyframe cut",
     "Keyframe cut disabled": "Keyframe cut disabled",
     "Keyframe cut enabled": "Keyframe cut enabled",
     "Keyframe cut mode": "Keyframe cut mode",
@@ -361,7 +358,6 @@
     "No segments to export.": "No segments to export.",
     "No tracks selected for export": "No tracks selected for export",
     "No valid segments found": "No valid segments found",
-    "Normal cut": "Normal cut",
     "Not all formats support all track types, and LosslessCut is unable to properly cut some track types, so you may have to sacrifice some tracks by disabling them in order to get correct result.": "Not all formats support all track types, and LosslessCut is unable to properly cut some track types, so you may have to sacrifice some tracks by disabling them in order to get correct result.",
     "Note that also other settings from the normal export dialog apply to this merge function. For more information about all options, see the export dialog.": "Note that also other settings from the normal export dialog apply to this merge function. For more information about all options, see the export dialog.",
     "Note that depending on input parameters, up to {{estimatedMaxNumFiles}} files may be produced!": "Note that depending on input parameters, up to {{estimatedMaxNumFiles}} files may be produced!",

src/LastCommandsSheet.jsx

@@ -1,6 +1,5 @@
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Heading } from 'evergreen-ui';
 
 import CopyClipboardButton from './components/CopyClipboardButton';
 import Sheet from './components/Sheet';
@@ -10,7 +9,7 @@ const LastCommandsSheet = memo(({ visible, onTogglePress, ffmpegCommandLog }) =>
 
   return (
     <Sheet visible={visible} onClosePress={onTogglePress} style={{ paddingTop: '2em' }}>
-      <Heading color="white">{t('Last ffmpeg commands')}</Heading>
+      <h2>{t('Last ffmpeg commands')}</h2>
 
       {ffmpegCommandLog.length > 0 ? (
         <div>

src/components/ExportConfirm.jsx

@@ -6,7 +6,6 @@ import i18n from 'i18next';
 import { useTranslation, Trans } from 'react-i18next';
 import { IoIosHelpCircle } from 'react-icons/io';
 
-import KeyframeCutButton from './KeyframeCutButton';
 import ExportButton from './ExportButton';
 import ExportModeButton from './ExportModeButton';
 import PreserveMovDataButton from './PreserveMovDataButton';
@@ -41,7 +40,7 @@ const ExportConfirm = memo(({
 }) => {
   const { t } = useTranslation();
 
-  const { changeOutDir, keyframeCut, preserveMovData, movFastStart, avoidNegativeTs, setAvoidNegativeTs, autoDeleteMergedSegments, exportConfirmEnabled, toggleExportConfirmEnabled, segmentsToChapters, toggleSegmentsToChapters, preserveMetadataOnMerge, togglePreserveMetadataOnMerge, enableSmartCut, setEnableSmartCut, effectiveExportMode } = useUserSettings();
+  const { changeOutDir, keyframeCut, toggleKeyframeCut, preserveMovData, movFastStart, avoidNegativeTs, setAvoidNegativeTs, autoDeleteMergedSegments, exportConfirmEnabled, toggleExportConfirmEnabled, segmentsToChapters, toggleSegmentsToChapters, preserveMetadataOnMerge, togglePreserveMetadataOnMerge, enableSmartCut, setEnableSmartCut, effectiveExportMode } = useUserSettings();
 
   const isMov = ffmpegIsMov(outFormat);
   const isIpod = outFormat === 'ipod';
@@ -230,7 +229,7 @@ const ExportConfirm = memo(({
                     )}
 
                     <tr>
-                      <td style={{ paddingTop: '.5em', color: 'var(--gray11)' }} colSpan={2}>
+                      <td style={{ paddingTop: '.5em', color: 'var(--gray11)', fontSize: '.9em' }} colSpan={2}>
                         {t('Depending on your specific file/player, you may have to try different options for best results.')}
                       </td>
                       <td />
@@ -253,11 +252,11 @@ const ExportConfirm = memo(({
                         {!needSmartCut && (
                           <tr>
                             <td>
-                              {t('Cut mode:')}
+                              {t('Keyframe cut mode')}
                               {!keyframeCut && <div style={warningStyle}>{t('Note: Keyframe cut is recommended for most common files')}</div>}
                             </td>
                             <td>
-                              <KeyframeCutButton />
+                              <Switch checked={keyframeCut} onCheckedChange={() => toggleKeyframeCut()} />
                             </td>
                             <td>
                               {!keyframeCut && <WarningSignIcon verticalAlign="middle" color="warning" marginLeft=".3em" />}

src/components/ExportConfirm.module.css

@@ -5,7 +5,7 @@
   top: 0;
   bottom: 0;
   z-index: 10;
-  background: var(--whiteA10);
+  background: var(--whiteA11);
   color: var(--gray12);
   backdrop-filter: blur(30px);
   overflow-y: scroll;
@@ -17,11 +17,11 @@
 }
 
 .box {
-  background: var(--whiteA8);
+  background: var(--whiteA11);
 }
 
 :global(.dark-theme) .box {
-  background: var(--blackA8);
+  background: var(--blackA11);
 }
 
 table.options {
@@ -35,3 +35,7 @@ table.options td:last-child {
 table.options td:nth-child(2) {
   text-align: right;
 }
+
+table.options td {
+  vertical-align: top;
+}

src/components/Settings.jsx

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import { FaYinYang, FaKeyboard } from 'react-icons/fa';
-import { GlobeIcon, CleanIcon, CogIcon, Button, NumericalIcon, KeyIcon, FolderCloseIcon, DocumentIcon, TimeIcon } from 'evergreen-ui';
+import { GlobeIcon, CleanIcon, CogIcon, Button, NumericalIcon, FolderCloseIcon, DocumentIcon, TimeIcon } from 'evergreen-ui';
 import { useTranslation } from 'react-i18next';
 
 import CaptureFormatButton from './CaptureFormatButton';
@@ -28,7 +28,7 @@ const Header = ({ title }) => (
   </Row>
 );
 
-const detailsStyle = { opacity: 0.7, fontSize: '.9em', marginTop: '.3em' };
+const detailsStyle = { opacity: 0.75, fontSize: '.9em', marginTop: '.3em' };
 
 const Settings = memo(({
   onTunerRequested,
@@ -200,14 +200,21 @@ const Settings = memo(({
             <KeyCell>
               {t('Keyframe cut mode')}<br />
               <div style={detailsStyle}>
-                <b>{t('Keyframe cut')}</b>: {t('Cut at the nearest keyframe (not accurate time.) Equiv to')} <i>ffmpeg -ss -i ...</i><br />
-                <b>{t('Normal cut')}</b>: {t('Accurate time but could leave an empty portion at the beginning of the video. Equiv to')} <i>ffmpeg -i -ss ...</i><br />
+                {keyframeCut ? (
+                  <>
+                    {t('Cut at the nearest keyframe (not accurate time.) Equiv to')}:<br />
+                    <code>ffmpeg -ss -i ...</code>
+                  </>
+                ) : (
+                  <>
+                    {t('Accurate time but could leave an empty portion at the beginning of the video. Equiv to')}:<br />
+                    <code>ffmpeg -i -ss ...</code>
+                  </>
+                )}
               </div>
             </KeyCell>
             <td>
-              <Button iconBefore={keyframeCut ? KeyIcon : undefined} onClick={() => toggleKeyframeCut()}>
-                {keyframeCut ? t('Keyframe cut') : t('Normal cut')}
-              </Button>
+              <Switch checked={keyframeCut} onCheckedChange={() => toggleKeyframeCut()} />
             </td>
           </Row>
 

src/components/Settings.module.css

@@ -1,3 +1,7 @@
+.settings td {
+  vertical-align: top;
+}
+
 .settings td:first-child, .settings th:first-child {
   padding: 1em 2em 1em 2em;
 }

src/components/Sheet.module.css

@@ -6,7 +6,7 @@
   top: 0;
   bottom: 0;
   z-index: 10;
-  background: var(--whiteA10);
+  background: var(--whiteA11);
   color: var(--gray12);
   backdrop-filter: blur(30px);
 }

src/main.css

@@ -49,6 +49,11 @@ kbd {
     box-shadow: inset 0 -1px 0 var(--gray8);
 }
 
+code {
+  background-color: var(--gray4);
+  border-radius: .2em;
+}
+
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }