aiden
/
lossless-cut
mirror of https://github.com/mifi/lossless-cut
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improve export confirm page

Browse Source
pull/2867/head
Mikael Finstad 1 month ago
parent e6294540f7
commit 26053137d6
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
1 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File

59
src/renderer/src/components/ExportConfirm.tsx
Unescape Escape View File

@ -66,7 +66,7 @@ function renderNoticeIcon(notice: { warning?: boolean | undefined } | undefined,
return notice.warning ? (
<FaExclamationTriangle style={{ flexShrink: '0', fontSize: '.8em', verticalAlign: 'baseline', color: warningColor, ...style }} />
) : (
<FaInfoCircle style={{ flexShrink: '0', fontSize: '.8em', verticalAlign: 'baseline', color: 'var(--blue-10)', ...style }} />
<FaInfoCircle style={{ flexShrink: '0', fontSize: '.8em', verticalAlign: 'baseline', color: 'var(--cyan-10)', ...style }} />
);
}
@ -81,17 +81,39 @@ interface GenericNotice {
url?: string,
}
function renderNotice(notice: Notice | GenericNotice | undefined, { style }: { style?: CSSProperties }) {
if (notice == null) return null;
const { warning, text } = notice;
const url = 'url' in notice ? notice.url : undefined;
function Notice({ notice }: { notice: Notice | GenericNotice }) {
const { text, warning } = notice;
return (
<div key={typeof notice.text === 'string' ? notice.text : undefined} style={{ ...(warning ? warningStyle : infoStyle), display: 'flex', alignItems: 'center', gap: '0 .5em', ...style }}>
{renderNoticeIcon({ warning }, { fontSize: '1em', flexShrink: 0 })} <span style={{ fontSize: '.9em' }}>{text}</span>{url != null && <IoIosHelpCircle style={{ cursor: 'pointer', fontSize: '1.5em', flexShrink: 0, color: primaryTextColor }} title={i18n.t('Learn more')} role="button" tabIndex={0} onClick={() => shell.openExternal(url)} />}
<div style={{ ...(warning ? warningStyle : infoStyle), display: 'flex', alignItems: 'center', gap: '0 .5em' }}>
{renderNoticeIcon({ warning }, { fontSize: '1em', flexShrink: 0 })}
{' '}
<span style={{ fontSize: '.9em' }}>{text}</span>
</div>
);
}
function renderNotice(notice: Notice | undefined) {
if (notice == null) return null;
const { text } = notice;
return (
<Notice notice={notice} key={typeof text === 'string' ? text : undefined} />
);
}
function renderGenericNotice(notice: GenericNotice) {
const { url } = notice;
return (
<tr key={notice.text}>
<td colSpan={2}>
<Notice notice={notice} />
</td>
<td>
{url != null && <IoIosHelpCircle style={{ cursor: 'pointer', fontSize: '1.5em', flexShrink: 0, color: primaryTextColor }} title={i18n.t('Learn more')} role="button" tabIndex={0} onClick={() => shell.openExternal(url)} />}
</td>
</tr>
);
}
function ExportConfirm({
areWeCutting,
segmentsToExport,
@ -345,12 +367,7 @@ function ExportConfirm({
>
<table className={styles['options']}>
<tbody>
<tr>
<td colSpan={2}>
{notices.generic.map((notice) => renderNotice(notice, {}))}
</td>
<td />
</tr>
{notices.generic.map((notice) => renderGenericNotice(notice))}
{segmentsOrInverse.selected.length !== segmentsOrInverse.all.length && (
<tr>
@ -364,7 +381,7 @@ function ExportConfirm({
<tr>
<td>
{segmentsOrInverse.selected.length > 1 ? t('Export mode for {{segments}} segments', { segments: segmentsOrInverse.selected.length }) : t('Export mode')}
{renderNotice(notices.specific['exportMode'], {})}
{renderNotice(notices.specific['exportMode'])}
</td>
<td>
<ExportModeButton selectedSegments={segmentsOrInverse.selected} style={{ height: '1.8em' }} />
@ -389,7 +406,7 @@ function ExportConfirm({
<tr>
<td>
<Trans>Input has {{ numStreamsTotal }} tracks</Trans>
{renderNotice(notices.specific['problematicStreams'], {})}
{renderNotice(notices.specific['problematicStreams'])}
</td>
<td>
<HighlightedText style={{ cursor: 'pointer' }} onClick={onShowStreamsSelectorClick}><Trans>Keeping {{ numStreamsToCopy }} tracks</Trans></HighlightedText>
@ -436,7 +453,7 @@ function ExportConfirm({
<tr>
<td>
{t('Overwrite existing files')}
{renderNotice(notices.specific['overwriteOutput'], {})}
{renderNotice(notices.specific['overwriteOutput'])}
</td>
<td>
<Switch checked={enableOverwriteOutput} onCheckedChange={setEnableOverwriteOutput} />
@ -504,7 +521,7 @@ function ExportConfirm({
</td>
<td>
<Switch checked={movFastStart} onCheckedChange={toggleMovFastStart} />
{renderNotice(notices.specific['movFastStart'], {})}
{renderNotice(notices.specific['movFastStart'])}
</td>
<td>
{renderNoticeIcon(notices.specific['movFastStart'], rightIconStyle) ?? <HelpIcon onClick={onMovFastStartHelpPress} />}
@ -514,7 +531,7 @@ function ExportConfirm({
<AnimatedTr>
<td>
{t('Preserve all MP4/MOV metadata?')}
{renderNotice(notices.specific['preserveMovData'], {})}
{renderNotice(notices.specific['preserveMovData'])}
</td>
<td>
<Switch checked={preserveMovData} onCheckedChange={togglePreserveMovData} />
@ -587,7 +604,7 @@ function ExportConfirm({
<AnimatedTr>
<td>
{t('Smart cut (experimental):')}
{renderNotice(notices.specific['smartCut'], {})}
{renderNotice(notices.specific['smartCut'])}
</td>
<td>
<Switch checked={enableSmartCut} onCheckedChange={() => setEnableSmartCut((v) => !v)} />
@ -601,7 +618,7 @@ function ExportConfirm({
<AnimatedTr>
<td>
{t('Keyframe cut mode')}
{renderNotice(notices.specific['cutMode'], {})}
{renderNotice(notices.specific['cutMode'])}
</td>
<td>
<Switch checked={keyframeCut} onCheckedChange={() => toggleKeyframeCut()} />
@ -652,7 +669,7 @@ function ExportConfirm({
<AnimatedTr>
<td>
&quot;ffmpeg&quot; <code className="highlighted">avoid_negative_ts</code>
{renderNotice(notices.specific['avoidNegativeTs'], {})}
{renderNotice(notices.specific['avoidNegativeTs'])}
</td>
<td>
<Select value={avoidNegativeTs} onChange={(e) => setAvoidNegativeTs(e.target.value as AvoidNegativeTs)} style={{ height: 20, marginLeft: 5 }}>

Write Preview
Loading…
Cancel
Save