From 95243d449eea2e70c5bf84ca329e66d6d2a491b3 Mon Sep 17 00:00:00 2001
From: Fabio Ambauen <1833932+open-dynaMIX@users.noreply.github.com>
Date: Fri, 3 Jan 2020 12:31:08 +0100
Subject: [PATCH] feat(frontend): add more key bindings

This commit refactors handling of keybindings in the frontend.

It also adds more bindings and documents them in the README.md.
---
 README.md           | 14 ++++++++++
 webui-page/webui.js | 62 +++++++++++++++++++++++++++++++++++++--------
 2 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index e7f4d9f0..ee4414b7 100644
--- a/README.md
+++ b/README.md
@@ -99,6 +99,20 @@ Only plaintext `.htpasswd` entries are supported.
 
 ![playlist screenshot](screenshots/playlist.png#1)
 
+## Key bindings
+There are some keybindings available:
+
+| Key        | Function            |
+| ---------- | ------------------- |
+| SPACE      | Play/Pause          |
+| ArrowRight | seek +10            |
+| ArrowLeft  | seek -10            |
+| PageDown   | seek +3             |
+| PageUp     | seek -3             |
+| f          | toggle fullscreen   |
+| n          | playlist next       |
+| p          | playlist previous   |
+
 ## Media Session API
 When using a browser that supports it, simple-mpv-webui uses the Media Session
 API to provide a notification with some metadata and controls:
diff --git a/webui-page/webui.js b/webui-page/webui.js
index 480e480a..6609bbd5 100644
--- a/webui-page/webui.js
+++ b/webui-page/webui.js
@@ -144,17 +144,57 @@ function populatePlaylist(json, pause) {
 }
 
 window.onkeydown = function(e) {
-  if (e.keyCode === 32 || e.key === ' ') {
-    send('toggle_pause');
-    return false;
-  }
-  if (e.keyCode === 39 || e.key === 'ArrowRight') {
-    send('seek', '10');
-    return false;
-  }
-  if (e.keyCode === 37 || e.key === 'ArrowLeft') {
-    send('seek', '-10');
-    return false;
+  var bindings = [
+    {
+      "key": " ",
+      "code": 32,
+      "command": "toggle_pause"
+    },
+    {
+      "key": "ArrowRight",
+      "code": 39,
+      "command": "seek",
+      "param1": "10"
+    },
+    {
+      "key": "ArrowLeft",
+      "code": 37,
+      "command": "seek",
+      "param1": "-10"
+    },
+    {
+      "key": "PageDown",
+      "code": 34,
+      "command": "seek",
+      "param1": "3"
+    },
+    {
+      "key": "PageUp",
+      "code": 33,
+      "command": "seek",
+      "param1": "-3"
+    },
+    {
+      "key": "f",
+      "code": 70,
+      "command": "fullscreen",
+    },
+    {
+      "key": "n",
+      "code": 78,
+      "command": "playlist_next",
+    },
+    {
+      "key": "p",
+      "code": 80,
+      "command": "playlist_prev",
+    },
+  ];
+  for (var i = 0; i < bindings.length; i++) {
+    if (e.keyCode === bindings[i].code || e.key === bindings[i].key) {
+      send(bindings[i].command, bindings[i].param1, bindings[i].param2);
+      return false;
+    }
   }
 };