Add notifications plugin (notify of song on play event)

plugins/notifications/front.js

@@ -0,0 +1,86 @@
+let videoElement = null;
+let image = null;
+
+const observer = new MutationObserver((mutations, observer) => {
+	if (!videoElement) {
+		videoElement = document.querySelector("video");
+	}
+
+	if (!image) {
+		image = document.querySelector(".ytmusic-player-bar.image");
+	}
+
+	if (videoElement !== null && image !== null) {
+		observer.disconnect();
+		let notificationImage = null;
+
+		videoElement.addEventListener("play", () => {
+			notify({
+				title: getTitle(),
+				artist: getArtist(),
+				image: notificationImage,
+			});
+		});
+
+		image.addEventListener("load", () => {
+			notificationImage = null;
+			const imageInBase64 = convertImageToBase64(image);
+			if (image && image.complete && image.naturalHeight !== 0) {
+				notificationImage = imageInBase64;
+			}
+		});
+	}
+});
+
+// Convert an image (DOM element) to base64 string
+const convertImageToBase64 = (image, size = 256) => {
+	image.setAttribute("crossorigin", "anonymous");
+
+	const c = document.createElement("canvas");
+	c.height = size;
+	c.width = size;
+
+	const ctx = c.getContext("2d");
+	ctx.drawImage(
+		image,
+		0,
+		0,
+		image.naturalWidth,
+		image.naturalHeight,
+		0,
+		0,
+		c.width,
+		c.height
+	);
+
+	const imageInBase64 = c.toDataURL();
+	return imageInBase64;
+};
+
+const getTitle = () => {
+	const title = document.querySelector(".title.ytmusic-player-bar").textContent;
+	return title;
+};
+
+const getArtist = () => {
+	const bar = document.querySelectorAll(".subtitle.ytmusic-player-bar")[0];
+	let artist;
+
+	if (bar.querySelectorAll(".yt-simple-endpoint.yt-formatted-string")[0]) {
+		artist = bar.querySelectorAll(".yt-simple-endpoint.yt-formatted-string")[0]
+			.textContent;
+	} else if (bar.querySelectorAll(".byline.ytmusic-player-bar")[0]) {
+		artist = bar.querySelectorAll(".byline.ytmusic-player-bar")[0].textContent;
+	}
+
+	return artist;
+};
+
+const observeVideoAndThumbnail = () => {
+	observer.observe(document, {
+		childList: true,
+		subtree: true,
+	});
+};
+
+module.exports = observeVideoAndThumbnail;