TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages 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>
<div class="uk-container-expand">
<div data-shaka-player-container>
<video data-shaka-player autoplay style="width: 100%; height: 100%"></video>
<div data-shaka-player-container ref="container">
<video data-shaka-player autoplay style="width: 100%; height: 100%" ref="videoEl"></video>
</div>
</div>
</template>
@ -18,7 +18,7 @@ export default {
},
methods: {
loadVideo() {
const videoEl = document.querySelector("video");
const videoEl = this.$refs.videoEl;
videoEl.setAttribute("poster", this.video.thumbnailUrl);
@ -95,13 +95,7 @@ export default {
});
if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1;
const ui =
this.ui ||
(this.ui = new shaka.ui.Overlay(
player,
document.querySelector("div[data-shaka-player-container]"),
videoEl,
));
const ui = this.ui || (this.ui = new shaka.ui.Overlay(player, this.$refs.container, videoEl));
const config = {
overflowMenuButtons: ["quality", "captions", "playback_rate"],
@ -115,8 +109,47 @@ 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();
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() {
document.removeEventListener("keydown", this.onKeyPress);
if (this.player) {
this.player.destroy();
this.player = undefined;