diff --git a/src/HelpSheet.jsx b/src/HelpSheet.jsx index 1086c66c..cc4328ce 100644 --- a/src/HelpSheet.jsx +++ b/src/HelpSheet.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { IoIosCloseCircleOutline } from 'react-icons/io'; import { FaClipboard } from 'react-icons/fa'; import { motion, AnimatePresence } from 'framer-motion'; +import { Table } from 'evergreen-ui'; // eslint-disable-next-line import/no-extraneous-dependencies const { clipboard } = require('electron'); @@ -23,39 +24,40 @@ const HelpSheet = ({

Keyboard shortcuts

- +
H Show/hide this screen
+
SPACE, k Play/pause
+
J Slow down video
+
L Speed up video
+
← Seek backward 1 sec
+
→ Seek forward 1 sec
+
. (period) Tiny seek forward (1/60 sec)
+
, (comma) Tiny seek backward (1/60 sec)
+
I Mark in / cut start point
+
O Mark out / cut end point
+
E Cut (export selection in the same directory)
+
C Capture snapshot (in the same directory)
+
+ Add cut segment
+
BACKSPACE Remove current cut segment
+
D Delete source file
-

Hover mouse over buttons to see which function they have.

+

Hover mouse over buttons in the main interface to see which function they have.

- - - - - - - - +
SettingsCurrent setting
+ + + Settings + + + Current setting + + + {renderSettings()} - -
+ +

Segment list

+
{sortedCutSegments.map((seg) => (
diff --git a/src/main.css b/src/main.css index cb720a28..1ba95cc8 100644 --- a/src/main.css +++ b/src/main.css @@ -63,8 +63,8 @@ input, button, textarea, :focus { } .help-sheet { - background: #525252; - color: white; + background: white; + color: black; padding: 1em 2em; position: fixed; left: 0; @@ -87,7 +87,7 @@ input, button, textarea, :focus { line-height: 10px; color: #555; vertical-align: middle; - background-color: #fcfcfc; + background-color: rgba(0,0,0,0.03); border: solid 1px #ccc; border-bottom-color: #bbb; border-radius: 3px; diff --git a/src/renderer.jsx b/src/renderer.jsx index 5924e37a..55c488c9 100644 --- a/src/renderer.jsx +++ b/src/renderer.jsx @@ -6,7 +6,7 @@ import { FiScissors } from 'react-icons/fi'; import { AnimatePresence, motion } from 'framer-motion'; import Swal from 'sweetalert2'; 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 fromPairs from 'lodash/fromPairs'; @@ -1220,9 +1220,9 @@ const App = memo(() => { )); } - function renderOutFmt({ width } = {}) { + function renderOutFmt(style = {}) { return ( - setFileFormat(e.target.value))}> {detectedFileFormat && ( @@ -1252,145 +1252,137 @@ const App = memo(() => { ); } - const renderSettings = () => ( - - - Output format (default autodetected) - {renderOutFmt()} - - - - - Working directory
- This is where working files, exported files, project files (CSV) are stored. - - - -
{customOutDir}
- - - - - Auto merge segments to one file after export? - - - - - - - keyframe cut mode - - - - - - - - Discard (cut away) or keep selected segments from video when exporting - - - - - - - - - Discard audio? - - - - - - - - - Extract unprocessable tracks to separate files?
- (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) - - - - - - - - - Auto save project?
- The project will be stored along with the output files as a CSV file - - - - - - - - - Snapshot capture format - - - {renderCaptureFormatButton()} - - - - - In timecode show - - - - - - - Ask for confirmation when closing app? - - - - - - ); + const renderSettings = () => { + // eslint-disable-next-line react/jsx-props-no-spreading + const Row = (props) => ; + // eslint-disable-next-line react/jsx-props-no-spreading + const KeyCell = (props) => ; + + return ( + + + Output format (default autodetected) + {renderOutFmt({ width: '100%' })} + + + + + Working directory
+ This is where working files, exported files, project files (CSV) are stored. + + + +
{customOutDir}
+ + + + + Auto merge segments to one file during export or export to separate files? + + setAutoMerge(value === 'automerge')} + /> + + + + + + Keyframe cut mode
+ Nearest keyframe: Cut at the nearest keyframe (not accurate time.)
+ Normal cut: Accurate time but could leave an empty portion at the beginning of the video.
+ + + setKeyframeCut(value === 'keyframe')} + /> + + + + + + ☯️ Choose cutting mode: Cut away or keep selected segments from video when exporting?
+ When Keep is selected, the video inside segments will be kept, while the video outside will be discarded.
+ When Cut away is selected, the video inside segments will be discarded, while the video surrounding them will be kept. + + + setInvertCutSegments(value === 'discard')} + /> + + + + + + Extract unprocessable tracks to separate files or discard them?
+ (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) + + + setAutoExportExtraStreams(value === 'extract')} + /> + + + + + + Auto save project file?
+ The project will be stored along with the output files as a CSV file + + + setAutoSaveProjectFile(e.target.checked)} + /> + + + + + + Snapshot capture format + + + {renderCaptureFormatButton()} + + + + + In timecode show + + setTimecodeShowFrames(value === 'frames')} + /> + + + + + Ask for confirmation when closing app? + + setAskBeforeClose(e.target.checked)} + /> + + + + ); + }; useEffect(() => { loadMifiLink().then(setMifiLink);