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)
 | 
					                                    WatchVideo.setPlayerAttrs(
 | 
				
			||||||
                                        )
 | 
					                                        player,
 | 
				
			||||||
                                        .then(() => {
 | 
					                                        videoEl,
 | 
				
			||||||
                                            WatchVideo.video.subtitles.map(
 | 
					                                        dash,
 | 
				
			||||||
                                                subtitle => {
 | 
					                                        shaka
 | 
				
			||||||
                                                    player.addTextTrack(
 | 
					 | 
				
			||||||
                                                        subtitle.url,
 | 
					 | 
				
			||||||
                                                        "eng",
 | 
					 | 
				
			||||||
                                                        "SUBTITLE",
 | 
					 | 
				
			||||||
                                                        subtitle.mimeType,
 | 
					 | 
				
			||||||
                                                        null,
 | 
					 | 
				
			||||||
                                                        "English"
 | 
					 | 
				
			||||||
                                    );
 | 
					                                    );
 | 
				
			||||||
                                                    player.setTextTrackVisibility(
 | 
					                                } else {
 | 
				
			||||||
                                                        true
 | 
					                                    WatchVideo.setPlayerAttrs(
 | 
				
			||||||
 | 
					                                        window.player,
 | 
				
			||||||
 | 
					                                        videoEl,
 | 
				
			||||||
 | 
					                                        dash,
 | 
				
			||||||
 | 
					                                        shaka
 | 
				
			||||||
                                    );
 | 
					                                    );
 | 
				
			||||||
                                }
 | 
					                                }
 | 
				
			||||||
                                            );
 | 
					 | 
				
			||||||
                                            if (localStorage)
 | 
					 | 
				
			||||||
                                                videoEl.volume =
 | 
					 | 
				
			||||||
                                                    localStorage.getItem(
 | 
					 | 
				
			||||||
                                                        "volume"
 | 
					 | 
				
			||||||
                                                    ) || 1;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                                            const ui = new shaka.ui.Overlay(
 | 
					 | 
				
			||||||
                                                player,
 | 
					 | 
				
			||||||
                                                document.querySelector(
 | 
					 | 
				
			||||||
                                                    "div[data-shaka-player-container]"
 | 
					 | 
				
			||||||
                                                ),
 | 
					 | 
				
			||||||
                                                videoEl
 | 
					 | 
				
			||||||
                                            );
 | 
					 | 
				
			||||||
                                            const config = {
 | 
					 | 
				
			||||||
                                                overflowMenuButtons: [
 | 
					 | 
				
			||||||
                                                    "quality",
 | 
					 | 
				
			||||||
                                                    "captions",
 | 
					 | 
				
			||||||
                                                    "playback_rate"
 | 
					 | 
				
			||||||
                                                ]
 | 
					 | 
				
			||||||
                                            };
 | 
					 | 
				
			||||||
                                            ui.configure(config);
 | 
					 | 
				
			||||||
                                        });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                                    videoEl.setAttribute(
 | 
					 | 
				
			||||||
                                        "poster",
 | 
					 | 
				
			||||||
                                        WatchVideo.video.thumbnailUrl
 | 
					 | 
				
			||||||
                                    );
 | 
					 | 
				
			||||||
                            });
 | 
					                            });
 | 
				
			||||||
                    }, 0);
 | 
					                    }, 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…
	
	Add table
		Add a link
		
	
		Reference in a new issue