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

ui improvements

Browse Source
This commit is contained in:
Mikael Finstad 2023-03-10 21:59:52 +08:00
parent 40975aeef2
commit dcfb459ca6
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
9 changed files with 36 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/locales/en/translation.json
View File

@ -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!",

3
src/LastCommandsSheet.jsx
View File

@ -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>

9
src/components/ExportConfirm.jsx
View File

@ -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" />}

10
src/components/ExportConfirm.module.css
View File

@ -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;
}

25
src/components/KeyframeCutButton.jsx
View File

@ -1,25 +0,0 @@
import React, { memo } from 'react';
import { Button, KeyIcon } from 'evergreen-ui';
import { useTranslation } from 'react-i18next';
import { withBlur } from '../util';
import useUserSettings from '../hooks/useUserSettings';
const KeyframeCutButton = memo(() => {
const { t } = useTranslation();
const { keyframeCut, toggleKeyframeCut } = useUserSettings();
return (
<Button
height={20}
iconBefore={keyframeCut ? KeyIcon : undefined}
title={`${t('Cut mode is:')} ${keyframeCut ? t('Keyframe cut') : t('Normal cut')}`}
onClick={withBlur(() => toggleKeyframeCut(false))}
>
{keyframeCut ? t('Keyframe cut') : t('Normal cut')}
</Button>
);
});
export default KeyframeCutButton;

21
src/components/Settings.jsx
View File

@ -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>

4
src/components/Settings.module.css
View File

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

2
src/components/Sheet.module.css
View File

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

5
src/main.css
View File

@ -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;
}