|
|
|
@ -6,7 +6,7 @@ import { FiScissors } from 'react-icons/fi';
|
|
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
|
|
import Swal from 'sweetalert2';
|
|
|
|
import Swal from 'sweetalert2';
|
|
|
|
import Lottie from 'react-lottie';
|
|
|
|
import Lottie from 'react-lottie';
|
|
|
|
import { SideSheet, Button, Position } from 'evergreen-ui';
|
|
|
|
import { SideSheet, Button, Position, Table, SegmentedControl, Checkbox } from 'evergreen-ui';
|
|
|
|
import { useStateWithHistory } from 'react-use/lib/useStateWithHistory';
|
|
|
|
import { useStateWithHistory } from 'react-use/lib/useStateWithHistory';
|
|
|
|
|
|
|
|
|
|
|
|
import fromPairs from 'lodash/fromPairs';
|
|
|
|
import fromPairs from 'lodash/fromPairs';
|
|
|
|
@ -1220,9 +1220,9 @@ const App = memo(() => {
|
|
|
|
<option key={f} value={f}>{f} - {name}</option>
|
|
|
|
<option key={f} value={f}>{f} - {name}</option>
|
|
|
|
));
|
|
|
|
));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function renderOutFmt({ width } = {}) {
|
|
|
|
function renderOutFmt(style = {}) {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<select style={{ width }} defaultValue="" value={fileFormat} title="Output format" onChange={withBlur(e => setFileFormat(e.target.value))}>
|
|
|
|
<select style={style} defaultValue="" value={fileFormat} title="Output format" onChange={withBlur(e => setFileFormat(e.target.value))}>
|
|
|
|
<option key="disabled1" value="" disabled>Format</option>
|
|
|
|
<option key="disabled1" value="" disabled>Format</option>
|
|
|
|
|
|
|
|
|
|
|
|
{detectedFileFormat && (
|
|
|
|
{detectedFileFormat && (
|
|
|
|
@ -1252,19 +1252,25 @@ const App = memo(() => {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const renderSettings = () => (
|
|
|
|
const renderSettings = () => {
|
|
|
|
|
|
|
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
|
|
|
|
|
|
const Row = (props) => <Table.Row height="auto" paddingY={12} {...props} />;
|
|
|
|
|
|
|
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
|
|
|
|
|
|
const KeyCell = (props) => <Table.TextCell textProps={{ whiteSpace: 'auto' }} {...props} />;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Fragment>
|
|
|
|
<Fragment>
|
|
|
|
<tr>
|
|
|
|
<Row>
|
|
|
|
<td>Output format (default autodetected)</td>
|
|
|
|
<KeyCell textProps={{ whiteSpace: 'auto' }}>Output format (default autodetected)</KeyCell>
|
|
|
|
<td style={{ width: '50%' }}>{renderOutFmt()}</td>
|
|
|
|
<Table.TextCell>{renderOutFmt({ width: '100%' })}</Table.TextCell>
|
|
|
|
</tr>
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<Row>
|
|
|
|
<td>
|
|
|
|
<KeyCell>
|
|
|
|
Working directory<br />
|
|
|
|
Working directory<br />
|
|
|
|
This is where working files, exported files, project files (CSV) are stored.
|
|
|
|
This is where working files, exported files, project files (CSV) are stored.
|
|
|
|
</td>
|
|
|
|
</KeyCell>
|
|
|
|
<td>
|
|
|
|
<Table.TextCell>
|
|
|
|
<button
|
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
type="button"
|
|
|
|
onClick={setOutputDir}
|
|
|
|
onClick={setOutputDir}
|
|
|
|
@ -1272,125 +1278,111 @@ const App = memo(() => {
|
|
|
|
{customOutDir ? 'Custom working directory' : 'Same directory as input file'}
|
|
|
|
{customOutDir ? 'Custom working directory' : 'Same directory as input file'}
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
<div>{customOutDir}</div>
|
|
|
|
<div>{customOutDir}</div>
|
|
|
|
</td>
|
|
|
|
</Table.TextCell>
|
|
|
|
</tr>
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<Row>
|
|
|
|
<td>Auto merge segments to one file after export?</td>
|
|
|
|
<KeyCell>Auto merge segments to one file during export or export to separate files?</KeyCell>
|
|
|
|
<td>
|
|
|
|
<Table.TextCell>
|
|
|
|
<button
|
|
|
|
<SegmentedControl
|
|
|
|
type="button"
|
|
|
|
options={[{ label: 'Auto merge', value: 'automerge' }, { label: 'Separate', value: 'separate' }]}
|
|
|
|
onClick={toggleAutoMerge}
|
|
|
|
value={autoMerge ? 'automerge' : 'separate'}
|
|
|
|
>
|
|
|
|
onChange={value => setAutoMerge(value === 'automerge')}
|
|
|
|
{autoMerge ? 'Auto merge segments to one file' : 'Export separate files'}
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
</Table.TextCell>
|
|
|
|
</td>
|
|
|
|
</Row>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
<Row>
|
|
|
|
<tr>
|
|
|
|
<KeyCell>
|
|
|
|
<td>keyframe cut mode</td>
|
|
|
|
Keyframe cut mode<br />
|
|
|
|
<td>
|
|
|
|
<b>Nearest keyframe</b>: Cut at the nearest keyframe (not accurate time.)<br />
|
|
|
|
<button
|
|
|
|
<b>Normal cut</b>: Accurate time but could leave an empty portion at the beginning of the video.<br />
|
|
|
|
type="button"
|
|
|
|
</KeyCell>
|
|
|
|
onClick={toggleKeyframeCut}
|
|
|
|
<Table.TextCell>
|
|
|
|
>
|
|
|
|
<SegmentedControl
|
|
|
|
{keyframeCut ? 'Nearest keyframe cut - will cut at the nearest keyframe' : 'Normal cut - cut accurate position but could leave an empty portion'}
|
|
|
|
options={[{ label: 'Nearest keyframe', value: 'keyframe' }, { label: 'Normal cut', value: 'normal' }]}
|
|
|
|
</button>
|
|
|
|
value={keyframeCut ? 'keyframe' : 'normal'}
|
|
|
|
</td>
|
|
|
|
onChange={value => setKeyframeCut(value === 'keyframe')}
|
|
|
|
</tr>
|
|
|
|
/>
|
|
|
|
|
|
|
|
</Table.TextCell>
|
|
|
|
<tr>
|
|
|
|
</Row>
|
|
|
|
<td>
|
|
|
|
|
|
|
|
Discard (cut away) or keep selected segments from video when exporting
|
|
|
|
<Row>
|
|
|
|
</td>
|
|
|
|
<KeyCell>
|
|
|
|
<td>
|
|
|
|
<span role="img" aria-label="Yin Yang">☯️</span> Choose cutting mode: Cut away or keep selected segments from video when exporting?<br />
|
|
|
|
<button
|
|
|
|
When <b>Keep</b> is selected, the video inside segments will be kept, while the video outside will be discarded.<br />
|
|
|
|
type="button"
|
|
|
|
When <b>Cut away</b> is selected, the video inside segments will be discarded, while the video surrounding them will be kept.
|
|
|
|
onClick={withBlur(() => setInvertCutSegments(v => !v))}
|
|
|
|
</KeyCell>
|
|
|
|
>
|
|
|
|
<Table.TextCell>
|
|
|
|
{invertCutSegments ? 'Discard' : 'Keep'}
|
|
|
|
<SegmentedControl
|
|
|
|
</button>
|
|
|
|
options={[{ label: 'Cut away', value: 'discard' }, { label: 'Keep', value: 'keep' }]}
|
|
|
|
</td>
|
|
|
|
value={invertCutSegments ? 'discard' : 'keep'}
|
|
|
|
</tr>
|
|
|
|
onChange={value => setInvertCutSegments(value === 'discard')}
|
|
|
|
|
|
|
|
/>
|
|
|
|
<tr>
|
|
|
|
</Table.TextCell>
|
|
|
|
<td>
|
|
|
|
</Row>
|
|
|
|
Discard audio?
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
|
|
onClick={toggleStripAudio}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{copyAnyAudioTrack ? 'Keep audio tracks' : 'Discard all audio tracks'}
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<Row>
|
|
|
|
<td>
|
|
|
|
<KeyCell>
|
|
|
|
Extract unprocessable tracks to separate files?<br />
|
|
|
|
Extract unprocessable tracks to separate files or discard them?<br />
|
|
|
|
(data tracks such as GoPro GPS, telemetry etc. are not copied over by default because ffmpeg cannot cut them, thus they will cause the media duration to stay the same after cutting video/audio)
|
|
|
|
(data tracks such as GoPro GPS, telemetry etc. are not copied over by default because ffmpeg cannot cut them, thus they will cause the media duration to stay the same after cutting video/audio)
|
|
|
|
</td>
|
|
|
|
</KeyCell>
|
|
|
|
<td>
|
|
|
|
<Table.TextCell>
|
|
|
|
<button
|
|
|
|
<SegmentedControl
|
|
|
|
type="button"
|
|
|
|
options={[{ label: 'Extract', value: 'extract' }, { label: 'Discard', value: 'discard' }]}
|
|
|
|
onClick={() => setAutoExportExtraStreams(v => !v)}
|
|
|
|
value={autoExportExtraStreams ? 'extract' : 'discard'}
|
|
|
|
>
|
|
|
|
onChange={value => setAutoExportExtraStreams(value === 'extract')}
|
|
|
|
{autoExportExtraStreams ? 'Extract unprocessable tracks' : 'Discard all unprocessable tracks'}
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
</Table.TextCell>
|
|
|
|
</td>
|
|
|
|
</Row>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<Row>
|
|
|
|
<td>
|
|
|
|
<KeyCell>
|
|
|
|
Auto save project?<br />
|
|
|
|
Auto save project file?<br />
|
|
|
|
The project will be stored along with the output files as a CSV file
|
|
|
|
The project will be stored along with the output files as a CSV file
|
|
|
|
</td>
|
|
|
|
</KeyCell>
|
|
|
|
<td>
|
|
|
|
<Table.TextCell>
|
|
|
|
<button
|
|
|
|
<Checkbox
|
|
|
|
type="button"
|
|
|
|
label="Auto save project"
|
|
|
|
onClick={() => setAutoSaveProjectFile(v => !v)}
|
|
|
|
checked={autoSaveProjectFile}
|
|
|
|
>
|
|
|
|
onChange={e => setAutoSaveProjectFile(e.target.checked)}
|
|
|
|
{autoSaveProjectFile ? 'Auto save project' : 'Don\'t save project file'}
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
</Table.TextCell>
|
|
|
|
</td>
|
|
|
|
</Row>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<Row>
|
|
|
|
<td>
|
|
|
|
<KeyCell>
|
|
|
|
Snapshot capture format
|
|
|
|
Snapshot capture format
|
|
|
|
</td>
|
|
|
|
</KeyCell>
|
|
|
|
<td>
|
|
|
|
<Table.TextCell>
|
|
|
|
{renderCaptureFormatButton()}
|
|
|
|
{renderCaptureFormatButton()}
|
|
|
|
</td>
|
|
|
|
</Table.TextCell>
|
|
|
|
</tr>
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<Row>
|
|
|
|
<td>In timecode show</td>
|
|
|
|
<KeyCell>In timecode show</KeyCell>
|
|
|
|
<td>
|
|
|
|
<Table.TextCell>
|
|
|
|
<button
|
|
|
|
<SegmentedControl
|
|
|
|
type="button"
|
|
|
|
options={[{ label: 'Frame numbers', value: 'frames' }, { label: 'Millisecond fractions', value: 'ms' }]}
|
|
|
|
onClick={() => setTimecodeShowFrames(v => !v)}
|
|
|
|
value={timecodeShowFrames ? 'frames' : 'ms'}
|
|
|
|
>
|
|
|
|
onChange={value => setTimecodeShowFrames(value === 'frames')}
|
|
|
|
{timecodeShowFrames ? 'Frame numbers' : 'Millisecond fractions'}
|
|
|
|
/>
|
|
|
|
</button>
|
|
|
|
</Table.TextCell>
|
|
|
|
</td>
|
|
|
|
</Row>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
<Row>
|
|
|
|
<tr>
|
|
|
|
<KeyCell>Ask for confirmation when closing app?</KeyCell>
|
|
|
|
<td>Ask for confirmation when closing app?</td>
|
|
|
|
<Table.TextCell>
|
|
|
|
<td>
|
|
|
|
<Checkbox
|
|
|
|
<button
|
|
|
|
label="Ask before closing"
|
|
|
|
type="button"
|
|
|
|
checked={askBeforeClose}
|
|
|
|
onClick={() => setAskBeforeClose(v => !v)}
|
|
|
|
onChange={e => setAskBeforeClose(e.target.checked)}
|
|
|
|
>
|
|
|
|
/>
|
|
|
|
{askBeforeClose ? 'Ask before closing' : 'Don\'t ask before closing'}
|
|
|
|
</Table.TextCell>
|
|
|
|
</button>
|
|
|
|
</Row>
|
|
|
|
</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</Fragment>
|
|
|
|
</Fragment>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
useEffect(() => {
|
|
|
|
loadMifiLink().then(setMifiLink);
|
|
|
|
loadMifiLink().then(setMifiLink);
|
|
|
|
|
Mikael Finstad
6 years ago