Create Player UI like how it was intended to be.

This commit is contained in:
FireMasterK 2021-06-08 00:52:29 +05:30
parent 5e791a51f5
commit a2f95c9d9e
No known key found for this signature in database
GPG Key ID: 8DFF5DD33E93DB58

View File

@ -49,11 +49,9 @@ export default {
this.shaka = shaka; this.shaka = shaka;
shaka.polyfill.installAll(); shaka.polyfill.installAll();
const player = new shaka.Player(videoEl); const localPlayer = new shaka.Player(videoEl);
this.player = player; this.setPlayerAttrs(localPlayer, 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);
@ -87,7 +85,26 @@ export default {
//TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12 //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
}, },
setPlayerAttrs(player, videoEl, dash, shaka) { setPlayerAttrs(localPlayer, videoEl, dash, shaka) {
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;
player.load("data:application/dash+xml;charset=utf-8;base64," + btoa(dash)).then(() => { player.load("data:application/dash+xml;charset=utf-8;base64," + btoa(dash)).then(() => {
this.video.subtitles.map(subtitle => { this.video.subtitles.map(subtitle => {
player.addTextTrackAsync( player.addTextTrackAsync(
@ -100,19 +117,6 @@ export default {
); );
}); });
if (localStorage) videoEl.volume = localStorage.getItem("volume") || 1; 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);
}); });
}, },
}, },