Key-press overlay #79, PR #167 update tentative

README.md

@@ -737,6 +737,16 @@ document.fonts.load("1em FiraCode Nerd Font").then(() => {
 }
 ```
 
+### `keystrokesTTL`
+
+Type: number
+
+How long should a keystroke be displayed?
+
+For example, when set to `2` and a keystroke will disapper two seconds after it's been displayed.
+
+Defaults to `3.0`
+
 ## Keyboard shortcuts
 
 The following keyboard shortcuts are currently available (when the player

src/components/Keystrokes.js

@@ -0,0 +1,24 @@
+
+export default props => {
+  const keystrokesWrapperStyle = () => {
+   return {
+    position: "absolute",
+    bottom: "3em",
+    "font-size": "18px",
+    "text-align": "center",
+    padding: "0.5em",
+    opacity: "0.8",
+    "background-color": "black",
+    width: "100%",
+    color: "white"
+   }
+  };
+
+  return (
+    <div style={keystrokesWrapperStyle()} ref={props.ref}>
+      <For each={props.keystrokes}>
+        {(key, i) => <span innerHTML={"&nbsp;" + key[1]} />}
+      </For>
+    </div>
+  );
+}

src/components/Player.js

@@ -7,6 +7,7 @@ import ErrorOverlay from './ErrorOverlay';
 import LoaderOverlay from './LoaderOverlay';
 import OfflineOverlay from './OfflineOverlay';
 import StartOverlay from './StartOverlay';
+import Keystrokes from './Keystrokes';
 
 
 export default props => {
@@ -36,9 +37,11 @@ export default props => {
     remainingTime: null,
     progress: null,
     blink: true,
-    cursorHold: false
+    cursorHold: false,
+    keystrokes: []
   });
 
+  const keystrokesTTL = props.keystrokesTTL/1000 || 3.0;
   const terminalCols = () => state.cols || 80;
   const terminalRows = () => state.rows || 24;
 
@@ -367,6 +370,9 @@ export default props => {
       <div class={playerClass()} style={playerStyle()} onMouseLeave={playerOnMouseLeave} onMouseMove={() => showControls(true)} ref={playerRef}>
         <Terminal cols={terminalCols()} rows={terminalRows()} scale={terminalScale()} blink={state.blink} lines={state.lines} cursor={state.cursor} cursorHold={state.cursorHold} fontFamily={props.terminalFontFamily} lineHeight={props.terminalLineHeight} ref={terminalRef} />
         <ControlBar currentTime={state.currentTime} remainingTime={state.remainingTime} progress={state.progress} isPlaying={state.coreState == 'playing'} isPausable={state.isPausable} isSeekable={state.isSeekable} onPlayClick={() => core.togglePlay()} onFullscreenClick={toggleFullscreen} onSeekClick={pos => core.seek(pos)} ref={controlBarRef} />
+        <Show when={state.keystrokes.length > 0}>
+          <Keystrokes keystrokes={state.keystrokes} />
+        </Show>
         <Switch>
           <Match when={state.showStartOverlay}><StartOverlay onClick={() => core.play()} /></Match>
           <Match when={state.coreState == 'loading'}><LoaderOverlay /></Match>