From e609a7fec2b79c26c9177f902bc8f0ae77ad6707 Mon Sep 17 00:00:00 2001
From: Marcin Kulik <m@ku1ik.com>
Date: Fri, 7 Jun 2024 13:23:18 +0200
Subject: [PATCH] Add help overlay, triggered by "?" key

---
 src/components/HelpOverlay.js    | 54 ++++++++++++++++++++++++++++++++
 src/components/Player.js         | 17 ++++++++++
 src/less/partials/_overlays.less | 44 ++++++++++++++++++++++++++
 3 files changed, 115 insertions(+)
 create mode 100644 src/components/HelpOverlay.js

diff --git a/src/components/HelpOverlay.js b/src/components/HelpOverlay.js
new file mode 100644
index 00000000..5bb8703e
--- /dev/null
+++ b/src/components/HelpOverlay.js
@@ -0,0 +1,54 @@
+export default (props) => {
+  const style = () => {
+    return { "font-family": props.fontFamily };
+  };
+
+  const e = (f) => {
+    return (e) => {
+      e.preventDefault();
+      f(e);
+    };
+  };
+
+  return (
+    <div class="ap-overlay ap-overlay-help" style={style()} onClick={e(props.onClose)}>
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <div>
+          <p>Keyboard shortcuts</p>
+
+          <ul>
+            <li>
+              <kbd>space</kbd> - pause / resume
+            </li>
+            <li>
+              <kbd>f</kbd> - toggle fullscreen mode
+            </li>
+            <li>
+              <kbd>←</kbd> / <kbd>→</kbd> - rewind / fast-forward by 5 seconds
+            </li>
+            <li>
+              <kbd>Shift</kbd> + <kbd>←</kbd> / <kbd>→</kbd> - rewind / fast-forward by 10%
+            </li>
+            <li>
+              <kbd>[</kbd> / <kbd>]</kbd> - jump to the previous / next marker
+            </li>
+            <li>
+              <kbd>0</kbd>, <kbd>1</kbd>, <kbd>2</kbd> ... <kbd>9</kbd> - jump to 0%, 10%, 20% ...
+              90%
+            </li>
+            <li>
+              <kbd>.</kbd> - step through a recording, one frame at a time (when paused)
+            </li>
+            <li>
+              <kbd>?</kbd> - toggle this help popup
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Player.js b/src/components/Player.js
index 1f8e972f..00392a92 100644
--- a/src/components/Player.js
+++ b/src/components/Player.js
@@ -7,6 +7,7 @@ import ErrorOverlay from "./ErrorOverlay";
 import LoaderOverlay from "./LoaderOverlay";
 import InfoOverlay from "./InfoOverlay";
 import StartOverlay from "./StartOverlay";
+import HelpOverlay from "./HelpOverlay";
 
 const CONTROL_BAR_HEIGHT = 32; // must match height of div.ap-control-bar in CSS
 
@@ -46,6 +47,7 @@ export default (props) => {
   const [duration, setDuration] = createSignal(undefined);
   const [markers, setMarkers] = createStore([]);
   const [userActive, setUserActive] = createSignal(false);
+  const [isHelpVisible, setIsHelpVisible] = createSignal(false);
   const [originalTheme, setOriginalTheme] = createSignal(undefined);
   const terminalCols = createMemo(() => terminalSize().cols || 80);
   const terminalRows = createMemo(() => terminalSize().rows || 24);
@@ -314,6 +316,13 @@ export default (props) => {
     } else if (e.key.charCodeAt(0) >= 48 && e.key.charCodeAt(0) <= 57) {
       const pos = (e.key.charCodeAt(0) - 48) / 10;
       core.seek(`${pos * 100}%`);
+    } else if (e.key == "?") {
+      if (isHelpVisible()) {
+        setIsHelpVisible(false);
+      } else {
+        core.pause();
+        setIsHelpVisible(true);
+      }
     } else if (e.key == "ArrowLeft") {
       if (e.shiftKey) {
         core.seek("<<<");
@@ -326,6 +335,8 @@ export default (props) => {
       } else {
         core.seek(">>");
       }
+    } else if (e.key == "Escape") {
+      setIsHelpVisible(false);
     } else {
       return;
     }
@@ -503,6 +514,12 @@ export default (props) => {
             <ErrorOverlay />
           </Match>
         </Switch>
+        <Show when={isHelpVisible()}>
+          <HelpOverlay
+            fontFamily={props.terminalFontFamily}
+            onClose={() => setIsHelpVisible(false)}
+          />
+        </Show>
       </div>
     </div>
   );
diff --git a/src/less/partials/_overlays.less b/src/less/partials/_overlays.less
index baa426cd..59c141da 100644
--- a/src/less/partials/_overlays.less
+++ b/src/less/partials/_overlays.less
@@ -75,6 +75,50 @@
     }
   }
 
+  .ap-overlay-help {
+    background-color: rgba(0,0,0,0.8);
+    container-type: inline-size;
+
+    > div {
+      .terminal-font;
+      max-width: 85%;
+      max-height: 85%;
+      font-size: 18px;
+      color: var(--term-color-foreground);
+      background-color: var(--term-color-background);
+      border-radius: 6px;
+      box-sizing: border-box;
+      margin-bottom: 32px;
+
+      div  {
+        padding: calc(min(4cqw, 40px));
+        font-size: calc(min(1.9cqw, 18px));
+
+        p {
+          font-weight: bold;
+          margin: 0 0 2em 0;
+        }
+
+        ul {
+          list-style: none;
+          padding: 0;
+
+          li {
+            margin: 0 0 0.75em 0;
+          }
+        }
+
+        kbd {
+          color: var(--term-color-background);
+          background-color: var(--term-color-foreground);
+          padding: 0.2em 0.5em;
+          border-radius: 0.2em;
+          font-size: 0.85em;
+        }
+      }
+    }
+  }
+
   .ap-overlay-error {
     span {
       font-size: 8em;