From 3efd4ef489c13371b7ca14902c3a8da57078faf5 Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Fri, 21 Feb 2020 15:10:40 +0800 Subject: [PATCH] improve settings screen --- src/HelpSheet.jsx | 58 +++++----- src/main.css | 6 +- src/renderer.jsx | 276 ++++++++++++++++++++++------------------------ 3 files changed, 167 insertions(+), 173 deletions(-) diff --git a/src/HelpSheet.jsx b/src/HelpSheet.jsx index 1086c66c123..cc4328cebd6 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 cb720a2822c..1ba95cc829a 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 5924e37af6d..55c488c9f96 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);