Fix hotkeys. (#176)

Closes #172

package.json

@@ -14,6 +14,7 @@
         "@fortawesome/vue-fontawesome": "^3.0.0-4",
         "core-js": "^3.13.1",
         "css-loader": "^5.2.6",
+        "hotkeys-js": "^3.8.5",
         "register-service-worker": "^1.7.1",
         "shaka-player": "3.1.0",
         "uikit": "3.6.22",

src/components/Player.vue

@@ -115,53 +115,57 @@ export default {
                 ui.configure(config);
             });
         },
-        onKeyPress(e) {
-            if (document.activeElement.tagName === "INPUT" && document.activeElement.type === "text") return;
-            const videoEl = this.$refs.videoEl;
-            switch (e.code) {
-                case "KeyF":
-                    if (document.fullscreenElement) document.exitFullscreen();
-                    else this.$refs.container.requestFullscreen();
-                    e.preventDefault();
-                    break;
-                case "KeyM":
-                    videoEl.muted = !videoEl.muted;
-                    e.preventDefault();
-                    break;
-                case "Space":
-                    if (videoEl.paused) videoEl.play();
-                    else videoEl.pause();
-                    e.preventDefault();
-                    break;
-                case "ArrowUp":
-                    videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
-                    e.preventDefault();
-                    break;
-                case "ArrowDown":
-                    videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
-                    e.preventDefault();
-                    break;
-                case "ArrowLeft":
-                    videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
-                    e.preventDefault();
-                    break;
-                case "ArrowRight":
-                    videoEl.currentTime = videoEl.currentTime + 5;
-                    e.preventDefault();
-                    break;
-            }
-        },
     },
     mounted() {
-        document.addEventListener("keydown", this.onKeyPress);
+        import("hotkeys-js")
+            .then(mod => mod.default)
+            .then(hotkeys => {
+                this.hotkeys = hotkeys;
+                var self = this;
+                hotkeys("f,m,space,up,down,left,right", function(e, handler) {
+                    const videoEl = self.$refs.videoEl;
+                    switch (handler.key) {
+                        case "f":
+                            if (document.fullscreenElement) document.exitFullscreen();
+                            else self.$refs.container.requestFullscreen();
+                            e.preventDefault();
+                            break;
+                        case "m":
+                            videoEl.muted = !videoEl.muted;
+                            e.preventDefault();
+                            break;
+                        case "space":
+                            if (videoEl.paused) videoEl.play();
+                            else videoEl.pause();
+                            e.preventDefault();
+                            break;
+                        case "up":
+                            videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
+                            e.preventDefault();
+                            break;
+                        case "down":
+                            videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
+                            e.preventDefault();
+                            break;
+                        case "left":
+                            videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
+                            e.preventDefault();
+                            break;
+                        case "right":
+                            videoEl.currentTime = videoEl.currentTime + 5;
+                            e.preventDefault();
+                            break;
+                    }
+                });
+            });
     },
     beforeUnmount() {
-        document.removeEventListener("keydown", this.onKeyPress);
         if (this.player) {
             this.player.destroy();
             this.player = undefined;
             this.ui = undefined;
         }
+        if (this.hotkeys) this.hotkeys.unbind();
     },
 };
 </script>

yarn.lock

@@ -4511,6 +4511,11 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
+hotkeys-js@^3.8.5:
+  version "3.8.5"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.5.tgz#a66030c48b75ceb2f3fc48fd39e7a0b3473a4b19"
+  integrity sha512-beJJ2Y4J6XkSlXlLPOG29BRKxZx3bV0gVi3eUpYdjrecN1i25iqndM/+X1eIDPSeG0XdqSv7Ksek43j5tQrmPQ==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"