Mirrors/lossless-cut
1
0
Fork 0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-25 11:43:17 +01:00
Code Issues Releases Activity

improve export mode ux

Browse Source
This commit is contained in:
Mikael Finstad 2023-01-27 13:17:19 +09:00
parent 16c9f8b002
commit 633c068aa5
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
2 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/ExportConfirm.jsx
View File

@ -1,6 +1,6 @@
import React, { memo, useCallback, useMemo } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Button, Select, CrossIcon } from 'evergreen-ui';
import { WarningSignIcon, Button, Select, CrossIcon } from 'evergreen-ui';
import { FaRegCheckCircle } from 'react-icons/fa';
import i18n from 'i18next';
import { useTranslation, Trans } from 'react-i18next';
@ -38,7 +38,7 @@ const outDirStyle = { background: 'rgb(193, 98, 0)', borderRadius: '.4em', paddi
const warningStyle = { color: '#faa', fontSize: '80%' };
const HelpIcon = ({ onClick }) => <IoIosHelpCircle size={20} role="button" onClick={withBlur(onClick)} style={{ cursor: 'pointer', verticalAlign: 'middle', marginLeft: 5 }} />;
const HelpIcon = ({ onClick, style }) => <IoIosHelpCircle size={20} role="button" onClick={withBlur(onClick)} style={{ cursor: 'pointer', verticalAlign: 'middle', marginLeft: 5, ...style }} />;
const ExportConfirm = memo(({
areWeCutting, selectedSegments, segmentsToExport, willMerge, visible, onClosePress, onExportConfirm,
@ -133,12 +133,11 @@ const ExportConfirm = memo(({
<h2 style={{ marginTop: 0 }}>{t('Export options')}</h2>
<ul>
{selectedSegments.length !== nonFilteredSegments.length && <li><FaRegCheckCircle size={12} style={{ marginRight: 3 }} />{t('{{selectedSegments}} of {{nonFilteredSegments}} segments selected', { selectedSegments: selectedSegments.length, nonFilteredSegments: nonFilteredSegments.length })}</li>}
{selectedSegments.length >= 2 && (
<li>
{t('Merge {{segments}} cut segments to one file?', { segments: selectedSegments.length })} <ExportModeButton selectedSegments={selectedSegments} />
<HelpIcon onClick={onExportModeHelpPress} />
</li>
)}
<li>
{t('Merge {{segments}} cut segments to one file?', { segments: selectedSegments.length })} <ExportModeButton selectedSegments={selectedSegments} />
<HelpIcon onClick={onExportModeHelpPress} />
{effectiveExportMode === 'sesgments_to_chapters' && <WarningSignIcon verticalAlign="middle" color="warning" marginLeft=".3em" />}
</li>
<li>
{t('Output container format:')} {renderOutFmt({ height: 20, maxWidth: 150 })}
<HelpIcon onClick={onOutFmtHelpPress} />

13
src/components/ExportModeButton.jsx
View File

@ -1,4 +1,4 @@
import React, { memo } from 'react';
import React, { memo, useMemo } from 'react';
import { Select } from 'evergreen-ui';
import { useTranslation } from 'react-i18next';
@ -40,15 +40,22 @@ const ExportModeButton = memo(({ selectedSegments, style }) => {
}
}
const selectableModes = useMemo(() => [
'separate',
...(selectedSegments.length >= 2 || effectiveExportMode === 'merge' ? ['merge'] : []),
...(selectedSegments.length >= 2 || effectiveExportMode === 'merge+separate' ? ['merge+separate'] : []),
'sesgments_to_chapters',
], [effectiveExportMode, selectedSegments.length]);
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<Select
height={20}
style={{ opacity: selectedSegments && selectedSegments.length < 2 ? 0.4 : undefined, ...style }}
style={style}
value={effectiveExportMode}
onChange={withBlur((e) => onChange(e.target.value))}
>
{['separate', 'merge', 'merge+separate', 'sesgments_to_chapters'].map((mode) => {
{selectableModes.map((mode) => {
const titles = {
sesgments_to_chapters: t('Chapters only'),
merge: t('Merge cuts'),