Display "Watch on Nebula" on Indivious [#92]

Author: cpiber

package.json

@@ -52,6 +52,7 @@
   "dependencies": {
     "dompurify": "^3.2.4",
     "marked": "^15.0.6",
+    "webext-dynamic-content-scripts": "^10.0.4",
     "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,3 +1,4 @@
+import 'webext-dynamic-content-scripts';
 import { Creator, loadCreators as _loadCreators, creatorHasNebulaVideo, creatorHasYTVideo, existsNebulaVideo, normalizeString } from './background';
 import { purgeCache, purgeCacheIfNecessary } from './background/ext';
 import type { CreatorSettings } from './content/nebula/creator-settings';

src/scripts/background_script.ts

@@ -0,0 +1,42 @@
+import { getBrowserInstance, nebulavideo } from '../../helpers/sharedExt';
+
+const watchOnNebula = getBrowserInstance().i18n.getMessage('pageWatchOnNebula');
+const goChannel = getBrowserInstance().i18n.getMessage('pageGoChannel');
+const videoConfidence = getBrowserInstance().i18n.getMessage('pageVideoConfidence');
+const searchConfidence = getBrowserInstance().i18n.getMessage('pageSearchConfidence');
+
+export const constructButton = (vid: nebulavideo, before: HTMLElement) => {
+  if (!document.querySelector('.watch-on-nebula') || document.querySelector('.watch-on-nebula').children.length === 0) {
+    Array.from(document.querySelectorAll<HTMLElement>('.watch-on-nebula')).forEach(n => n.remove());
+    // for some reason youtube custom elements clear their inner html in construct, so we have to do it like this
+    const wrap = document.createElement('p');
+    wrap.style.display = 'none';
+    before.before(wrap);
+    wrap.className = 'watch-on-nebula';
+    const button = wrap.appendChild(document.createElement('span'));
+    button.id = 'watch-on-nebula';
+    const blink = button.appendChild(document.createElement('a'));
+    blink.id = 'link-nebula-watch';
+    blink.rel = 'noopener noreferrer';
+    blink.textContent = watchOnNebula;
+    blink.setAttribute('href', vid.link);
+    button.title = generateText(vid);
+  } else {
+    document.querySelector<HTMLSpanElement>('.watch-on-nebula a').setAttribute('href', vid.link);
+    document.querySelector<HTMLButtonElement>('.watch-on-nebula span').title = generateText(vid);
+  }
+  const b = document.querySelector<HTMLElement>('.watch-on-nebula');
+  b.style.display = '';
+  return b;
+};
+
+const generateText = (vid: nebulavideo) => {
+  switch (vid.is) {
+    case 'channel':
+      return goChannel;
+    case 'video':
+      return `${videoConfidence}: ${(vid.confidence * 100).toFixed(1)}%`;
+    case 'search':
+      return `${searchConfidence}: ${(vid.confidence * 100).toFixed(1)}%`;
+  }
+};

src/scripts/content/invidious/html.ts

@@ -0,0 +1,82 @@
+import { BrowserMessage, debounce, getBrowserInstance, getFromStorage, nebulavideo } from '../../helpers/sharedExt';
+import { constructButton } from './html';
+
+const optionsDefaults = {
+  ytOpenTab: false,
+  ytMuteOnly: false,
+  ytReplaceTab: false,
+};
+let options = { ...optionsDefaults };
+
+export const invidious = async () => {
+  options = await getFromStorage(optionsDefaults);
+  console.debug('Invidious loaded on', location.hostname);
+  getBrowserInstance().storage.onChanged.addListener(changed => {
+    Object.keys(options).forEach(prop => {
+      if (prop in changed && 'newValue' in changed[prop]) {
+        options[prop] = changed[prop].newValue as typeof options[typeof prop];
+      }
+    });
+    console.dev.debug('Reload information', changed);
+    setTimeout(run, 100);
+  });
+
+  Array.from(document.querySelectorAll<HTMLElement>('.watch-on-nebula')).forEach(n => n.remove());
+  setTimeout(run, 0);
+};
+
+const remove = () => Array.from(document.querySelectorAll<HTMLElement>('.watch-on-nebula')).forEach(n => n.style.display = 'none');
+const findParentLink = (el: HTMLElement) => {
+  while (el) {
+    if (el.tagName === 'A') return el as HTMLAnchorElement;
+    el = el.parentElement;
+  }
+};
+const run = debounce(async () => {
+  if (!location.pathname.startsWith('/watch')) {
+    console.dev.log('not a video');
+    remove();
+    return;
+  }
+
+  const channelEl = document.getElementById('channel-name');
+  const channelNice = channelEl?.textContent.trim();
+  const channelLink = findParentLink(channelEl);
+  const channelID = channelLink?.href.match(/\/channel\/([^\/]+)/)?.[1];
+  const titleEl = document.querySelector('#player-container ~ * h1');
+  const videoTitle = titleEl?.textContent.trim();
+  console.dev.debug('Elements', !!channelEl, !!titleEl, !!channelLink);
+  if (!channelEl || !titleEl || !channelLink) return;
+  const vidID = location.search.match(/[?&]v=([^&]+)/)?.[1];
+
+  const { res: vid, err }: { res?: nebulavideo, err?: any; } = await getBrowserInstance().runtime.sendMessage({ type: BrowserMessage.GET_VID, channelID, channelName: channelNice, channelNice, videoTitle });
+  console.dev.log('got:', vid, err);
+  if (!vid) throw new Error(err);
+  console.debug('got video information',
+    '\nchannelID:', channelID, 'channelName:', channelNice, 'videoTitle:', videoTitle, 'vidID:', vidID,
+    '\non nebula?', !!vid);
+
+  if (!vid) return remove();
+  console.dev.log('Found video:', vid);
+
+  const watchOnYtEl = document.querySelector<HTMLElement>('#watch-on-youtube');
+  if (!watchOnYtEl) return;
+  constructButton(vid, watchOnYtEl);
+
+  if ((window.history.state || {})['_enhancer_checked'] === true) return console.debug('Ignoring video since already processed');
+
+  const { ytOpenTab: doOpenTab, ytReplaceTab: replaceTab } = options;
+  console.dev.debug('Referer:', document.referrer);
+  if (document.referrer.match(/https?:\/\/(.+\.)?nebula\.(app|tv)\/?/) && window.history.length <= 1) return; // prevent open link if via nebula link (any link)
+  if (vid.is === 'channel' || !doOpenTab) return;
+
+  /* eslint-disable-next-line camelcase */
+  window.history.replaceState({ ...window.history.state, _enhancer_checked: true }, '');
+
+  if (replaceTab) {
+    window.location.href = vid.link;
+    return;
+  }
+
+  window.open(vid.link, vidID);
+}, 5);

src/scripts/content/invidious/index.ts

@@ -1,3 +1,4 @@
+import { invidious } from './content/invidious';
 import { nebula } from './content/nebula';
 import { youtube } from './content/youtube';
 import { BrowserMessage, getBrowserInstance } from './helpers/sharedExt';
@@ -7,8 +8,10 @@ import { BrowserMessage, getBrowserInstance } from './helpers/sharedExt';
 
   if (window.location.hostname.endsWith('youtube.com')) {
     youtube();
-  } else {
+  } else if (window.location.hostname.endsWith('nebula.tv') || window.location.hostname.endsWith('nebula.app')) {
     nebula();
+  } else {
+    invidious();
   }
 })();