invidious-links.user.js

// ==UserScript==
// @name        Invidious Links
// @namespace   Violentmonkey Scripts
// @match       https://www.youtube.com/*
// @grant       none
// @version     1.0.1
// @author      anon
// @description Append Invidous Links next to a#video-title links on YouTube
// ==/UserScript==

const SITE = "yewtu.be"
const DELAY = 1000

/**
 * Get the video_id of the url.
 */
function getv(url) {
  const u = new URL(url)
  if (u.pathname.match(/^\/shorts/)) {
    const parts = u.pathname.split('/')
    return parts[2]
  } else {
    return u.searchParams.get('v')
  }
}

function invidiousUrl(url, site) {
  const v = getv(url)
  return `https://${site}/watch?v=${v}`
}

function createLink(url) {
  const a = document.createElement('a')
  a.href = url
  a.classList = ['invidious']
  a.innerHTML = ' ♂ '
  return a
}

function appendLink(vid) {
  cl = [...vid.classList]
  if (!cl.includes('appended')) {
    const url = invidiousUrl(vid.href, SITE)
    const link = createLink(url)
    vid.after(link)
    vid.classList.add('appended')
  }
}

const validNodeTypes = [1, 9, 10, 11]
function processNode(node) {
  if (!validNodeTypes.includes(node.nodeType)) return
  try {
    vids = node.querySelectorAll('a#video-title-link, a#video-title')
    vids.forEach((vid) => {
      appendLink(vid)
    })
  }
  catch (e) {
    console.warn(e, node)
    // window.__node = node
  }
}

function detectAndRemovePopup(node) {
  if (node.ELEMENT_NODE == 1 && node.tagName == 'TP-YT-PAPER-DIALOG') {
    console.warn('POPUP DETECTED!')
    setTimeout(() => { removePopup(node) }, DELAY)
  }
}

function removePopup(node) {
  node.remove()
  const vid = document.querySelector('video')
  if (vid) {
    vid.play()
  } else {
    console.warn('no video???')
  }
}

function delayedProcessNode(node) {
  setTimeout(() => {
    detectAndRemovePopup(node)
    processNode(node)
  }, DELAY)
}

delayedProcessNode(document.body)

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach(delayedProcessNode)
  })
})

observer.observe(document.body, {
  childList: true,
  subtree: true,
})