improvements

-improve help screen
bugfixes

src/App.jsx

@@ -1656,6 +1656,10 @@ const App = memo(() => {
         <div className="no-user-select" style={{ position: 'fixed', left: 0, right: 0, top: topBarHeight, bottom: bottomBarHeight, border: '2vmin dashed #252525', color: '#505050', margin: '5vmin', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', whiteSpace: 'nowrap' }}>
           <div style={{ fontSize: '9vmin', textTransform: 'uppercase' }}>{t('DROP FILE(S)')}</div>
 
+          <div style={{ fontSize: '4vmin', color: '#777', cursor: 'pointer' }} role="button" onClick={toggleHelp}>
+            Press <kbd>H</kbd> for help
+          </div>
+
           {mifiLink && mifiLink.loadUrl && (
             <div style={{ position: 'relative', margin: '3vmin', width: '60vmin', height: '20vmin' }}>
               <iframe src={mifiLink.loadUrl} title="iframe" style={{ background: 'rgba(0,0,0,0)', border: 'none', pointerEvents: 'none', width: '100%', height: '100%', position: 'absolute' }} />
@@ -1699,7 +1703,7 @@ const App = memo(() => {
         )}
       </AnimatePresence>
 
-      <div className="no-user-select" style={{ position: 'absolute', top: topBarHeight, left: 0, right: sideBarWidth, bottom: bottomBarHeight }}>
+      <div className="no-user-select" style={{ position: 'absolute', top: topBarHeight, left: 0, right: sideBarWidth, bottom: bottomBarHeight, pointerEvents: 'none' }}>
         {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
         <video
           muted={muted}
@@ -1881,6 +1885,7 @@ const App = memo(() => {
         visible={helpVisible}
         onTogglePress={toggleHelp}
         ffmpegCommandLog={ffmpegCommandLog}
+        currentCutSeg={currentCutSeg}
       />
 
       <SettingsSheet

src/HelpSheet.jsx

@@ -1,11 +1,12 @@
 import React, { memo } from 'react';
 import { IoIosCloseCircleOutline } from 'react-icons/io';
-import { FaClipboard } from 'react-icons/fa';
+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 { primaryColor } from './colors';
+import { primaryTextColor } from './colors';
 
 const electron = window.require('electron');
 const { clipboard } = electron;
@@ -13,7 +14,7 @@ const { clipboard } = electron;
 const { githubLink } = electron.remote.require('./constants');
 
 const HelpSheet = memo(({
-  visible, onTogglePress, ffmpegCommandLog,
+  visible, onTogglePress, ffmpegCommandLog, currentCutSeg,
 }) => {
   const { t } = useTranslation();
 
@@ -29,11 +30,13 @@ const HelpSheet = memo(({
           <IoIosCloseCircleOutline role="button" onClick={onTogglePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
 
           <p style={{ fontWeight: 'bold' }}>
-            For usage help and issues, go to<br />
-            <span style={{ color: primaryColor, cursor: 'pointer' }} role="button" onClick={() => electron.shell.openExternal(githubLink)}>{githubLink}</span>
+            {t('For usage help and issues, please go to:')}<br />
+            <span style={{ color: primaryTextColor, cursor: 'pointer' }} role="button" onClick={() => electron.shell.openExternal(githubLink)}>{githubLink}</span>
           </p>
+
           <h1>{t('Keyboard & mouse shortcuts')}</h1>
-          <div><kbd>H</kbd> {t('Show/hide this screen')}</div>
+
+          <div><kbd>H</kbd> {t('Show/hide help screen')}</div>
 
           <h2>{t('Playback')}</h2>
 
@@ -51,6 +54,17 @@ const HelpSheet = memo(({
           <div><kbd>→</kbd> {t('Seek forward 1 sec')}</div>
           <div><kbd>CTRL</kbd> / <kbd>CMD</kbd> + <kbd>←</kbd> {t('Seek backward 1% of timeline at current zoom')}</div>
           <div><kbd>CTRL</kbd> / <kbd>CMD</kbd> + <kbd>→</kbd> {t('Seek forward 1% of timeline at current zoom')}</div>
+          <div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaStepBackward} style={{ verticalAlign: 'middle' }} /> {t('Jump to cut end')}</div>
+          <div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaStepForward} style={{ verticalAlign: 'middle' }} /> {t('Jump to cut end')}</div>
+
+          <h2>{t('Segments and cut points')}</h2>
+
+          <div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaHandPointLeft} style={{ verticalAlign: 'middle' }} />, <kbd>I</kbd> {t('Mark in / cut start point for current segment')}</div>
+          <div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointRight} style={{ verticalAlign: 'middle' }} />, <kbd>O</kbd> {t('Mark out / cut end point for current segment')}</div>
+          <div><kbd>+</kbd> {t('Add cut segment')}</div>
+          <div><kbd>BACKSPACE</kbd> {t('Remove current segment')}</div>
+          <div><kbd>↑</kbd> {t('Select previous segment')}</div>
+          <div><kbd>↓</kbd> {t('Select next segment')}</div>
 
           <h2>{t('Timeline/zoom operations')}</h2>
           <div><kbd>Z</kbd> {t('Toggle zoom between 1x and a calculated comfortable zoom level')}</div>
@@ -59,15 +73,7 @@ const HelpSheet = memo(({
           <div><kbd>CTRL</kbd> <i>+ {t('Mouse scroll/wheel up/down')}</i> - {t('Zoom in/out timeline')}</div>
           <div><i>{t('Mouse scroll/wheel left/right')}</i> - {t('Pan timeline')}</div>
 
-          <h2>{t('Segments and cut points')}</h2>
-          <div><kbd>I</kbd> {t('Mark in / cut start point for current segment')}</div>
-          <div><kbd>O</kbd> {t('Mark out / cut end point for current segment')}</div>
-          <div><kbd>+</kbd> {t('Add cut segment')}</div>
-          <div><kbd>BACKSPACE</kbd> {t('Remove current segment')}</div>
-          <div><kbd>↑</kbd> {t('Select previous segment')}</div>
-          <div><kbd>↓</kbd> {t('Select next segment')}</div>
-
-          <h2>{t('File system actions')}</h2>
+          <h2>{t('Output actions')}</h2>
           <div><kbd>E</kbd> {t('Export segment(s)')}</div>
           <div><kbd>C</kbd> {t('Capture snapshot')}</div>
           <div><kbd>D</kbd> {t('Delete source file')}</div>

src/SetCutpointButton.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { getSegColors } from './util';
+
+const SetCutpointButton = ({ currentCutSeg, side, Icon, onClick, title, style }) => {
+  const {
+    segActiveBgColor: currentSegActiveBgColor,
+    segBorderColor: currentSegBorderColor,
+  } = getSegColors(currentCutSeg);
+
+  const start = side === 'start';
+  const border = `4px solid ${currentSegBorderColor}`;
+
+  return (
+    <Icon
+      size={13}
+      title={title}
+      role="button"
+      style={{ color: 'white', padding: start ? '4px 4px 4px 2px' : '4px 2px 4px 4px', borderLeft: start && border, borderRight: !start && border, background: currentSegActiveBgColor, borderRadius: 6, ...style }}
+      onClick={onClick}
+    />
+  );
+};
+
+export default SetCutpointButton;

src/SettingsSheet.jsx

@@ -16,7 +16,7 @@ const SettingsSheet = memo(({
           initial={{ scale: 0, opacity: 0 }}
           animate={{ scale: 1, opacity: 1 }}
           exit={{ scale: 0, opacity: 0 }}
-          className="help-sheet"
+          className="settings-sheet"
         >
           <IoIosCloseCircleOutline role="button" onClick={onTogglePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
 

src/TimelineControls.jsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import { getSegColors, parseDuration, formatDuration } from './util';
 import { primaryTextColor } from './colors';
-
+import SetCutpointButton from './SetCutpointButton';
 
 const TimelineControls = memo(({
   seekAbs, currentSegIndexSafe, cutSegments, currentCutSeg, setCutStart, setCutEnd,
@@ -18,31 +18,13 @@ const TimelineControls = memo(({
 }) => {
   const { t } = useTranslation();
 
-  const {
-    segActiveBgColor: currentSegActiveBgColor,
-    segBorderColor: currentSegBorderColor,
-  } = getSegColors(currentCutSeg);
-
-  const getSegButtonStyle = ({ segActiveBgColor, segBorderColor }) => ({ background: segActiveBgColor, border: `2px solid ${segBorderColor}`, borderRadius: 6, color: 'white', fontSize: 14, textAlign: 'center', lineHeight: '11px', fontWeight: 'bold' });
-
-  function renderSetCutpointButton({ side, Icon, onClick, title, style }) {
-    const start = side === 'start';
-    const border = `4px solid ${currentSegBorderColor}`;
-    return (
-      <Icon
-        size={13}
-        title={title}
-        role="button"
-        style={{ padding: start ? '4px 4px 4px 2px' : '4px 2px 4px 4px', borderLeft: start && border, borderRight: !start && border, background: currentSegActiveBgColor, borderRadius: 6, ...style }}
-        onClick={onClick}
-      />
-    );
-  }
 
   function renderJumpCutpointButton(direction) {
     const newIndex = currentSegIndexSafe + direction;
     const seg = cutSegments[newIndex];
 
+    const getSegButtonStyle = ({ segActiveBgColor, segBorderColor }) => ({ background: segActiveBgColor, border: `2px solid ${segBorderColor}`, borderRadius: 6, color: 'white', fontSize: 14, textAlign: 'center', lineHeight: '11px', fontWeight: 'bold' });
+
     let segButtonStyle;
 
     if (seg) {
@@ -164,9 +146,8 @@ const TimelineControls = memo(({
 
       {renderJumpCutpointButton(-1)}
 
-      {renderSetCutpointButton({ side: 'start', Icon: FaStepBackward, onClick: jumpCutStart, title: t('Jump to cut start'), style: { marginRight: 5 } })}
-
-      {renderSetCutpointButton({ side: 'start', Icon: FaHandPointLeft, onClick: setCutStart, title: t('Set cut start to current position') })}
+      <SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaStepBackward} onClick={jumpCutStart} title={t('Jump to cut start')} style={{ marginRight: 5 }} />
+      <SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaHandPointLeft} onClick={setCutStart} title={t('Set cut start to current position')} />
 
       {renderCutTimeInput('start')}
 
@@ -203,9 +184,8 @@ const TimelineControls = memo(({
 
       {renderCutTimeInput('end')}
 
-      {renderSetCutpointButton({ side: 'end', Icon: FaHandPointRight, onClick: setCutEnd, title: t('Set cut end to current position') })}
-
-      {renderSetCutpointButton({ side: 'end', Icon: FaStepForward, onClick: jumpCutEnd, title: t('Jump to cut end'), style: { marginLeft: 5 } })}
+      <SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointRight} onClick={setCutEnd} title={t('Set cut end to current position')} />
+      <SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaStepForward} onClick={jumpCutEnd} title={t('Jump to cut end')} style={{ marginLeft: 5 }} />
 
       {renderJumpCutpointButton(1)}
 

src/main.css

@@ -18,9 +18,7 @@ body {
     cursor: default;
 }
 
-.help-sheet {
-  background: white;
-  color: black;
+.help-sheet, .settings-sheet {
   padding: 1em 2em;
   position: fixed;
   left: 0;
@@ -31,27 +29,37 @@ body {
   overflow-y: scroll;
 }
 
-.help-sheet h1 {
+.help-sheet {
+  background: #6b6b6b;
+  color: white;
+}
+
+.settings-sheet {
+  background: white;
+  color: black;
+}
+
+.help-sheet h1, .settings-sheet h1 {
   font-size: 1.2em;
   margin-bottom: .5em;
   margin-top: 1.3em;
   text-transform: uppercase;
 }
 
-.help-sheet h2 {
+.help-sheet h2, .settings-sheet h2 {
   font-size: 1em;
   margin-bottom: .5em;
   text-transform: uppercase;
 }
 
-.help-sheet kbd {
+kbd {
     display: inline-block;
     padding: 3px 5px;
     font-size: 11px;
     line-height: 10px;
     color: #555;
     vertical-align: middle;
-    background-color: rgba(0,0,0,0.03);
+    background-color: #fdfdfd;
     border: solid 1px #ccc;
     border-bottom-color: #bbb;
     border-radius: 3px;