From 57f005fd2de8f1c4348045b57f1439576de68aa8 Mon Sep 17 00:00:00 2001
From: Benny Daon <benny@tuzig.com>
Date: Mon, 31 Jan 2022 10:37:24 +0200
Subject: [PATCH 1/3] cherry-picking the UI part from 3885a3d without the key
 events part.

---
 src/components/Player.js    |  6 +++++-
 src/components/Subtitles.js | 20 ++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Subtitles.js

diff --git a/src/components/Player.js b/src/components/Player.js
index d9593348..d48c579f 100644
--- a/src/components/Player.js
+++ b/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 Subtitles from './Subtitles';
 
 
 export default props => {
@@ -36,9 +37,11 @@ export default props => {
     remainingTime: null,
     progress: null,
     blink: true,
-    cursorHold: false
+    cursorHold: false,
+    subtitle: []
   });
 
+  const subtitleTTL = props.subtitleTTL || 3000;
   const terminalCols = () => state.cols || 80;
   const terminalRows = () => state.rows || 24;
 
@@ -367,6 +370,7 @@ 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} />
+        <Subtitles />
         <Switch>
           <Match when={state.showStartOverlay}><StartOverlay onClick={() => core.play()} /></Match>
           <Match when={state.coreState == 'loading'}><LoaderOverlay /></Match>
diff --git a/src/components/Subtitles.js b/src/components/Subtitles.js
new file mode 100644
index 00000000..4edf1a24
--- /dev/null
+++ b/src/components/Subtitles.js
@@ -0,0 +1,20 @@
+
+export default props => {
+  const subtitleStyle = () => {
+    return {
+      margin: "0 auto",
+      padding: "0.5em",
+      opacity: "0.8",
+      "background-color": "black",
+      "font-size": "16px"
+    }
+  }
+
+  return (
+      <div style={subtitleStyle()} ref={props.ref}>
+      <For each={props.subtitle}>
+        {(letter, i) => <span style={letterStyle()}>{letter}</span>}
+      </For>
+      </div>
+  );
+}

From a30dd9cbb52b5afab6be98128238f46b31b3559e Mon Sep 17 00:00:00 2001
From: Benny Daon <benny@tuzig.com>
Date: Wed, 2 Feb 2022 10:27:33 +0200
Subject: [PATCH 2/3] cherry-picking the UI part from e08b71d without the key
 events part.

---
 src/components/Keystrokes.js | 24 ++++++++++++++++++++++++
 src/components/Player.js     | 10 ++++++----
 src/components/Subtitles.js  | 20 --------------------
 3 files changed, 30 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Keystrokes.js
 delete mode 100644 src/components/Subtitles.js

diff --git a/src/components/Keystrokes.js b/src/components/Keystrokes.js
new file mode 100644
index 00000000..78d97d51
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/Player.js b/src/components/Player.js
index d48c579f..bb9aab32 100644
--- a/src/components/Player.js
+++ b/src/components/Player.js
@@ -7,7 +7,7 @@ import ErrorOverlay from './ErrorOverlay';
 import LoaderOverlay from './LoaderOverlay';
 import OfflineOverlay from './OfflineOverlay';
 import StartOverlay from './StartOverlay';
-import Subtitles from './Subtitles';
+import Keystrokes from './Keystrokes';
 
 
 export default props => {
@@ -38,10 +38,10 @@ export default props => {
     progress: null,
     blink: true,
     cursorHold: false,
-    subtitle: []
+    keystrokes: []
   });
 
-  const subtitleTTL = props.subtitleTTL || 3000;
+  const keystrokesTTL = props.keystrokesTTL/1000 || 3.0;
   const terminalCols = () => state.cols || 80;
   const terminalRows = () => state.rows || 24;
 
@@ -370,7 +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} />
-        <Subtitles />
+        <Show when={state.keystrokes.length > 0}>
+          <Keystrokes keystrokes={state.keystrokes} currentTime={state.currentTime}/>
+        </Show>
         <Switch>
           <Match when={state.showStartOverlay}><StartOverlay onClick={() => core.play()} /></Match>
           <Match when={state.coreState == 'loading'}><LoaderOverlay /></Match>
diff --git a/src/components/Subtitles.js b/src/components/Subtitles.js
deleted file mode 100644
index 4edf1a24..00000000
--- a/src/components/Subtitles.js
+++ /dev/null
@@ -1,20 +0,0 @@
-
-export default props => {
-  const subtitleStyle = () => {
-    return {
-      margin: "0 auto",
-      padding: "0.5em",
-      opacity: "0.8",
-      "background-color": "black",
-      "font-size": "16px"
-    }
-  }
-
-  return (
-      <div style={subtitleStyle()} ref={props.ref}>
-      <For each={props.subtitle}>
-        {(letter, i) => <span style={letterStyle()}>{letter}</span>}
-      </For>
-      </div>
-  );
-}

From c62bafded28922557bf7b3d7898f7729b36f87d8 Mon Sep 17 00:00:00 2001
From: Benny Daon <benny@tuzig.com>
Date: Wed, 2 Feb 2022 11:23:40 +0200
Subject: [PATCH 3/3] cherry-picking the README and UI part from 72ba71c
 without the key events part.

---
 README.md                | 10 ++++++++++
 src/components/Player.js |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 01de647b..3fd000d9 100644
--- a/README.md
+++ b/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
diff --git a/src/components/Player.js b/src/components/Player.js
index bb9aab32..68d4db2a 100644
--- a/src/components/Player.js
+++ b/src/components/Player.js
@@ -371,7 +371,7 @@ export default props => {
         <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} currentTime={state.currentTime}/>
+          <Keystrokes keystrokes={state.keystrokes} />
         </Show>
         <Switch>
           <Match when={state.showStartOverlay}><StartOverlay onClick={() => core.play()} /></Match>