feat: add ? keyboard shortcut for showing known shortcuts

open-dynaMIX · Aug 18, 2020 · 3b24593 · 3b24593
1 parent e5b2b79
commit 3b24593
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 82 deletions.
diff --git a/README.md b/README.md
@@ -178,6 +178,7 @@ There are some keybindings available:
 | }          | increase playback speed more |
 | Backspace  | reset playback speed         |
 | Escape     | hide current overlay         |
+| ?          | toggle keyboard shortcuts    |
 
 ## Media Session API
 When using a browser that supports it, simple-mpv-webui uses the Media Session

diff --git a/webui-page/index.html b/webui-page/index.html
@@ -22,7 +22,7 @@
     <link rel="stylesheet" href="static/fontawesome-free-5.0.2/css/fontawesome-all.min.css">
   </head>
   <body>
-    <div id="overlay">
+    <div id="playlist-overlay" class="overlay">
       <table class="playlist-control">
         <tr>
           <td>
@@ -55,6 +55,18 @@
       <div id="playlist"></div>
     </div>
 
+    <div id="shortcuts-overlay" class="overlay">
+      <div onClick="toggleShortcutsOverlay()" class="button violet content icon-content">
+        <i class="fas fa-times-circle"></i>
+      </div>
+      <table id="shortcuts-table">
+        <tr>
+          <td><b class="fas fa-keyboard"></b></td>
+          <td>Action</td>
+        </tr>
+      </table>
+    </div>
+
     <div class="burger">
       <a href="#" onClick="togglePlaylist(); return false;"><i class="fas fa-list-ul"></i></a>
     </div>

diff --git a/webui-page/webui.css b/webui-page/webui.css
@@ -250,7 +250,7 @@ input[type="range"] {
   margin-bottom: 20px;
 }
 
-#overlay {
+.overlay {
   top: 0;
   left: 0;
   right: 0;
@@ -370,3 +370,21 @@ td.playlist.click, td.playlist:last-child:active, td.playlist:nth-child(3):activ
 td.playlist.playing:hover {
   filter: brightness(100%);
 }
+
+#shortcuts-overlay {
+  overflow: scroll;
+}
+
+table#shortcuts-table {
+  width: 100%;
+  font-size: 4vmin;
+}
+
+table#shortcuts-table td {
+  padding-left: 1em;
+}
+
+table#shortcuts-table tr:first-child td {
+  font-weight: bold;
+  border-bottom: 3px solid var(--main-fg-color);
+}
diff --git a/webui-page/webui.js b/webui-page/webui.js
@@ -23,16 +23,29 @@ function send(command, param){
   refreshStatus(100);
 }
 
