mirror of
https://github.com/TeamPiped/Piped.git
synced 2025-04-27 00:56:31 +00:00
Load hotkey-js only once and fix destroy.
This commit is contained in:
parent
de8fb4fab5
commit
1d6a6daa06
@ -9,6 +9,7 @@ import("shaka-player/dist/controls.css");
|
|||||||
const shaka = import("shaka-player/dist/shaka-player.ui.js");
|
const shaka = import("shaka-player/dist/shaka-player.ui.js");
|
||||||
import muxjs from "mux.js";
|
import muxjs from "mux.js";
|
||||||
window.muxjs = muxjs;
|
window.muxjs = muxjs;
|
||||||
|
const hotkeys = import("hotkeys-js");
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
@ -62,116 +63,115 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (!this.shaka) this.shakaPromise = shaka.then(shaka => shaka.default).then(shaka => (this.shaka = shaka));
|
if (!this.shaka) this.shakaPromise = shaka.then(shaka => shaka.default).then(shaka => (this.shaka = shaka));
|
||||||
|
if (!this.$hotkeys)
|
||||||
|
this.hotkeysPromise = hotkeys.then(mod => mod.default).then(hotkeys => (this.$hotkeys = hotkeys));
|
||||||
},
|
},
|
||||||
activated() {
|
activated() {
|
||||||
import("hotkeys-js")
|
this.hotkeysPromise.then(() => {
|
||||||
.then(mod => mod.default)
|
var self = this;
|
||||||
.then(hotkeys => {
|
this.$hotkeys(
|
||||||
this.hotkeys = hotkeys;
|
"f,m,j,k,l,c,space,up,down,left,right,0,1,2,3,4,5,6,7,8,9,shift+,,shift+.",
|
||||||
var self = this;
|
function (e, handler) {
|
||||||
hotkeys(
|
const videoEl = self.$refs.videoEl;
|
||||||
"f,m,j,k,l,c,space,up,down,left,right,0,1,2,3,4,5,6,7,8,9,shift+,,shift+.",
|
switch (handler.key) {
|
||||||
function (e, handler) {
|
case "f":
|
||||||
const videoEl = self.$refs.videoEl;
|
self.$ui.getControls().toggleFullScreen();
|
||||||
switch (handler.key) {
|
e.preventDefault();
|
||||||
case "f":
|
break;
|
||||||
self.$ui.getControls().toggleFullScreen();
|
case "m":
|
||||||
e.preventDefault();
|
videoEl.muted = !videoEl.muted;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "m":
|
break;
|
||||||
videoEl.muted = !videoEl.muted;
|
case "j":
|
||||||
e.preventDefault();
|
videoEl.currentTime = Math.max(videoEl.currentTime - 15, 0);
|
||||||
break;
|
e.preventDefault();
|
||||||
case "j":
|
break;
|
||||||
videoEl.currentTime = Math.max(videoEl.currentTime - 15, 0);
|
case "l":
|
||||||
e.preventDefault();
|
videoEl.currentTime = videoEl.currentTime + 15;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "l":
|
break;
|
||||||
videoEl.currentTime = videoEl.currentTime + 15;
|
case "c":
|
||||||
e.preventDefault();
|
self.$player.setTextTrackVisibility(!self.$player.isTextTrackVisible());
|
||||||
break;
|
e.preventDefault();
|
||||||
case "c":
|
break;
|
||||||
self.$player.setTextTrackVisibility(!self.$player.isTextTrackVisible());
|
case "k":
|
||||||
e.preventDefault();
|
case "space":
|
||||||
break;
|
if (videoEl.paused) videoEl.play();
|
||||||
case "k":
|
else videoEl.pause();
|
||||||
case "space":
|
e.preventDefault();
|
||||||
if (videoEl.paused) videoEl.play();
|
break;
|
||||||
else videoEl.pause();
|
case "up":
|
||||||
e.preventDefault();
|
videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
|
||||||
break;
|
e.preventDefault();
|
||||||
case "up":
|
break;
|
||||||
videoEl.volume = Math.min(videoEl.volume + 0.05, 1);
|
case "down":
|
||||||
e.preventDefault();
|
videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
|
||||||
break;
|
e.preventDefault();
|
||||||
case "down":
|
break;
|
||||||
videoEl.volume = Math.max(videoEl.volume - 0.05, 0);
|
case "left":
|
||||||
e.preventDefault();
|
videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
|
||||||
break;
|
e.preventDefault();
|
||||||
case "left":
|
break;
|
||||||
videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
|
case "right":
|
||||||
e.preventDefault();
|
videoEl.currentTime = videoEl.currentTime + 5;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "right":
|
break;
|
||||||
videoEl.currentTime = videoEl.currentTime + 5;
|
case "0":
|
||||||
e.preventDefault();
|
videoEl.currentTime = 0;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "0":
|
break;
|
||||||
videoEl.currentTime = 0;
|
case "1":
|
||||||
e.preventDefault();
|
videoEl.currentTime = videoEl.duration * 0.1;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "1":
|
break;
|
||||||
videoEl.currentTime = videoEl.duration * 0.1;
|
case "2":
|
||||||
e.preventDefault();
|
videoEl.currentTime = videoEl.duration * 0.2;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "2":
|
break;
|
||||||
videoEl.currentTime = videoEl.duration * 0.2;
|
case "3":
|
||||||
e.preventDefault();
|
videoEl.currentTime = videoEl.duration * 0.3;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "3":
|
break;
|
||||||
videoEl.currentTime = videoEl.duration * 0.3;
|
case "4":
|
||||||
e.preventDefault();
|
videoEl.currentTime = videoEl.duration * 0.4;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "4":
|
break;
|
||||||
videoEl.currentTime = videoEl.duration * 0.4;
|
case "5":
|
||||||
e.preventDefault();
|
videoEl.currentTime = videoEl.duration * 0.5;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "5":
|
break;
|
||||||
videoEl.currentTime = videoEl.duration * 0.5;
|
case "6":
|
||||||
e.preventDefault();
|
videoEl.currentTime = videoEl.duration * 0.6;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "6":
|
break;
|
||||||
videoEl.currentTime = videoEl.duration * 0.6;
|
case "7":
|
||||||
e.preventDefault();
|
videoEl.currentTime = videoEl.duration * 0.7;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "7":
|
break;
|
||||||
videoEl.currentTime = videoEl.duration * 0.7;
|
case "8":
|
||||||
e.preventDefault();
|
videoEl.currentTime = videoEl.duration * 0.8;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "8":
|
break;
|
||||||
videoEl.currentTime = videoEl.duration * 0.8;
|
case "9":
|
||||||
e.preventDefault();
|
videoEl.currentTime = videoEl.duration * 0.9;
|
||||||
break;
|
e.preventDefault();
|
||||||
case "9":
|
break;
|
||||||
videoEl.currentTime = videoEl.duration * 0.9;
|
case "shift+,":
|
||||||
e.preventDefault();
|
self.$player.trickPlay(Math.max(videoEl.playbackRate - 0.25, 0.25));
|
||||||
break;
|
break;
|
||||||
case "shift+,":
|
case "shift+.":
|
||||||
self.$player.trickPlay(Math.max(videoEl.playbackRate - 0.25, 0.25));
|
self.$player.trickPlay(Math.min(videoEl.playbackRate + 0.25, 2));
|
||||||
break;
|
break;
|
||||||
case "shift+.":
|
}
|
||||||
self.$player.trickPlay(Math.min(videoEl.playbackRate + 0.25, 2));
|
},
|
||||||
break;
|
);
|
||||||
}
|
});
|
||||||
},
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
deactivated() {
|
deactivated() {
|
||||||
this.destroy();
|
this.destroy(true);
|
||||||
},
|
},
|
||||||
unmounted() {
|
unmounted() {
|
||||||
this.destroy();
|
this.destroy(true);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async loadVideo() {
|
async loadVideo() {
|
||||||
@ -514,7 +514,7 @@ export default {
|
|||||||
this.$refs.videoEl.currentTime = time;
|
this.$refs.videoEl.currentTime = time;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
destroy() {
|
destroy(hotkeys) {
|
||||||
if (this.$ui) {
|
if (this.$ui) {
|
||||||
this.$ui.destroy();
|
this.$ui.destroy();
|
||||||
this.$ui = undefined;
|
this.$ui = undefined;
|
||||||
@ -524,7 +524,7 @@ export default {
|
|||||||
this.$player.destroy();
|
this.$player.destroy();
|
||||||
this.$player = undefined;
|
this.$player = undefined;
|
||||||
}
|
}
|
||||||
if (this.hotkeys) this.hotkeys.unbind();
|
if (this.$hotkeys && hotkeys) this.$hotkeys.unbind();
|
||||||
if (this.$refs.container) this.$refs.container.querySelectorAll("div").forEach(node => node.remove());
|
if (this.$refs.container) this.$refs.container.querySelectorAll("div").forEach(node => node.remove());
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user