Implement help sheet (press H)

README.md

@@ -35,17 +35,7 @@ For more information about supported formats / codecs, see https://www.chromium.
 The original video files will not be modified. Instead it creates a lossless export in the same directory as the original file with from/to timestamps. Note that the cut is currently not precise around the cutpoints, so video before/after the nearest keyframe will be lost. EXIF data is preserved.
 
 ### Keyboard shortcuts
-- <kbd>SPACE</kbd>, <kbd>k</kbd> Play/pause
-- <kbd>j</kbd> Slow down video
-- <kbd>l</kbd> Speed up video
-- <kbd>←</kbd> Seek backward 1 sec
-- <kbd>→</kbd> Seek forward 1 sec
-- <kbd>.</kbd> (period) Tiny seek forward (1/60 sec)
-- <kbd>,</kbd> (comma) Tiny seek backward (1/60 sec)
-- <kbd>i</kbd> Mark in / cut start point
-- <kbd>o</kbd> Mark out / cut end point
-- <kbd>e</kbd> Export selection (in the same dir as the video)
-- <kbd>c</kbd> Capture snapshot (in the same dir as the video)
+Press <kbd>h</kbd> To show/hide list of shortcuts
 
 ## Development building / running
 

src/main.css

@@ -116,11 +116,42 @@ input, button, textarea, :focus {
 }
 
 #drag-drop-field {
-    padding: 15vw 0;
-    border: 2vw dashed #252525;
-    color: #252525;
-    margin: 7vw;
-    font-size: 9vw;
-    text-align: center;
-    white-space: nowrap;
+  padding: 15vw 0;
+  border: 2vw dashed #252525;
+  color: #252525;
+  margin: 7vw;
+  font-size: 9vw;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.help-sheet {
+  background: #525252;
+  color: white;
+  padding: 1em 2em;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 10;
+}
+
+.help-sheet h1 {
+  font-size: 1em;
+  text-transform: uppercase;
+}
+
+.help-sheet kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font-size: 11px;
+    line-height: 10px;
+    color: #555;
+    vertical-align: middle;
+    background-color: #fcfcfc;
+    border: solid 1px #ccc;
+    border-bottom-color: #bbb;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #bbb;
 }

src/renderer.jsx

@@ -40,6 +40,29 @@ function shortStep(dir) {
   seekRel((1 / 60) * dir);
 }
 
+function renderHelpSheet(visible) {
+  if (visible) {
+    return (<div className="help-sheet">
+      <h1>Keyboard shortcuts</h1>
+      <ul>
+        <li><kbd>H</kbd> Show/hide help</li>
+        <li><kbd>SPACE</kbd>, <kbd>k</kbd> Play/pause</li>
+        <li><kbd>J</kbd> Slow down video</li>
+        <li><kbd>L</kbd> Speed up video</li>
+        <li><kbd>←</kbd> Seek backward 1 sec</li>
+        <li><kbd>→</kbd> Seek forward 1 sec</li>
+        <li><kbd>.</kbd> (period) Tiny seek forward (1/60 sec)</li>
+        <li><kbd>,</kbd> (comma) Tiny seek backward (1/60 sec)</li>
+        <li><kbd>I</kbd> Mark in / cut start point</li>
+        <li><kbd>O</kbd> Mark out / cut end point</li>
+        <li><kbd>E</kbd> Export selection (in the same dir as the video)</li>
+        <li><kbd>C</kbd> Capture snapshot (in the same dir as the video)</li>
+      </ul>
+    </div>);
+  }
+
+  return undefined;
+}
 
 class App extends React.Component {
   constructor(props) {
@@ -113,6 +136,7 @@ class App extends React.Component {
     keyboardJs.bind('e', () => this.cutClick());
     keyboardJs.bind('i', () => this.setCutStart());
     keyboardJs.bind('o', () => this.setCutEnd());
+    keyboardJs.bind('h', () => this.toggleHelp());
 
     electron.ipcRenderer.send('renderer-ready');
   }
@@ -228,6 +252,10 @@ class App extends React.Component {
     });
   }
 
+  toggleHelp() {
+    this.setState({ helpVisible: !this.state.helpVisible });
+  }
+
   render() {
     return (<div>
       {this.state.filePath ? undefined : <div id="drag-drop-field">DROP VIDEO</div>}
@@ -345,6 +373,8 @@ class App extends React.Component {
           onClick={() => this.capture()}
         />
       </div>
+
+      {renderHelpSheet(this.state.helpVisible)}
     </div>);
   }
 }