diff --git a/src/components/ExportConfirm.jsx b/src/components/ExportConfirm.jsx
index d4948dd8..1fc77f2f 100644
--- a/src/components/ExportConfirm.jsx
+++ b/src/components/ExportConfirm.jsx
@@ -29,9 +29,9 @@ const boxStyle = { margin: '15px 15px 50px 15px', borderRadius: 10, padding: '10
const outDirStyle = { ...highlightedTextStyle, wordBreak: 'break-all', cursor: 'pointer' };
-const warningStyle = { color: 'var(--red11)', fontSize: '80%' };
+const warningStyle = { color: 'var(--red11)', fontSize: '80%', marginBottom: '.5em' };
-const HelpIcon = ({ onClick, style }) => ;
+const HelpIcon = ({ onClick, style }) => ;
const ExportConfirm = memo(({
areWeCutting, selectedSegments, segmentsToExport, willMerge, visible, onClosePress, onExportConfirm,
@@ -41,7 +41,7 @@ const ExportConfirm = memo(({
}) => {
const { t } = useTranslation();
- const { changeOutDir, keyframeCut, toggleKeyframeCut, preserveMovData, movFastStart, avoidNegativeTs, setAvoidNegativeTs, autoDeleteMergedSegments, exportConfirmEnabled, toggleExportConfirmEnabled, segmentsToChapters, toggleSegmentsToChapters, preserveMetadataOnMerge, togglePreserveMetadataOnMerge, enableSmartCut, setEnableSmartCut, effectiveExportMode, enableOverwriteOutput, setEnableOverwriteOutput } = useUserSettings();
+ const { changeOutDir, keyframeCut, toggleKeyframeCut, preserveMovData, movFastStart, avoidNegativeTs, setAvoidNegativeTs, autoDeleteMergedSegments, exportConfirmEnabled, toggleExportConfirmEnabled, segmentsToChapters, toggleSegmentsToChapters, preserveMetadataOnMerge, togglePreserveMetadataOnMerge, enableSmartCut, setEnableSmartCut, effectiveExportMode, enableOverwriteOutput, setEnableOverwriteOutput, ffmpegExperimental, setFfmpegExperimental } = useUserSettings();
const isMov = ffmpegIsMov(outFormat);
const isIpod = outFormat === 'ipod';
@@ -109,6 +109,10 @@ const ExportConfirm = memo(({
toast.fire({ icon: 'info', timer: 10000, text: `${avoidNegativeTs}: ${texts[avoidNegativeTs]}` });
}, [avoidNegativeTs]);
+ const onFfmpegExperimentalHelpPress = useCallback(() => {
+ toast.fire({ icon: 'info', timer: 10000, text: t('Enable experimental ffmpeg features flag?') });
+ }, [t]);
+
const canEditTemplate = !willMerge || !autoDeleteMergedSegments;
// https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container
@@ -148,10 +152,14 @@ const ExportConfirm = memo(({
- {effectiveExportMode === 'sesgments_to_chapters' && }
-
+ {effectiveExportMode === 'sesgments_to_chapters' ? (
+
+ ) : (
+
+ )}
+
{t('Output container format:')}
@@ -163,6 +171,7 @@ const ExportConfirm = memo(({
+
Input has {{ numStreamsTotal }} tracks
@@ -174,10 +183,14 @@ const ExportConfirm = memo(({
Keeping {{ numStreamsToCopy }} tracks
- {areWeCuttingProblematicStreams && }
-
+ {areWeCuttingProblematicStreams ? (
+
+ ) : (
+
+ )}
+
{t('Save output to path:')}
@@ -226,6 +239,7 @@ const ExportConfirm = memo(({
+
{t('Advanced options')}
@@ -243,6 +257,7 @@ const ExportConfirm = memo(({
+
{t('Preserve original metadata when merging? (slow)')}
@@ -274,10 +289,14 @@ const ExportConfirm = memo(({
setEnableSmartCut((v) => !v)} />
- {needSmartCut && }
-
+ {needSmartCut ? (
+
+ ) : (
+
+ )}
+
{!needSmartCut && (
@@ -288,8 +307,11 @@ const ExportConfirm = memo(({
toggleKeyframeCut()} />
- {!keyframeCut && }
-
+ {!keyframeCut ? (
+
+ ) : (
+
+ )}
)}
@@ -304,11 +326,17 @@ const ExportConfirm = memo(({
+ {isIpod && !movFastStart && {t('For the ipod format, it is recommended to activate this option')}
}
- {isIpod && !movFastStart && {t('For the ipod format, it is recommended to activate this option')} }
+ {isIpod && !movFastStart ? (
+
+ ) : (
+
+ )}
+
{t('Preserve all MP4/MOV metadata?')}
@@ -318,8 +346,11 @@ const ExportConfirm = memo(({
- {isIpod && preserveMovData && }
-
+ {isIpod && preserveMovData ? (
+
+ ) : (
+
+ )}
>
@@ -340,11 +371,26 @@ const ExportConfirm = memo(({
- {!['make_zero', 'auto'].includes(avoidNegativeTs) && }
-
+ {!['make_zero', 'auto'].includes(avoidNegativeTs) ? (
+
+ ) : (
+
+ )}
)}
+
+
+
+ {t('"ffmpeg" experimental flag')}
+
+
+
+
+
+
+
+
@@ -357,7 +403,7 @@ const ExportConfirm = memo(({
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 50 }}
transition={{ duration: 0.4, easings: ['easeOut'] }}
- style={{ display: 'flex', alignItems: 'flex-end' }}
+ style={{ display: 'flex', alignItems: 'flex-end', background: 'rgba(0,0,0,0.5)' }}
>
{t('Show this page before exporting?')}
diff --git a/src/components/ExportConfirm.module.css b/src/components/ExportConfirm.module.css
index b068fb4f..cd446175 100644
--- a/src/components/ExportConfirm.module.css
+++ b/src/components/ExportConfirm.module.css
@@ -28,14 +28,15 @@ table.options {
width: 100%;
}
-table.options td:last-child {
- text-align: right;
- width: 3em;
-}
table.options td:nth-child(2) {
text-align: right;
}
+table.options td:last-child {
+ text-align: center;
+ width: 1.7em;
+}
+
table.options td {
vertical-align: top;
}
\ No newline at end of file
diff --git a/src/components/OutSegTemplateEditor.jsx b/src/components/OutSegTemplateEditor.jsx
index 43c9ccfa..9521a3c1 100644
--- a/src/components/OutSegTemplateEditor.jsx
+++ b/src/components/OutSegTemplateEditor.jsx
@@ -120,7 +120,7 @@ const OutSegTemplateEditor = memo(({ outSegTemplate, setOutSegTemplate, generate
{outSegFileNames != null && {t('Preview')} }
-
+
@@ -134,11 +134,16 @@ const OutSegTemplateEditor = memo(({ outSegTemplate, setOutSegTemplate, generate
{error != null &&
{i18n.t('There is an error in the file name template:')} {error}
}
- {isMissingExtension &&
{i18n.t('The file name template is missing {{ext}} and will result in a file without the suggested extension. This may result in an unplayable output file.', { ext: extVar })}
}
+ {isMissingExtension && (
+
+ {' '}
+ {i18n.t('The file name template is missing {{ext}} and will result in a file without the suggested extension. This may result in an unplayable output file.', { ext: extVar })}
+
+ )}
{hasTextNumericPaddedValue && (
- setOutputFileNameMinZeroPadding(parseInt(e.target.value, 10))} style={{ marginRight: '1em' }}>
+ setOutputFileNameMinZeroPadding(parseInt(e.target.value, 10))} style={{ marginRight: '1em', fontSize: '1em' }}>
{Array.from({ length: 10 }).map((v, i) => i + 1).map((v) => {v} )}
Minimum numeric padded length
@@ -149,7 +154,7 @@ const OutSegTemplateEditor = memo(({ outSegTemplate, setOutSegTemplate, generate
{t('Sanitize file names')}
- {!safeOutputFileName && }
+ {!safeOutputFileName && }
)}
diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
index a02b9a05..336ae72a 100644
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -49,7 +49,7 @@ const Settings = memo(({
const { t } = useTranslation();
const [showAdvanced, setShowAdvanced] = useState(!simpleMode);
- const { customOutDir, changeOutDir, keyframeCut, toggleKeyframeCut, timecodeFormat, setTimecodeFormat, invertCutSegments, setInvertCutSegments, askBeforeClose, setAskBeforeClose, enableAskForImportChapters, setEnableAskForImportChapters, enableAskForFileOpenAction, setEnableAskForFileOpenAction, autoSaveProjectFile, setAutoSaveProjectFile, invertTimelineScroll, setInvertTimelineScroll, language, setLanguage, ffmpegExperimental, setFfmpegExperimental, hideNotifications, setHideNotifications, autoLoadTimecode, setAutoLoadTimecode, enableAutoHtml5ify, setEnableAutoHtml5ify, customFfPath, setCustomFfPath, storeProjectInWorkingDir, mouseWheelZoomModifierKey, setMouseWheelZoomModifierKey, captureFrameMethod, setCaptureFrameMethod, captureFrameQuality, setCaptureFrameQuality, captureFrameFileNameFormat, setCaptureFrameFileNameFormat, enableNativeHevc, setEnableNativeHevc, enableUpdateCheck, setEnableUpdateCheck, allowMultipleInstances, setAllowMultipleInstances, preferStrongColors, setPreferStrongColors, treatInputFileModifiedTimeAsStart, setTreatInputFileModifiedTimeAsStart, treatOutputFileModifiedTimeAsStart, setTreatOutputFileModifiedTimeAsStart, exportConfirmEnabled, toggleExportConfirmEnabled } = useUserSettings();
+ const { customOutDir, changeOutDir, keyframeCut, toggleKeyframeCut, timecodeFormat, setTimecodeFormat, invertCutSegments, setInvertCutSegments, askBeforeClose, setAskBeforeClose, enableAskForImportChapters, setEnableAskForImportChapters, enableAskForFileOpenAction, setEnableAskForFileOpenAction, autoSaveProjectFile, setAutoSaveProjectFile, invertTimelineScroll, setInvertTimelineScroll, language, setLanguage, hideNotifications, setHideNotifications, autoLoadTimecode, setAutoLoadTimecode, enableAutoHtml5ify, setEnableAutoHtml5ify, customFfPath, setCustomFfPath, storeProjectInWorkingDir, mouseWheelZoomModifierKey, setMouseWheelZoomModifierKey, captureFrameMethod, setCaptureFrameMethod, captureFrameQuality, setCaptureFrameQuality, captureFrameFileNameFormat, setCaptureFrameFileNameFormat, enableNativeHevc, setEnableNativeHevc, enableUpdateCheck, setEnableUpdateCheck, allowMultipleInstances, setAllowMultipleInstances, preferStrongColors, setPreferStrongColors, treatInputFileModifiedTimeAsStart, setTreatInputFileModifiedTimeAsStart, treatOutputFileModifiedTimeAsStart, setTreatOutputFileModifiedTimeAsStart, exportConfirmEnabled, toggleExportConfirmEnabled } = useUserSettings();
const onLangChange = useCallback((e) => {
const { value } = e.target;
@@ -252,15 +252,6 @@ const Settings = memo(({
- {showAdvanced && (
-
- {t('Enable experimental ffmpeg features flag?')}
-
-
-
-
- )}
-
{showAdvanced && (
diff --git a/src/util.js b/src/util.js
index a07f5ad0..24be5d2f 100644
--- a/src/util.js
+++ b/src/util.js
@@ -144,7 +144,7 @@ export function filenamify(name) {
export function withBlur(cb) {
return (e) => {
cb(e);
- e.target.blur();
+ e.target?.blur();
};
}