Merge pull request #303 from th-ch/dependabot/npm_and_yarn/ws-7.4.6

Bump ws from 7.4.3 to 7.4.6

config/defaults.js

@@ -15,26 +15,55 @@ const defaultConfig = {
 		trayClickPlayPause: false,
 		autoResetAppCache: false,
 		resumeOnStart: true,
+		proxy: "",
 	},
 	plugins: {
 		// Enabled plugins
 		navigation: {
 			enabled: true,
 		},
-		shortcuts: {
-			enabled: true,
-		},
 		adblocker: {
 			enabled: true,
 			cache: true,
 			additionalBlockLists: [], // Additional list of filters, e.g "https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt"
 		},
 		// Disabled plugins
+		shortcuts: {
+			enabled: false,
+		},
 		downloader: {
 			enabled: false,
 			ffmpegArgs: [], // e.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
 			downloadFolder: undefined, // Custom download folder (absolute path)
 		},
+		"last-fm": {
+			enabled: false,
+			api_root: "http://ws.audioscrobbler.com/2.0/",
+			api_key: "04d76faaac8726e60988e14c105d421a", // api key registered by @semvis123
+			secret: "a5d2a36fdf64819290f6982481eaffa2",
+		},
+		discord: {
+			enabled: false,
+			activityTimoutEnabled: true, // if enabled, the discord rich presence gets cleared when music paused after the time specified below
+			activityTimoutTime: 10 * 60 * 1000 // 10 minutes
+		},
+		notifications: {
+			enabled: false,
+			unpauseNotification: false,
+			urgency: "normal", //has effect only on Linux 
+			interactive: false //has effect only on Windows
+		},
+		"precise-volume": {
+			enabled: false,
+			steps: 1, //percentage of volume to change
+			arrowsShortcut: true, //enable ArrowUp + ArrowDown local shortcuts
+			globalShortcuts: {
+				enabled: false, // enable global shortcuts
+				volumeUp: "Shift+PageUp", // Keybind default can be changed
+				volumeDown: "Shift+PageDown"
+			},
+			savedVolume: undefined //plugin save volume between session here
+		}
 	},
 };
 

config/plugins.js

@@ -24,6 +24,10 @@ function setOptions(plugin, options) {
 	});
 }
 
+function getOptions(plugin) {
+	return store.get("plugins")[plugin];
+}
+
 function enable(plugin) {
 	setOptions(plugin, { enabled: true });
 }
@@ -38,4 +42,5 @@ module.exports = {
 	enable,
 	disable,
 	setOptions,
+	getOptions,
 };

index.js

@@ -11,6 +11,7 @@ const { setApplicationMenu } = require("./menu");
 const { fileExists, injectCSS } = require("./plugins/utils");
 const { isTesting } = require("./utils/testing");
 const { setUpTray } = require("./tray");
+const { setupSongInfo } = require("./providers/song-info");
 
 // Catch errors and log them
 unhandled({
@@ -32,6 +33,10 @@ if (config.get("options.disableHardwareAcceleration")) {
 	app.disableHardwareAcceleration();
 }
 
+if (config.get("options.proxy")) {
+	app.commandLine.appendSwitch("proxy-server", config.get("options.proxy"));
+}
+
 // Adds debug features like hotkeys for triggering dev tools and reload
 require("electron-debug")();
 
@@ -75,6 +80,7 @@ function createMainWindow() {
 	const windowSize = config.get("window-size");
 	const windowMaximized = config.get("window-maximized");
 	const windowPosition = config.get("window-position");
+	const useInlineMenu = config.plugins.isEnabled("in-app-menu");
 
 	const win = new electron.BrowserWindow({
 		icon: icon,
@@ -93,14 +99,18 @@ function createMainWindow() {
 			affinity: "main-window", // main window, and addition windows should work in one process
 			...(isTesting()
 				? {
-						// Only necessary when testing with Spectron
-						contextIsolation: false,
-						nodeIntegration: true,
-				  }
+					// Only necessary when testing with Spectron
+					contextIsolation: false,
+					nodeIntegration: true,
+				}
 				: undefined),
 		},
-		frame: !is.macOS(),
-		titleBarStyle: is.macOS() ? "hiddenInset" : "default",
+		frame: !is.macOS() && !useInlineMenu,
+		titleBarStyle: useInlineMenu
+			? "hidden"
+			: is.macOS()
+			? "hiddenInset"
+			: "default",
 		autoHideMenuBar: config.get("options.hideMenu"),
 	});
 	if (windowPosition) {
@@ -133,7 +143,11 @@ function createMainWindow() {
 			});
 		}
 	});
