js: add support to detect media keys in keydown handler

See [0] for all the relevant codes.

[0]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values#Multimedia_keys

Fixes a regression introduced in e6b4e1268945777c5d07dfca4362a1af23f6d970.
Fixes https://github.com/omarroth/invidious/issues/712.

1 files changed, 32 insertions, 2 deletions

diff --git a/assets/js/player.js b/assets/js/player.js
index eecc0868..dc1e633f 100644
--- a/assets/js/player.js
+++ b/assets/js/player.js
@@ -228,11 +228,24 @@ function set_time_percent(percent) {
     player.currentTime(newTime);
 }
 
+function play() {
+    player.play();
+}
+
+function pause() {
+    player.pause();
+}
+
+function stop() {
+    player.pause();
+    player.currentTime(0);
+}
+
 function toggle_play() {
     if (player.paused()) {
-        player.play();
+        play();
     } else {
-        player.pause();
+        pause();
     }
 }
 
@@ -338,9 +351,22 @@ window.addEventListener('keydown', e => {
     switch (decoratedKey) {
         case ' ':
         case 'k':
+        case 'MediaPlayPause':
             action = toggle_play;
             break;
 
+        case 'MediaPlay':
+            action = play;
+            break;
+
+        case 'MediaPause':
+            action = pause;
+            break;
+
+        case 'MediaStop':
+            action = stop;
+            break;
+
         case 'ArrowUp':
             if (isPlayerFocused) {
                 action = increase_volume.bind(this, 0.1);
@@ -357,9 +383,11 @@ window.addEventListener('keydown', e => {
             break;
 
         case 'ArrowRight':
+        case 'MediaFastForward':
             action = skip_seconds.bind(this, 5);
             break;
         case 'ArrowLeft':
+        case 'MediaTrackPrevious':
             action = skip_seconds.bind(this, -5);
             break;
         case 'l':
@@ -391,9 +419,11 @@ window.addEventListener('keydown', e => {
             break;
 
         case 'N':
+        case 'MediaTrackNext':
             action = next_video;
             break;
         case 'P':
+        case 'MediaTrackPrevious':
             // TODO: Add support to play back previous video.
             break;