Add notifications plugin (notify of song on play event)

plugins/notifications/actions.js

@@ -0,0 +1,18 @@
+const { triggerAction } = require("../utils");
+
+const CHANNEL = "notification";
+const ACTIONS = {
+	NOTIFICATION: "notification",
+};
+
+function notify(info) {
+	triggerAction(CHANNEL, ACTIONS.NOTIFICATION, info);
+}
+
+module.exports = {
+	CHANNEL,
+	ACTIONS,
+	global: {
+		notify,
+	},
+};

plugins/notifications/back.js

@@ -0,0 +1,33 @@
+const { nativeImage, Notification } = require("electron");
+
+const { listenAction } = require("../utils");
+const { ACTIONS, CHANNEL } = require("./actions.js");
+
+function notify(info) {
+	let notificationImage = "assets/youtube-music.png";
+	if (info.image) {
+		notificationImage = nativeImage.createFromDataURL(info.image);
+	}
+
+	const notification = {
+		title: info.title || "Playing",
+		body: info.artist,
+		icon: notificationImage,
+		silent: true,
+	};
+	new Notification(notification).show();
+}
+
+function listenAndNotify() {
+	listenAction(CHANNEL, (event, action, imageSrc) => {
+		switch (action) {
+			case ACTIONS.NOTIFICATION:
+				notify(imageSrc);
+				break;
+			default:
+				console.log("Unknown action: " + action);
+		}
+	});
+}
+
+module.exports = listenAndNotify;

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;

plugins/utils.js

@@ -20,8 +20,8 @@ module.exports.templatePath = (pluginPath, name) => {
 	return path.join(pluginPath, "templates", name);
 };
 
-module.exports.triggerAction = (channel, action) => {
+module.exports.triggerAction = (channel, action, ...args) => {
-	return ipcRenderer.send(channel, action);
+	return ipcRenderer.send(channel, action, ...args);
 };
 
 module.exports.listenAction = (channel, callback) => {