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

replace deprecated function: addTextTrack -> addTextTrackAsync

Browse source
This commit is contained in:
FireMasterK 2021-05-06 21:44:08 +05:30
parent 4e1c7267a8
commit caf3b20e58
1 changed files with 148 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

283
src/components/Player.vue
View file

@ -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>