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:
FireMaskterK 2021-11-11 08:16:00 +00:00
parent 28dbe2d75d
commit 215e12fafe
No known key found for this signature in database
GPG Key ID: 49451E4482CC5BCD
2 changed files with 52 additions and 6 deletions

View File

@ -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) {

View File

@ -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) {