Add help overlay, triggered by "?" key

asciinema · Jun 7, 2024 · e609a7f · e609a7f
1 parent 62138d6
commit e609a7f
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 0 deletions.
diff --git a/src/components/HelpOverlay.js 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
@@ -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
@@ -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;