Merge pull request #1995 from syeopite/watch-on-invidious

Add watch on Invidious button to embeds

2 files changed, 33 insertions, 0 deletions

diff --git a/assets/css/embed.css b/assets/css/embed.css
index 12fefe58..466a284a 100644
--- a/assets/css/embed.css
+++ b/assets/css/embed.css
@@ -8,3 +8,19 @@
   height: auto;
   z-index: -100;
 }
+
+.watch-on-invidious {
+  font-size: 1.3em !important;
+  font-weight: bold;
+  white-space: nowrap;
+  margin: 0 1em 0 1em !important;
+  order: 3;
+}
+
+.watch-on-invidious > a {
+  color: white;
+}
+
+.watch-on-invidious > a:hover {
+  color: rgba(0, 182, 240, 1);;
+}
diff --git a/assets/js/player.js b/assets/js/player.js
index 1c6e336c..f1429233 100644
--- a/assets/js/player.js
+++ b/assets/js/player.js
@@ -566,3 +566,20 @@ if (navigator.vendor == "Apple Computer, Inc." && video_data.params.listen) {
         });
     });
 }
+
+// Watch on Invidious link
+if (window.location.pathname.startsWith("/embed/")) {
+    const Button = videojs.getComponent('Button');
+    let watch_on_invidious_button = new Button(player);
+
+    // Create hyperlink for current instance
+    redirect_element = document.createElement("a");
+    redirect_element.setAttribute("href", `http://${window.location.host}/watch?v=${window.location.pathname.replace("/embed/","")}`)
+    redirect_element.appendChild(document.createTextNode("Invidious"))
+
+    watch_on_invidious_button.el().appendChild(redirect_element)
+    watch_on_invidious_button.addClass("watch-on-invidious")
+
+    cb = player.getChild('ControlBar')
+    cb.addChild(watch_on_invidious_button)
+};