Merge remote-tracking branch 'upstream/master' into custom-electron-prompt

config/defaults.js

@@ -37,6 +37,13 @@ const defaultConfig = {
 			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",
+			suffixesToRemove: [' - Topic', 'VEVO'] // removes suffixes of the artist name, for better recognition
+		},
 		discord: {
 			enabled: false,
 			activityTimoutEnabled: true, // if enabled, the discord rich presence gets cleared when music paused after the time specified below
@@ -44,8 +51,20 @@ const defaultConfig = {
 		},
 		notifications: {
 			enabled: false,
-			urgency: "normal",
+			unpauseNotification: 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
 		}
 	},
 };

index.js

@@ -100,10 +100,10 @@ function createMainWindow() {
 			affinity: "main-window", // main window, and addition windows should work in one process
 			...(isTesting()
 				? {
-						// Only necessary when testing with Spectron
+					// Only necessary when testing with Spectron
-						contextIsolation: false,
+					contextIsolation: false,
-						nodeIntegration: true,
+					nodeIntegration: true,
-				  }
+				}
 				: undefined),
 		},
 		frame: !is.macOS() && !useInlineMenu,
@@ -145,6 +145,10 @@ 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();
@@ -157,11 +161,31 @@ function createMainWindow() {
 app.once("browser-window-created", (event, 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) => {
@@ -281,13 +305,11 @@ app.on("ready", () => {
 	}
 
 	// Optimized for Mac OS X
-	if (is.macOS()) {
+	if (is.macOS() && !config.get("options.appVisible")) {
-		if (!config.get("options.appVisible")) {
+		app.dock.hide();
-			app.dock.hide();
-		}
 	}
 
-	var forceQuit = false;
+	let forceQuit = false;
 	app.on("before-quit", () => {
 		forceQuit = true;
 	});
@@ -302,3 +324,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

@@ -12,6 +12,8 @@ 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);
@@ -24,18 +26,16 @@ const pluginEnabledMenu = (win, plugin, label = "", hasSubmenu = false) => ({
 	},
 });
 
-const mainMenuTemplate = (win, withRoles = true, isTray = false) => [
+const mainMenuTemplate = (win) => [
 	{
 		label: "Plugins",
 		submenu: [
 			...getAllPlugins().map((plugin) => {
-				const pluginPath = path.join(__dirname, "plugins", plugin, "menu.js");
+				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,
@@ -50,13 +50,6 @@ const mainMenuTemplate = (win, withRoles = true, isTray = false) => [
 
 				return pluginEnabledMenu(win, plugin);
 			}),
-			{ type: "separator" },
-			{
-				label: "Advanced options",
-				click: () => {
-					config.edit();
-				},
-			},
 		],
 	},
 	{
@@ -70,30 +63,6 @@ const mainMenuTemplate = (win, withRoles = true, isTray = false) => [
 					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",
@@ -104,29 +73,29 @@ const mainMenuTemplate = (win, withRoles = true, isTray = false) => [
 			},
 			...(is.windows() || is.linux()
 				? [
-						{
+					{
-							label: "Hide menu",
+						label: "Hide menu",
-							type: "checkbox",
+						type: "checkbox",
-							checked: config.get("options.hideMenu"),
+						checked: config.get("options.hideMenu"),
-							click: (item) => {
+						click: (item) => {
-								config.set("options.hideMenu", item.checked);
+							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
+				// https://www.electronjs.org/docs/api/app#appsetloginitemsettingssettings-macos-windows
-				  [
+				[
-						{
+					{
-							label: "Start at login",
+						label: "Start at login",
-							type: "checkbox",
+						type: "checkbox",
-							checked: config.get("options.startAtLogin"),
+						checked: config.get("options.startAtLogin"),
-							click: (item) => {
+						click: (item) => {
-								config.set("options.startAtLogin", item.checked);
+							config.set("options.startAtLogin", item.checked);
-							},
 						},
-				  ]
+					},
+				]
 				: []),
 			{
 				label: "Tray",
@@ -182,79 +151,96 @@ const mainMenuTemplate = (win, withRoles = true, isTray = false) => [
 				}
 			},
 			{
-				label: "Toggle DevTools",
+				label: "Advanced options",
-				// Cannot use "toggleDevTools" role in MacOS
+				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;
+					win.webContents.reload();
-					if (webContents.isDevToolsOpened()) {
-						webContents.closeDevTools();
-					} else {
-						const devToolsOptions = {};
-						webContents.openDevTools(devToolsOptions);
-					}
 				},
 			},
 			{
-				label: "Advanced options",
+				label: "Force Reload",
 				click: () => {
-					config.edit();
+					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);
 				},
 			},
 		],
 	},
-	...(!isTray
-		? [
-				{
-					label: "View",
-					submenu: withRoles
-						? [
-								{ role: "reload" },
-								{ role: "forceReload" },
-								{ type: "separator" },
-								{ role: "zoomIn" },
-								{ role: "zoomOut" },
-								{ role: "resetZoom" },
-						  ]
-						: [
-								{
-									label: "Reload",
-									click: () => {
-										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: [
@@ -281,16 +267,12 @@ const mainMenuTemplate = (win, withRoles = true, isTray = false) => [
 					app.quit();
 				},
 			},
-			...(!isTray
+			{
-				? [
+				label: "Quit App",
-						{
+				click: () => {
-							label: "Quit App",
+					app.quit();
-							click: () => {
+				},
-								app.quit();
+			},
-							},
-						},
-				  ]
-				: []),
 		],
 	},
 ];

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version": "1.11.0",
+	"version": "1.12.0",
 	"description": "YouTube Music Desktop App - including custom plugins",
 	"license": "MIT",
 	"repository": "th-ch/youtube-music",
@@ -62,37 +62,39 @@
 		"npm": "Please use yarn and not npm"
 	},
 	"dependencies": {
-		"@cliqz/adblocker-electron": "^1.20.1",
+		"@cliqz/adblocker-electron": "^1.20.4",
 		"@ffmpeg/core": "^0.8.5",
 		"@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",
 		"custom-electron-prompt": "^1.0.2",
 		"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",
+		"electron-updater": "^4.3.8",
 		"filenamify": "^4.2.0",
+		"md5": "^2.3.0",
 		"node-fetch": "^2.6.1",
-		"ytdl-core": "^4.4.5",
+		"node-notifier": "^9.0.1",
-		"ytpl": "^2.0.5"
+		"open": "^8.0.3",
+		"ytdl-core": "^4.5.0",
+		"ytpl": "^2.1.1"
 	},
 	"devDependencies": {
-		"electron": "^11.2.3",
+		"electron": "^11.4.4",
-		"electron-builder": "^22.9.1",
+		"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"
+		"xo": "^0.38.2"
 	},
 	"resolutions": {
 		"yargs-parser": "18.1.3"
@@ -101,6 +103,16 @@
 		"envs": [
 			"node",
 			"browser"
-		]
+		],
+		"rules": {
+			"quotes": [
+				"error",
+				"double",
+				{
+					"avoidEscape": true,
+					"allowTemplateLiterals": true
+				}
+			]
+		}
 	}
 }

plugins/discord/back.js

@@ -55,9 +55,6 @@ module.exports = (win, {activityTimoutEnabled, activityTimoutTime}) => {
 		});
 
 		// Startup the rpc client
-		rpc.login({
+		rpc.login({ clientId }).catch(console.error);
-				clientId,
-			})
-			.catch(console.error);
 	});
 };

plugins/downloader/back.js

@@ -1,6 +1,8 @@
+const { writeFileSync } = require("fs");
 const { join } = require("path");
 
-const { dialog } = require("electron");
+const ID3Writer = require("browser-id3-writer");
+const { dialog, ipcMain } = require("electron");
 
 const getSongInfo = require("../../providers/song-info");
 const { injectCSS, listenAction } = require("../utils");
@@ -38,6 +40,34 @@ function handle(win) {
 				console.log("Unknown action: " + action);
 		}
 	});
+
+	ipcMain.on("add-metadata", (event, filePath, songBuffer, currentMetadata) => {
+		let fileBuffer = songBuffer;
+		const songMetadata = { ...metadata, ...currentMetadata };
+
+		try {
+			const coverBuffer = songMetadata.image.toPNG();
+			const writer = new ID3Writer(songBuffer);
+
+			// Create the metadata tags
+			writer
+				.setFrame("TIT2", songMetadata.title)
+				.setFrame("TPE1", [songMetadata.artist])
+				.setFrame("APIC", {
+					type: 3,
+					data: coverBuffer,
+					description: "",
+				});
+			writer.addTag();
+			fileBuffer = Buffer.from(writer.arrayBuffer);
+		} catch (error) {
+			sendError(win, error);
+		}
+
+		writeFileSync(filePath, fileBuffer);
+		// Notify the youtube-dl file
+		event.reply("add-metadata-done");
+	});
 }
 
 module.exports = handle;

plugins/downloader/front.js

@@ -44,7 +44,7 @@ global.download = () => {
 		.getAttribute("href");
 	videoUrl = !videoUrl
 		? global.songInfo.url || window.location.href
-		: baseUrl + videoUrl;
+		: baseUrl + "/" + videoUrl;
 
 	downloadVideoToMP3(
 		videoUrl,

plugins/downloader/utils.js

@@ -1,4 +1,5 @@
-const downloadsFolder = require("downloads-folder");
+const electron = require("electron");
 
-module.exports.getFolder = (customFolder) => customFolder || downloadsFolder();
+module.exports.getFolder = (customFolder) =>
+	customFolder || (electron.app || electron.remote.app).getPath("downloads");
 module.exports.defaultMenuDownloadLabel = "Download playlist";

plugins/downloader/youtube-dl.js

@@ -1,9 +1,7 @@
 const { randomBytes } = require("crypto");
-const { writeFileSync } = require("fs");
 const { join } = require("path");
 
 const Mutex = require("async-mutex").Mutex;
-const ID3Writer = require("browser-id3-writer");
 const { ipcRenderer } = require("electron");
 const is = require("electron-is");
 const filenamify = require("filenamify");
@@ -126,35 +124,19 @@ const toMP3 = async (
 			: 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
-		try {
+		sendFeedback("Adding metadata…");
-			const writer = new ID3Writer(fileBuffer);
+		ipcRenderer.send("add-metadata", filePath, fileBuffer, {
-			if (metadata.image) {
+			artist: metadata.artist,
-				const coverBuffer = metadata.image.toPNG();
+			title: metadata.title,
-
+		});
-				// Create the metadata tags
+		ipcRenderer.once("add-metadata-done", reinit);
-				writer
-					.setFrame("TIT2", metadata.title)
-					.setFrame("TPE1", [metadata.artist])
-					.setFrame("APIC", {
-						type: 3,
-						data: coverBuffer,
-						description: "",
-					});
-				writer.addTag();
-			}
-
-			writeFileSync(filePath, Buffer.from(writer.arrayBuffer));
-		} catch (error) {
-			sendError(error);
-		} finally {
-			reinit();
-		}
 	} catch (e) {
 		sendError(e);
 	} finally {

plugins/in-app-menu/back.js

@@ -7,8 +7,8 @@ const config = require("../../config");
 const { setApplicationMenu } = require("../../menu");
 const { injectCSS } = require("../utils");
 
-//check that menu doesn't get created twice
+//tracks menu visibility
-let done = false;
+let visible = true;
 // win hook for fixing menu
 let win;
 
@@ -16,7 +16,7 @@ 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
-	updateCheckboxesAndRadioButtons(win, template);
+	updateTemplate(template);
 
 	// return as normal
 	return originalBuildMenu(template);
@@ -28,47 +28,54 @@ module.exports = (winImport) => {
 	// css for custom scrollbar + disable drag area(was causing bugs)
 	injectCSS(win.webContents, path.join(__dirname, "style.css"));
 
-	win.on("ready-to-show", () => {
+	win.once("ready-to-show", () => {
-		// (apparently ready-to-show is called twice)
-		if (done) {
-			return;
-		}
-		done = true;
 
 		setApplicationMenu(win);
 
 		//register keyboard shortcut && hide menu if hideMenu is enabled
 		if (config.get("options.hideMenu")) {
-			switchMenuVisibility(win);
 			electronLocalshortcut.register(win, "Esc", () => {
-				switchMenuVisibility(win);
+				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"));
+	});
 };
 
-let visible = true;
+function switchMenuVisibility() {
-function switchMenuVisibility(win) {
+	setMenuVisibility(!visible);
-	visible = !visible;
+}
+
+function setMenuVisibility(value) {
+	visible = value;
 	win.webContents.send("updateMenu", visible);
 }
 
-function checkCheckbox(win, item) {
+function updateCheckboxesAndRadioButtons(item, isRadio, hasSubmenu) {
-	//check item
+	if (!isRadio) {
-	item.checked = !item.checked;
+		//fix checkbox
-	//update menu (closes it)
+		item.checked = !item.checked;
-	win.webContents.send("updateMenu", true);
+	}
+	//update menu if radio / hasSubmenu
+	if (isRadio || hasSubmenu) {
+		win.webContents.send("updateMenu", true);
+	}
 }
 
 // Update checkboxes/radio buttons
-function updateCheckboxesAndRadioButtons(win, template) {
+function updateTemplate(template) {
 	for (let item of template) {
 		// Change onClick of checkbox+radio
 		if ((item.type === "checkbox" || item.type === "radio") && !item.fixed) {
-			let originalOnclick = item.click;
+			const originalOnclick = item.click;
 			item.click = (itemClicked) => {
 				originalOnclick(itemClicked);
-				checkCheckbox(win, itemClicked);
+				updateCheckboxesAndRadioButtons(itemClicked, item.type === "radio", item.hasSubmenu);
 			};
 			item.fixed = true;
 		}

plugins/in-app-menu/style.css

@@ -8,36 +8,46 @@
 .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;
+	-webkit-app-region: unset !important;
-}
-
-/* Move navBar downwards and make it opaque */
-ytmusic-app-layout {
-	--ytmusic-nav-bar-height: 120px;
-}
-
-ytmusic-search-box.ytmusic-nav-bar {
-	margin-top: 29px;
 }
 
+/* navbar background black */
 .center-content.ytmusic-nav-bar {
 	background: #030303;
 }
-yt-page-navigation-progress,
+
-#progress.yt-page-navigation-progress,
+/* move up item selectrion renderer by 15 px */
-ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_]
+ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer {
-	#header.ytmusic-item-section-renderer,
+	top: 75 !important;
-ytmusic-header-renderer.ytmusic-search-page {
-	top: 90px !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;
@@ -56,13 +66,13 @@ ytmusic-header-renderer.ytmusic-search-page {
 	background-clip: padding-box;
 	border: 2px solid rgba(0, 0, 0, 0);
 
-	background: rgb(49, 0, 0);
+	background: #3a3a3a;
 	border-radius: 100px;
 	-moz-border-radius: 100px;
 	-webkit-border-radius: 100px;
 }
 ::-webkit-scrollbar-thumb:vertical:active {
-	background: rgb(56, 0, 0); /* Some darker color when you click it */
+	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,175 @@
+const fetch = require('node-fetch');
+const md5 = require('md5');
+const open = require("open");
+const { setOptions } = require('../../config/plugins');
+const getSongInfo = require('../../providers/song-info');
+const defaultConfig = require('../../config/defaults');
+
+const cleanupArtistName = (config, artist) => {
+	// removes the suffixes of the artist name for more recognition by last.fm
+	const { suffixesToRemove } = config;
+	if (suffixesToRemove === undefined) return artist;
+
+	for (suffix of suffixesToRemove) {
+		artist = artist.replace(suffix, '');
+	}
+	return artist;
+}
+
+const createFormData = params => {
+	// creates the body for in the post request
+	const formData = new URLSearchParams();
+	for (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 (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 (key in params) {
+		keys.push(key);
+	}
+	keys.sort();
+	let sig = '';
+	for (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);
+	open(`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) => {
+	const registerCallback = getSongInfo(win);
+
+	if (!config.api_root || !config.suffixesToRemove) {
+		// 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);
+		// make the artist name a bit cleaner
+		songInfo.artist = cleanupArtistName(config, songInfo.artist);
+		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/notifications/back.js

@@ -1,18 +1,17 @@
 const { Notification } = require("electron");
+const is = require("electron-is");
 const getSongInfo = require("../../providers/song-info");
+const { notificationImage } = require("./utils");
+
+const { setupInteractive, notifyInteractive } = require("./interactive")
 
 const notify = (info, options) => {
-	let notificationImage = "assets/youtube-music.png";
-
-	if (info.image) {
-		notificationImage = info.image.resize({ height: 256, width: 256 });
-	}
 
 	// Fill the notification with content
 	const notification = {
 		title: info.title || "Playing",
 		body: info.artist,
-		icon: notificationImage,
+		icon: notificationImage(info),
 		silent: true,
 		urgency: options.urgency,
 	};
@@ -25,10 +24,15 @@ const notify = (info, options) => {
 };
 
 module.exports = (win, options) => {
+	const isInteractive = is.windows() && options.interactive;
+	//setup interactive notifications for windows
+	if (isInteractive) {
+		setupInteractive(win, options.unpauseNotification);
+	}
 	const registerCallback = getSongInfo(win);
 	let oldNotification;
 	let oldURL = "";
-	win.on("ready-to-show", () => {
+	win.once("ready-to-show", () => {
 		// Register the callback for new song information
 		registerCallback(songInfo => {
 			// on pause - reset url? and skip notification
@@ -42,10 +46,14 @@ module.exports = (win, options) => {
 			// If url isn't the same as last one - send notification
 			if (songInfo.url !== oldURL) {
 				oldURL = songInfo.url;
-				// Close the old notification
+				if (isInteractive) {
-				oldNotification?.close();
+					notifyInteractive(songInfo);
-				// This fixes a weird bug that would cause the notification to be updated instead of showing
+				} else {
-				setTimeout(()=>{ oldNotification = notify(songInfo, options) }, 10);
+					// 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, options) }, 10);
+				}
 			}
 		});
 	});

plugins/notifications/interactive.js

@@ -0,0 +1,93 @@
+const { notificationImage, icons } = require("./utils");
+const getSongControls = require('../../providers/song-controls');
+const notifier = require("node-notifier");
+
+//store song controls reference on launch
+let controls;
+let notificationOnPause;
+
+//Save controls and onPause option
+module.exports.setupInteractive = (win, unpauseNotification) => {
+    const { playPause, next, previous } = getSongControls(win);
+    controls = { playPause, next, previous };
+
+    notificationOnPause = unpauseNotification;
+
+    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
+module.exports.notifyInteractive = 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 (!notificationOnPause) {
+                        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

@@ -1,19 +1,30 @@
-const {urgencyLevels, setUrgency, setUnpause} = require("./utils");
+const { urgencyLevels, setOption } = require("./utils");
+const is = require("electron-is");
 
 module.exports = (win, options) => [
-	{
+	...(is.linux() ?
-		label: "Notification Priority",
+		[{
-		submenu: urgencyLevels.map(level => ({
+			label: "Notification Priority",
-			label: level.name,
+			submenu: urgencyLevels.map(level => ({
-			type: "radio",
+				label: level.name,
-			checked: options.urgency === level.value,
+				type: "radio",
-			click: () => setUrgency(options, level.value)
+				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) => setUnpause(options, item.checked)
+		click: (item) => setOption(options, "unpauseNotification", item.checked)
-	}
+	},
 ];

plugins/notifications/utils.js

@@ -1,19 +1,56 @@
-const {setOptions} = require("../../config/plugins");
+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: "Low", value: "low" },
-	{name: "Normal", value: "normal"},
+	{ name: "Normal", value: "normal" },
-	{name: "High", value: "critical"},
+	{ name: "High", value: "critical" },
 ];
-module.exports.setUrgency = (options, level) => {
+
-	options.urgency = level
+module.exports.notificationImage = function (songInfo, saveIcon = false) {
-	setOption(options)
+	//return local path to temp icon
-};
+	if (saveIcon && !!songInfo.image) {
-module.exports.setUnpause = (options, value) => {
+		try {
-	options.unpauseNotification = value
+			fs.writeFileSync(tempIcon,
-	setOption(options)
+				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
 };
 
-let setOption = options => {
+function centerNativeImage(nativeImage) {
-	setOptions("notifications", options)
+	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,207 @@
+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) {
+		event.preventDefault();
+		switch (event.code) {
+			case "ArrowUp":
+				changeVolume(true, options);
+				break;
+			case "ArrowDown":
+				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,28 @@
+const { ipcRenderer } = require("electron");
+
+// Override specific listeners of volume-slider by modifying Element.prototype
+function overrideAddEventListener() {
+    // Events to ignore
+    const nativeEvents = ["mousewheel", "keydown", "keyup"];
+    // 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 (this.tagName === "TP-YT-PAPER-SLIDER") { // tagName of #volume-slider
+            for (const eventType of nativeEvents) {
+                if (eventType === type) {
+                    return;
+                }
+            }
+        }//else
+        this._addEventListener(type, listener, useCapture);
+    };
+}
+
+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;
+    });
+};

plugins/taskbar-mediacontrol/back.js

@@ -2,57 +2,53 @@ const getSongControls = require('../../providers/song-controls');
 const getSongInfo = require('../../providers/song-info');
 const path = require('path');
 
+let controls;
+let currentSongInfo;
+
 module.exports = win => {
-	win.hide = function () {
-		win.minimize();
-		win.setSkipTaskbar(true);
-	};
-
-	const show = win.show;
-	win.show = function () {
-		win.restore();
-		win.focus();
-		win.setSkipTaskbar(false);
-		show.apply(win);
-	};
-
-	win.isVisible = function () {
-		return !win.isMinimized();
-	};
-
 	const registerCallback = getSongInfo(win);
-	const {playPause, next, previous} = getSongControls(win);
+	const { playPause, next, previous } = getSongControls(win);
+	controls = { playPause, next, previous };
 
-	// If the page is ready, register the callback
+	registerCallback(songInfo => {
-	win.on('ready-to-show', () => {
+		//update currentsonginfo for win.on('show')
-		registerCallback(songInfo => {
+		currentSongInfo = songInfo;
-			// Wait for song to start before setting thumbar
+		// update thumbar
-			if (songInfo.title === '') {
+		setThumbar(win, songInfo);
-				return;
-			}
-
-			// Win32 require full rewrite of components
-			win.setThumbarButtons([
-				{
-					tooltip: 'Previous',
-					icon: get('backward.png'),
-					click() {previous(win.webContents);}
-				}, {
-					tooltip: 'Play/Pause',
-					// Update icon based on play state
-					icon: songInfo.isPaused ? get('play.png') : get('pause.png'),
-					click() {playPause(win.webContents);}
-				}, {
-					tooltip: 'Next',
-					icon: get('forward.png'),
-					click() {next(win.webContents);}
-				}
-			]);
-		});
 	});
+
+	// 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);
+	return path.join(__dirname, "assets", file);
 }

plugins/touchbar/back.js

@@ -63,7 +63,7 @@ module.exports = (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

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

preload.js

@@ -1,16 +1,23 @@
 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 plugins = config.plugins.getEnabled();
 
 plugins.forEach(([plugin, options]) => {
-	const pluginPath = path.join(__dirname, "plugins", plugin, "actions.js");
+	const preloadPath = path.join(__dirname, "plugins", plugin, "preload.js");
-	fileExists(pluginPath, () => {
+	fileExists(preloadPath, () => {
-		const actions = require(pluginPath).actions || {};
+		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);
@@ -33,6 +40,9 @@ document.addEventListener("DOMContentLoaded", () => {
 	const songInfoProviderPath = path.join(__dirname, "providers", "song-info-front.js")
 	fileExists(songInfoProviderPath, require(songInfoProviderPath));
 
+	// 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-info.js

@@ -5,6 +5,7 @@ const fetch = require("node-fetch");
 // This selects the progress bar, used for current progress
 const progressSelector = "#progress-bar";
 
+
 // Grab the progress using the selector
 const getProgress = async (win) => {
 	// Get current value of the progressbar element
@@ -28,6 +29,18 @@ const getPausedStatus = async (win) => {
 	return !title.includes("-");
 };
 
+const getArtist = async (win) => {
+	return await win.webContents.executeJavaScript(
+		`
+		var bar = document.getElementsByClassName('subtitle ytmusic-player-bar')[0];
+		var artistName = (bar.getElementsByClassName('yt-formatted-string')[0]) || (bar.getElementsByClassName('byline ytmusic-player-bar')[0]);
+		if (artistName) {
+			artistName.textContent;
+		}
+		`
+	)
+}
+
 // Fill songInfo with empty values
 const songInfo = {
 	title: "",
@@ -45,7 +58,7 @@ const songInfo = {
 const handleData = async (responseText, win) => {
 	let data = JSON.parse(responseText);
 	songInfo.title = data?.videoDetails?.title;
-	songInfo.artist = data?.videoDetails?.author;
+	songInfo.artist = await getArtist(win) || data?.videoDetails?.author;
 	songInfo.views = data?.videoDetails?.viewCount;
 	songInfo.imageSrc = data?.videoDetails?.thumbnail?.thumbnails?.pop()?.url;
 	songInfo.songDuration = data?.videoDetails?.lengthSeconds;

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
@@ -57,7 +56,13 @@ module.exports.setUpTray = (app, win) => {
 				win.show();
 			},
 		},
-		...mainMenuTemplate(win, true, true),
+		{
+			label: "Restart App",
+			click: () => {
+				app.relaunch();
+				app.quit();
+			},
+		},
 		{
 			label: "Quit",
 			click: () => {