Load hotkey-js only once and fix destroy.

This commit is contained in:
FireMasterK 2022-01-23 19:08:33 +00:00
parent de8fb4fab5
commit 1d6a6daa06
No known key found for this signature in database
GPG Key ID: 49451E4482CC5BCD

View File

@ -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());
}, },
}, },