Add support for Invidious

extension/manifest.json

@@ -20,7 +20,7 @@
     "scripts": ["dist/background.js", "dist/vendors.js"]
   },
   "content_scripts": [{
-    "matches": ["*://*.youtube.com/*"],
+    "matches": ["*://*.youtube.com/*", "*://*.invidio.us/*"],
     "js": ["dist/youtube.js", "dist/vendors.js"]
   }, {
     "matches": ["https://*/videos/watch/*"],

src/background.ts

@@ -42,6 +42,7 @@ const redirectYoutube = async (r) => {
         const isEmbed = r.url.indexOf('embed') >= 0;
 
         const query = isEmbed ? r.url.substr(r.url.lastIndexOf('/') + 1, 11) : r.url.substr(r.url.indexOf('?v=') + 3, 11);
+
         const title = await getTitle(query);
         const video = await searchByName(title);
         const url = await getPeertubeVideoURL(video, prefs, isEmbed);
@@ -50,8 +51,6 @@ const redirectYoutube = async (r) => {
             redirectUrl: url
         };
     }
-
-    throw new Error('No results.');
 };
 
 /**
@@ -81,8 +80,6 @@ const redirectPeertube = async (r) => {
             redirectUrl: url
         };
     }
-
-    throw new Error('No results.');
 };
 
 const searchByName = query => new Promise(async (resolve, reject) => {
@@ -109,7 +106,7 @@ browser.runtime.onMessage.addListener(function(message) {
 
 browser.webRequest.onBeforeRequest.addListener(
     redirectYoutube,
-    { urls: ['*://*.youtube.com/watch?v=*', '*://*.youtube.com/embed/*'] },
+    { urls: ['*://*.youtube.com/watch?v=*', '*://*.youtube.com/embed/*', '*://*.invidio.us/watch?v=*', '*://*.invidio.us/embed/*'] },
     ['blocking']
 );
 

src/youtube.ts

@@ -22,7 +22,7 @@ import { MessageKind, RedirectType } from './types';
 import Preferences from './preferences'
 
 const thumbnailURL = (host, path) => `https://${host}${path}`;
-
+const isYouTube = document.location.hostname === 'www.youtube.com';
 const LINK_ID = 'peertube-link';
 
 function searchVideo(query) {
@@ -43,7 +43,9 @@ async function peertubeify(query: String) {
                     const link = videoLink(url, video);
 
                     removeVideoLink();
-                    document.querySelector('ytd-app').appendChild(link);
+                    
+                    const querySelector = isYouTube ? 'ytd-app' : '.pure-g';
+                    document.querySelector(querySelector).appendChild(link);
                 }).catch(removeVideoLink);
             break;
         }
@@ -53,23 +55,31 @@ async function peertubeify(query: String) {
     }
 }
 
-const throttledPeertubeify = _.throttle(1000, peertubeify);
-const observer = new MutationObserver(function(mutationsList) {
-    for (const mutation of mutationsList) {
-        if ((mutation.target as Element).classList.contains('ytp-title-link')) {
-            for (const node of mutation.addedNodes) {
-                if (node.nodeType == Node.TEXT_NODE) {
-                    throttledPeertubeify(node.textContent);
+if (isYouTube) {
+    const throttledPeertubeify = _.throttle(1000, peertubeify);
+    const observer = new MutationObserver(function(mutationsList) {
+        for (const mutation of mutationsList) {
+            if ((mutation.target as Element).classList.contains('ytp-title-link')) {
+                for (const node of mutation.addedNodes) {
+                    if (node.nodeType == Node.TEXT_NODE) {
+                        throttledPeertubeify(node.textContent);
+                    }
                 }
             }
         }
-    }
-});
+    });
 
-observer.observe(document.body, {
-    childList: true,
-    subtree: true,
-})
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    })
+} else {
+    peertubeify(document.title.substring(0, document.title.indexOf(' - Invidious')));
+}
+
+const backgroundColor = isYouTube ? 'var(--yt-swatch-primary)' : '#fff';
+const buttonColor = isYouTube ? 'var(--yt-swatch-text)' : '#000';
+const textColor = isYouTube ? 'var(--yt-primary-text-color)' : '#000';
 
 const videoLink = (url, video) => htmlToElement(`
 <div id="${LINK_ID}"
@@ -80,16 +90,17 @@ const videoLink = (url, video) => htmlToElement(`
     box-sizing: border-box;
     width: 100%;
     padding: 1rem;
-    z-index: 10;
+    z-index: 101;
     box-shadow: inset 0px 4px 8px -3px rgba(17, 17, 17, .06);
-    background-color: var(--yt-swatch-primary);
+    background-color: ${backgroundColor};
+    letter-spacing: normal;
   ">
 
   <button
     onclick="document.getElementById('${LINK_ID}').remove()"
     style="
       all: unset;
-      color: var(--yt-swatch-text);
+      color: ${buttonColor};
       cursor: pointer;
       font-size: 24px;
       position: absolute;
@@ -111,7 +122,7 @@ const videoLink = (url, video) => htmlToElement(`
     <div style="
         font-size: 18px;
         margin-left: 1rem;
-        color: var(--yt-primary-text-color);
+        color: ${textColor};
         display: flex;
         flex-direction: column;
         justify-content: space-around;