-
+	
+	win.webContents.on("render-process-gone", (event, webContents, details) => {
+		showUnresponsiveDialog(win, details);
+	});
+	
 	win.once("ready-to-show", () => {
 		if (config.get("options.appVisible")) {
 			win.show();
@@ -143,14 +157,35 @@ function createMainWindow() {
 	return win;
 }
 
-app.on("browser-window-created", (event, win) => {
+app.once("browser-window-created", (event, win) => {
+	setupSongInfo(win);
 	loadPlugins(win);
 
-	win.webContents.on("did-fail-load", () => {
+	win.webContents.on("did-fail-load", (
+		_event,
+		errorCode,
+		errorDescription,
+		validatedURL,
+		isMainFrame,
+		frameProcessId,
+		frameRoutingId,
+	) => {
+		const log = JSON.stringify({
+			error: "did-fail-load",
+			errorCode,
+			errorDescription,
+			validatedURL,
+			isMainFrame,
+			frameProcessId,
+			frameRoutingId,
+		}, null, "\t");
 		if (is.dev()) {
-			console.log("did fail load");
+			console.log(log);
+		}
+		if( !(config.plugins.isEnabled("in-app-menu") && errorCode === -3)) { // -3 is a false positive with in-app-menu
+			win.webContents.send("log", log);
+			win.webContents.loadFile(path.join(__dirname, "error.html"));
 		}
-		win.webContents.loadFile(path.join(__dirname, "error.html"));
 	});
 
 	win.webContents.on("will-prevent-unload", (event) => {
@@ -222,6 +257,35 @@ app.on("ready", () => {
 		}, 20000);
 	}
 
+	// Register appID on windows
+	if (is.windows()) {
+		const appID = "com.github.th-ch.youtube-music";
+		app.setAppUserModelId(appID);
+		const appLocation = process.execPath;
+		const appData = app.getPath("appData");
+		// check shortcut validity if not in dev mode / running portable app
+		if (!is.dev() && !appLocation.startsWith(path.join(appData, "..", "Local", "Temp"))) {
+			const shortcutPath = path.join(appData, "Microsoft", "Windows", "Start Menu", "Programs", "YouTube Music.lnk");
+			try { // check if shortcut is registered and valid
+				const shortcutDetails = electron.shell.readShortcutLink(shortcutPath); // throw error if doesn't exist yet
+				if (shortcutDetails.target !== appLocation || shortcutDetails.appUserModelId !== appID) {
+					throw "needUpdate";
+				}
+			} catch (error) { // if not valid -> Register shortcut
+				electron.shell.writeShortcutLink(
+					shortcutPath,
+					error === "needUpdate" ? "update" : "create",
+					{
+						target: appLocation,
+						cwd: appLocation.slice(0, appLocation.lastIndexOf(path.sep)),
+						description: "YouTube Music Desktop App - including custom plugins",
+						appUserModelId: appID
+					}
+				);
+			}
+		}
+	}
+
 	mainWindow = createMainWindow();
 	setApplicationMenu(mainWindow);
 	if (config.get("options.restartOnConfigChanges")) {
@@ -270,13 +334,11 @@ app.on("ready", () => {
 	}
 
 	// Optimized for Mac OS X
-	if (is.macOS()) {
-		if (!config.get("options.appVisible")) {
-			app.dock.hide();
-		}
+	if (is.macOS() && !config.get("options.appVisible")) {
+		app.dock.hide();
 	}
 
-	var forceQuit = false;
+	let forceQuit = false;
 	app.on("before-quit", () => {
 		forceQuit = true;
 	});
@@ -291,3 +353,27 @@ app.on("ready", () => {
 		});
 	}
 });
+
+function showUnresponsiveDialog(win, details) {
+	if (!!details) {
+		console.log("Unresponsive Error!\n"+JSON.stringify(details, null, "\t"))
+	}
+	electron.dialog.showMessageBox(win, {
+		type: "error",
+		title: "Window Unresponsive",
+		message: "The Application is Unresponsive",
+		details: "We are sorry for the inconvenience! please choose what to do:",
+		buttons: ["Wait", "Relaunch", "Quit"],
+		cancelId: 0
+	}).then( result => {
+		switch (result.response) {
+			case 1: //if relaunch - relaunch+exit
+				app.relaunch();
+			case 2:
+				app.quit();
+				break;
+			default:
+				break; 
+		}
+	});
+}

menu.js

@@ -1,34 +1,54 @@
+const { existsSync } = require("fs");
+const path = require("path");
+
 const { app, Menu } = require("electron");
 const is = require("electron-is");
 
 const { getAllPlugins } = require("./plugins/utils");
 const config = require("./config");
 
+const pluginEnabledMenu = (win, plugin, label = "", hasSubmenu = false) => ({
+	label: label || plugin,
+	type: "checkbox",
+	checked: config.plugins.isEnabled(plugin),
+	//Submenu check used in in-app-menu
+	hasSubmenu: hasSubmenu || undefined,
+	click: (item) => {
+		if (item.checked) {
+			config.plugins.enable(plugin);
+		} else {
+			config.plugins.disable(plugin);
+		}
+		if (hasSubmenu) {
+			this.setApplicationMenu(win);
+		}
+	},
+});
+
 const mainMenuTemplate = (win) => [
 	{
 		label: "Plugins",
 		submenu: [
 			...getAllPlugins().map((plugin) => {
-				return {
-					label: plugin,
-					type: "checkbox",
-					checked: config.plugins.isEnabled(plugin),
-					click: (item) => {
-						if (item.checked) {
-							config.plugins.enable(plugin);
-						} else {
-							config.plugins.disable(plugin);
-						}
-					},
-				};
+				const pluginPath = path.join(__dirname, "plugins", plugin, "menu.js")
+				if (existsSync(pluginPath)) {
+					if (!config.plugins.isEnabled(plugin)) {
+						return pluginEnabledMenu(win, plugin, "", true);
+					}
+					const getPluginMenu = require(pluginPath);
+					return {
+						label: plugin,
+						submenu: [
+							pluginEnabledMenu(win, plugin, "Enabled", true),
+							...getPluginMenu(win, config.plugins.getOptions(plugin), () =>
+								module.exports.setApplicationMenu(win)
+							),
+						],
+					};
+				}
+
+				return pluginEnabledMenu(win, plugin);
 			}),
-			{ type: "separator" },
-			{
-				label: "Advanced options",
-				click: () => {
-					config.edit();
-				},
-			},
 		],
 	},
 	{
@@ -42,30 +62,6 @@ const mainMenuTemplate = (win) => [
 					config.set("options.autoUpdates", item.checked);
 				},
 			},
-			{
-				label: "Disable hardware acceleration",
-				type: "checkbox",
-				checked: config.get("options.disableHardwareAcceleration"),
-				click: (item) => {
-					config.set("options.disableHardwareAcceleration", item.checked);
-				},
-			},
-			{
-				label: "Restart on config changes",
-				type: "checkbox",
-				checked: config.get("options.restartOnConfigChanges"),
-				click: (item) => {
-					config.set("options.restartOnConfigChanges", item.checked);
-				},
-			},
-			{
-				label: "Reset App cache when app starts",
-				type: "checkbox",
-				checked: config.get("options.autoResetAppCache"),
-				click: (item) => {
-					config.set("options.autoResetAppCache", item.checked);
-				},
-			},
 			{
 				label: "Resume last song when app starts",
 				type: "checkbox",
@@ -76,29 +72,29 @@ const mainMenuTemplate = (win) => [
 			},
 			...(is.windows() || is.linux()
 				? [
-						{
-							label: "Hide menu",
-							type: "checkbox",
-							checked: config.get("options.hideMenu"),
-							click: (item) => {
-								config.set("options.hideMenu", item.checked);
-							},
+					{
+						label: "Hide menu",
+						type: "checkbox",
+						checked: config.get("options.hideMenu"),
+						click: (item) => {
+							config.set("options.hideMenu", item.checked);
 						},
-				  ]
+					},
+				]
 				: []),
 			...(is.windows() || is.macOS()
 				? // Only works on Win/Mac
-				  // https://www.electronjs.org/docs/api/app#appsetloginitemsettingssettings-macos-windows
-				  [
-						{
-							label: "Start at login",
-							type: "checkbox",
-							checked: config.get("options.startAtLogin"),
-							click: (item) => {
-								config.set("options.startAtLogin", item.checked);
-							},
+				// https://www.electronjs.org/docs/api/app#appsetloginitemsettingssettings-macos-windows
+				[
+					{
+						label: "Start at login",
+						type: "checkbox",
+						checked: config.get("options.startAtLogin"),
+						click: (item) => {
+							config.set("options.startAtLogin", item.checked);
 						},
-				  ]
+					},
+				]
 				: []),
 			{
 				label: "Tray",
@@ -145,22 +141,126 @@ const mainMenuTemplate = (win) => [
 			},
 			{ type: "separator" },
 			{
-				label: "Toggle DevTools",
-				// Cannot use "toggleDevTools" role in MacOS
+				label: "Advanced options",
+				submenu: [
+					{
+						label: "Disable hardware acceleration",
+						type: "checkbox",
+						checked: config.get("options.disableHardwareAcceleration"),
+						click: (item) => {
+							config.set("options.disableHardwareAcceleration", item.checked);
+						},
+					},
+					{
+						label: "Restart on config changes",
+						type: "checkbox",
+						checked: config.get("options.restartOnConfigChanges"),
+						click: (item) => {
+							config.set("options.restartOnConfigChanges", item.checked);
+						},
+					},
+					{
+						label: "Reset App cache when app starts",
+						type: "checkbox",
+						checked: config.get("options.autoResetAppCache"),
+						click: (item) => {
+							config.set("options.autoResetAppCache", item.checked);
+						},
+					},
+					{ type: "separator" },
+					{
+						label: "Toggle DevTools",
+						// Cannot use "toggleDevTools" role in MacOS
+						click: () => {
+							const { webContents } = win;
+							if (webContents.isDevToolsOpened()) {
+								webContents.closeDevTools();
+							} else {
+								const devToolsOptions = {};
+								webContents.openDevTools(devToolsOptions);
+							}
+						},
+					},
+					{
+						label: "Edit config.json",
+						click: () => {
+							config.edit();
+						},
+					},
+				]
+			},
+		],
+	},
+	{
+		label: "View",
+		submenu: [
+			{
+				label: "Reload",
 				click: () => {
-					const { webContents } = win;
-					if (webContents.isDevToolsOpened()) {
-						webContents.closeDevTools();
-					} else {
-						const devToolsOptions = {};
-						webContents.openDevTools(devToolsOptions);
+					win.webContents.reload();
+				},
+			},
+			{
+				label: "Force Reload",
+				click: () => {
+					win.webContents.reloadIgnoringCache();
+				},
+			},
+			{ type: "separator" },
+			{
+				label: "Zoom In",
+				click: () => {
+					win.webContents.setZoomLevel(
+						win.webContents.getZoomLevel() + 1
+					);
+				},
+			},
+			{
+				label: "Zoom Out",
+				click: () => {
+					win.webContents.setZoomLevel(
+						win.webContents.getZoomLevel() - 1
+					);
+				},
+			},
+			{
+				label: "Reset Zoom",
+				click: () => {
+					win.webContents.setZoomLevel(0);
+				},
+			},
+		],
+	},
+	{
+		label: "Navigation",
+		submenu: [
+			{
+				label: "Go back",
+				click: () => {
+					if (win.webContents.canGoBack()) {
+						win.webContents.goBack();
 					}
 				},
 			},
 			{
-				label: "Advanced options",
+				label: "Go forward",
 				click: () => {
-					config.edit();
+					if (win.webContents.canGoForward()) {
+						win.webContents.goForward();
+					}
+				},
+			},
+			{
+				label: "Restart App",
+				click: () => {
+					app.relaunch();
+					app.quit();
+				},
+			},
+			{
+				label: "Quit App",
+				click: () => {
+					app.quit();
 				},
 			},
 		],

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version": "1.11.0",
+	"version": "1.12.1",
 	"description": "YouTube Music Desktop App - including custom plugins",
 	"license": "MIT",
 	"repository": "th-ch/youtube-music",
@@ -42,6 +42,7 @@
 	"scripts": {
 		"test": "jest",
 		"start": "electron .",
+		"start:debug": "ELECTRON_ENABLE_LOGGING=1 electron .",
 		"icon": "rimraf assets/generated && electron-icon-maker --input=assets/youtube-music.png --output=assets/generated",
 		"generate:package": "node utils/generate-package-json.js",
 		"postinstall": "yarn run icon && yarn run plugins",
@@ -62,33 +63,38 @@
 		"npm": "Please use yarn and not npm"
 	},
 	"dependencies": {
-		"@cliqz/adblocker-electron": "^1.20.0",
-		"@ffmpeg/core": "^0.8.5",
+		"@cliqz/adblocker-electron": "^1.20.5",
+		"@ffmpeg/core": "^0.9.0",
 		"@ffmpeg/ffmpeg": "^0.9.7",
-		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.8.1",
+		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.9.0",
+		"async-mutex": "^0.3.1",
 		"browser-id3-writer": "^4.4.0",
+		"chokidar": "^3.5.1",
+		"custom-electron-titlebar": "^3.2.6",
 		"discord-rpc": "^3.2.0",
-		"downloads-folder": "^3.0.1",
 		"electron-debug": "^3.2.0",
 		"electron-is": "^3.0.0",
 		"electron-localshortcut": "^3.2.1",
-		"electron-store": "^7.0.2",
+		"electron-store": "^7.0.3",
 		"electron-unhandled": "^3.0.2",
-		"electron-updater": "^4.3.6",
-		"filenamify": "^4.2.0",
+		"electron-updater": "^4.3.8",
+		"filenamify": "^4.3.0",
+		"md5": "^2.3.0",
 		"node-fetch": "^2.6.1",
-		"ytdl-core": "^4.4.5"
+		"node-notifier": "^9.0.1",
+		"ytdl-core": "^4.7.0",
+		"ytpl": "^2.2.0"
 	},
 	"devDependencies": {
-		"electron": "^11.2.3",
-		"electron-builder": "^22.9.1",
+		"electron": "^12.0.8",
+		"electron-builder": "^22.10.5",
 		"electron-devtools-installer": "^3.1.1",
 		"electron-icon-maker": "0.0.5",
 		"get-port": "^5.1.1",
 		"jest": "^26.6.3",
 		"rimraf": "^3.0.2",
-		"spectron": "^13.0.0",
-		"xo": "^0.37.1"
+		"spectron": "^14.0.0",
+		"xo": "^0.38.2"
 	},
 	"resolutions": {
 		"yargs-parser": "18.1.3"
@@ -97,6 +103,16 @@
 		"envs": [
 			"node",
 			"browser"
-		]
+		],
+		"rules": {
+			"quotes": [
+				"error",
+				"double",
+				{
+					"avoidEscape": true,
+					"allowTemplateLiterals": true
+				}
+			]
+		}
 	}
 }

plugins/discord/back.js

@@ -1,6 +1,6 @@
 const Discord = require("discord-rpc");
 
-const getSongInfo = require("../../providers/song-info");
+const registerCallback = require("../../providers/song-info");
 
 const rpc = new Discord.Client({
 	transport: "ipc",
@@ -9,27 +9,38 @@ const rpc = new Discord.Client({
 // Application ID registered by @semvis123
 const clientId = "790655993809338398";
 
-module.exports = (win) => {
-	const registerCallback = getSongInfo(win);
+let clearActivity;
 
+module.exports = (win, {activityTimoutEnabled, activityTimoutTime}) => {
 	// If the page is ready, register the callback
-	win.on("ready-to-show", () => {
-		rpc.on("ready", () => {
+	win.once("ready-to-show", () => {
+		rpc.once("ready", () => {
 			// Register the callback
 			registerCallback((songInfo) => {
+				if (songInfo.title.length === 0 && songInfo.artist.length === 0) {
+					return;
+				}
 				// Song information changed, so lets update the rich presence
 				const activityInfo = {
 					details: songInfo.title,
 					state: songInfo.artist,
 					largeImageKey: "logo",
-					largeImageText: songInfo.views + " - " + songInfo.likes,
+					largeImageText: [
+						songInfo.uploadDate,
+						songInfo.views.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " views"
+					].join(' || '),
 				};
 
 				if (songInfo.isPaused) {
 					// Add an idle icon to show that the song is paused
 					activityInfo.smallImageKey = "idle";
 					activityInfo.smallImageText = "idle/paused";
+					// Set start the timer so the activity gets cleared after a while if enabled
+					if (activityTimoutEnabled)
+						clearActivity = setTimeout(()=>rpc.clearActivity(), activityTimoutTime||10000);
 				} else {
+					// stop the clear activity timout
+					clearTimeout(clearActivity);
 					// Add the start and end time of the song
 					const songStartTime = Date.now() - songInfo.elapsedSeconds * 1000;
 					activityInfo.startTimestamp = songStartTime;
@@ -42,10 +53,6 @@ module.exports = (win) => {
 		});
 
 		// Startup the rpc client
-		rpc
-			.login({
-				clientId,
-			})
-			.catch(console.error);
+		rpc.login({ clientId }).catch(console.error);
 	});
 };

plugins/downloader/actions.js

@@ -2,6 +2,7 @@ const CHANNEL = "downloader";
 const ACTIONS = {
 	ERROR: "error",
 	METADATA: "metadata",
+	PROGRESS: "progress",
 };
 
 module.exports = {

plugins/downloader/back.js

@@ -4,59 +4,71 @@ const { join } = require("path");
 const ID3Writer = require("browser-id3-writer");
 const { dialog, ipcMain } = require("electron");
 
-const getSongInfo = require("../../providers/song-info");
+const registerCallback = require("../../providers/song-info");
 const { injectCSS, listenAction } = require("../utils");
+const { cropMaxWidth } = require("./utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
+const { getImage } = require("../../providers/song-info");
 
-const sendError = (win, err) => {
-	const dialogOpts = {
+const sendError = (win, error) => {
+	win.setProgressBar(-1); // close progress bar
+	dialog.showMessageBox({
 		type: "info",
 		buttons: ["OK"],
 		title: "Error in download!",
 		message: "Argh! Apologies, download failed…",
-		detail: err.toString(),
-	};
-	dialog.showMessageBox(dialogOpts);
+		detail: error.toString(),
+	});
 };
 
-let metadata = {};
+let nowPlayingMetadata = {};
 
 function handle(win) {
 	injectCSS(win.webContents, join(__dirname, "style.css"));
-	const registerCallback = getSongInfo(win);
 	registerCallback((info) => {
-		metadata = info;
+		nowPlayingMetadata = info;
 	});
 
-	listenAction(CHANNEL, (event, action, error) => {
+	listenAction(CHANNEL, (event, action, arg) => {
 		switch (action) {
-			case ACTIONS.ERROR:
-				sendError(win, error);
+			case ACTIONS.ERROR: // arg = error
+				sendError(win, arg);
 				break;
 			case ACTIONS.METADATA:
-				event.returnValue = JSON.stringify(metadata);
+				event.returnValue = JSON.stringify(nowPlayingMetadata);
+				break;
+			case ACTIONS.PROGRESS: // arg = progress
+				win.setProgressBar(arg);
 				break;
 			default:
 				console.log("Unknown action: " + action);
 		}
 	});
 
-	ipcMain.on("add-metadata", (event, filePath, songBuffer) => {
+	ipcMain.on("add-metadata", async (event, filePath, songBuffer, currentMetadata) => {
 		let fileBuffer = songBuffer;
+		const songMetadata = currentMetadata.imageSrcYTPL ? // This means metadata come from ytpl.getInfo();
+			{
+				...currentMetadata,
+				image: cropMaxWidth(await getImage(currentMetadata.imageSrcYTPL))
+			} :
+			{ ...nowPlayingMetadata, ...currentMetadata };
 
 		try {
-			const coverBuffer = metadata.image.toPNG();
+			const coverBuffer = songMetadata.image ? songMetadata.image.toPNG() : null;
 			const writer = new ID3Writer(songBuffer);
 
 			// Create the metadata tags
 			writer
-				.setFrame("TIT2", metadata.title)
-				.setFrame("TPE1", [metadata.artist])
-				.setFrame("APIC", {
+				.setFrame("TIT2", songMetadata.title)
+				.setFrame("TPE1", [songMetadata.artist]);
+			if (coverBuffer) {
+				writer.setFrame("APIC", {
 					type: 3,
 					data: coverBuffer,
-					description: "",
+					description: ""
 				});
+			}
 			writer.addTag();
 			fileBuffer = Buffer.from(writer.arrayBuffer);
 		} catch (error) {
@@ -70,3 +82,4 @@ function handle(win) {
 }
 
 module.exports = handle;
+module.exports.sendError = sendError;

plugins/downloader/front.js

@@ -1,5 +1,6 @@
 const { contextBridge } = require("electron");
 
+const { defaultConfig } = require("../../config");
 const { getSongMenu } = require("../../providers/dom-elements");
 const { ElementFromFile, templatePath, triggerAction } = require("../utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
@@ -24,6 +25,7 @@ const observer = new MutationObserver((mutations, observer) => {
 });
 
 const reinit = () => {
+	triggerAction(CHANNEL, ACTIONS.PROGRESS, -1); // closes progress bar
 	if (!progress) {
 		console.warn("Cannot update progress");
 	} else {
@@ -31,27 +33,45 @@ const reinit = () => {
 	}
 };
 
+const baseUrl = defaultConfig.url;
+
 // TODO: re-enable once contextIsolation is set to true
 // contextBridge.exposeInMainWorld("downloader", {
 // 	download: () => {
 global.download = () => {
-	const videoUrl = window.location.href;
+	triggerAction(CHANNEL, ACTIONS.PROGRESS, 2); // starts with indefinite progress bar
+	let metadata;
+	let videoUrl = getSongMenu()
+		// selector of first button which is always "Start Radio"
+		?.querySelector('ytmusic-menu-navigation-item-renderer.iron-selected[tabindex="0"] #navigation-endpoint')
+		?.getAttribute("href");
+	if (videoUrl) {
+		videoUrl = baseUrl + "/" + videoUrl;
+		metadata = null;
+	} else {
+		metadata = global.songInfo;
+		videoUrl = metadata.url || window.location.href;
+	}
 
 	downloadVideoToMP3(
 		videoUrl,
-		(feedback) => {
+		(feedback, ratio = undefined) => {
 			if (!progress) {
 				console.warn("Cannot update progress");
 			} else {
 				progress.innerHTML = feedback;
 			}
+			if (ratio) {
+				triggerAction(CHANNEL, ACTIONS.PROGRESS, ratio);
+			}
 		},
 		(error) => {
 			triggerAction(CHANNEL, ACTIONS.ERROR, error);
 			reinit();
 		},
 		reinit,
-		pluginOptions
+		pluginOptions,
+		metadata
 	);
 };
 // });

plugins/downloader/menu.js

@@ -0,0 +1,115 @@
+const { existsSync, mkdirSync } = require("fs");
+const { join } = require("path");
+const { URL } = require("url");
+
+const { dialog } = require("electron");
+const is = require("electron-is");
+const ytpl = require("ytpl");
+const chokidar = require('chokidar');
+
+const { setOptions } = require("../../config/plugins");
+const registerCallback = require("../../providers/song-info");
+const { sendError } = require("./back");
+const { defaultMenuDownloadLabel, getFolder } = require("./utils");
+
+let downloadLabel = defaultMenuDownloadLabel;
+let metadataURL = undefined;
+let callbackIsRegistered = false;
+
+module.exports = (win, options) => {
+	if (!callbackIsRegistered) {
+		registerCallback((info) => {
+			metadataURL = info.url;
+		});
+		callbackIsRegistered = true;
+	}
+
+	return [
+		{
+			label: downloadLabel,
+			click: async () => {
+				const currentURL = metadataURL || win.webContents.getURL();
+				const playlistID = new URL(currentURL).searchParams.get("list");
+				if (!playlistID) {
+					sendError(win, new Error("No playlist ID found"));
+					return;
+				}
+
+				console.log(`trying to get playlist ID: '${playlistID}'`);
+				let playlist;
+				try {
+					playlist = await ytpl(playlistID, {
+						limit: options.playlistMaxItems || Infinity,
+					});
+				} catch (e) {
+					sendError(win, e);
+					return;
+				}
+				const playlistTitle = playlist.title;
+
+				const folder = getFolder(options.downloadFolder);
+				const playlistFolder = join(folder, playlistTitle);
+				if (existsSync(playlistFolder)) {
+					sendError(
+						win,
+						new Error(`The folder ${playlistFolder} already exists`)
+					);
+					return;
+				}
+				mkdirSync(playlistFolder, { recursive: true });
+
+				dialog.showMessageBox({
+					type: "info",
+					buttons: ["OK"],
+					title: "Started Download",
+					message: `Downloading Playlist "${playlistTitle}"`,
+					detail: `(${playlist.items.length} songs)`,
+				});
+
+				if (is.dev()) {
+					console.log(
+						`Downloading playlist "${playlistTitle}" (${playlist.items.length} songs)`
+					);
+				}
+
+				const steps = 1 / playlist.items.length;
+				let progress = 0;
+
+				win.setProgressBar(2); // starts with indefinite bar
+
+				let dirWatcher = chokidar.watch(playlistFolder);
+				dirWatcher.on('add', () => {
+					progress += steps;
+					if (progress >= 0.9999) {
+						win.setProgressBar(-1); // close progress bar
+						dirWatcher.close().then(() => dirWatcher = null);
+					} else {
+						win.setProgressBar(progress);
+					}
+				});
+
+				playlist.items.forEach((song) => {
+					win.webContents.send(
+						"downloader-download-playlist",
+						song.url,
+						playlistTitle,
+						options
+					);
+				});
+			},
+		},
+		{
+			label: "Choose download folder",
+			click: () => {
+				let result = dialog.showOpenDialogSync({
+					properties: ["openDirectory", "createDirectory"],
+					defaultPath: getFolder(options.downloadFolder),
+				});
+				if (result) {
+					options.downloadFolder = result[0];
+					setOptions("downloader", options);
+				} // else = user pressed cancel
+			},
+		},
+	];
+};

plugins/downloader/templates/download.html

@@ -19,11 +19,11 @@
 			<g class="style-scope yt-icon">
 				<path
 					d="M25.462,19.105v6.848H4.515v-6.848H0.489v8.861c0,1.111,0.9,2.012,2.016,2.012h24.967c1.115,0,2.016-0.9,2.016-2.012v-8.861H25.462z"
-					class="style-scope yt-icon"
+					class="style-scope yt-icon" fill="#aaaaaa"
 				/>
 				<path
 					d="M14.62,18.426l-5.764-6.965c0,0-0.877-0.828,0.074-0.828s3.248,0,3.248,0s0-0.557,0-1.416c0-2.449,0-6.906,0-8.723c0,0-0.129-0.494,0.615-0.494c0.75,0,4.035,0,4.572,0c0.536,0,0.524,0.416,0.524,0.416c0,1.762,0,6.373,0,8.742c0,0.768,0,1.266,0,1.266s1.842,0,2.998,0c1.154,0,0.285,0.867,0.285,0.867s-4.904,6.51-5.588,7.193C15.092,18.979,14.62,18.426,14.62,18.426z"
-					class="style-scope yt-icon"
+					class="style-scope yt-icon" fill="#aaaaaa"
 				/>
 			</g>
 		</svg>

plugins/downloader/utils.js

@@ -0,0 +1,31 @@
+const electron = require("electron");
+
+module.exports.getFolder = (customFolder) =>
+	customFolder || (electron.app || electron.remote.app).getPath("downloads");
+module.exports.defaultMenuDownloadLabel = "Download playlist";
+
+const orderedQualityList = ["maxresdefault", "hqdefault", "mqdefault", "sdddefault"];
+module.exports.urlToJPG = (imgUrl, videoId) => {
+	if (!imgUrl || imgUrl.includes(".jpg")) return imgUrl;
+	//it will almost never get further than hqdefault
+	for (const quality of orderedQualityList) {
+		if (imgUrl.includes(quality)) {
+			return `https://img.youtube.com/vi/${videoId}/${quality}.jpg`;
+		}
+	}
+	return `https://img.youtube.com/vi/${videoId}/default.jpg`;
+}
+
+module.exports.cropMaxWidth = (image) => {
+	const imageSize = image.getSize();
+	// standart youtube artwork width with margins from both sides is 280 + 720 + 280
+	if (imageSize.width === 1280 && imageSize.height === 720) {
+		return image.crop({
+			x: 280,
+			y: 0,
+			width: 720,
+			height: 720
+		});
+	}
+	return image;
+}

plugins/downloader/youtube-dl.js

@@ -1,7 +1,7 @@
 const { randomBytes } = require("crypto");
 const { join } = require("path");
 
-const downloadsFolder = require("downloads-folder");
+const Mutex = require("async-mutex").Mutex;
 const { ipcRenderer } = require("electron");
 const is = require("electron-is");
 const filenamify = require("filenamify");
@@ -12,8 +12,10 @@ const filenamify = require("filenamify");
 const FFmpeg = require("@ffmpeg/ffmpeg/dist/ffmpeg.min");
 const ytdl = require("ytdl-core");
 
-const { triggerActionSync } = require("../utils");
+const { triggerAction, triggerActionSync } = require("../utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
+const { getFolder, urlToJPG } = require("./utils");
+const { cleanupArtistName } = require("../../providers/song-info");
 
 const { createFFmpeg } = FFmpeg;
 const ffmpeg = createFFmpeg({
@@ -21,16 +23,31 @@ const ffmpeg = createFFmpeg({
 	logger: () => {}, // console.log,
 	progress: () => {}, // console.log,
 });
+const ffmpegMutex = new Mutex();
 
-const downloadVideoToMP3 = (
+const downloadVideoToMP3 = async (
 	videoUrl,
 	sendFeedback,
 	sendError,
 	reinit,
-	options
+	options,
+	metadata = undefined,
+	subfolder = ""
 ) => {
 	sendFeedback("Downloading…");
 
+	if (metadata === null) {
+		const { videoDetails } = await ytdl.getInfo(videoUrl);
+		const thumbnails = videoDetails?.thumbnails;
+		metadata = {
+			artist: videoDetails?.media?.artist || cleanupArtistName(videoDetails?.author?.name) || "",
+			title: videoDetails?.media?.song || videoDetails?.title || "",
+			imageSrcYTPL: thumbnails ? 
+				urlToJPG(thumbnails[thumbnails.length - 1].url, videoDetails?.videoId)
+				: ""
+		}
+	}
+
 	let videoName = "YouTube Music - Unknown title";
 	let videoReadableStream;
 	try {
@@ -50,9 +67,10 @@ const downloadVideoToMP3 = (
 		.on("data", (chunk) => {
 			chunks.push(chunk);
 		})
-		.on("progress", (chunkLength, downloaded, total) => {
-			const progress = Math.floor((downloaded / total) * 100);
-			sendFeedback("Download: " + progress + "%");
+		.on("progress", (_chunkLength, downloaded, total) => {
+			const ratio = downloaded / total;
+			const progress = Math.floor(ratio * 100);
+			sendFeedback("Download: " + progress + "%", ratio);
 		})
 		.on("info", (info, format) => {
 			videoName = info.videoDetails.title.replace("|", "").toString("ascii");
@@ -66,9 +84,18 @@ const downloadVideoToMP3 = (
 			}
 		})
 		.on("error", sendError)
-		.on("end", () => {
+		.on("end", async () => {
 			const buffer = Buffer.concat(chunks);
-			toMP3(videoName, buffer, sendFeedback, sendError, reinit, options);
+			await toMP3(
+				videoName,
+				buffer,
+				sendFeedback,
+				sendError,
+				reinit,
+				options,
+				metadata,
+				subfolder
+			);
 		});
 };
 
@@ -78,14 +105,17 @@ const toMP3 = async (
 	sendFeedback,
 	sendError,
 	reinit,
-	options
+	options,
+	existingMetadata = undefined,
+	subfolder = ""
 ) => {
 	const safeVideoName = randomBytes(32).toString("hex");
 	const extension = options.extension || "mp3";
+	const releaseFFmpegMutex = await ffmpegMutex.acquire();
 
 	try {
 		if (!ffmpeg.isLoaded()) {
-			sendFeedback("Loading…");
+			sendFeedback("Loading…", 2); // indefinite progress bar after download
 			await ffmpeg.load();
 		}
 
@@ -93,7 +123,7 @@ const toMP3 = async (
 		ffmpeg.FS("writeFile", safeVideoName, buffer);
 
 		sendFeedback("Converting…");
-		const metadata = getMetadata();
+		const metadata = existingMetadata || getMetadata();
 		await ffmpeg.run(
 			"-i",
 			safeVideoName,
@@ -102,24 +132,30 @@ const toMP3 = async (
 			safeVideoName + "." + extension
 		);
 
-		const folder = options.downloadFolder || downloadsFolder();
-		const name = metadata
-			? `${metadata.artist} - ${metadata.title}`
+		const folder = getFolder(options.downloadFolder);
+		const name = metadata.title
+			? `${metadata.artist ? `${metadata.artist} - ` : ""}${metadata.title}`
 			: videoName;
 		const filename = filenamify(name + "." + extension, {
 			replacement: "_",
+			maxLength: 255,
 		});
 
+		const filePath = join(folder, subfolder, filename);
+		const fileBuffer = ffmpeg.FS("readFile", safeVideoName + "." + extension);
+
 		// Add the metadata
 		sendFeedback("Adding metadata…");
-		ipcRenderer.send(
-			"add-metadata",
-			join(folder, filename),
-			ffmpeg.FS("readFile", safeVideoName + "." + extension)
-		);
+		ipcRenderer.send("add-metadata", filePath, fileBuffer, {
+			artist: metadata.artist,
+			title: metadata.title,
+			imageSrcYTPL: metadata.imageSrcYTPL
+		});
 		ipcRenderer.once("add-metadata-done", reinit);
 	} catch (e) {
 		sendError(e);
+	} finally {
+		releaseFFmpegMutex();
 	}
 };
 
@@ -133,13 +169,28 @@ const getFFmpegMetadataArgs = (metadata) => {
 	}
 
 	return [
-		"-metadata",
-		`title=${metadata.title}`,
-		"-metadata",
-		`artist=${metadata.artist}`,
+		...(metadata.title ? ["-metadata", `title=${metadata.title}`] : []),
+		...(metadata.artist ? ["-metadata", `artist=${metadata.artist}`] : []),
 	];
 };
 
 module.exports = {
 	downloadVideoToMP3,
 };
+
+ipcRenderer.on(
+	"downloader-download-playlist",
+	(_, url, playlistFolder, options) => {
+		downloadVideoToMP3(
+			url,
+			() => {},
+			(error) => {
+				triggerAction(CHANNEL, ACTIONS.ERROR, error);
+			},
+			() => {},
+			options,
+			null,
+			playlistFolder
+		);
+	}
+);

plugins/in-app-menu/back.js

@@ -0,0 +1,83 @@
+const path = require("path");
+
+const { Menu } = require("electron");
+const electronLocalshortcut = require("electron-localshortcut");
+
+const config = require("../../config");
+const { setApplicationMenu } = require("../../menu");
+const { injectCSS } = require("../utils");
+
+//tracks menu visibility
+let visible = true;
+// win hook for fixing menu
+let win;
+
+const originalBuildMenu = Menu.buildFromTemplate;
+// This function natively gets called on all submenu so no more reason to use recursion
+Menu.buildFromTemplate = (template) => {
+	// Fix checkboxes and radio buttons
+	updateTemplate(template);
+
+	// return as normal
+	return originalBuildMenu(template);
+};
+
+module.exports = (winImport) => {
+	win = winImport;
+
+	// css for custom scrollbar + disable drag area(was causing bugs)
+	injectCSS(win.webContents, path.join(__dirname, "style.css"));
+
+	win.once("ready-to-show", () => {
+
+		setApplicationMenu(win);
+
+		//register keyboard shortcut && hide menu if hideMenu is enabled
+		if (config.get("options.hideMenu")) {
+			electronLocalshortcut.register(win, "Esc", () => {
+				switchMenuVisibility();
+			});
+		}
+	});
+
+	//set menu visibility on load
+	win.webContents.once("did-finish-load", () => {
+		// fix bug with menu not applying on start when no internet connection available
+		setMenuVisibility(!config.get("options.hideMenu"));
+	});
+};
+
+function switchMenuVisibility() {
+	setMenuVisibility(!visible);
+}
+
+function setMenuVisibility(value) {
+	visible = value;
+	win.webContents.send("updateMenu", visible);
+}
+
+function updateCheckboxesAndRadioButtons(item, isRadio, hasSubmenu) {
+	if (!isRadio) {
+		//fix checkbox
+		item.checked = !item.checked;
+	}
+	//update menu if radio / hasSubmenu
+	if (isRadio || hasSubmenu) {
+		win.webContents.send("updateMenu", true);
+	}
+}
+
+// Update checkboxes/radio buttons
+function updateTemplate(template) {
+	for (let item of template) {
+		// Change onClick of checkbox+radio
+		if ((item.type === "checkbox" || item.type === "radio") && !item.fixed) {
+			const originalOnclick = item.click;
+			item.click = (itemClicked) => {
+				originalOnclick(itemClicked);
+				updateCheckboxesAndRadioButtons(itemClicked, item.type === "radio", item.hasSubmenu);
+			};
+			item.fixed = true;
+		}
+	}
+}

plugins/in-app-menu/front.js

@@ -0,0 +1,24 @@
+const { remote, ipcRenderer } = require("electron");
+
+const customTitlebar = require("custom-electron-titlebar");
+
+module.exports = () => {
+	const bar = new customTitlebar.Titlebar({
+		backgroundColor: customTitlebar.Color.fromHex("#050505"),
+		itemBackgroundColor: customTitlebar.Color.fromHex("#121212"),
+	});
+	bar.updateTitle(" ");
+	document.title = "Youtube Music";
+
+	ipcRenderer.on("updateMenu", function (event, menu) {
+		if (menu) {
+			bar.updateMenu(remote.Menu.getApplicationMenu());
+		} else {
+			try {
+				bar.updateMenu(null);
+			} catch (e) {
+				//will always throw type error - null isn't menu, but it works
+			}
+		}
+	});
+};

plugins/in-app-menu/style.css

@@ -0,0 +1,79 @@
+/* increase font size for menu and menuItems */
+.titlebar,
+.menubar-menu-container .action-label {
+	font-size: 14px !important;
+}
+
+/* allow submenu's to show correctly */
+.menubar-menu-container {
+	overflow-y: visible !important;
+}
+
+/* fixes scrollbar positioning relative to nav bar  */
+#nav-bar-background.ytmusic-app-layout {
+	right: 15px !important;
+}
+
+/* remove window dragging for nav bar (conflict with titlebar drag) */
+ytmusic-nav-bar,
+.tab-titleiron-icon,
+ytmusic-pivot-bar-item-renderer {
+	-webkit-app-region: unset !important;
+}
+
+/* navbar background black */
+.center-content.ytmusic-nav-bar {
+	background: #030303;
+}
+
+/* move up item selectrion renderer by 15 px */
+ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer {
+	top: 75 !important;
+}
+
+/* fix weird positioning in search screen*/
+ytmusic-header-renderer.ytmusic-search-page {
+	position: unset !important;
+}
+
+/* Move navBar downwards */
+ytmusic-app-layout > [slot="nav-bar"],
+#nav-bar-background.ytmusic-app-layout {
+	top: 17px !important;
+}
+
+/* fix page progress bar position*/
+yt-page-navigation-progress,
+#progress.yt-page-navigation-progress {
+	top: 30px !important;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+	width: 12px;
+	background-color: #030303;
+	border-radius: 100px;
+	-moz-border-radius: 100px;
+	-webkit-border-radius: 100px;
+}
+/* hover effect for both scrollbar area, and scrollbar 'thumb' */
+::-webkit-scrollbar:hover {
+	background-color: rgba(15, 15, 15, 0.699);
+}
+
+/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
+::-webkit-scrollbar-thumb:vertical {
+	background-clip: padding-box;
+	border: 2px solid rgba(0, 0, 0, 0);
+
+	background: #3a3a3a;
+	border-radius: 100px;
+	-moz-border-radius: 100px;
+	-webkit-border-radius: 100px;
+}
+::-webkit-scrollbar-thumb:vertical:active {
+	background: #4d4c4c; /* Some darker color when you click it */
+	border-radius: 100px;
+	-moz-border-radius: 100px;
+	-webkit-border-radius: 100px;
+}

plugins/last-fm/back.js

@@ -0,0 +1,160 @@
+const fetch = require('node-fetch');
+const md5 = require('md5');
+const { shell } = require('electron');
+const { setOptions } = require('../../config/plugins');
+const registerCallback = require('../../providers/song-info');
+const defaultConfig = require('../../config/defaults');
+
+const createFormData = params => {
+	// creates the body for in the post request
+	const formData = new URLSearchParams();
+	for (const key in params) {
+		formData.append(key, params[key]);
+	}
+	return formData;
+}
+const createQueryString = (params, api_sig) => {
+	// creates a querystring
+	const queryData = [];
+	params.api_sig = api_sig;
+	for (const key in params) {
+		queryData.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`);
+	}
+	return '?'+queryData.join('&');
+}
+
+const createApiSig = (params, secret) => { 
+	// this function creates the api signature, see: https://www.last.fm/api/authspec
+	const keys = [];
+	for (const key in params) {
+		keys.push(key);
+	}
+	keys.sort();
+	let sig = '';
+	for (const key of keys) {
+		if (String(key) === 'format')
+			continue
+		sig += `${key}${params[key]}`;
+	}
+	sig += secret;
+	sig = md5(sig);
+	return sig;
+}
+
+const createToken = async ({ api_key, api_root, secret }) => {
+	// creates and stores the auth token
+	const data = {
+		method: 'auth.gettoken',
+		api_key: api_key,
+		format: 'json'
+	};
+	const api_sig = createApiSig(data, secret);
+	let response = await fetch(`${api_root}${createQueryString(data, api_sig)}`);
+	response = await response.json();
+	return response?.token;
+}
+
+const authenticate = async config => {
+	// asks the user for authentication
+	config.token = await createToken(config);
+	setOptions('last-fm', config);
+	shell.openExternal(`https://www.last.fm/api/auth/?api_key=${config.api_key}&token=${config.token}`);
+	return config;
+}
+
+const getAndSetSessionKey = async config => {
+	// get and store the session key
+	const data = {
+		api_key: config.api_key,
+		format: 'json',
+		method: 'auth.getsession',
+		token: config.token,
+	};
+	const api_sig = createApiSig(data, config.secret);
+	let res = await fetch(`${config.api_root}${createQueryString(data, api_sig)}`);
+	res = await res.json();
+	if (res.error)
+		await authenticate(config);
+	config.session_key = res?.session?.key;
+	setOptions('last-fm', config);
+	return config;
+}
+
+const postSongDataToAPI = async (songInfo, config, data) => {
+	// this sends a post request to the api, and adds the common data
+	if (!config.session_key)
+		await getAndSetSessionKey(config);
+
+	const postData = {
+		track: songInfo.title,
+		duration: songInfo.songDuration,
+		artist: songInfo.artist,
+		api_key: config.api_key,
+		sk: config.session_key,
+		format: 'json',
+		...data,
+	};
+
+	postData.api_sig = createApiSig(postData, config.secret);
+	fetch('https://ws.audioscrobbler.com/2.0/', {method: 'POST', body: createFormData(postData)})
+		.catch(res => {
+			if (res.response.data.error == 9) {
+				// session key is invalid, so remove it from the config and reauthenticate
+				config.session_key = undefined;
+				setOptions('last-fm', config);
+				authenticate(config);
+			}
+		});
+}
+
+const addScrobble = (songInfo, config) => {
+	// this adds one scrobbled song to last.fm
+	const data = {
+		method: 'track.scrobble',
+		timestamp: ~~((Date.now() - songInfo.elapsedSeconds) / 1000),
+	};
+	postSongDataToAPI(songInfo, config, data);
+}
+
+const setNowPlaying = (songInfo, config) => {
+	// this sets the now playing status in last.fm
+	const data = {
+		method: 'track.updateNowPlaying',
+	};
+	postSongDataToAPI(songInfo, config, data);
+}
+
+
+// this will store the timeout that will trigger addScrobble
+let scrobbleTimer = undefined;
+
+const lastfm = async (_win, config) => {
+	if (!config.api_root) {
+		// settings are not present, creating them with the default values
+		config = defaultConfig.plugins['last-fm'];
+		config.enabled = true;
+		setOptions('last-fm', config);
+	}
+
+	if (!config.session_key) {
+		// not authenticated
+		config = await getAndSetSessionKey(config);
+	}
+
+	registerCallback( songInfo => {
+		// set remove the old scrobble timer
+		clearTimeout(scrobbleTimer);
+		if (!songInfo.isPaused) {
+			setNowPlaying(songInfo, config);
+			// scrobble when the song is half way through, or has passed the 4 minute mark
+			const scrobbleTime = Math.min(Math.ceil(songInfo.songDuration / 2), 4 * 60);
+			if (scrobbleTime > songInfo.elapsedSeconds) {
+				// scrobble still needs to happen
+				const timeToWait = (scrobbleTime - songInfo.elapsedSeconds) * 1000;
+				scrobbleTimer = setTimeout(addScrobble, timeToWait, songInfo, config);
+			}
+		}
+	});
+}
+
+module.exports = lastfm;

plugins/navigation/back.js

@@ -4,7 +4,10 @@ const { injectCSS, listenAction } = require("../utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
 
 function handle(win) {
-	injectCSS(win.webContents, path.join(__dirname, "style.css"));
+	injectCSS(win.webContents, path.join(__dirname, "style.css"), () => {
+		win.webContents.send("navigation-css-ready");
+	});
+
 	listenAction(CHANNEL, (event, action) => {
 		switch (action) {
 			case ACTIONS.NEXT:

plugins/navigation/front.js

@@ -1,15 +1,19 @@
+const { ipcRenderer } = require("electron");
+
 const { ElementFromFile, templatePath } = require("../utils");
 
 function run() {
-	const forwardButton = ElementFromFile(
-		templatePath(__dirname, "forward.html")
-	);
-	const backButton = ElementFromFile(templatePath(__dirname, "back.html"));
-	const menu       = document.querySelector("ytmusic-pivot-bar-renderer");
+	ipcRenderer.on("navigation-css-ready", () => {
+		const forwardButton = ElementFromFile(
+			templatePath(__dirname, "forward.html")
+		);
+		const backButton = ElementFromFile(templatePath(__dirname, "back.html"));
+		const menu = document.querySelector("ytmusic-pivot-bar-renderer");
 
-	if (menu) {
-		menu.prepend(backButton, forwardButton);
-	}
+		if (menu) {
+			menu.prepend(backButton, forwardButton);
+		}
+	});
 }
 
 module.exports = run;

plugins/navigation/templates/back.html

@@ -20,7 +20,7 @@
 				preserveAspectRatio="xMidYMid meet"
 				focusable="false"
 				class="style-scope iron-icon"
-				style="pointer-events: none; display: block; width: 100%; height: 100%;"
+				style="pointer-events: none; display: block; width: 100%; height: 100%"
 			>
 				<g class="style-scope iron-icon">
 					<path

plugins/notifications/back.js

@@ -1,41 +1,46 @@
 const { Notification } = require("electron");
-const getSongInfo = require("../../providers/song-info");
+const is = require("electron-is");
+const registerCallback = require("../../providers/song-info");
+const { notificationImage } = require("./utils");
 
-const notify = info => {
-	let notificationImage = "assets/youtube-music.png";
+const setupInteractive = require("./interactive")
 
-	if (info.image) {
-		notificationImage = info.image.resize({ height: 256, width: 256 });
-	}
+const notify = (info, options) => {
 
 	// Fill the notification with content
 	const notification = {
 		title: info.title || "Playing",
 		body: info.artist,
-		icon: notificationImage,
+		icon: notificationImage(info),
 		silent: true,
+		urgency: options.urgency,
 	};
-		
+
 	// Send the notification
-	currentNotification = new Notification(notification);
+	const currentNotification = new Notification(notification);
 	currentNotification.show()
-	
+
 	return currentNotification;
 };
 
-module.exports = (win) => {
-	const registerCallback = getSongInfo(win);
+const setup = (options) => {
 	let oldNotification;
-	win.on("ready-to-show", () => {
-		// Register the callback for new song information
-		registerCallback(songInfo => {
-			// If song is playing send notification
-			if (!songInfo.isPaused) {	
-				// Close the old notification
-				oldNotification?.close();
-				// This fixes a weird bug that would cause the notification to be updated instead of showing
-				setTimeout(()=>{ oldNotification = notify(songInfo) }, 10);
-			}
-		});
+	let currentUrl;
+
+	registerCallback(songInfo => {
+		if (!songInfo.isPaused && (songInfo.url !== currentUrl || options.unpauseNotification)) {
+			// Close the old notification
+			oldNotification?.close();
+			currentUrl = songInfo.url;
+			// This fixes a weird bug that would cause the notification to be updated instead of showing
+			setTimeout(() => { oldNotification = notify(songInfo, options) }, 10);
+		}
 	});
+}
+
+module.exports = (win, options) => {
+	// Register the callback for new song information
+	is.windows() && options.interactive ?
+		setupInteractive(win, options.unpauseNotification) :
+		setup(options);
 };

plugins/notifications/interactive.js

@@ -0,0 +1,103 @@
+const { notificationImage, icons } = require("./utils");
+const getSongControls = require('../../providers/song-controls');
+const registerCallback = require("../../providers/song-info");
+const notifier = require("node-notifier");
+
+//store song controls reference on launch
+let controls;
+let notificationOnUnpause;
+
+module.exports = (win, unpauseNotification) => {
+    //Save controls and onPause option
+    const { playPause, next, previous } = getSongControls(win);
+    controls = { playPause, next, previous };
+    notificationOnUnpause = unpauseNotification;
+
+    let currentUrl;
+
+    // Register songInfoCallback
+    registerCallback(songInfo => {
+		if (!songInfo.isPaused && (songInfo.url !== currentUrl || notificationOnUnpause)) {
+            currentUrl = songInfo.url;
+            sendToaster(songInfo);
+		}
+	});
+
+    win.webContents.once("closed", () => {
+        deleteNotification()
+    });
+}
+
+//delete old notification
+let toDelete;
+function deleteNotification() {
+    if (toDelete !== undefined) {
+        // To remove the notification it has to be done this way
+        const removeNotif = Object.assign(toDelete, {
+            remove: toDelete.id
+        })
+        notifier.notify(removeNotif)
+
+        toDelete = undefined;
+    }
+}
+
+//New notification
+function sendToaster(songInfo) {
+    deleteNotification();
+    //download image and get path
+    let imgSrc = notificationImage(songInfo, true);
+    toDelete = {
+        //app id undefined - will break buttons
+        title: songInfo.title || "Playing",
+        message: songInfo.artist,
+        id: parseInt(Math.random() * 1000000, 10),
+        icon: imgSrc,
+        actions: [
+            icons.previous,
+            songInfo.isPaused ? icons.play : icons.pause,
+            icons.next
+        ],
+        sound: false,
+    };
+    //send notification
+    notifier.notify(
+        toDelete,
+        (err, data) => {
+            // Will also wait until notification is closed.
+            if (err) {
+                console.log(`ERROR = ${err.toString()}\n DATA = ${data}`);
+            }
+            switch (data) {
+                //buttons
+                case icons.previous.normalize():
+                    controls.previous();
+                    return;
+                case icons.next.normalize():
+                    controls.next();
+                    return;
+                case icons.play.normalize():
+                    controls.playPause();
+                    // dont delete notification on play/pause
+                    toDelete = undefined;
+                    //manually send notification if not sending automatically
+                    if (!notificationOnUnpause) {
+                        songInfo.isPaused = false;
+                        sendToaster(songInfo);
+                    }
+                    return;
+                case icons.pause.normalize():
+                    controls.playPause();
+                    songInfo.isPaused = true;
+                    toDelete = undefined;
+                    sendToaster(songInfo);
+                    return;
+                //Native datatype
+                case "dismissed":
+                case "timeout":
+                    deleteNotification();
+            }
+        }
+
+    );
+}

plugins/notifications/menu.js

@@ -0,0 +1,30 @@
+const { urgencyLevels, setOption } = require("./utils");
+const is = require("electron-is");
+
+module.exports = (win, options) => [
+	...(is.linux() ?
+		[{
+			label: "Notification Priority",
+			submenu: urgencyLevels.map(level => ({
+				label: level.name,
+				type: "radio",
+				checked: options.urgency === level.value,
+				click: () => setOption(options, "urgency", level.value)
+			})),
+		}] :
+		[]),
+	...(is.windows() ?
+		[{
+			label: "Interactive Notifications",
+			type: "checkbox",
+			checked: options.interactive,
+			click: (item) => setOption(options, "interactive", item.checked)
+		}] :
+		[]),
+	{
+		label: "Show notification on unpause",
+		type: "checkbox",
+		checked: options.unpauseNotification,
+		click: (item) => setOption(options, "unpauseNotification", item.checked)
+	},
+];

plugins/notifications/utils.js

@@ -0,0 +1,56 @@
+const { setOptions } = require("../../config/plugins");
+const path = require("path");
+const { app } = require("electron");
+const fs = require("fs");
+
+const icon = "assets/youtube-music.png";
+const tempIcon = path.join(app.getPath("userData"), "tempIcon.png");
+
+module.exports.icons = {
+	play: "\u{1405}", // ᐅ
+	pause: "\u{2016}", // ‖
+	next: "\u{1433}", // ᐳ
+	previous: "\u{1438}" // ᐸ
+}
+
+module.exports.setOption = (options, option, value) => {
+	options[option] = value;
+	setOptions("notifications", options)
+}
+
+module.exports.urgencyLevels = [
+	{ name: "Low", value: "low" },
+	{ name: "Normal", value: "normal" },
+	{ name: "High", value: "critical" },
+];
+
+module.exports.notificationImage = function (songInfo, saveIcon = false) {
+	//return local path to temp icon
+	if (saveIcon && !!songInfo.image) {
+		try {
+			fs.writeFileSync(tempIcon,
+				centerNativeImage(songInfo.image)
+					.toPNG()
+			);
+		} catch (err) {
+			console.log(`Error writing song icon to disk:\n${err.toString()}`)
+			return icon;
+		}
+		return tempIcon;
+	}
+	//else: return image
+	return songInfo.image
+		? centerNativeImage(songInfo.image)
+		: icon
+};
+
+function centerNativeImage(nativeImage) {
+	const tempImage = nativeImage.resize({ height: 256 });
+	const margin = Math.max((tempImage.getSize().width - 256), 0);
+
+	return tempImage.crop({
+		x: Math.round(margin / 2),
+		y: 0,
+		width: 256, height: 256
+	})
+}

plugins/precise-volume/back.js

@@ -0,0 +1,23 @@
+const { isEnabled } = require("../../config/plugins");
+
+/*
+This is used to determine if plugin is actually active
+(not if its only enabled in options)
+*/
+let enabled = false;
+
+module.exports = (win) => {
+	enabled = true;
+
+	// youtube-music register some of the target listeners after DOMContentLoaded
+	// did-finish-load is called after all elements finished loading, including said listeners
+	// Thats the reason the timing is controlled from main
+	win.webContents.once("did-finish-load", () => {
+		win.webContents.send("restoreAddEventListener");
+		win.webContents.send("setupVideoPlayerVolumeMousewheel", !isEnabled("hide-video-player"));
+	});
+};
+
+module.exports.enabled = () => {
+	return enabled;
+};

plugins/precise-volume/front.js

@@ -0,0 +1,208 @@
+const { ipcRenderer, remote } = require("electron");
+
+const { setOptions } = require("../../config/plugins");
+
+function $(selector) { return document.querySelector(selector); }
+
+module.exports = (options) => {
+
+	setupPlaybar(options);
+
+	setupSliderObserver(options);
+
+	setupLocalArrowShortcuts(options);
+
+	if (options.globalShortcuts?.enabled) {
+		setupGlobalShortcuts(options);
+	}
+
+	firstRun(options);
+
+	// This way the ipc listener gets cleared either way
+	ipcRenderer.once("setupVideoPlayerVolumeMousewheel", (_event, toEnable) => {
+		if (toEnable)
+			setupVideoPlayerOnwheel(options);
+	});
+};
+
+/** Add onwheel event to video player */
+function setupVideoPlayerOnwheel(options) {
+	$("#main-panel").addEventListener("wheel", event => {
+		event.preventDefault();
+		// Event.deltaY < 0 means wheel-up
+		changeVolume(event.deltaY < 0, options);
+	});
+}
+
+function toPercent(volume) {
+	return Math.round(Number.parseFloat(volume) * 100);
+}
+
+function saveVolume(volume, options) {
+	options.savedVolume = volume;
+	setOptions("precise-volume", options);
+}
+
+/** Restore saved volume and setup tooltip */
+function firstRun(options) {
+	const videoStream = $(".video-stream");
+	const slider = $("#volume-slider");
+	// Those elements load abit after DOMContentLoaded
+	if (videoStream && slider) {
+		// Set saved volume IF it pass checks
+		if (options.savedVolume
+			&& options.savedVolume >= 0 && options.savedVolume <= 100
+			&& Math.abs(slider.value - options.savedVolume) < 5
+			// If plugin was disabled and volume changed then diff>4
+		) {
+			videoStream.volume = options.savedVolume / 100;
+			slider.value = options.savedVolume;
+		}
+		// Set current volume as tooltip
+		setTooltip(toPercent(videoStream.volume));
+	} else {
+		setTimeout(firstRun, 500, options); // Try again in 500 milliseconds
+	}
+}
+
+/** Add onwheel event to play bar and also track if play bar is hovered*/
+function setupPlaybar(options) {
+	const playerbar = $("ytmusic-player-bar");
+
+	playerbar.addEventListener("wheel", event => {
+		event.preventDefault();
+		// Event.deltaY < 0 means wheel-up
+		changeVolume(event.deltaY < 0, options);
+	});
+
+	// Keep track of mouse position for showVolumeSlider()
+	playerbar.addEventListener("mouseenter", () => {
+		playerbar.classList.add("on-hover");
+	});
+
+	playerbar.addEventListener("mouseleave", () => {
+		playerbar.classList.remove("on-hover");
+	});
+}
+
+/** if (toIncrease = false) then volume decrease */
+function changeVolume(toIncrease, options) {
+	// Need to change both the actual volume and the slider
+	const videoStream = $(".video-stream");
+	const slider = $("#volume-slider");
+	// Apply volume change if valid
+	const steps = (options.steps || 1) / 100;
+	videoStream.volume = toIncrease ?
+		Math.min(videoStream.volume + steps, 1) :
+		Math.max(videoStream.volume - steps, 0);
+
+	// Save the new volume
+	saveVolume(toPercent(videoStream.volume), options);
+	// Slider value automatically rounds to multiples of 5
+	slider.value = options.savedVolume;
+	// Change tooltips to new value
+	setTooltip(options.savedVolume);
+	// Show volume slider on volume change
+	showVolumeSlider(slider);
+}
+
+let volumeHoverTimeoutID;
+
+function showVolumeSlider(slider) {
+	// This class display the volume slider if not in minimized mode
+	slider.classList.add("on-hover");
+	// Reset timeout if previous one hasn't completed
+	if (volumeHoverTimeoutID) {
+		clearTimeout(volumeHoverTimeoutID);
+	}
+	// Timeout to remove volume preview after 3 seconds if playbar isn't hovered
+	volumeHoverTimeoutID = setTimeout(() => {
+		volumeHoverTimeoutID = null;
+		if (!$("ytmusic-player-bar").classList.contains("on-hover")) {
+			slider.classList.remove("on-hover");
+		}
+	}, 3000);
+}
+
+/** Save volume + Update the volume tooltip when volume-slider is manually changed */
+function setupSliderObserver(options) {
+	const sliderObserver = new MutationObserver(mutations => {
+		for (const mutation of mutations) {
+			// This checks that volume-slider was manually set
+			if (mutation.oldValue !== mutation.target.value &&
+				(!options.savedVolume || Math.abs(options.savedVolume - mutation.target.value) > 4)) {
+				// Diff>4 means it was manually set
+				setTooltip(mutation.target.value);
+				saveVolume(mutation.target.value, options);
+			}
+		}
+	});
+
+	// Observing only changes in 'value' of volume-slider
+	sliderObserver.observe($("#volume-slider"), {
+		attributeFilter: ["value"],
+		attributeOldValue: true
+	});
+}
+
+// Set new volume as tooltip for volume slider and icon + expanding slider (appears when window size is small)
+const tooltipTargets = [
+	"#volume-slider",
+	"tp-yt-paper-icon-button.volume",
+	"#expand-volume-slider",
+	"#expand-volume"
+];
+
+function setTooltip(volume) {
+	for (target of tooltipTargets) {
+		$(target).title = `${volume}%`;
+	}
+}
+
+function setupGlobalShortcuts(options) {
+	if (options.globalShortcuts.volumeUp) {
+		remote.globalShortcut.register((options.globalShortcuts.volumeUp), () => changeVolume(true, options));
+	}
+	if (options.globalShortcuts.volumeDown) {
+		remote.globalShortcut.register((options.globalShortcuts.volumeDown), () => changeVolume(false, options));
+	}
+}
+
+function setupLocalArrowShortcuts(options) {
+	if (options.arrowsShortcut) {
+		addListener();
+	}
+
+	// Change options from renderer to keep sync
+	ipcRenderer.on("setArrowsShortcut", (_event, isEnabled) => {
+		options.arrowsShortcut = isEnabled;
+		setOptions("precise-volume", options);
+		// This allows changing this setting without restarting app
+		if (isEnabled) {
+			addListener();
+		} else {
+			removeListener();
+		}
+	});
+
+	function addListener() {
+		window.addEventListener('keydown', callback);
+	}
+
+	function removeListener() {
+		window.removeEventListener("keydown", callback);
+	}
+
+	function callback(event) {
+		switch (event.code) {
+			case "ArrowUp":
+				event.preventDefault();
+				changeVolume(true, options);
+				break;
+			case "ArrowDown":
+				event.preventDefault();
+				changeVolume(false, options);
+				break;
+		}
+	}
+}

plugins/precise-volume/menu.js

@@ -0,0 +1,19 @@
+const { enabled } = require("./back");
+const { setOptions } = require("../../config/plugins");
+
+module.exports = (win, options) => [
+	{
+		label: "Arrowkeys controls",
+		type: "checkbox",
+		checked: !!options.arrowsShortcut,
+		click: (item) => {
+			// Dynamically change setting if plugin enabled
+			if (enabled()) {
+				win.webContents.send("setArrowsShortcut", item.checked);
+			} else { // Fallback to usual method if disabled
+				options.arrowsShortcut = item.checked;
+				setOptions("precise-volume", options);
+			}
+		}
+	}
+];

plugins/precise-volume/preload.js

@@ -0,0 +1,33 @@
+const { ipcRenderer } = require("electron");
+const is = require("electron-is");
+
+let ignored = {
+    id: ["volume-slider", "expand-volume-slider"],
+    types: ["mousewheel", "keydown", "keyup"]
+};
+
+function overrideAddEventListener() {
+    // Save native addEventListener
+    Element.prototype._addEventListener = Element.prototype.addEventListener;
+    // Override addEventListener to Ignore specific events in volume-slider
+    Element.prototype.addEventListener = function (type, listener, useCapture = false) {
+        if (!(
+            ignored.id.includes(this.id) &&
+            ignored.types.includes(type)
+        )) {
+            this._addEventListener(type, listener, useCapture);
+        } else if (is.dev()) {
+            console.log(`Ignoring event: "${this.id}.${type}()"`);
+        }
+    };
+}
+
+module.exports = () => {
+    overrideAddEventListener();
+    // Restore original function after did-finish-load to avoid keeping Element.prototype altered
+    ipcRenderer.once("restoreAddEventListener", () => { // Called from main to make sure page is completly loaded
+        Element.prototype.addEventListener = Element.prototype._addEventListener;
+        Element.prototype._addEventListener = undefined;
+        ignored = undefined;
+    });
+};

plugins/taskbar-mediacontrol/back.js

@@ -0,0 +1,53 @@
+const getSongControls = require('../../providers/song-controls');
+const registerCallback = require('../../providers/song-info');
+const path = require('path');
+
+let controls;
+let currentSongInfo;
+
+module.exports = win => {
+	const { playPause, next, previous } = getSongControls(win);
+	controls = { playPause, next, previous };
+
+	registerCallback(songInfo => {
+		//update currentsonginfo for win.on('show')
+		currentSongInfo = songInfo;
+		// update thumbar
+		setThumbar(win, songInfo);
+	});
+
+	// need to set thumbar again after win.show 
+	win.on("show", () => {
+		setThumbar(win, currentSongInfo)
+	})
+};
+
+function setThumbar(win, songInfo) {
+	// Wait for song to start before setting thumbar
+	if (!songInfo?.title) {
+		return;
+	}
+
+	// Win32 require full rewrite of components
+	win.setThumbarButtons([
+		{
+			tooltip: 'Previous',
+			icon: get('backward.png'),
+			click() { controls.previous(win.webContents); }
+		}, {
+			tooltip: 'Play/Pause',
+			// Update icon based on play state
+			icon: songInfo.isPaused ? get('play.png') : get('pause.png'),
+			click() { controls.playPause(win.webContents); }
+		}, {
+			tooltip: 'Next',
+			icon: get('forward.png'),
+			click() { controls.next(win.webContents); }
+		}
+	]);
+}
+
+// Util
+function get(file) {
+	return path.join(__dirname, "assets", file);
+}

plugins/touchbar/back.js

@@ -7,7 +7,7 @@ const {
 	TouchBarScrubber,
 } = TouchBar;
 
-const getSongInfo = require("../../providers/song-info");
+const registerCallback = require("../../providers/song-info");
 const getSongControls = require("../../providers/song-controls");
 
 // Songtitle label
@@ -59,11 +59,10 @@ const touchBar = new TouchBar({
 });
 
 module.exports = (win) => {
-	const registerCallback = getSongInfo(win);
 	const { playPause, next, previous, like, dislike } = getSongControls(win);
 
 	// If the page is ready, register the callback
-	win.on("ready-to-show", () => {
+	win.once("ready-to-show", () => {
 		controls = [previous, playPause, next, like, dislike];
 
 		// Register the callback

plugins/utils.js

@@ -42,9 +42,12 @@ module.exports.fileExists = (path, callbackIfExists) => {
 	});
 };
 
-module.exports.injectCSS = (webContents, filepath) => {
-	webContents.on("did-finish-load", () => {
-		webContents.insertCSS(fs.readFileSync(filepath, "utf8"));
+module.exports.injectCSS = (webContents, filepath, cb = undefined) => {
+	webContents.on("did-finish-load", async () => {
+		await webContents.insertCSS(fs.readFileSync(filepath, "utf8"));
+		if (cb) {
+			cb();
+		}
 	});
 };
 

preload.js

@@ -1,16 +1,25 @@
 const path = require("path");
 
-const { contextBridge, remote } = require("electron");
+const { remote } = require("electron");
 
 const config = require("./config");
 const { fileExists } = require("./plugins/utils");
+const setupFrontLogger = require("./providers/front-logger");
+const setupSongControl = require("./providers/song-controls-front");
+const setupSongInfo = require("./providers/song-info-front");
 
 const plugins = config.plugins.getEnabled();
 
 plugins.forEach(([plugin, options]) => {
-	const pluginPath = path.join(__dirname, "plugins", plugin, "actions.js");
-	fileExists(pluginPath, () => {
-		const actions = require(pluginPath).actions || {};
+	const preloadPath = path.join(__dirname, "plugins", plugin, "preload.js");
+	fileExists(preloadPath, () => {
+		const run = require(preloadPath);
+		run(options);
+	});
+
+	const actionPath = path.join(__dirname, "plugins", plugin, "actions.js");
+	fileExists(actionPath, () => {
+		const actions = require(actionPath).actions || {};
 
 		// TODO: re-enable once contextIsolation is set to true
 		// contextBridge.exposeInMainWorld(plugin + "Actions", actions);
@@ -29,6 +38,15 @@ document.addEventListener("DOMContentLoaded", () => {
 		});
 	});
 
+	// inject song-info provider
+	setupSongInfo();
+
+	// inject song-control provider
+	setupSongControl();
+
+	// inject front logger
+	setupFrontLogger();
+
 	// Add action for reloading
 	global.reload = () =>
 		remote.getCurrentWindow().webContents.loadURL(config.get("url"));

providers/front-logger.js

@@ -0,0 +1,13 @@
+const { ipcRenderer } = require("electron");
+
+function logToString(log) {
+	return (typeof log === "string") ?
+		log :
+		JSON.stringify(log, null, "\t");
+}
+
+module.exports = () => {
+	ipcRenderer.on("log", (_event, log) => {
+		console.log(logToString(log));
+	});
+};

providers/song-controls-front.js

@@ -0,0 +1,18 @@
+const { ipcRenderer } = require("electron");
+
+let videoStream = document.querySelector(".video-stream");
+module.exports = () => {
+    ipcRenderer.on("playPause", () => {
+        if (!videoStream) {
+            videoStream = document.querySelector(".video-stream");
+        }
+
+        if (videoStream.paused) {
+            videoStream.play();
+        } else {
+            videoStream.yns_pause ?
+                videoStream.yns_pause() :
+                videoStream.pause();
+        }
+    });
+};

providers/song-controls.js

@@ -12,7 +12,7 @@ module.exports = (win) => {
 		// Playback
 		previous: () => pressKey(win, "k"),
 		next: () => pressKey(win, "j"),
-		playPause: () => pressKey(win, "space"),
+		playPause: () => win.webContents.send("playPause"),
 		like: () => pressKey(win, "_"),
 		dislike: () => pressKey(win, "+"),
 		go10sBack: () => pressKey(win, "h"),

providers/song-info-front.js

@@ -0,0 +1,31 @@
+const { ipcRenderer } = require("electron");
+
+const { getImage } = require("./song-info");
+
+global.songInfo = {};
+
+ipcRenderer.on("update-song-info", async (_, extractedSongInfo) => {
+	global.songInfo = JSON.parse(extractedSongInfo);
+	global.songInfo.image = await getImage(global.songInfo.imageSrc);
+});
+
+const injectListener = () => {
+	const oldXHR = window.XMLHttpRequest;
+	function newXHR() {
+		const realXHR = new oldXHR();
+		realXHR.addEventListener(
+			"readystatechange",
+			() => {
+				if (realXHR.readyState === 4 && realXHR.status === 200
+					&& realXHR.responseURL.includes("/player")) {
+						// if the request contains the song info, send the response to ipcMain
+						ipcRenderer.send("song-info-request", realXHR.responseText);
+				}
+			},
+			false
+		);
+		return realXHR;
+	}
+	window.XMLHttpRequest = newXHR;
+};
+module.exports = injectListener;

providers/song-info.js

@@ -1,73 +1,19 @@
-const { nativeImage } = require("electron");
+const { ipcMain, nativeImage } = require("electron");
 
 const fetch = require("node-fetch");
 
-// This selects the song title
-const titleSelector = ".title.style-scope.ytmusic-player-bar";
-
-// This selects the song image
-const imageSelector =
-	"#layout > ytmusic-player-bar > div.middle-controls.style-scope.ytmusic-player-bar > img";
-
-// This selects the song subinfo, this includes artist, views, likes
-const subInfoSelector =
-	"#layout > ytmusic-player-bar > div.middle-controls.style-scope.ytmusic-player-bar > div.content-info-wrapper.style-scope.ytmusic-player-bar > span";
-
-// This selects the progress bar, used for songlength and current progress
+// This selects the progress bar, used for current progress
 const progressSelector = "#progress-bar";
 
-// Grab the title using the selector
-const getTitle = (win) => {
-	return win.webContents
-		.executeJavaScript(
-			"document.querySelector('" + titleSelector + "').innerText"
-		)
-		.catch((error) => {
-			console.log(error);
-		});
-};
-
-// Grab the image src using the selector
-const getImageSrc = (win) => {
-	return win.webContents
-		.executeJavaScript("document.querySelector('" + imageSelector + "').src")
-		.catch((error) => {
-			console.log(error);
-		});
-};
-
-// Grab the subinfo using the selector
-const getSubInfo = async (win) => {
-	// Get innerText of subinfo element
-	const subInfoString = await win.webContents.executeJavaScript(
-		'document.querySelector("' + subInfoSelector + '").innerText'
-	);
-
-	// Split and clean the string
-	const splittedSubInfo = subInfoString.replaceAll("\n", "").split(" • ");
-
-	// Make sure we always return 3 elements in the aray
-	const subInfo = [];
-	for (let i = 0; i < 3; i++) {
-		// Fill array with empty string if not defined
-		subInfo.push(splittedSubInfo[i] || "");
-	}
-
-	return subInfo;
-};
 
 // Grab the progress using the selector
 const getProgress = async (win) => {
-	// Get max value of the progressbar element
-	const songDuration = await win.webContents.executeJavaScript(
-		'document.querySelector("' + progressSelector + '").max'
-	);
 	// Get current value of the progressbar element
 	const elapsedSeconds = await win.webContents.executeJavaScript(
 		'document.querySelector("' + progressSelector + '").value'
 	);
 
-	return { songDuration, elapsedSeconds };
+	return elapsedSeconds;
 };
 
 // Grab the native image using the src
@@ -77,61 +23,93 @@ const getImage = async (src) => {
 	return nativeImage.createFromBuffer(buffer);
 };
 
+// To find the paused status, we check if the title contains `-`
 const getPausedStatus = async (win) => {
 	const title = await win.webContents.executeJavaScript("document.title");
 	return !title.includes("-");
 };
 
+const getArtist = async (win) => {
+	return await win.webContents.executeJavaScript(`
+		document.querySelector(".subtitle.ytmusic-player-bar .yt-formatted-string")
+			?.textContent
+	`);
+}
+
 // Fill songInfo with empty values
 const songInfo = {
 	title: "",
 	artist: "",
-	views: "",
-	likes: "",
+	views: 0,
+	uploadDate: "",
 	imageSrc: "",
 	image: null,
-	isPaused: true,
+	isPaused: undefined,
 	songDuration: 0,
 	elapsedSeconds: 0,
+	url: "",
+};
+
+const handleData = async (responseText, win) => {
+	let data = JSON.parse(responseText);
+	songInfo.title = data?.videoDetails?.title;
+	songInfo.artist = await getArtist(win) || cleanupArtistName(data?.videoDetails?.author);
+	songInfo.views = data?.videoDetails?.viewCount;
+	songInfo.imageSrc = data?.videoDetails?.thumbnail?.thumbnails?.pop()?.url;
+	songInfo.songDuration = data?.videoDetails?.lengthSeconds;
+	songInfo.image = await getImage(songInfo.imageSrc);
+	songInfo.uploadDate = data?.microformat?.microformatDataRenderer?.uploadDate;
+	songInfo.url = data?.microformat?.microformatDataRenderer?.urlCanonical;
+
+	win.webContents.send("update-song-info", JSON.stringify(songInfo));
+};
+
+// This variable will be filled with the callbacks once they register
+const callbacks = [];
+
+// This function will allow plugins to register callback that will be triggered when data changes
+const registerCallback = (callback) => {
+	callbacks.push(callback);
 };
 
 const registerProvider = (win) => {
-	// This variable will be filled with the callbacks once they register
-	const callbacks = [];
-
-	// This function will allow plugins to register callback that will be triggered when data changes
-	const registerCallback = (callback) => {
-		callbacks.push(callback);
-	};
-
 	win.on("page-title-updated", async () => {
-		// Save the old title temporarily
-		const oldTitle = songInfo.title;
 		// Get and set the new data
-		songInfo.title = await getTitle(win);
 		songInfo.isPaused = await getPausedStatus(win);
 
-		const { songDuration, elapsedSeconds } = await getProgress(win);
-		songInfo.songDuration = songDuration;
+		const elapsedSeconds = await getProgress(win);
 		songInfo.elapsedSeconds = elapsedSeconds;
 
-		// If title changed then we do need to update other info
-		if (oldTitle !== songInfo.title) {
-			const subInfo = await getSubInfo(win);
-			songInfo.artist = subInfo[0];
-			songInfo.views = subInfo[1];
-			songInfo.likes = subInfo[2];
-			songInfo.imageSrc = await getImageSrc(win);
-			songInfo.image = await getImage(songInfo.imageSrc);
-		}
-
 		// Trigger the callbacks
 		callbacks.forEach((c) => {
 			c(songInfo);
 		});
 	});
 
-	return registerCallback;
+	// This will be called when the song-info-front finds a new request with song data
+	ipcMain.on("song-info-request", async (_, responseText) => {
+		await handleData(responseText, win);
+		callbacks.forEach((c) => {
+			c(songInfo);
+		});
+	});
 };
 
-module.exports = registerProvider;
+const suffixesToRemove = [' - Topic', 'VEVO'];
+function cleanupArtistName(artist) {
+	if (!artist) {
+		return artist;
+	}
+	for (const suffix of suffixesToRemove) {
+		if (artist.endsWith(suffix)) {
+			return artist.slice(0, -suffix.length);
+		}
+	}
+	return artist;
+}
+
+module.exports = registerCallback;
+module.exports.setupSongInfo = registerProvider;
+module.exports.getImage = getImage;
+module.exports.cleanupArtistName = cleanupArtistName;
+

tray.js

@@ -3,7 +3,6 @@ const path = require("path");
 const { Menu, nativeImage, Tray } = require("electron");
 
 const config = require("./config");
-const { mainMenuTemplate } = require("./menu");
 const getSongControls = require("./providers/song-controls");
 
 // Prevent tray being garbage collected
@@ -32,7 +31,7 @@ module.exports.setUpTray = (app, win) => {
 		}
 	});
 
-	const trayMenu = Menu.buildFromTemplate([
+	let template = [
 		{
 			label: "Play/Pause",
 			click: () => {
@@ -57,13 +56,21 @@ module.exports.setUpTray = (app, win) => {
 				win.show();
 			},
 		},
-		...mainMenuTemplate(win),
+		{
+			label: "Restart App",
+			click: () => {
+				app.relaunch();
+				app.quit();
+			},
+		},
 		{
 			label: "Quit",
 			click: () => {
 				app.quit();
 			},
 		},
-	]);
+	];
+
+	const trayMenu = Menu.buildFromTemplate(template);
 	tray.setContextMenu(trayMenu);
 };

youtube-music.css

@@ -5,7 +5,7 @@
 /* Allow window dragging */
 ytmusic-nav-bar {
 	-webkit-user-select: none;
-	-webkit-app-region : drag;
+	-webkit-app-region: drag;
 }
 
 iron-icon,
@@ -17,11 +17,11 @@ a {
 
 /* custom style for navbar */
 ytmusic-app-layout {
-	--ytmusic-nav-bar-height: 85px;
+	--ytmusic-nav-bar-height: 90px;
 }
 
 ytmusic-search-box.ytmusic-nav-bar {
-	margin-top: 12px;
+	margin-top: 15px;
 }
 
 /* Blocking annoying elements */