mirror of
				https://github.com/TeamPiped/Piped.git
				synced 2024-08-14 23:57:27 +00:00 
			
		
		
		
	Add button to open embed video in new tab.
Closes #611 Closes https://github.com/TeamPiped/Piped-Redirects/issues/4
This commit is contained in:
		
							parent
							
								
									28dbe2d75d
								
							
						
					
					
						commit
						215e12fafe
					
				
					 2 changed files with 52 additions and 6 deletions
				
			
		| 
						 | 
				
			
			@ -31,7 +31,6 @@ export default {
 | 
			
		|||
                return {};
 | 
			
		||||
            },
 | 
			
		||||
        },
 | 
			
		||||
        videoId: String,
 | 
			
		||||
        sponsors: {
 | 
			
		||||
            type: Object,
 | 
			
		||||
            default: () => {
 | 
			
		||||
| 
						 | 
				
			
			@ -145,7 +144,7 @@ export default {
 | 
			
		|||
            } else if (window.db) {
 | 
			
		||||
                var tx = window.db.transaction("watch_history", "readonly");
 | 
			
		||||
                var store = tx.objectStore("watch_history");
 | 
			
		||||
                var request = store.get(this.videoId);
 | 
			
		||||
                var request = store.get(this.video.id);
 | 
			
		||||
                request.onsuccess = function(event) {
 | 
			
		||||
                    var video = event.target.result;
 | 
			
		||||
                    if (video && video.currentTime) {
 | 
			
		||||
| 
						 | 
				
			
			@ -292,11 +291,58 @@ export default {
 | 
			
		|||
            //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
 | 
			
		||||
        },
 | 
			
		||||
        setPlayerAttrs(localPlayer, videoEl, uri, mime, shaka) {
 | 
			
		||||
            const url = "/watch?v=" + this.video.id;
 | 
			
		||||
 | 
			
		||||
            if (!this.$ui) {
 | 
			
		||||
                const OpenButton = class extends shaka.ui.Element {
 | 
			
		||||
                    constructor(parent, controls) {
 | 
			
		||||
                        super(parent, controls);
 | 
			
		||||
 | 
			
		||||
                        this.newTabButton_ = document.createElement("button");
 | 
			
		||||
                        this.newTabButton_.classList.add("shaka-cast-button");
 | 
			
		||||
                        this.newTabButton_.classList.add("shaka-tooltip");
 | 
			
		||||
                        this.newTabButton_.ariaPressed = "false";
 | 
			
		||||
 | 
			
		||||
                        this.newTabIcon_ = document.createElement("i");
 | 
			
		||||
                        this.newTabIcon_.classList.add("material-icons-round");
 | 
			
		||||
                        this.newTabIcon_.textContent = "launch";
 | 
			
		||||
                        this.newTabButton_.appendChild(this.newTabIcon_);
 | 
			
		||||
 | 
			
		||||
                        const label = document.createElement("label");
 | 
			
		||||
                        label.classList.add("shaka-overflow-button-label");
 | 
			
		||||
                        label.classList.add("shaka-overflow-menu-only");
 | 
			
		||||
                        this.newTabNameSpan_ = document.createElement("span");
 | 
			
		||||
                        this.newTabNameSpan_.innerText = "Open in new tab";
 | 
			
		||||
                        label.appendChild(this.newTabNameSpan_);
 | 
			
		||||
 | 
			
		||||
                        this.newTabButton_.appendChild(label);
 | 
			
		||||
                        this.parent.appendChild(this.newTabButton_);
 | 
			
		||||
 | 
			
		||||
                        this.eventManager.listen(this.newTabButton_, "click", () => {
 | 
			
		||||
                            this.video.pause();
 | 
			
		||||
                            window.open(url);
 | 
			
		||||
                        });
 | 
			
		||||
                    }
 | 
			
		||||
                };
 | 
			
		||||
 | 
			
		||||
                OpenButton.Factory = class {
 | 
			
		||||
                    create(rootElement, controls) {
 | 
			
		||||
                        return new OpenButton(rootElement, controls);
 | 
			
		||||
                    }
 | 
			
		||||
                };
 | 
			
		||||
 | 
			
		||||
                shaka.ui.OverflowMenu.registerElement("open_new_tab", new OpenButton.Factory());
 | 
			
		||||
 | 
			
		||||
                this.$ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl);
 | 
			
		||||
 | 
			
		||||
                const overflowMenuButtons = ["quality", "captions", "picture_in_picture", "playback_rate", "airplay"];
 | 
			
		||||
 | 
			
		||||
                if (this.isEmbed) {
 | 
			
		||||
                    overflowMenuButtons.push("open_new_tab");
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                const config = {
 | 
			
		||||
                    overflowMenuButtons: ["quality", "captions", "picture_in_picture", "playback_rate", "airplay"],
 | 
			
		||||
                    overflowMenuButtons: overflowMenuButtons,
 | 
			
		||||
                    seekBarColors: {
 | 
			
		||||
                        base: "rgba(255, 255, 255, 0.3)",
 | 
			
		||||
                        buffered: "rgba(255, 255, 255, 0.54)",
 | 
			
		||||
| 
						 | 
				
			
			@ -365,11 +411,11 @@ export default {
 | 
			
		|||
            if (new Date().getTime() - this.lastUpdate < 500) return;
 | 
			
		||||
            this.lastUpdate = new Date().getTime();
 | 
			
		||||
 | 
			
		||||
            if (!this.videoId || !window.db) return;
 | 
			
		||||
            if (!this.video.id || !window.db) return;
 | 
			
		||||
 | 
			
		||||
            var tx = window.db.transaction("watch_history", "readwrite");
 | 
			
		||||
            var store = tx.objectStore("watch_history");
 | 
			
		||||
            var request = store.get(this.videoId);
 | 
			
		||||
            var request = store.get(this.video.id);
 | 
			
		||||
            request.onsuccess = function(event) {
 | 
			
		||||
                var video = event.target.result;
 | 
			
		||||
                if (video) {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -17,7 +17,6 @@
 | 
			
		|||
            <Player
 | 
			
		||||
                ref="videoPlayer"
 | 
			
		||||
                :video="video"
 | 
			
		||||
                :video-id="getVideoId()"
 | 
			
		||||
                :sponsors="sponsors"
 | 
			
		||||
                :selected-auto-play="selectedAutoPlay"
 | 
			
		||||
                :selected-auto-loop="selectedAutoLoop"
 | 
			
		||||
| 
						 | 
				
			
			@ -277,6 +276,7 @@ export default {
 | 
			
		|||
            await this.fetchVideo()
 | 
			
		||||
                .then(data => {
 | 
			
		||||
                    this.video = data;
 | 
			
		||||
                    this.video.id = this.getVideoId();
 | 
			
		||||
                })
 | 
			
		||||
                .then(() => {
 | 
			
		||||
                    if (!this.video.error) {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue