now-playing.js

// ==UserScript==
// @name        Now Playing
// @namespace   Violentmonkey Scripts
// @match       https://www.youtube.com/*
// @grant       none
// @version     1.1
// @author      -
// @description 11/4/2024, 7:03:43 PM
// ==/UserScript==

const waitForElement = selector => new Promise((resolve, reject) => {
	const element = document.querySelector(selector);
	if (element) {
		resolve(element);
		return;
	}

	new MutationObserver(_ => {
		const element = document.querySelector(selector);
		if (element) {
			observer.disconnect();
			resolve(element);
		}
	}).observe(document.body, { childList: true, subtree: true });
});

async function main() {
	const titleElement = await waitForElement("title");
	const flexyElement = await waitForElement('ytd-watch-flexy');
	const videoElement = await waitForElement("video.html5-main-video");

	function updateTitle() {
		if (flexyElement.hasAttribute('hidden')) {
			clearTitle();
			return;
		}

		const title = titleElement.innerHTML.replace(" - YouTube", "");
		fetch("http://localhost:3000", { method: "POST", body: title });
	}

	function clearTitle() {
		fetch("http://localhost:3000", { method: "DELETE", keepalive: true });
	}

	new MutationObserver(updateTitle).observe(titleElement, { childList: true });

	videoElement.addEventListener("play", updateTitle);
	videoElement.addEventListener("pause", clearTitle);
	videoElement.addEventListener("complete", clearTitle);
	window.addEventListener("beforeunload", clearTitle);
}

main();