From 806e270da6f2202a8f5190790e02932905f42161 Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Wed, 18 Nov 2020 19:11:21 +0100 Subject: [PATCH] refactor sheets --- src/HelpSheet.jsx | 176 ++++++++++++++++++++---------------------- src/SettingsSheet.jsx | 49 +++++------- src/Sheet.jsx | 33 ++++++++ src/main.css | 25 +----- 4 files changed, 135 insertions(+), 148 deletions(-) create mode 100644 src/Sheet.jsx diff --git a/src/HelpSheet.jsx b/src/HelpSheet.jsx index d10059ce..d6c1a3d2 100644 --- a/src/HelpSheet.jsx +++ b/src/HelpSheet.jsx @@ -1,113 +1,101 @@ import React, { memo } from 'react'; -import { IoIosCloseCircleOutline } from 'react-icons/io'; import { FaClipboard, FaHandPointRight, FaHandPointLeft, FaStepBackward, FaStepForward } from 'react-icons/fa'; -import { motion, AnimatePresence } from 'framer-motion'; import { useTranslation } from 'react-i18next'; import SetCutpointButton from './SetCutpointButton'; import { toast } from './util'; import { primaryTextColor } from './colors'; +import Sheet from './Sheet'; const electron = window.require('electron'); const { clipboard } = electron; const { githubLink } = electron.remote.require('./constants'); -const HelpSheet = memo(({ - visible, onTogglePress, ffmpegCommandLog, currentCutSeg, -}) => { +const HelpSheet = memo(({ visible, onTogglePress, ffmpegCommandLog, currentCutSeg }) => { const { t } = useTranslation(); return ( - - {visible && ( - - - -

{t('Common problems')}

-

- {t('Lossless cutting is not an exact science. For some codecs and files it just works. For others you may need to trial and error depending on the codec, keyframes etc to get the best cut.')} -

-
    -
  1. Try both Keyframe cut and Normal cut modes
    2. -
  2. Try to set the start-cutpoint a few frames before or after the nearest keyframe (may also solve audio sync issues)
    3. -
  3. Try to disable some Tracks
    4. -
  4. Try a different Output format
    5. -
  5. Try to enable the Experimental Flag in Settings
    6. -
- -

- {t('For more help and issues, please go to:')}
- electron.shell.openExternal(githubLink)}>{githubLink} -

- -

{t('Keyboard & mouse shortcuts')}

- -
H {t('Show/hide help screen')}
- -

{t('Playback')}

- -
SPACE, k {t('Play/pause')}
-
J {t('Slow down playback')}
-
L {t('Speed up playback')}
- -

{t('Seeking')}

- -
, {t('Step backward 1 frame')}
-
. {t('Step forward 1 frame')}
-
ALT / OPT + ← {t('Seek to previous keyframe')}
-
ALT / OPT + → {t('Seek to next keyframe')}
-
← {t('Seek backward 1 sec')}
-
→ {t('Seek forward 1 sec')}
-
CTRL / CMD + ← {t('Seek backward 1% of timeline at current zoom')}
-
CTRL / CMD + → {t('Seek forward 1% of timeline at current zoom')}
-
{t('Jump to cut end')}
-
{t('Jump to cut end')}
- -

{t('Segments and cut points')}

- -
, I {t('Mark in / cut start point for current segment')}
-
, O {t('Mark out / cut end point for current segment')}
-
+ {t('Add cut segment')}
-
BACKSPACE {t('Remove current segment')}
-
↑ {t('Select previous segment')}
-
↓ {t('Select next segment')}
- -

{t('Timeline/zoom operations')}

-
Z {t('Toggle zoom between 1x and a calculated comfortable zoom level')}
-
CTRL / CMD + ↑ {t('Zoom in timeline')}
-
CTRL / CMD + ↓ {t('Zoom out timeline')}
-
CTRL + {t('Mouse scroll/wheel up/down')} - {t('Zoom in/out timeline')}
-
{t('Mouse scroll/wheel left/right')} - {t('Pan timeline')}
- -

{t('Output actions')}

-
E {t('Export segment(s)')}
-
C {t('Capture snapshot')}
-
D {t('Delete source file')}
- -

{t('Hover mouse over buttons in the main interface to see which function they have')}

- -

{t('Last ffmpeg commands')}

- {ffmpegCommandLog.length > 0 ? ( -
- {ffmpegCommandLog.reverse().map(({ command }, i) => ( - // eslint-disable-next-line react/no-array-index-key -
- { clipboard.writeText(command); toast.fire({ timer: 2000, icon: 'success', title: t('Copied to clipboard') }); }} /> {command} -
- ))} -
- ) : ( -

{t('The last executed ffmpeg commands will show up here after you run operations. You can copy them to clipboard and modify them to your needs before running on your command line.')}

- )} - - )} - + +
+

{t('Common problems')}

+

+ {t('Lossless cutting is not an exact science. For some codecs and files it just works. For others you may need to trial and error depending on the codec, keyframes etc to get the best cut.')} +

+
    +
  1. Try both Keyframe cut and Normal cut modes
    2. +
  2. Try to set the start-cutpoint a few frames before or after the nearest keyframe (may also solve audio sync issues)
    3. +
  3. Try to disable some Tracks
    4. +
  4. Try a different Output format
    5. +
  5. Try to enable the Experimental Flag in Settings
    6. +
+ +

+ {t('For more help and issues, please go to:')}
+ electron.shell.openExternal(githubLink)}>{githubLink} +

+ +

{t('Keyboard & mouse shortcuts')}

+ +
H {t('Show/hide help screen')}
+ +

{t('Playback')}

+ +
SPACE, k {t('Play/pause')}
+
J {t('Slow down playback')}
+
L {t('Speed up playback')}
+ +

{t('Seeking')}

+ +
, {t('Step backward 1 frame')}
+
. {t('Step forward 1 frame')}
+
ALT / OPT + ← {t('Seek to previous keyframe')}
+
ALT / OPT + → {t('Seek to next keyframe')}
+
← {t('Seek backward 1 sec')}
+
→ {t('Seek forward 1 sec')}
+
CTRL / CMD + ← {t('Seek backward 1% of timeline at current zoom')}
+
CTRL / CMD + → {t('Seek forward 1% of timeline at current zoom')}
+
{t('Jump to cut end')}
+
{t('Jump to cut end')}
+ +

{t('Segments and cut points')}

+ +
, I {t('Mark in / cut start point for current segment')}
+
, O {t('Mark out / cut end point for current segment')}
+
+ {t('Add cut segment')}
+
BACKSPACE {t('Remove current segment')}
+
↑ {t('Select previous segment')}
+
↓ {t('Select next segment')}
+ +

{t('Timeline/zoom operations')}

+
Z {t('Toggle zoom between 1x and a calculated comfortable zoom level')}
+
CTRL / CMD + ↑ {t('Zoom in timeline')}
+
CTRL / CMD + ↓ {t('Zoom out timeline')}
+
CTRL + {t('Mouse scroll/wheel up/down')} - {t('Zoom in/out timeline')}
+
{t('Mouse scroll/wheel left/right')} - {t('Pan timeline')}
+ +

{t('Output actions')}

+
E {t('Export segment(s)')}
+
C {t('Capture snapshot')}
+
D {t('Delete source file')}
+ +

{t('Hover mouse over buttons in the main interface to see which function they have')}

+ +

{t('Last ffmpeg commands')}

+ {ffmpegCommandLog.length > 0 ? ( +
+ {ffmpegCommandLog.reverse().map(({ command }, i) => ( + // eslint-disable-next-line react/no-array-index-key +
+ { clipboard.writeText(command); toast.fire({ timer: 2000, icon: 'success', title: t('Copied to clipboard') }); }} /> {command} +
+ ))} +
+ ) : ( +

{t('The last executed ffmpeg commands will show up here after you run operations. You can copy them to clipboard and modify them to your needs before running on your command line.')}

+ )} +
+ ); }); diff --git a/src/SettingsSheet.jsx b/src/SettingsSheet.jsx index a706fae7..ad80b1ae 100644 --- a/src/SettingsSheet.jsx +++ b/src/SettingsSheet.jsx @@ -1,41 +1,28 @@ import React, { memo } from 'react'; -import { IoIosCloseCircleOutline } from 'react-icons/io'; -import { motion, AnimatePresence } from 'framer-motion'; import { Table } from 'evergreen-ui'; import { useTranslation } from 'react-i18next'; -const SettingsSheet = memo(({ - visible, onTogglePress, renderSettings, -}) => { +import Sheet from './Sheet'; + +const SettingsSheet = memo(({ visible, onTogglePress, renderSettings }) => { const { t } = useTranslation(); return ( - - {visible && ( - - - - - - - {t('Settings')} - - - {t('Current setting')} - - - - {renderSettings()} - -
- - )} - + + + + + {t('Settings')} + + + {t('Current setting')} + + + + {renderSettings()} + +
+ ); }); diff --git a/src/Sheet.jsx b/src/Sheet.jsx new file mode 100644 index 00000000..ab54e2e3 --- /dev/null +++ b/src/Sheet.jsx @@ -0,0 +1,33 @@ +import React, { memo } from 'react'; +import { IoIosCloseCircleOutline } from 'react-icons/io'; +import { motion, AnimatePresence } from 'framer-motion'; + +const sheetStyle = { + padding: '1em 2em', + position: 'fixed', + left: 0, + right: 0, + top: 0, + bottom: 0, + zIndex: 10, + overflowY: 'scroll', +}; + +const Sheet = memo(({ visible, onClosePress, style, children }) => ( + + {visible && ( + + + + {children} + + )} + +)); + +export default Sheet; diff --git a/src/main.css b/src/main.css index 49d45c6e..cde9d700 100644 --- a/src/main.css +++ b/src/main.css @@ -19,35 +19,14 @@ body { cursor: default; } -.help-sheet, .settings-sheet { - padding: 1em 2em; - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 10; - overflow-y: scroll; -} - -.help-sheet { - background: #6b6b6b; - color: white; -} - -.settings-sheet { - background: white; - color: black; -} - -.help-sheet h1, .settings-sheet h1 { +.help-sheet h1 { font-size: 1.2em; margin-bottom: .5em; margin-top: 1.3em; text-transform: uppercase; } -.help-sheet h2, .settings-sheet h2 { +.help-sheet h2 { font-size: 1em; margin-bottom: .5em; text-transform: uppercase;