-function togglePlaylist() {
+function toggleOverlay(id) {
   document.body.classList.toggle('noscroll');
-  var el = document.getElementById("overlay");
-  el.style.visibility = (el.style.visibility === "visible") ? "hidden" : "visible";
+  const el = document.getElementById(id);
+  el.style.visibility = (el.style.visibility === 'visible') ? 'hidden' : 'visible';
 }
 
-function hidePlaylist() {
-  const el = document.getElementById('overlay');
+function hideOverlay(id) {
+  const el = document.getElementById(id);
   if (el.style.visibility === 'visible')
-    togglePlaylist();
+    toggleOverlay(id);
+}
+
+function togglePlaylist() {
+  toggleOverlay('playlist-overlay');
+}
+
+function toggleShortcutsOverlay() {
+  toggleOverlay('shortcuts-overlay');
+}
+
+function hideOverlays() {
+  hideOverlay('playlist-overlay');
+  hideOverlay('shortcuts-overlay');
 }
 
 function createPlaylistTable(entry, position, pause, first) {
@@ -151,88 +164,120 @@ function populatePlaylist(json, pause) {
   }
 }
 
+var keyboardBindings = [
+  {
+    "help": "hide current overlay",
+    "key": "Escape",
+    "code": 27,
+    "command": hideOverlays,
+  },
+  {
+    "help": "toggle keyboard shortcuts overlay",
+    "key": "?",
+    "code": 191,
+    "command": toggleShortcutsOverlay,
+  },
+  {
+    "help": "Play/Pause",
+    "helpKey": "Space",
+    "key": " ",
+    "code": 32,
+    "command": () => send("toggle_pause"),
+  },
+  {
+    "help": "seek +10",
+    "key": "ArrowRight",
+    "code": 39,
+    "command": () => send("seek", "10"),
+  },
+  {
+    "help": "seek -10",
+    "key": "ArrowLeft",
+    "code": 37,
+    "command": () => send("seek", "-10"),
+  },
+  {
+    "help": "seek +3",
+    "key": "PageDown",
+    "code": 34,
+    "command": () => send("seek", "3"),
+  },
+  {
+    "help": "seek -3",
+    "key": "PageUp",
+    "code": 33,
+    "command": () => send("seek", "-3"),
+  },
+  {
+    "help": "toggle fullscreen",
+    "key": "f",
+    "code": 70,
+    "command": () => send("fullscreen"),
+  },
+  {
+    "help": "playlist next",
+    "key": "n",
+    "code": 78,
+    "command": () => send("playlist_next"),
+  },
+  {
+    "help": "playlist previous",
+    "key": "p",
+    "code": 80,
+    "command": () => send("playlist_prev"),
+  },
+  // These {} must come before [] as they have the same "code".
+  {
+    "help": "decrease playback speed more",
+    "key": "{",
+    "command": () => send("speed_adjust", "0.5"),
+  },
+  {
+    "help": "increase playback speed more",
+    "key": "}",
+    "command": () => send("speed_adjust", "2.0"),
+  },
+  {
+    "help": "decrease playback speed",
+    "key": "[",
+    "code": 219,
+    // This funky value matches mpv defaults.
+    "command": () => send("speed_adjust", "0.9091"),
+  },
+  {
+    "help": "increase playback speed",
+    "key": "]",
+    "code": 221,
+    "command": () => send("speed_adjust", "1.1"),
+  },
+  {
+    "help": "reset playback speed",
+    "key": "Backspace",
+    "code": 8,
+    "command": () => send("speed_set"),
+  },
+];
+
 window.onkeydown = function(e) {
-  var bindings = [
-    {
-      "key": "Escape",
-      "code": 27,
-      "command": hidePlaylist,
-    },
-    {
-      "key": " ",
-      "code": 32,
-      "command": () => send("toggle_pause"),
-    },
-    {
-      "key": "ArrowRight",
-      "code": 39,
-      "command": () => send("seek", "10"),
-    },
-    {
-      "key": "ArrowLeft",
-      "code": 37,
-      "command": () => send("seek", "-10"),
-    },
-    {
-      "key": "PageDown",
-      "code": 34,
-      "command": () => send("seek", "3"),
-    },
-    {
-      "key": "PageUp",
-      "code": 33,
-      "command": () => send("seek", "-3"),
-    },
-    {
-      "key": "f",
-      "code": 70,
-      "command": () => send("fullscreen"),
-    },
-    {
-      "key": "n",
-      "code": 78,
-      "command": () => send("playlist_next"),
-    },
-    {
-      "key": "p",
-      "code": 80,
-      "command": () => send("playlist_prev"),
-    },
-    // These {} must come before [] as they have the same "code".
-    {
-      "key": "{",
-      "command": () => send("speed_adjust", "0.5"),
-    },
-    {
-      "key": "}",
-      "command": () => send("speed_adjust", "2.0"),
-    },
-    {
-      "key": "[",
-      "code": 219,
-      // This funky value matches mpv defaults.
-      "command": () => send("speed_adjust", "0.9091"),
-    },
-    {
-      "key": "]",
-      "code": 221,
-      "command": () => send("speed_adjust", "1.1"),
-    },
-    {
-      "key": "Backspace",
-      "code": 8,
-      "command": () => send("speed_set"),
-    },
-  ];
-  for (var i = 0; i < bindings.length; i++) {
-    const binding = bindings[i];
+  for (let i = 0; i < keyboardBindings.length; i++) {
+    const binding = keyboardBindings[i];
     if (e.keyCode === binding.code || e.key === binding.key) {
       binding.command();
       return false;
     }
   }
 };
 
+function updateShortcutsHelp() {
+  const table = document.getElementById('shortcuts-table');
+  keyboardBindings.forEach((binding) => {
+    const row = table.insertRow(-1);
+    row.insertCell(-1).innerText = binding.helpKey || binding.key;
+    row.insertCell(-1).innerText = binding.help;
+  });
+}
+updateShortcutsHelp();
+
 function format_time(seconds){
   var date = new Date(null);
   date.setSeconds(seconds);