Fix hotkeys. (#176)

Closes #172
This commit is contained in:
FireMasterK 2021-06-01 14:49:01 +05:30 committed by GitHub
parent fff5316fa7
commit 783698de15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 38 deletions

View file

@ -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",

View file

@ -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>

View file

@ -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"