☰

Open Youtube video on Holodex

Add a button under the video to open the video on Holodex.net

// ==UserScript==
// @name        Open Youtube video on Holodex
// @description Add a button under the video to open the video on Holodex.net
// @namespace   OpenYoutubeOnHolodex
// @version     1.1.0
// @include     https://www.youtube.com/*
// @run-at      document-end
// @noframes    
// ==/UserScript==

const watchRegex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i;
const channelRegex = /(?:youtube\.com\/(?:channel)\/)([a-zA-Z0-9\-]+)/i;

function openOnHolodex() {
	const vid = window.location.href.match(watchRegex)?.[1];
	if (vid) {
		window.open(`https://holodex.net/watch/${vid}`, '_blank');
		return;
	}

	const cid = window.location.href.match(channelRegex)?.[1];
	if (cid) {
		window.open(`https://holodex.net/channel/${cid}`, '_blank');
		return;
	}
}

async function getVideoFromHolodexApi(vid) {
	const api = `https://holodex.net/api/v2/videos/${vid}`;
	const res = await fetch(api);
	const data = await res.json();
	return data;
}

async function reinitialize() {
	addButton();
	openHolodexButton.style.display = 'none';

	const vid = window.location.href.match(watchRegex)?.[1];
	if (vid) {
		const videoData = await getVideoFromHolodexApi(vid);
		if (videoData.id) {
			openHolodexButton.style.display = '';
		}
	}
}

function addButton() {
	const ytpRightControls = document.getElementsByClassName("ytp-right-controls")[0];
	const openOnHolodexButton2 = document.getElementsByClassName("openOnHolodexButton")[0];
	if (ytpRightControls && !openOnHolodexButton2) {
		ytpRightControls.prepend(openHolodexButton);
	}
}

const openHolodexButton = document.createElement("button");
openHolodexButton.className = "openOnHolodexButton ytp-button";
openHolodexButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" role="img" aria-hidden="true" class="v-icon__svg"><path fill="#ffffff" id="svg_1" d="m20.24992,8.99992l0,2l3.59,0l-9.83,9.83l1.41,1.41l9.83,-9.83l0,3.59l2,0l0,-7m-2,16l-14,0l0,-14l7,0l0,-2l-7,0c-1.11,0 -2,0.9 -2,2l0,14a2,2 0 0 0 2,2l14,0a2,2 0 0 0 2,-2l0,-7l-2,0l0,7z"/></svg>`;
openHolodexButton.title = openHolodexButton.ariaLabel = "Open on Holodex.net";
openHolodexButton.onclick = openOnHolodex;
openHolodexButton.style.display = 'none';

addButton();
setTimeout(async () => {
	await reinitialize();
}, 1000);

let storedHref = window.location.href;
new MutationObserver(async () => {
	if (storedHref !== window.location.href) {
		storedHref = window.location.href;
		console.log("【OpenYoutubeOnHolodex】URL Changed", storedHref, window.location.href);
		await reinitialize();
	}
}).observe(document, {
	childList: true,
	subtree: true,
});