2021-04-01 15:13:35 +00:00
|
|
|
<template>
|
2021-05-06 17:30:02 +00:00
|
|
|
<div class="uk-container-expand">
|
2021-06-22 09:49:14 +00:00
|
|
|
<div
|
|
|
|
data-shaka-player-container
|
2021-06-22 17:31:57 +00:00
|
|
|
style="width: 100%; height: 100%; max-height: 75vh; min-height: 250px; background: #000"
|
2021-06-22 09:49:14 +00:00
|
|
|
ref="container"
|
|
|
|
>
|
|
|
|
<video data-shaka-player class="uk-width-expand" :autoplay="shouldAutoPlay" ref="videoEl"></video>
|
2021-05-06 17:30:02 +00:00
|
|
|
</div>
|
2021-04-01 15:13:35 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import("shaka-player/dist/controls.css");
|
|
|
|
const shaka = import("shaka-player/dist/shaka-player.ui.js");
|
2021-06-09 21:21:35 +00:00
|
|
|
import muxjs from "mux.js";
|
|
|
|
window.muxjs = muxjs;
|
2021-04-01 15:13:35 +00:00
|
|
|
|
|
|
|
export default {
|
2021-05-06 17:30:02 +00:00
|
|
|
props: {
|
|
|
|
video: Object,
|
|
|
|
sponsors: Object,
|
|
|
|
selectedAutoPlay: Boolean,
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
shouldAutoPlay: () => {
|
|
|
|
const value = localStorage.getItem("playerAutoPlay");
|
|
|
|
return value === null || value === "true";
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
loadVideo() {
|
2021-06-09 21:21:35 +00:00
|
|
|
const component = this;
|
2021-05-06 17:30:02 +00:00
|
|
|
const videoEl = this.$refs.videoEl;
|
2021-04-01 15:13:35 +00:00
|
|
|
|
2021-05-06 17:30:02 +00:00
|
|
|
videoEl.setAttribute("poster", this.video.thumbnailUrl);
|
2021-04-01 15:13:35 +00:00
|
|
|
|
2021-05-06 17:30:02 +00:00
|
|
|
if (this.$route.query.t) videoEl.currentTime = this.$route.query.t;
|
2021-04-01 15:13:35 +00:00
|
|
|
|
2021-05-06 17:30:02 +00:00
|
|
|
const noPrevPlayer = !this.player;
|
|
|
|
|
|
|
|
var streams = [];
|
|
|
|
|
|
|
|
streams.push(...this.video.audioStreams);
|
|
|
|
streams.push(...this.video.videoStreams);
|
|
|
|
|
2021-06-09 21:21:35 +00:00
|
|
|
var uri;
|
|
|
|
|
|
|
|
if (this.video.livestream) {
|
|
|
|
uri = this.video.hls;
|
2021-06-18 13:20:41 +00:00
|
|
|
} else if (this.video.audioStreams.length > 0) {
|
2021-06-09 21:21:35 +00:00
|
|
|
const dash = require("@/utils/DashUtils.js").default.generate_dash_file_from_formats(
|
|
|
|
streams,
|
|
|
|
this.video.duration,
|
|
|
|
);
|
|
|
|
|
|
|
|
uri = "data:application/dash+xml;charset=utf-8;base64," + btoa(dash);
|
2021-06-18 13:20:41 +00:00
|
|
|
} else {
|
|
|
|
uri = this.video.videoStreams[0].url;
|
2021-06-09 21:21:35 +00:00
|
|
|
}
|
2021-05-06 17:30:02 +00:00
|
|
|
|
|
|
|
if (noPrevPlayer)
|
|
|
|
shaka
|
|
|
|
.then(shaka => shaka.default)
|
|
|
|
.then(shaka => {
|
|
|
|
this.shaka = shaka;
|
|
|
|
shaka.polyfill.installAll();
|
|
|
|
|
2021-06-07 19:22:29 +00:00
|
|
|
const localPlayer = new shaka.Player(videoEl);
|
2021-05-06 17:30:02 +00:00
|
|
|
|
2021-06-09 21:21:35 +00:00
|
|
|
localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
|
|
|
|
const uri = request.uris[0];
|
|
|
|
var url = new URL(uri);
|
|
|
|
if (url.host.endsWith(".googlevideo.com")) {
|
|
|
|
url.searchParams.set("host", url.host);
|
|
|
|
url.host = new URL(component.video.proxyUrl).host;
|
|
|
|
request.uris[0] = url.toString();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2021-06-22 10:54:20 +00:00
|
|
|
localPlayer.configure(
|
|
|
|
"streaming.bufferingGoal",
|
|
|
|
Math.max(Number(localStorage.getItem("bufferGoal")), 10),
|
|
|
|
);
|
|
|
|
|
2021-06-09 21:21:35 +00:00
|
|
|
this.setPlayerAttrs(localPlayer, videoEl, uri, shaka);
|
2021-05-06 17:30:02 +00:00
|
|
|
});
|
2021-06-09 21:21:35 +00:00
|
|
|
else this.setPlayerAttrs(this.player, videoEl, uri, this.shaka);
|
2021-05-06 17:30:02 +00:00
|
|
|
|
|
|
|
if (noPrevPlayer) {
|
|
|
|
videoEl.addEventListener("timeupdate", () => {
|
|
|
|
if (this.sponsors && this.sponsors.segments) {
|
|
|
|
const time = videoEl.currentTime;
|
|
|
|
this.sponsors.segments.map(segment => {
|
|
|
|
if (!segment.skipped) {
|
|
|
|
const end = segment.segment[1];
|
|
|
|
if (time >= segment.segment[0] && time < end) {
|
|
|
|
console.log("Skipped segment at " + time);
|
|
|
|
videoEl.currentTime = end;
|
|
|
|
segment.skipped = true;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
videoEl.addEventListener("volumechange", () => {
|
|
|
|
if (localStorage) localStorage.setItem("volume", videoEl.volume);
|
|
|
|
});
|
|
|
|
|
|
|
|
videoEl.addEventListener("ended", () => {
|
2021-06-24 18:39:22 +00:00
|
|
|
if (this.selectedAutoPlay && this.video.relatedStreams.length > 0) {
|
|
|
|
const params = this.$route.query;
|
|
|
|
let url = this.video.relatedStreams[0].url;
|
|
|
|
const searchParams = new URLSearchParams();
|
|
|
|
for (var param in params)
|
|
|
|
switch (param) {
|
|
|
|
case "v":
|
|
|
|
case "t":
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
searchParams.set(param, params[param]);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
const paramStr = searchParams.toString();
|
|
|
|
if (paramStr.length > 0) url += "&" + paramStr;
|
|
|
|
this.$router.push(url);
|
|
|
|
}
|
2021-05-06 17:30:02 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
|
|
|
},
|
2021-06-09 21:21:35 +00:00
|
|
|
setPlayerAttrs(localPlayer, videoEl, uri, shaka) {
|
2021-06-07 19:22:29 +00:00
|
|
|
if (!this.ui) {
|
|
|
|
this.ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl);
|
|
|
|
|
|
|
|
const config = {
|
|
|
|
overflowMenuButtons: ["quality", "captions", "playback_rate"],
|
|
|
|
seekBarColors: {
|
|
|
|
base: "rgba(255, 255, 255, 0.3)",
|
|
|
|
buffered: "rgba(255, 255, 255, 0.54)",
|
|
|
|
played: "rgb(255, 0, 0)",
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
this.ui.configure(config);
|
|
|
|
}
|
|
|
|
|
|
|
|
const player = this.ui.getControls().getPlayer();
|
|
|
|
|
|
|
|
this.player = player;
|
|
|
|
|
2021-06-24 18:39:22 +00:00
|
|
|
const disableVideo =
|
2021-06-13 18:33:51 +00:00
|
|
|
((localStorage && localStorage.getItem("audioOnly") === "true") || this.$route.query.listen === "1") &&
|
2021-06-24 18:39:22 +00:00
|
|
|
!this.video.livestream;
|
|
|
|
this.player.configure("manifest.disableVideo", disableVideo);
|
2021-06-07 20:35:45 +00:00
|
|
|
|
2021-06-21 20:03:11 +00:00
|
|
|
const quality = Number(localStorage.getItem("quality"));
|
|
|
|
const qualityConds = quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream);
|
|
|
|
if (qualityConds) this.player.configure("abr.enabled", false);
|
|
|
|
|
2021-06-18 13:20:41 +00:00
|
|
|
player.load(uri, 0, uri.indexOf("dash+xml") >= 0 ? "application/dash+xml" : "video/mp4").then(() => {
|
2021-06-21 20:03:11 +00:00
|
|
|
if (qualityConds) {
|
|
|
|
var leastDiff = Number.MAX_VALUE;
|
|
|
|
var bestStream = null;
|
|
|
|
player
|
|
|
|
.getVariantTracks()
|
|
|
|
.sort((a, b) => a.bandwidth - b.bandwidth)
|
|
|
|
.forEach(stream => {
|
|
|
|
const diff = Math.abs(quality - stream.height);
|
|
|
|
if (diff < leastDiff) {
|
|
|
|
leastDiff = diff;
|
|
|
|
bestStream = stream;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
player.selectVariantTrack(bestStream);
|
|
|
|
}
|
|
|
|
|
2021-05-06 17:30:02 +00:00
|
|
|
this.video.subtitles.map(subtitle => {
|
|
|
|
player.addTextTrackAsync(
|
|
|
|
subtitle.url,
|
|
|
|
subtitle.code,
|
|
|
|
"SUBTITLE",
|
|
|
|
subtitle.mimeType,
|
|
|
|
null,
|
|
|
|
subtitle.name,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
2021-06-01 09:19:01 +00:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
2021-04-03 15:45:45 +00:00
|
|
|
},
|
2021-05-06 17:30:02 +00:00
|
|
|
beforeUnmount() {
|
|
|
|
if (this.player) {
|
|
|
|
this.player.destroy();
|
|
|
|
this.player = undefined;
|
|
|
|
this.ui = undefined;
|
|
|
|
}
|
2021-06-01 09:19:01 +00:00
|
|
|
if (this.hotkeys) this.hotkeys.unbind();
|
2021-04-07 11:45:40 +00:00
|
|
|
},
|
2021-04-01 15:13:35 +00:00
|
|
|
};
|
|
|
|
</script>
|