kavin/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-12-14 14:20:28 +05:30
Code Issues Projects Releases Wiki Activity

Add keyboard controls.

Browse Source 
Closes #139
This commit is contained in:
FireMasterK 2021-04-22 12:29:06 +05:30
parent 07433033b9
commit 57509b9185
No known key found for this signature in database
GPG Key ID: 8DFF5DD33E93DB58
1 changed files with 43 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/Player.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="uk-container-expand"> <div class="uk-container-expand">
<div data-shaka-player-container> <div data-shaka-player-container ref="container">
<video data-shaka-player autoplay style="width: 100%; height: 100%"></video> <video data-shaka-player autoplay style="width: 100%; height: 100%" ref="videoEl"></video>
</div> </div>
</div> </div>
</template> </template>
@ -18,7 +18,7 @@ export default {
}, },
methods: { methods: {
loadVideo() { loadVideo() {
const videoEl = document.querySelector("video"); const videoEl = this.$refs.videoEl;
videoEl.setAttribute("poster", this.video.thumbnailUrl); videoEl.setAttribute("poster", this.video.thumbnailUrl);
@ -95,13 +95,7 @@ export default {
}); });
if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1; if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1;
const ui = const ui = this.ui || (this.ui = new shaka.ui.Overlay(player, this.$refs.container, videoEl));
this.ui ||
(this.ui = new shaka.ui.Overlay(
player,
document.querySelector("div[data-shaka-player-container]"),
videoEl,
));
const config = { const config = {
overflowMenuButtons: ["quality", "captions", "playback_rate"], overflowMenuButtons: ["quality", "captions", "playback_rate"],
@ -115,8 +109,47 @@ export default {
ui.configure(config); 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();
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);
}, },
beforeUnmount() { beforeUnmount() {
document.removeEventListener("keydown", this.onKeyPress);
if (this.player) { if (this.player) {
this.player.destroy(); this.player.destroy();
this.player = undefined; this.player = undefined;