mirror of
https://github.com/TeamPiped/Piped.git
synced 2025-01-10 23:07:00 +00:00
replace deprecated function: addTextTrack -> addTextTrackAsync
This commit is contained in:
FireMasterK
parent
6f365d3023
commit
fcd14d3fcb
@ -1,9 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="uk-container-expand">
|
<div class="uk-container-expand">
|
||||||
<div data-shaka-player-container ref="container">
|
<div data-shaka-player-container ref="container">
|
||||||
<video data-shaka-player autoplay style="width: 100%; height: 100%" ref="videoEl"></video>
|
<video
|
||||||
</div>
|
data-shaka-player
|
||||||
|
autoplay
|
||||||
|
style="width: 100%; height: 100%"
|
||||||
|
ref="videoEl"
|
||||||
|
></video>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -11,151 +16,159 @@ 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");
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
video: Object,
|
video: Object,
|
||||||
sponsors: Object,
|
sponsors: Object,
|
||||||
selectedAutoPlay: Boolean,
|
selectedAutoPlay: Boolean,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
loadVideo() {
|
loadVideo() {
|
||||||
const videoEl = this.$refs.videoEl;
|
const videoEl = this.$refs.videoEl;
|
||||||
|
|
||||||
videoEl.setAttribute("poster", this.video.thumbnailUrl);
|
videoEl.setAttribute("poster", this.video.thumbnailUrl);
|
||||||
|
|
||||||
if (this.$route.query.t) videoEl.currentTime = this.$route.query.t;
|
if (this.$route.query.t) videoEl.currentTime = this.$route.query.t;
|
||||||
|
|
||||||
const noPrevPlayer = !this.player;
|
const noPrevPlayer = !this.player;
|
||||||
|
|
||||||
var streams = [];
|
var streams = [];
|
||||||
|
|
||||||
streams.push(...this.video.audioStreams);
|
streams.push(...this.video.audioStreams);
|
||||||
streams.push(...this.video.videoStreams);
|
streams.push(...this.video.videoStreams);
|
||||||
|
|
||||||
const dash = require("@/utils/DashUtils.js").default.generate_dash_file_from_formats(
|
const dash = require("@/utils/DashUtils.js").default.generate_dash_file_from_formats(
|
||||||
streams,
|
streams,
|
||||||
this.video.duration,
|
this.video.duration
|
||||||
);
|
);
|
||||||
|
|
||||||
if (noPrevPlayer)
|
if (noPrevPlayer)
|
||||||
shaka
|
shaka
|
||||||
.then(shaka => shaka.default)
|
.then((shaka) => shaka.default)
|
||||||
.then(shaka => {
|
.then((shaka) => {
|
||||||
this.shaka = shaka;
|
this.shaka = shaka;
|
||||||
shaka.polyfill.installAll();
|
shaka.polyfill.installAll();
|
||||||
|
|
||||||
const player = new shaka.Player(videoEl);
|
const player = new shaka.Player(videoEl);
|
||||||
|
|
||||||
this.player = player;
|
this.player = player;
|
||||||
|
|
||||||
this.setPlayerAttrs(player, videoEl, dash, shaka);
|
this.setPlayerAttrs(player, videoEl, dash, shaka);
|
||||||
});
|
});
|
||||||
else this.setPlayerAttrs(this.player, videoEl, dash, this.shaka);
|
else this.setPlayerAttrs(this.player, videoEl, dash, this.shaka);
|
||||||
|
|
||||||
if (noPrevPlayer) {
|
if (noPrevPlayer) {
|
||||||
videoEl.addEventListener("timeupdate", () => {
|
videoEl.addEventListener("timeupdate", () => {
|
||||||
if (this.sponsors && this.sponsors.segments) {
|
if (this.sponsors && this.sponsors.segments) {
|
||||||
const time = videoEl.currentTime;
|
const time = videoEl.currentTime;
|
||||||
this.sponsors.segments.map(segment => {
|
this.sponsors.segments.map((segment) => {
|
||||||
if (!segment.skipped) {
|
if (!segment.skipped) {
|
||||||
const end = segment.segment[1];
|
const end = segment.segment[1];
|
||||||
if (time >= segment.segment[0] && time < end) {
|
if (time >= segment.segment[0] && time < end) {
|
||||||
console.log("Skipped segment at " + time);
|
console.log("Skipped segment at " + time);
|
||||||
videoEl.currentTime = end;
|
videoEl.currentTime = end;
|
||||||
segment.skipped = true;
|
segment.skipped = true;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
videoEl.addEventListener("volumechange", () => {
|
|
||||||
if (localStorage) localStorage.setItem("volume", videoEl.volume);
|
|
||||||
});
|
|
||||||
|
|
||||||
videoEl.addEventListener("ended", () => {
|
|
||||||
if (this.selectedAutoPlay && this.video.relatedStreams.length > 0)
|
|
||||||
this.$router.push(this.video.relatedStreams[0].url);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
|
||||||
},
|
|
||||||
setPlayerAttrs(player, videoEl, dash, shaka) {
|
|
||||||
player.load("data:application/dash+xml;charset=utf-8;base64," + btoa(dash)).then(() => {
|
|
||||||
this.video.subtitles.map(subtitle => {
|
|
||||||
player.addTextTrack(
|
|
||||||
subtitle.url,
|
|
||||||
subtitle.code,
|
|
||||||
"SUBTITLE",
|
|
||||||
subtitle.mimeType,
|
|
||||||
null,
|
|
||||||
subtitle.name,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1;
|
|
||||||
|
|
||||||
const ui = this.ui || (this.ui = new shaka.ui.Overlay(player, 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)",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
ui.configure(config);
|
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
onKeyPress(e) {
|
});
|
||||||
if (document.activeElement.tagName === "INPUT" && document.activeElement.type === "text") return;
|
|
||||||
const videoEl = this.$refs.videoEl;
|
videoEl.addEventListener("volumechange", () => {
|
||||||
switch (e.code) {
|
if (localStorage) localStorage.setItem("volume", videoEl.volume);
|
||||||
case "KeyF":
|
});
|
||||||
if (document.fullscreenElement) document.exitFullscreen();
|
|
||||||
else this.$refs.container.requestFullscreen();
|
videoEl.addEventListener("ended", () => {
|
||||||
e.preventDefault();
|
if (this.selectedAutoPlay && this.video.relatedStreams.length > 0)
|
||||||
break;
|
this.$router.push(this.video.relatedStreams[0].url);
|
||||||
case "KeyM":
|
});
|
||||||
videoEl.muted = !videoEl.muted;
|
}
|
||||||
e.preventDefault();
|
|
||||||
break;
|
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
|
||||||
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() {
|
setPlayerAttrs(player, videoEl, dash, shaka) {
|
||||||
document.addEventListener("keydown", this.onKeyPress);
|
player
|
||||||
|
.load("data:application/dash+xml;charset=utf-8;base64," + btoa(dash))
|
||||||
|
.then(() => {
|
||||||
|
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;
|
||||||
|
|
||||||
|
const ui =
|
||||||
|
this.ui ||
|
||||||
|
(this.ui = new shaka.ui.Overlay(player, 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)",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
ui.configure(config);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
onKeyPress(e) {
|
||||||
document.removeEventListener("keydown", this.onKeyPress);
|
if (
|
||||||
if (this.player) {
|
document.activeElement.tagName === "INPUT" &&
|
||||||
this.player.destroy();
|
document.activeElement.type === "text"
|
||||||
this.player = undefined;
|
)
|
||||||
this.ui = undefined;
|
return;
|
||||||
}
|
const videoEl = this.$refs.videoEl;
|
||||||
|
switch (e.code) {
|
||||||
|
case "KeyF":
|
||||||
|
if (document.fullscreenElement) document.exitFullscreen();
|
||||||
|
else this.$refs.container.requestFullscreen();
|
||||||
|
e.preventDefault();
|
||||||
|
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;
|
||||||
|
this.ui = undefined;
|
||||||
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user