mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Fix player reuse and sponsorblock.
This commit is contained in:
parent
d4d74661d9
commit
dee927c527
1 changed files with 68 additions and 61 deletions
|
@ -93,7 +93,6 @@ export default {
|
||||||
title: "Loading..."
|
title: "Loading..."
|
||||||
},
|
},
|
||||||
player: null,
|
player: null,
|
||||||
audioplayer: null,
|
|
||||||
sponsors: null,
|
sponsors: null,
|
||||||
selectedAutoPlay: null,
|
selectedAutoPlay: null,
|
||||||
showDesc: true
|
showDesc: true
|
||||||
|
@ -106,16 +105,14 @@ export default {
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
if (this.player) {
|
if (this.player) {
|
||||||
this.player.dispose();
|
document.querySelector("video").remove();
|
||||||
}
|
window.player = undefined;
|
||||||
if (this.audioplayer) {
|
window.ui = undefined;
|
||||||
this.audioplayer.pause();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
"$route.query.v": function(v) {
|
"$route.query.v": function(v) {
|
||||||
if (v) {
|
if (v) {
|
||||||
if (this.audioplayer) this.audioplayer.pause();
|
|
||||||
this.getVideoData();
|
this.getVideoData();
|
||||||
this.getSponsors();
|
this.getSponsors();
|
||||||
}
|
}
|
||||||
|
@ -128,7 +125,7 @@ export default {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
async fetchSponsors() {
|
async fetchSponsors() {
|
||||||
await this.fetchJson(
|
return await this.fetchJson(
|
||||||
Constants.BASE_URL +
|
Constants.BASE_URL +
|
||||||
"/sponsors/" +
|
"/sponsors/" +
|
||||||
this.$route.query.v +
|
this.$route.query.v +
|
||||||
|
@ -139,6 +136,46 @@ export default {
|
||||||
if (localStorage)
|
if (localStorage)
|
||||||
localStorage.setItem("autoplay", this.selectedAutoPlay);
|
localStorage.setItem("autoplay", this.selectedAutoPlay);
|
||||||
},
|
},
|
||||||
|
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,
|
||||||
|
"eng",
|
||||||
|
"SUBTITLE",
|
||||||
|
subtitle.mimeType,
|
||||||
|
null,
|
||||||
|
"English"
|
||||||
|
);
|
||||||
|
player.setTextTrackVisibility(true);
|
||||||
|
});
|
||||||
|
if (localStorage)
|
||||||
|
videoEl.volume = localStorage.getItem("volume") || 1;
|
||||||
|
|
||||||
|
const ui =
|
||||||
|
window.ui ||
|
||||||
|
(window.ui = new shaka.ui.Overlay(
|
||||||
|
player,
|
||||||
|
document.querySelector(
|
||||||
|
"div[data-shaka-player-container]"
|
||||||
|
),
|
||||||
|
videoEl
|
||||||
|
));
|
||||||
|
const config = {
|
||||||
|
overflowMenuButtons: [
|
||||||
|
"quality",
|
||||||
|
"captions",
|
||||||
|
"playback_rate"
|
||||||
|
]
|
||||||
|
};
|
||||||
|
ui.configure(config);
|
||||||
|
});
|
||||||
|
},
|
||||||
async getVideoData() {
|
async getVideoData() {
|
||||||
this.fetchVideo()
|
this.fetchVideo()
|
||||||
.then(data => {
|
.then(data => {
|
||||||
|
@ -168,66 +205,36 @@ export default {
|
||||||
|
|
||||||
const videoEl = document.querySelector("video");
|
const videoEl = document.querySelector("video");
|
||||||
|
|
||||||
if (noPrevPlayer) {
|
setTimeout(function() {
|
||||||
setTimeout(function() {
|
shaka
|
||||||
shaka
|
.then(shaka => shaka.default)
|
||||||
.then(shaka => shaka.default)
|
.then(shaka => {
|
||||||
.then(shaka => {
|
if (noPrevPlayer) {
|
||||||
shaka.polyfill.installAll();
|
shaka.polyfill.installAll();
|
||||||
|
|
||||||
const player = new shaka.Player(videoEl);
|
const player = new shaka.Player(videoEl);
|
||||||
|
|
||||||
player
|
WatchVideo.player = player;
|
||||||
.load(
|
window.player = player;
|
||||||
"data:application/dash+xml;charset=utf-8;base64," +
|
|
||||||
btoa(dash)
|
|
||||||
)
|
|
||||||
.then(() => {
|
|
||||||
WatchVideo.video.subtitles.map(
|
|
||||||
subtitle => {
|
|
||||||
player.addTextTrack(
|
|
||||||
subtitle.url,
|
|
||||||
"eng",
|
|
||||||
"SUBTITLE",
|
|
||||||
subtitle.mimeType,
|
|
||||||
null,
|
|
||||||
"English"
|
|
||||||
);
|
|
||||||
player.setTextTrackVisibility(
|
|
||||||
true
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (localStorage)
|
|
||||||
videoEl.volume =
|
|
||||||
localStorage.getItem(
|
|
||||||
"volume"
|
|
||||||
) || 1;
|
|
||||||
|
|
||||||
const ui = new shaka.ui.Overlay(
|
WatchVideo.setPlayerAttrs(
|
||||||
player,
|
player,
|
||||||
document.querySelector(
|
videoEl,
|
||||||
"div[data-shaka-player-container]"
|
dash,
|
||||||
),
|
shaka
|
||||||
videoEl
|
|
||||||
);
|
|
||||||
const config = {
|
|
||||||
overflowMenuButtons: [
|
|
||||||
"quality",
|
|
||||||
"captions",
|
|
||||||
"playback_rate"
|
|
||||||
]
|
|
||||||
};
|
|
||||||
ui.configure(config);
|
|
||||||
});
|
|
||||||
|
|
||||||
videoEl.setAttribute(
|
|
||||||
"poster",
|
|
||||||
WatchVideo.video.thumbnailUrl
|
|
||||||
);
|
);
|
||||||
});
|
} else {
|
||||||
}, 0);
|
WatchVideo.setPlayerAttrs(
|
||||||
}
|
window.player,
|
||||||
|
videoEl,
|
||||||
|
dash,
|
||||||
|
shaka
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
videoEl.setAttribute("poster", this.video.thumbnailUrl);
|
||||||
|
|
||||||
if (this.$route.query.t)
|
if (this.$route.query.t)
|
||||||
this.player.currentTime(this.$route.query.t);
|
this.player.currentTime(this.$route.query.t);
|
||||||
|
|
Loading…
Reference in a new issue