From 215e12fafe15310077f211af64c75be25afc2707 Mon Sep 17 00:00:00 2001 From: FireMaskterK <20838718+FireMasterK@users.noreply.github.com> Date: Thu, 11 Nov 2021 08:16:00 +0000 Subject: [PATCH] Add button to open embed video in new tab. Closes #611 Closes https://github.com/TeamPiped/Piped-Redirects/issues/4 --- src/components/Player.vue | 56 +++++++++++++++++++++++++++++++---- src/components/WatchVideo.vue | 2 +- 2 files changed, 52 insertions(+), 6 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 704cfc2c..9b424378 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -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) { diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue index dd62672b..b4ea7d28 100644 --- a/src/components/WatchVideo.vue +++ b/src/components/WatchVideo.vue @@ -17,7 +17,6 @@ { this.video = data; + this.video.id = this.getVideoId(); }) .then(() => { if (!this.video.error) {