Bump version to 1.15.0

Switch from spectron to playwright to fix tests

.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup NodeJS
         uses: actions/setup-node@v1
         with:
-          node-version: "12.x"
+          node-version: "14.x"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

config/defaults.js

@@ -30,23 +30,25 @@ const defaultConfig = {
 		// Disabled plugins
 		shortcuts: {
 			enabled: false,
+			overrideMediaKeys: false,
 		},
 		downloader: {
 			enabled: false,
 			ffmpegArgs: [], // e.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
 			downloadFolder: undefined, // Custom download folder (absolute path)
+			preset: "mp3",
 		},
 		"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
-			activityTimoutTime: 10 * 60 * 1000 // 10 minutes
+			activityTimoutTime: 10 * 60 * 1000, // 10 minutes
+			listenAlong: true, // add a "listen along" button to rich presence
 		},
 		notifications: {
 			enabled: false,
@@ -59,12 +61,27 @@ const defaultConfig = {
 			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"
+				volumeUp: "",
+				volumeDown: ""
 			},
 			savedVolume: undefined //plugin save volume between session here
-		}
+		},
+		sponsorblock: {
+			enabled: false,
+			apiURL: "https://sponsor.ajay.app",
+			categories: [
+				"sponsor",
+				"intro",
+				"outro",
+				"interaction",
+				"selfpromo",
+				"music_offtopic",
+			],
+		},
+		"video-toggle": {
+			enabled: false,
+			forceHide: false,
+		},
 	},
 };
 

config/store.js

@@ -3,6 +3,44 @@ const Store = require("electron-store");
 const defaults = require("./defaults");
 
 const migrations = {
+	">=1.14.0": (store) => {
+		if (
+			typeof store.get("plugins.precise-volume.globalShortcuts") !== "object"
+		) {
+			store.set("plugins.precise-volume.globalShortcuts", {});
+		}
+
+		if (store.get("plugins.hide-video-player.enabled")) {
+			store.delete("plugins.hide-video-player");
+			store.set("plugins.video-toggle.enabled", true);
+		}
+	},
+	">=1.13.0": (store) => {
+		if (store.get("plugins.discord.listenAlong") === undefined) {
+			store.set("plugins.discord.listenAlong", true);
+		}
+	},
+	">=1.12.0": (store) => {
+		const options = store.get("plugins.shortcuts");
+		let updated = false;
+		for (const optionType of ["global", "local"]) {
+			if (Array.isArray(options[optionType])) {
+				const updatedOptions = {};
+				for (const optionObject of options[optionType]) {
+					if (optionObject.action && optionObject.shortcut) {
+						updatedOptions[optionObject.action] = optionObject.shortcut;
+					}
+				}
+
+				options[optionType] = updatedOptions;
+				updated = true;
+			}
+		}
+
+		if (updated) {
+			store.set("plugins.shortcuts", options);
+		}
+	},
 	">=1.11.0": (store) => {
 		if (store.get("options.resumeOnStart") === undefined) {
 			store.set("options.resumeOnStart", true);

index.js

@@ -2,6 +2,9 @@
 const path = require("path");
 
 const electron = require("electron");
+const remote = require('@electron/remote/main');
+remote.initialize();
+const enhanceWebRequest = require("electron-better-web-request").default;
 const is = require("electron-is");
 const unhandled = require("electron-unhandled");
 const { autoUpdater } = require("electron-updater");
@@ -11,6 +14,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({
@@ -22,8 +26,9 @@ const app = electron.app;
 app.commandLine.appendSwitch(
 	"js-flags",
 	// WebAssembly flags
-	"--experimental-wasm-threads --experimental-wasm-bulk-memory"
+	"--experimental-wasm-threads"
 );
+app.commandLine.appendSwitch("enable-features", "SharedArrayBuffer"); // Required for downloader
 app.allowRendererProcessReuse = true; // https://github.com/electron/electron/issues/18397
 if (config.get("options.disableHardwareAcceleration")) {
 	if (is.dev()) {
@@ -37,7 +42,9 @@ if (config.get("options.proxy")) {
 }
 
 // Adds debug features like hotkeys for triggering dev tools and reload
-require("electron-debug")();
+require("electron-debug")({
+	showDevTools: false //disable automatic devTools on new window
+});
 
 // Prevent window being garbage collected
 let mainWindow;
@@ -58,7 +65,7 @@ function onClosed() {
 
 function loadPlugins(win) {
 	injectCSS(win.webContents, path.join(__dirname, "youtube-music.css"));
-	win.webContents.on("did-finish-load", () => {
+	win.webContents.once("did-finish-load", () => {
 		if (is.dev()) {
 			console.log("did finish load");
 			win.webContents.openDevTools();
@@ -94,7 +101,6 @@ function createMainWindow() {
 			preload: path.join(__dirname, "preload.js"),
 			nodeIntegrationInSubFrames: true,
 			nativeWindowOpen: true, // window.open return Window object(like in regular browsers), not BrowserWindowProxy
-			enableRemoteModule: true,
 			affinity: "main-window", // main window, and addition windows should work in one process
 			...(isTesting()
 				? {
@@ -112,6 +118,7 @@ function createMainWindow() {
 			: "default",
 		autoHideMenuBar: config.get("options.hideMenu"),
 	});
+	remote.enable(win.webContents);
 	if (windowPosition) {
 		const { x, y } = windowPosition;
 		win.setPosition(x, y);
@@ -142,21 +149,49 @@ 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();
 		}
 	});
 
+	removeContentSecurityPolicy();
+
 	return win;
 }
 
 app.once("browser-window-created", (event, win) => {
+	// User agents are from https://developers.whatismybrowser.com/useragents/explore/
+	const originalUserAgent = win.webContents.userAgent;
+	const userAgents = {
+		mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 12.1; rv:95.0) Gecko/20100101 Firefox/95.0",
+		windows: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0",
+		linux: "Mozilla/5.0 (Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0",
+	}
+
+	const updatedUserAgent = 
+		is.macOS() ? userAgents.mac :
+		is.windows() ? userAgents.windows :
+		userAgents.linux;
+
+	win.webContents.userAgent = updatedUserAgent;
+	app.userAgentFallback = updatedUserAgent;
+
+	win.webContents.session.webRequest.onBeforeSendHeaders((details, cb) => {
+		// this will only happen if login failed, and "retry" was pressed
+		if (win.webContents.getURL().startsWith("https://accounts.google.com") && details.url.startsWith("https://accounts.google.com")){
+			details.requestHeaders["User-Agent"] = originalUserAgent;
+		}
+		cb({ requestHeaders: details.requestHeaders });
+	});
+
+
+	setupSongInfo(win);
 	loadPlugins(win);
 
 	win.webContents.on("did-fail-load", (
@@ -190,28 +225,6 @@ app.once("browser-window-created", (event, win) => {
 		event.preventDefault();
 	});
 
-	win.webContents.on("did-navigate-in-page", () => {
-		const url = win.webContents.getURL();
-		if (url.startsWith("https://music.youtube.com")) {
-			config.set("url", url);
-		}
-	});
-
-	win.webContents.on("will-navigate", (_, url) => {
-		if (url.startsWith("https://accounts.google.com")) {
-			// Force user-agent "Firefox Windows" for Google OAuth to work
-			// From https://github.com/firebase/firebase-js-sdk/issues/2478#issuecomment-571356751
-			// Only set on accounts.google.com, otherwise querySelectors in preload scripts fail (?)
-			const userAgent =
-				"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:70.0) Gecko/20100101 Firefox/70.0";
-
-			win.webContents.session.webRequest.onBeforeSendHeaders((details, cb) => {
-				details.requestHeaders["User-Agent"] = userAgent;
-				cb({ requestHeaders: details.requestHeaders });
-			});
-		}
-	});
-
 	win.webContents.on(
 		"new-window",
 		(e, url, frameName, disposition, options) => {
@@ -255,6 +268,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")) {
@@ -302,6 +344,14 @@ app.on("ready", () => {
 		});
 	}
 
+	if (config.get("options.hideMenu") && !config.get("options.hideMenuWarned")) {
+		electron.dialog.showMessageBox(mainWindow, {
+			type: 'info', title: 'Hide Menu Enabled',
+			message: "Menu is hidden, use 'Alt' to show it (or 'Escape' if using in-app-menu)"
+		});
+		config.set("options.hideMenuWarned", true);
+	}
+
 	// Optimized for Mac OS X
 	if (is.macOS() && !config.get("options.appVisible")) {
 		app.dock.hide();
@@ -342,7 +392,45 @@ function showUnresponsiveDialog(win, details) {
 				app.quit();
 				break;
 			default:
-				break; 
+				break;
 		}
 	});
 }
+
+function removeContentSecurityPolicy(
+	session = electron.session.defaultSession
+) {
+	// Allows defining multiple "onHeadersReceived" listeners
+	// by enhancing the session.
+	// Some plugins (e.g. adblocker) also define a "onHeadersReceived" listener
+	enhanceWebRequest(session);
+
+	// Custom listener to tweak the content security policy
+	session.webRequest.onHeadersReceived(function (details, callback) {
+		if (
+			!details.responseHeaders["content-security-policy-report-only"] &&
+			!details.responseHeaders["content-security-policy"]
+		)
+			return callback({ cancel: false });
+		delete details.responseHeaders["content-security-policy-report-only"];
+		delete details.responseHeaders["content-security-policy"];
+		callback({ cancel: false, responseHeaders: details.responseHeaders });
+	});
+
+	// When multiple listeners are defined, apply them all
+	session.webRequest.setResolver("onHeadersReceived", (listeners) => {
+		const response = listeners.reduce(
+			async (accumulator, listener) => {
+				if (accumulator.cancel) {
+					return accumulator;
+				}
+
+				const result = await listener.apply();
+				return { ...accumulator, ...result };
+			},
+			{ cancel: false }
+		);
+
+		return response;
+	});
+}

jest.config.js

@@ -2,6 +2,5 @@ module.exports = {
 	globals: {
 		__APP__: undefined, // A different app will be launched in each test environment
 	},
-	testEnvironment: "./tests/environment",
 	testTimeout: 30000, // 30s
 };

menu.js

@@ -1,18 +1,22 @@
 const { existsSync } = require("fs");
 const path = require("path");
 
-const { app, Menu } = require("electron");
+const { app, Menu, dialog } = require("electron");
 const is = require("electron-is");
 
 const { getAllPlugins } = require("./plugins/utils");
 const config = require("./config");
 
-const pluginEnabledMenu = (win, plugin, label = "", hasSubmenu = false) => ({
+const prompt = require("custom-electron-prompt");
+const promptOptions = require("./providers/prompt-options");
+
+// true only if in-app-menu was loaded on launch
+const inAppMenuActive = config.plugins.isEnabled("in-app-menu");
+
+const pluginEnabledMenu = (plugin, label = "", hasSubmenu = false, refreshMenu = undefined) => ({
 	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);
@@ -20,252 +24,248 @@ const pluginEnabledMenu = (win, plugin, label = "", hasSubmenu = false) => ({
 			config.plugins.disable(plugin);
 		}
 		if (hasSubmenu) {
-			this.setApplicationMenu(win);
+			refreshMenu();
 		}
 	},
 });
 
-const mainMenuTemplate = (win) => [
-	{
-		label: "Plugins",
-		submenu: [
-			...getAllPlugins().map((plugin) => {
-				const pluginPath = path.join(__dirname, "plugins", plugin, "menu.js")
-				if (existsSync(pluginPath)) {
-					if (!config.plugins.isEnabled(plugin)) {
-						return pluginEnabledMenu(win, plugin, "", true);
+const mainMenuTemplate = (win) => {
+	const refreshMenu = () => {
+		this.setApplicationMenu(win);
+		if (inAppMenuActive) {
+			win.webContents.send("updateMenu", true);
+		}
+	}
+	return [
+		{
+			label: "Plugins",
+			submenu: [
+				...getAllPlugins().map((plugin) => {
+					const pluginPath = path.join(__dirname, "plugins", plugin, "menu.js")
+					if (existsSync(pluginPath)) {
+						if (!config.plugins.isEnabled(plugin)) {
+							return pluginEnabledMenu(plugin, "", true, refreshMenu);
+						}
+						const getPluginMenu = require(pluginPath);
+						return {
+							label: plugin,
+							submenu: [
+								pluginEnabledMenu(plugin, "Enabled", true, refreshMenu),
+								...getPluginMenu(win, config.plugins.getOptions(plugin), refreshMenu),
+							],
+						};
 					}
-					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);
-			}),
-		],
-	},
-	{
-		label: "Options",
-		submenu: [
-			{
-				label: "Auto-update",
-				type: "checkbox",
-				checked: config.get("options.autoUpdates"),
-				click: (item) => {
-					config.set("options.autoUpdates", item.checked);
+					return pluginEnabledMenu(plugin);
+				}),
+			],
+		},
+		{
+			label: "Options",
+			submenu: [
+				{
+					label: "Auto-update",
+					type: "checkbox",
+					checked: config.get("options.autoUpdates"),
+					click: (item) => {
+						config.set("options.autoUpdates", item.checked);
+					},
 				},
-			},
-			{
-				label: "Resume last song when app starts",
-				type: "checkbox",
-				checked: config.get("options.resumeOnStart"),
-				click: (item) => {
-					config.set("options.resumeOnStart", item.checked);
+				{
+					label: "Resume last song when app starts",
+					type: "checkbox",
+					checked: config.get("options.resumeOnStart"),
+					click: (item) => {
+						config.set("options.resumeOnStart", item.checked);
+					},
 				},
-			},
-			...(is.windows() || is.linux()
-				? [
-					{
-						label: "Hide menu",
+				{
+					label: "Remove upgrade button",
+					type: "checkbox",
+					checked: config.get("options.removeUpgradeButton"),
+					click: (item) => {
+						config.set("options.removeUpgradeButton", item.checked);
+					},
+				},
+				...(is.windows() || is.linux()
+					? [
+						{
+							label: "Hide menu",
+							type: "checkbox",
+							checked: config.get("options.hideMenu"),
+							click: (item) => {
+								config.set("options.hideMenu", item.checked);
+								if (item.checked && !config.get("options.hideMenuWarned")) {
+									dialog.showMessageBox(win, {
+										type: 'info', title: 'Hide Menu Enabled',
+										message: "Menu will be hidden on next launch, use 'Alt' to show it (or 'Escape' if using in-app-menu)"
+									});
+								}
+							},
+						},
+					]
+					: []),
+				...(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);
+							},
+						},
+					]
+					: []),
+				{
+					label: "Tray",
+					submenu: [
+						{
+							label: "Disabled",
+							type: "radio",
+							checked: !config.get("options.tray"),
+							click: () => {
+								config.set("options.tray", false);
+								config.set("options.appVisible", true);
+							},
+						},
+						{
+							label: "Enabled + app visible",
+							type: "radio",
+							checked:
+								config.get("options.tray") && config.get("options.appVisible"),
+							click: () => {
+								config.set("options.tray", true);
+								config.set("options.appVisible", true);
+							},
+						},
+						{
+							label: "Enabled + app hidden",
+							type: "radio",
+							checked:
+								config.get("options.tray") && !config.get("options.appVisible"),
+							click: () => {
+								config.set("options.tray", true);
+								config.set("options.appVisible", false);
+							},
+						},
+						{ type: "separator" },
+						{
+							label: "Play/Pause on click",
+							type: "checkbox",
+							checked: config.get("options.trayClickPlayPause"),
+							click: (item) => {
+								config.set("options.trayClickPlayPause", item.checked);
+							},
+						},
+					],
+				},
+				{ type: "separator" },
+				{
+					label: "Advanced options",
+					submenu: [
+            	{
+						label: "Proxy",
 						type: "checkbox",
-						checked: config.get("options.hideMenu"),
+						checked: !!config.get("options.proxy"),
 						click: (item) => {
-							config.set("options.hideMenu", item.checked);
+							setProxy(item, win);
+						  },
+					  },
+						{
+							label: "Disable hardware acceleration",
+							type: "checkbox",
+							checked: config.get("options.disableHardwareAcceleration"),
+							click: (item) => {
+								config.set("options.disableHardwareAcceleration", 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);
+						{
+							label: "Restart on config changes",
+							type: "checkbox",
+							checked: config.get("options.restartOnConfigChanges"),
+							click: (item) => {
+								config.set("options.restartOnConfigChanges", item.checked);
+							},
 						},
-					},
-				]
-				: []),
-			{
-				label: "Tray",
-				submenu: [
-					{
-						label: "Disabled",
-						type: "radio",
-						checked: !config.get("options.tray"),
-						click: () => {
-							config.set("options.tray", false);
-							config.set("options.appVisible", true);
+						{
+							label: "Reset App cache when app starts",
+							type: "checkbox",
+							checked: config.get("options.autoResetAppCache"),
+							click: (item) => {
+								config.set("options.autoResetAppCache", item.checked);
+							},
 						},
-					},
-					{
-						label: "Enabled + app visible",
-						type: "radio",
-						checked:
-							config.get("options.tray") && config.get("options.appVisible"),
-						click: () => {
-							config.set("options.tray", true);
-							config.set("options.appVisible", true);
+						{ type: "separator" },
+						is.macOS() ?
+							{
+								label: "Toggle DevTools",
+								// Cannot use "toggleDevTools" role in MacOS
+								click: () => {
+									const { webContents } = win;
+									if (webContents.isDevToolsOpened()) {
+										webContents.closeDevTools();
+									} else {
+										const devToolsOptions = {};
+										webContents.openDevTools(devToolsOptions);
+									}
+								},
+							} :
+							{ role: "toggleDevTools" },
+						{
+							label: "Edit config.json",
+							click: () => {
+								config.edit();
+							},
 						},
-					},
-					{
-						label: "Enabled + app hidden",
-						type: "radio",
-						checked:
-							config.get("options.tray") && !config.get("options.appVisible"),
-						click: () => {
-							config.set("options.tray", true);
-							config.set("options.appVisible", false);
-						},
-					},
-					{ type: "separator" },
-					{
-						label: "Play/Pause on click",
-						type: "checkbox",
-						checked: config.get("options.trayClickPlayPause"),
-						click: (item) => {
-							config.set("options.trayClickPlayPause", item.checked);
-						},
-					},
-				],
-			},
-			{ type: "separator" },
-			{
-				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: () => {
-					win.webContents.reload();
+					]
 				},
-			},
-			{
-				label: "Force Reload",
-				click: () => {
-					win.webContents.reloadIgnoringCache();
+			],
+		},
+		{
+			label: "View",
+			submenu: [
+				{ role: "reload" },
+				{ role: "forceReload" },
+				{ type: "separator" },
+				{ role: "zoomIn" },
+				{ role: "zoomOut" },
+				{ role: "resetZoom" },
+			],
+		},
+		{
+			label: "Navigation",
+			submenu: [
+				{
+					label: "Go back",
+					click: () => {
+						if (win.webContents.canGoBack()) {
+							win.webContents.goBack();
+						}
+					},
 				},
-			},
-			{ type: "separator" },
-			{
-				label: "Zoom In",
-				click: () => {
-					win.webContents.setZoomLevel(
-						win.webContents.getZoomLevel() + 1
-					);
+				{
+					label: "Go forward",
+					click: () => {
+						if (win.webContents.canGoForward()) {
+							win.webContents.goForward();
+						}
+					},
 				},
-			},
-			{
-				label: "Zoom Out",
-				click: () => {
-					win.webContents.setZoomLevel(
-						win.webContents.getZoomLevel() - 1
-					);
+				{
+					label: "Restart App",
+					click: () => {
+						app.relaunch();
+						app.quit();
+					},
 				},
-			},
-			{
-				label: "Reset Zoom",
-				click: () => {
-					win.webContents.setZoomLevel(0);
-				},
-			},
-		],
-	},
-	{
-		label: "Navigation",
-		submenu: [
-			{
-				label: "Go back",
-				click: () => {
-					if (win.webContents.canGoBack()) {
-						win.webContents.goBack();
-					}
-				},
-			},
-			{
-				label: "Go forward",
-				click: () => {
-					if (win.webContents.canGoForward()) {
-						win.webContents.goForward();
-					}
-				},
-			},
-			{
-				label: "Restart App",
-				click: () => {
-					app.relaunch();
-					app.quit();
-				},
-			},
-			{
-				label: "Quit App",
-				click: () => {
-					app.quit();
-				},
-			},
-		],
-	},
-];
+				{ role: "quit" },
+			],
+		},
+	];
+}
 
 module.exports.mainMenuTemplate = mainMenuTemplate;
 module.exports.setApplicationMenu = (win) => {
@@ -300,3 +300,25 @@ module.exports.setApplicationMenu = (win) => {
 	const menu = Menu.buildFromTemplate(menuTemplate);
 	Menu.setApplicationMenu(menu);
 };
+
+async function setProxy(item, win) {
+	const output = await prompt({
+		title: 'Set Proxy',
+		label: 'Enter Proxy Address: (leave empty to disable)',
+		value: config.get("options.proxy"),
+		type: 'input',
+		inputAttrs: {
+			type: 'url',
+			placeholder: "Example: 'socks5://127.0.0.1:9999"
+		},
+		width: 450,
+		...promptOptions()
+	}, win);
+
+	if (typeof output === "string") {
+		config.set("options.proxy", output);
+		item.checked = output !== "";
+	} else { //user pressed cancel
+		item.checked = !item.checked; //reset checkbox
+	}
+}

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version": "1.12.0",
+	"version": "1.15.0",
 	"description": "YouTube Music Desktop App - including custom plugins",
 	"license": "MIT",
 	"repository": "th-ch/youtube-music",
@@ -37,11 +37,21 @@
 				"deb",
 				"rpm"
 			]
+		},
+		"snap": {
+			"slots": [
+				{
+					"mpris": {
+						"interface": "mpris"
+					}
+				}
+			]
 		}
 	},
 	"scripts": {
 		"test": "jest",
-		"start": "electron .",
+		"start": "NODE_OPTIONS= 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",
@@ -50,52 +60,57 @@
 		"build:linux": "yarn run clean && electron-builder --linux",
 		"build:mac": "yarn run clean && electron-builder --mac",
 		"build:win": "yarn run clean && electron-builder --win",
-		"plugins": "yarn run plugin:adblocker && yarn run plugin:autoconfirm",
+		"lint": "xo",
+		"plugins": "yarn run plugin:adblocker",
 		"plugin:adblocker": "rimraf plugins/adblocker/ad-blocker-engine.bin && node plugins/adblocker/blocker.js",
-		"plugin:autoconfirm": "yarn run generate:package YoutubeNonStop",
 		"release:linux": "yarn run clean && electron-builder --linux -p always -c.snap.publish=github",
 		"release:mac": "yarn run clean && electron-builder --mac -p always",
 		"release:win": "yarn run clean && electron-builder --win -p always"
 	},
 	"engines": {
-		"node": ">=12.16.1",
+		"node": ">=14.0.0",
 		"npm": "Please use yarn and not npm"
 	},
 	"dependencies": {
-		"@cliqz/adblocker-electron": "^1.20.4",
-		"@ffmpeg/core": "^0.8.5",
-		"@ffmpeg/ffmpeg": "^0.9.7",
-		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.9.0",
-		"async-mutex": "^0.3.1",
+		"@cliqz/adblocker-electron": "^1.23.1",
+		"@electron/remote": "^2.0.1",
+		"@ffmpeg/core": "^0.10.0",
+		"@ffmpeg/ffmpeg": "^0.10.0",
+		"async-mutex": "^0.3.2",
 		"browser-id3-writer": "^4.4.0",
-		"custom-electron-titlebar": "^3.2.6",
+		"chokidar": "^3.5.2",
+		"custom-electron-prompt": "^1.4.0",
+		"custom-electron-titlebar": "^3.2.9",
 		"discord-rpc": "^3.2.0",
+		"electron-better-web-request": "^1.0.1",
 		"electron-debug": "^3.2.0",
 		"electron-is": "^3.0.0",
 		"electron-localshortcut": "^3.2.1",
 		"electron-store": "^7.0.3",
 		"electron-unhandled": "^3.0.2",
-		"electron-updater": "^4.3.8",
-		"filenamify": "^4.2.0",
+		"electron-updater": "^4.6.3",
+		"filenamify": "^4.3.0",
+		"hark": "^1.2.3",
 		"md5": "^2.3.0",
-		"node-fetch": "^2.6.1",
+		"mpris-service": "^2.1.2",
+		"node-fetch": "^2.6.6",
 		"node-notifier": "^9.0.1",
-		"open": "^8.0.3",
-		"ytdl-core": "^4.5.0",
-		"ytpl": "^2.1.1"
+		"ytdl-core": "^4.9.2",
+		"ytpl": "^2.2.3"
 	},
 	"devDependencies": {
-		"electron": "^11.4.4",
+		"electron": "^16.0.5",
 		"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",
+		"jest": "^27.3.1",
+		"playwright": "^1.17.1",
 		"rimraf": "^3.0.2",
-		"spectron": "^13.0.0",
-		"xo": "^0.38.2"
+		"xo": "^0.45.0"
 	},
 	"resolutions": {
+		"glob-parent": "5.1.2",
+		"minimist": "1.2.5",
 		"yargs-parser": "18.1.3"
 	},
 	"xo": {

plugins/adblocker/blocker.js

@@ -8,7 +8,9 @@ const SOURCES = [
 	"https://raw.githubusercontent.com/kbinani/adblock-youtube-ads/master/signed.txt",
 	// uBlock Origin
 	"https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt",
-	"https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters-2020.txt",
+	"https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters-2021.txt",
+	// Fanboy Annoyances
+	"https://secure.fanboy.co.nz/fanboy-annoyance_ubo.txt",
 ];
 
 const loadAdBlockerEngine = (
@@ -31,7 +33,17 @@ const loadAdBlockerEngine = (
 		...additionalBlockLists,
 	];
 
-	ElectronBlocker.fromLists(fetch, lists, {}, cachingOptions)
+	ElectronBlocker.fromLists(
+		fetch,
+		lists,
+		{
+			// when generating the engine for caching, do not load network filters
+			// So that enhancing the session works as expected
+			// Allowing to define multiple webRequest listeners
+			loadNetworkFilters: session !== undefined,
+		},
+		cachingOptions
+	)
 		.then((blocker) => {
 			if (session) {
 				blocker.enableBlockingInSession(session);

plugins/audio-compressor/front.js

@@ -0,0 +1,17 @@
+const applyCompressor = () => {
+	const audioContext = new AudioContext();
+
+	const compressor = audioContext.createDynamicsCompressor();
+	compressor.threshold.value = -50;
+	compressor.ratio.value = 12;
+	compressor.knee.value = 40;
+	compressor.attack.value = 0;
+	compressor.release.value = 0.25;
+
+	const source = audioContext.createMediaElementSource(document.querySelector("video"));
+
+	source.connect(compressor);
+	compressor.connect(audioContext.destination);
+};
+
+module.exports = () => document.addEventListener('apiLoaded', applyCompressor, { once: true, passive: true });

plugins/auto-confirm-when-paused/front.js

@@ -1,12 +0,0 @@
-// Define global chrome object to be compliant with the extension code
-global.chrome = {
-	runtime: {
-		getManifest: () => ({
-			version: 1
-		})
-	}
-};
-
-module.exports = () => {
-	require("YoutubeNonStop/autoconfirm.js");
-};

plugins/blur-nav-bar/back.js

@@ -1,5 +1,5 @@
-const { injectCSS } = require("../utils");
 const path = require("path");
+const { injectCSS } = require("../utils");
 
 module.exports = win => {
 	injectCSS(win.webContents, path.join(__dirname, "style.css"));

plugins/blur-nav-bar/style.css

@@ -0,0 +1,10 @@
+#nav-bar-background,
+#header.ytmusic-item-section-renderer,
+ytmusic-tabs {
+	background: rgba(0, 0, 0, 0.3) !important;
+	backdrop-filter: blur(8px) !important;
+}
+
+#nav-bar-divider {
+	display: none !important;
+}

plugins/disable-autoplay/front.js

@@ -1,25 +1,14 @@
-let videoElement = null;
-
-const observer = new MutationObserver((mutations, observer) => {
-	if (!videoElement) {
-		videoElement = document.querySelector("video");
-	}
-
-	if (videoElement) {
-		videoElement.ontimeupdate = () => {
-			if (videoElement.currentTime === 0 && videoElement.duration !== NaN) {
-				// auto-confirm-when-paused plugin can interfere here if not disabled!
-				videoElement.pause();
-			}
-		};
-	}
-});
-
-function observeVideoElement() {
-	observer.observe(document, {
-		childList: true,
-		subtree: true,
-	});
-}
-
-module.exports = observeVideoElement;
+module.exports = () => {
+	document.addEventListener('apiLoaded', apiEvent => {
+		apiEvent.detail.addEventListener('videodatachange', name => {
+			if (name === 'dataloaded') {
+				apiEvent.detail.pauseVideo();
+				document.querySelector('video').ontimeupdate = e => {
+					e.target.pause();
+				}
+			} else {
+				document.querySelector('video').ontimeupdate = null;
+		   }
+		})
+	}, { once: true, passive: true })
+};

plugins/discord/back.js

@@ -1,60 +1,148 @@
 const Discord = require("discord-rpc");
+const { dev } = require("electron-is");
+const { dialog, app } = require("electron");
 
-const getSongInfo = require("../../providers/song-info");
-
-const rpc = new Discord.Client({
-	transport: "ipc",
-});
+const registerCallback = require("../../providers/song-info");
 
 // Application ID registered by @semvis123
 const clientId = "790655993809338398";
 
-let clearActivity;
+/**
+ * @typedef {Object} Info
+ * @property {import('discord-rpc').Client} rpc
+ * @property {boolean} ready
+ * @property {import('../../providers/song-info').SongInfo} lastSongInfo
+ */
+/**
+ * @type {Info}
+ */
+const info = {
+	rpc: null,
+	ready: false,
+	lastSongInfo: null,
+};
+/**
+ * @type {(() => void)[]}
+ */
+const refreshCallbacks = [];
+const resetInfo = () => {
+	info.rpc = null;
+	info.ready = false;
+	clearTimeout(clearActivity);
+	if (dev()) console.log("discord disconnected");
+	refreshCallbacks.forEach(cb => cb());
+};
 
-module.exports = (win, {activityTimoutEnabled, activityTimoutTime}) => {
-	const registerCallback = getSongInfo(win);
+let window;
+const connect = (showErr = false) => {
+	if (info.rpc) {
+		if (dev())
+			console.log('Attempted to connect with active RPC object');
+		return;
+	}
+
+	info.rpc = new Discord.Client({
+		transport: "ipc",
+	});
+	info.ready = false;
+
+	info.rpc.once("connected", () => {
+		if (dev()) console.log("discord connected");
+		refreshCallbacks.forEach(cb => cb());
+	});
+	info.rpc.once("ready", () => {
+		info.ready = true;
+		if (info.lastSongInfo) updateActivity(info.lastSongInfo)
+	});
+	info.rpc.once("disconnected", resetInfo);
+
+	// Startup the rpc client
+	info.rpc.login({ clientId }).catch(err => {
+		resetInfo();
+		if (dev()) console.error(err);
+		if (showErr) dialog.showMessageBox(window, { title: 'Connection failed', message: err.message || String(err), type: 'error' });
+	});
+};
+
+let clearActivity;
+/**
+ * @type {import('../../providers/song-info').songInfoCallback}
+ */
+let updateActivity;
+
+module.exports = (win, { activityTimoutEnabled, activityTimoutTime, listenAlong }) => {
+	window = win;
+	// We get multiple events
+	// Next song: PAUSE(n), PAUSE(n+1), PLAY(n+1)
+	// Skip time: PAUSE(N), PLAY(N)
+	updateActivity = songInfo => {
+		if (songInfo.title.length === 0 && songInfo.artist.length === 0) {
+			return;
+		}
+		info.lastSongInfo = songInfo;
+
+		// stop the clear activity timout
+		clearTimeout(clearActivity);
+
+		// stop early if discord connection is not ready
+		// do this after clearTimeout to avoid unexpected clears
+		if (!info.rpc || !info.ready) {
+			return;
+		}
+
+		// clear directly if timeout is 0
+		if (songInfo.isPaused && activityTimoutEnabled && activityTimoutTime === 0) {
+			info.rpc.clearActivity().catch(console.error);
+			return;
+		}
+
+		// Song information changed, so lets update the rich presence
+		// @see https://discord.com/developers/docs/topics/gateway#activity-object
+		// not all options are transfered through https://github.com/discordjs/RPC/blob/6f83d8d812c87cb7ae22064acd132600407d7d05/src/client.js#L518-530
+		const activityInfo = {
+			type: 2, // Listening, addressed in https://github.com/discordjs/RPC/pull/149
+			details: songInfo.title,
+			state: songInfo.artist,
+			largeImageKey: songInfo.imageSrc,
+			largeImageText: [
+				songInfo.uploadDate,
+				songInfo.views.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " views",
+			].join(' || '),
+			buttons: listenAlong ? [
+				{ label: "Listen Along", url: songInfo.url },
+			] : undefined,
+		};
+
+		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(() => info.rpc.clearActivity().catch(console.error), activityTimoutTime ?? 10000);
+		} else {
+			// Add the start and end time of the song
+			const songStartTime = Date.now() - songInfo.elapsedSeconds * 1000;
+			activityInfo.startTimestamp = songStartTime;
+			activityInfo.endTimestamp =
+				songStartTime + songInfo.songDuration * 1000;
+		}
+
+		info.rpc.setActivity(activityInfo).catch(console.error);
+	};
 
 	// If the page is ready, register the callback
 	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.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;
-					activityInfo.endTimestamp =
-						songStartTime + songInfo.songDuration * 1000;
-				}
-
-				rpc.setActivity(activityInfo);
-			});
-		});
-
-		// Startup the rpc client
-		rpc.login({ clientId }).catch(console.error);
+		registerCallback(updateActivity);
+		connect();
 	});
+	app.on('window-all-closed', module.exports.clear)
 };
+
+module.exports.clear = () => {
+	if (info.rpc) info.rpc.clearActivity();
+	clearTimeout(clearActivity);
+};
+module.exports.connect = connect;
+module.exports.registerRefresh = (cb) => refreshCallbacks.push(cb);
+module.exports.isConnected = () => info.rpc !== null;

plugins/discord/menu.js

@@ -0,0 +1,47 @@
+const { setOptions } = require("../../config/plugins");
+const { edit } = require("../../config");
+const { clear, connect, registerRefresh, isConnected } = require("./back");
+
+let hasRegisterred = false;
+
+module.exports = (win, options, refreshMenu) => {
+	if (!hasRegisterred) {
+		registerRefresh(refreshMenu);
+		hasRegisterred = true;
+	}
+
+	return [
+		{
+			label: isConnected() ? "Connected" : "Reconnect",
+			enabled: !isConnected(),
+			click: connect,
+		},
+		{
+			label: "Clear activity",
+			click: clear,
+		},
+		{
+			label: "Clear activity after timeout",
+			type: "checkbox",
+			checked: options.activityTimoutEnabled,
+			click: (item) => {
+				options.activityTimoutEnabled = item.checked;
+				setOptions('discord', options);
+			},
+		},
+		{
+			label: "Listen Along",
+			type: "checkbox",
+			checked: options.listenAlong,
+			click: (item) => {
+				options.listenAlong = item.checked;
+				setOptions('discord', options);
+			},
+		},
+		{
+			label: "Set timeout time in config",
+			// open config.json
+			click: edit,
+		},
+	];
+};

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,60 +4,73 @@ 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, currentMetadata) => {
+	ipcMain.on("add-metadata", async (event, filePath, songBuffer, currentMetadata) => {
 		let fileBuffer = songBuffer;
-		const songMetadata = { ...metadata, ...currentMetadata };
+		const songMetadata = currentMetadata.imageSrcYTPL ? // This means metadata come from ytpl.getInfo();
+			{
+				...currentMetadata,
+				image: cropMaxWidth(await getImage(currentMetadata.imageSrcYTPL))
+			} :
+			{ ...nowPlayingMetadata, ...currentMetadata };
 
 		try {
-			const coverBuffer = songMetadata.image.toPNG();
+			const coverBuffer = songMetadata.image && !songMetadata.image.isEmpty() ?
+				songMetadata.image.toPNG() : null;
+
 			const writer = new ID3Writer(songBuffer);
 
 			// Create the metadata tags
 			writer
 				.setFrame("TIT2", songMetadata.title)
-				.setFrame("TPE1", [songMetadata.artist])
-				.setFrame("APIC", {
+				.setFrame("TPE1", [songMetadata.artist]);
+			if (coverBuffer) {
+				writer.setFrame("APIC", {
 					type: 3,
 					data: coverBuffer,
-					description: "",
+					description: ""
 				});
+			}
 			writer.addTag();
 			fileBuffer = Buffer.from(writer.arrayBuffer);
 		} catch (error) {

plugins/downloader/front.js

@@ -25,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 {
@@ -38,22 +39,31 @@ const baseUrl = defaultConfig.url;
 // contextBridge.exposeInMainWorld("downloader", {
 // 	download: () => {
 global.download = () => {
+	triggerAction(CHANNEL, ACTIONS.PROGRESS, 2); // starts with indefinite progress bar
+	let metadata;
 	let videoUrl = getSongMenu()
-		.querySelector("ytmusic-menu-navigation-item-renderer")
-		.querySelector("#navigation-endpoint")
-		.getAttribute("href");
-	videoUrl = !videoUrl
-		? global.songInfo.url || window.location.href
-		: baseUrl + "/" + videoUrl;
+		// 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);
@@ -61,7 +71,7 @@ global.download = () => {
 		},
 		reinit,
 		pluginOptions,
-		global.songInfo
+		metadata
 	);
 };
 // });

plugins/downloader/menu.js

@@ -1,25 +1,23 @@
 const { existsSync, mkdirSync } = require("fs");
 const { join } = require("path");
-const { URL } = require("url");
 
 const { dialog, ipcMain } = require("electron");
 const is = require("electron-is");
 const ytpl = require("ytpl");
+const chokidar = require('chokidar');
 
 const { setOptions } = require("../../config/plugins");
-const getSongInfo = require("../../providers/song-info");
 const { sendError } = require("./back");
-const { defaultMenuDownloadLabel, getFolder } = require("./utils");
+const { defaultMenuDownloadLabel, getFolder, presets } = require("./utils");
 
 let downloadLabel = defaultMenuDownloadLabel;
-let metadataURL = undefined;
+let playingPlaylistId = undefined;
 let callbackIsRegistered = false;
 
-module.exports = (win, options, refreshMenu) => {
+module.exports = (win, options) => {
 	if (!callbackIsRegistered) {
-		const registerCallback = getSongInfo(win);
-		registerCallback((info) => {
-			metadataURL = info.url;
+		ipcMain.on("video-src-changed", async (_, data) => {
+			playingPlaylistId = JSON.parse(data)?.videoDetails?.playlistId;
 		});
 		callbackIsRegistered = true;
 	}
@@ -28,14 +26,23 @@ module.exports = (win, options, refreshMenu) => {
 		{
 			label: downloadLabel,
 			click: async () => {
-				const currentURL = metadataURL || win.webContents.getURL();
-				const playlistID = new URL(currentURL).searchParams.get("list");
-				if (!playlistID) {
+				const currentPagePlaylistId = new URL(win.webContents.getURL()).searchParams.get("list");
+				const playlistId = currentPagePlaylistId || playingPlaylistId;
+				if (!playlistId) {
 					sendError(win, new Error("No playlist ID found"));
 					return;
 				}
 
-				const playlist = await ytpl(playlistID);
+				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);
@@ -49,24 +56,40 @@ module.exports = (win, options, refreshMenu) => {
 				}
 				mkdirSync(playlistFolder, { recursive: true });
 
-				ipcMain.on("downloader-feedback", (_, feedback) => {
-					downloadLabel = feedback;
-					refreshMenu();
+				dialog.showMessageBox({
+					type: "info",
+					buttons: ["OK"],
+					title: "Started Download",
+					message: `Downloading Playlist "${playlistTitle}"`,
+					detail: `(${playlist.items.length} songs)`,
 				});
 
-				downloadLabel = `Downloading "${playlistTitle}"`;
-				refreshMenu();
-
 				if (is.dev()) {
 					console.log(
 						`Downloading playlist "${playlistTitle}" (${playlist.items.length} songs)`
 					);
 				}
 
-				playlist.items.slice(0, options.playlistMaxItems).forEach((song) => {
+				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,
+						song.url,
 						playlistTitle,
 						options
 					);
@@ -86,5 +109,17 @@ module.exports = (win, options, refreshMenu) => {
 				} // else = user pressed cancel
 			},
 		},
+		{
+			label: "Presets",
+			submenu: Object.keys(presets).map((preset) => ({
+				label: preset,
+				type: "radio",
+				click: () => {
+					options.preset = preset;
+					setOptions("downloader", options);
+				},
+				checked: options.preset === preset || presets[preset] === undefined,
+			})),
+		},
 	];
 };

plugins/downloader/style.css

@@ -6,8 +6,16 @@
 	cursor: pointer;
 }
 
+.menu-item > .yt-simple-endpoint:hover {
+	background-color: var(--ytmusic-menu-item-hover-background-color);
+}
+
 .menu-icon {
 	flex: var(--ytmusic-menu-item-icon_-_flex);
 	margin: var(--ytmusic-menu-item-icon_-_margin);
 	fill: var(--ytmusic-menu-item-icon_-_fill);
+	stroke: var(--iron-icon-stroke-color, none);
+	width: var(--iron-icon-width, 24px);
+	height: var(--iron-icon-height, 24px);
+	animation: var(--iron-icon_-_animation);
 }

plugins/downloader/templates/download.html

@@ -1,5 +1,5 @@
 <div
-	class="menu-item ytmusic-menu-popup-renderer"
+	class="style-scope menu-item ytmusic-menu-popup-renderer"
 	role="option"
 	tabindex="-1"
 	aria-disabled="false"
@@ -7,31 +7,39 @@
 	onclick="download()"
 >
 	<div
-		class="menu-icon yt-icon-container yt-icon ytmusic-toggle-menu-service-item-renderer"
+		id="navigation-endpoint"
+		class="yt-simple-endpoint style-scope ytmusic-menu-navigation-item-renderer"
+		tabindex="-1"
 	>
-		<svg
-			viewBox="0 0 24 24"
-			preserveAspectRatio="xMidYMid meet"
-			focusable="false"
-			class="style-scope yt-icon"
-			style="pointer-events: none; display: block; width: 100%; height: 100%;"
+		<div
+			class="icon menu-icon style-scope ytmusic-menu-navigation-item-renderer"
 		>
-			<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" 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" fill="#aaaaaa"
-				/>
-			</g>
-		</svg>
-	</div>
-	<div
-		class="text style-scope ytmusic-toggle-menu-service-item-renderer"
-		id="ytmcustom-download"
-	>
-		Download
+			<svg
+				viewBox="0 0 24 24"
+				preserveAspectRatio="xMidYMid meet"
+				focusable="false"
+				class="style-scope yt-icon"
+				style="pointer-events: none; display: block; width: 100%; height: 100%"
+			>
+				<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"
+						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"
+						fill="#aaaaaa"
+					/>
+				</g>
+			</svg>
+		</div>
+		<div
+			class="text style-scope ytmusic-menu-navigation-item-renderer"
+			id="ytmcustom-download"
+		>
+			Download
+		</div>
 	</div>
 </div>

plugins/downloader/utils.js

@@ -1,5 +1,39 @@
 const electron = require("electron");
 
-module.exports.getFolder = (customFolder) =>
-	customFolder || (electron.app || electron.remote.app).getPath("downloads");
+module.exports.getFolder = customFolder => customFolder || electron.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;
+}
+
+// Presets for FFmpeg
+module.exports.presets = {
+	"None (defaults to mp3)": undefined,
+	opus: {
+		extension: "opus",
+		ffmpegArgs: ["-acodec", "libopus"],
+	},
+};

plugins/downloader/youtube-dl.js

@@ -3,6 +3,7 @@ const { join } = require("path");
 
 const Mutex = require("async-mutex").Mutex;
 const { ipcRenderer } = require("electron");
+const remote = require('@electron/remote');
 const is = require("electron-is");
 const filenamify = require("filenamify");
 
@@ -14,7 +15,8 @@ const ytdl = require("ytdl-core");
 
 const { triggerAction, triggerActionSync } = require("../utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
-const { defaultMenuDownloadLabel, getFolder } = require("./utils");
+const { presets, urlToJPG } = require("./utils");
+const { cleanupName } = require("../../providers/song-info");
 
 const { createFFmpeg } = FFmpeg;
 const ffmpeg = createFFmpeg({
@@ -24,7 +26,7 @@ const ffmpeg = createFFmpeg({
 });
 const ffmpegMutex = new Mutex();
 
-const downloadVideoToMP3 = (
+const downloadVideoToMP3 = async (
 	videoUrl,
 	sendFeedback,
 	sendError,
@@ -35,6 +37,21 @@ const downloadVideoToMP3 = (
 ) => {
 	sendFeedback("Downloading…");
 
+	if (metadata === null) {
+		const { videoDetails } = await ytdl.getInfo(videoUrl);
+		const thumbnails = videoDetails?.thumbnails;
+		metadata = {
+			artist:
+				videoDetails?.media?.artist ||
+				cleanupName(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 {
@@ -54,9 +71,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");
@@ -95,13 +113,14 @@ const toMP3 = async (
 	existingMetadata = undefined,
 	subfolder = ""
 ) => {
+	const convertOptions = { ...presets[options.preset], ...options };
 	const safeVideoName = randomBytes(32).toString("hex");
-	const extension = options.extension || "mp3";
+	const extension = convertOptions.extension || "mp3";
 	const releaseFFmpegMutex = await ffmpegMutex.acquire();
 
 	try {
 		if (!ffmpeg.isLoaded()) {
-			sendFeedback("Loading…");
+			sendFeedback("Loading…", 2); // indefinite progress bar after download
 			await ffmpeg.load();
 		}
 
@@ -114,11 +133,11 @@ const toMP3 = async (
 			"-i",
 			safeVideoName,
 			...getFFmpegMetadataArgs(metadata),
-			...(options.ffmpegArgs || []),
+			...(convertOptions.ffmpegArgs || []),
 			safeVideoName + "." + extension
 		);
 
-		const folder = getFolder(options.downloadFolder);
+		const folder = options.downloadFolder || remote.app.getPath("downloads");
 		const name = metadata.title
 			? `${metadata.artist ? `${metadata.artist} - ` : ""}${metadata.title}`
 			: videoName;
@@ -135,6 +154,7 @@ const toMP3 = async (
 		ipcRenderer.send("add-metadata", filePath, fileBuffer, {
 			artist: metadata.artist,
 			title: metadata.title,
+			imageSrcYTPL: metadata.imageSrcYTPL
 		});
 		ipcRenderer.once("add-metadata-done", reinit);
 	} catch (e) {
@@ -165,22 +185,16 @@ module.exports = {
 
 ipcRenderer.on(
 	"downloader-download-playlist",
-	(_, songMetadata, playlistFolder, options) => {
-		const reinit = () =>
-			ipcRenderer.send("downloader-feedback", defaultMenuDownloadLabel);
-
+	(_, url, playlistFolder, options) => {
 		downloadVideoToMP3(
-			songMetadata.url,
-			(feedback) => {
-				ipcRenderer.send("downloader-feedback", feedback);
-			},
+			url,
+			() => {},
 			(error) => {
 				triggerAction(CHANNEL, ACTIONS.ERROR, error);
-				reinit();
 			},
-			reinit,
+			() => {},
 			options,
-			songMetadata,
+			null,
 			playlistFolder
 		);
 	}

plugins/exponential-volume/front.js

@@ -0,0 +1,47 @@
+// "Youtube Music fix volume ratio 0.4" by Marco Pfeiffer
+// https://greasyfork.org/en/scripts/397686-youtube-music-fix-volume-ratio/
+
+const exponentialVolume = () => {
+	// manipulation exponent, higher value = lower volume
+	// 3 is the value used by pulseaudio, which Barteks2x figured out this gist here: https://gist.github.com/Barteks2x/a4e189a36a10c159bb1644ffca21c02a
+	// 0.05 (or 5%) is the lowest you can select in the UI which with an exponent of 3 becomes 0.000125 or 0.0125%
+	const EXPONENT = 3;
+
+	const storedOriginalVolumes = new WeakMap();
+	const { get, set } = Object.getOwnPropertyDescriptor(
+		HTMLMediaElement.prototype,
+		"volume"
+	);
+	Object.defineProperty(HTMLMediaElement.prototype, "volume", {
+		get() {
+			const lowVolume = get.call(this);
+			const calculatedOriginalVolume = lowVolume ** (1 / EXPONENT);
+
+			// The calculated value has some accuracy issues which can lead to problems for implementations that expect exact values.
+			// To avoid this, I'll store the unmodified volume to return it when read here.
+			// This mostly solves the issue, but the initial read has no stored value and the volume can also change though external influences.
+			// To avoid ill effects, I check if the stored volume is somewhere in the same range as the calculated volume.
+			const storedOriginalVolume = storedOriginalVolumes.get(this);
+			const storedDeviation = Math.abs(
+				storedOriginalVolume - calculatedOriginalVolume
+			);
+
+			const originalVolume =
+				storedDeviation < 0.01
+					? storedOriginalVolume
+					: calculatedOriginalVolume;
+			return originalVolume;
+		},
+		set(originalVolume) {
+			const lowVolume = originalVolume ** EXPONENT;
+			storedOriginalVolumes.set(this, originalVolume);
+			set.call(this, lowVolume);
+		},
+	});
+};
+
+module.exports = () =>
+	document.addEventListener("apiLoaded", exponentialVolume, {
+		once: true,
+		passive: true,
+	});

plugins/in-app-menu/back.js

@@ -1,83 +1,33 @@
 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;
 
+module.exports = (win) => {
 	// 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();
+				setMenuVisibility(!visible);
 			});
 		}
 	});
 
-	//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 setMenuVisibility(value) {
+		visible = value;
+		win.webContents.send("updateMenu", visible);
+	}
 };
-
-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

@@ -1,6 +1,9 @@
-const { remote, ipcRenderer } = require("electron");
+const { ipcRenderer } = require("electron");
+const { Menu } = require("@electron/remote");
+
 
 const customTitlebar = require("custom-electron-titlebar");
+function $(selector) { return document.querySelector(selector); }
 
 module.exports = () => {
 	const bar = new customTitlebar.Titlebar({
@@ -10,15 +13,21 @@ module.exports = () => {
 	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
-			}
-		}
+	ipcRenderer.on("updateMenu", function (_event, showMenu) {
+		bar.updateMenu(showMenu ? Menu.getApplicationMenu() : null);
 	});
+
+	// Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)
+	document.addEventListener('apiLoaded', () => {
+		setNavbarMargin();
+		const playPageObserver = new MutationObserver(setNavbarMargin);
+		playPageObserver.observe($('ytmusic-app-layout'), { attributeFilter: ['player-page-open_', 'playerPageOpen_'] })
+	}, { once: true, passive: true })
 };
+
+function setNavbarMargin() {
+	$('#nav-bar-background').style.right =
+		$('ytmusic-app-layout').playerPageOpen_ ?
+			'0px' :
+			'12px';
+}

plugins/in-app-menu/style.css

@@ -4,14 +4,13 @@
 	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;
+/* fixes nav-bar-background opacity bug, reposition it, and allows clicking scrollbar through it */
+#nav-bar-background {
+	opacity: 1 !important;
+	pointer-events: none !important;
+	position: sticky !important;
+	top: 0 !important;
+	height: 75px !important;
 }
 
 /* remove window dragging for nav bar (conflict with titlebar drag) */
@@ -21,14 +20,10 @@ 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;
+/* move up item selection renderers */
+ytmusic-item-section-renderer.stuck #header.ytmusic-item-section-renderer,
+ytmusic-tabs.stuck {
+	top: calc(var(--ytmusic-nav-bar-height) - 15px) !important;
 }
 
 /* fix weird positioning in search screen*/
@@ -37,8 +32,7 @@ ytmusic-header-renderer.ytmusic-search-page {
 }
 
 /* Move navBar downwards */
-ytmusic-app-layout > [slot="nav-bar"],
-#nav-bar-background.ytmusic-app-layout {
+ytmusic-nav-bar[slot="nav-bar"] {
 	top: 17px !important;
 }
 

plugins/last-fm/back.js

@@ -1,25 +1,14 @@
 const fetch = require('node-fetch');
 const md5 = require('md5');
-const open = require("open");
+const { shell } = require('electron');
 const { setOptions } = require('../../config/plugins');
-const getSongInfo = require('../../providers/song-info');
+const registerCallback = 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) {
+	for (const key in params) {
 		formData.append(key, params[key]);
 	}
 	return formData;
@@ -28,7 +17,7 @@ const createQueryString = (params, api_sig) => {
 	// creates a querystring
 	const queryData = [];
 	params.api_sig = api_sig;
-	for (key in params) {
+	for (const key in params) {
 		queryData.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`);
 	}
 	return '?'+queryData.join('&');
@@ -37,12 +26,12 @@ const createQueryString = (params, api_sig) => {
 const createApiSig = (params, secret) => { 
 	// this function creates the api signature, see: https://www.last.fm/api/authspec
 	const keys = [];
-	for (key in params) {
+	for (const key in params) {
 		keys.push(key);
 	}
 	keys.sort();
 	let sig = '';
-	for (key of keys) {
+	for (const key of keys) {
 		if (String(key) === 'format')
 			continue
 		sig += `${key}${params[key]}`;
@@ -69,7 +58,7 @@ 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}`);
+	shell.openExternal(`https://www.last.fm/api/auth/?api_key=${config.api_key}&token=${config.token}`);
 	return config;
 }
 
@@ -139,10 +128,8 @@ const setNowPlaying = (songInfo, config) => {
 // 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) {
+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;
@@ -157,8 +144,6 @@ const lastfm = async (win, 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

plugins/lyrics-genius/back.js

@@ -0,0 +1,52 @@
+const { join } = require("path");
+
+const { ipcMain } = require("electron");
+const is = require("electron-is");
+const fetch = require("node-fetch");
+
+const { cleanupName } = require("../../providers/song-info");
+const { injectCSS } = require("../utils");
+
+module.exports = async (win) => {
+	injectCSS(win.webContents, join(__dirname, "style.css"));
+
+	ipcMain.on("search-genius-lyrics", async (event, extractedSongInfo) => {
+		const metadata = JSON.parse(extractedSongInfo);
+		const queryString = `${cleanupName(metadata.artist)} ${cleanupName(
+			metadata.title
+		)}`;
+
+		let response = await fetch(
+			`https://genius.com/api/search/multi?per_page=5&q=${encodeURI(
+				queryString
+			)}`
+		);
+		if (!response.ok) {
+			event.returnValue = null;
+			return;
+		}
+
+		const info = await response.json();
+		let url = "";
+		try {
+			url = info.response.sections.filter(
+				(section) => section.type === "song"
+			)[0].hits[0].result.url;
+		} catch {
+			event.returnValue = null;
+			return;
+		}
+
+		if (is.dev()) {
+			console.log("Fetching lyrics from Genius:", url);
+		}
+
+		response = await fetch(url);
+		if (!response.ok) {
+			event.returnValue = null;
+			return;
+		}
+
+		event.returnValue = await response.text();
+	});
+};

plugins/lyrics-genius/front.js

@@ -0,0 +1,67 @@
+const { ipcRenderer } = require("electron");
+const is = require("electron-is");
+
+module.exports = () => {
+	ipcRenderer.on("update-song-info", (_, extractedSongInfo) => {
+		const lyricsTab = document.querySelector('tp-yt-paper-tab[tabindex="-1"]');
+
+		// Check if disabled
+		if (!lyricsTab || !lyricsTab.hasAttribute("disabled")) {
+			return;
+		}
+
+		const html = ipcRenderer.sendSync(
+			"search-genius-lyrics",
+			extractedSongInfo
+		);
+		if (!html) {
+			return;
+		} else if (is.dev()) {
+			console.log("Fetched lyrics from Genius");
+		}
+
+		const wrapper = document.createElement("div");
+		wrapper.innerHTML = html;
+		const lyricsSelector1 = wrapper.querySelector(".lyrics");
+		const lyricsSelector2 = wrapper.querySelector(
+			'[class^="Lyrics__Container"]'
+		);
+		const lyrics = lyricsSelector1
+			? lyricsSelector1.innerHTML
+			: lyricsSelector2
+			? lyricsSelector2.innerHTML
+			: null;
+		if (!lyrics) {
+			return;
+		}
+
+		lyricsTab.removeAttribute("disabled");
+		lyricsTab.removeAttribute("aria-disabled");
+		document.querySelector("tp-yt-paper-tab").onclick = () => {
+			lyricsTab.removeAttribute("disabled");
+			lyricsTab.removeAttribute("aria-disabled");
+		};
+
+		lyricsTab.onclick = () => {
+			const tabContainer = document.querySelector("ytmusic-tab-renderer");
+			const observer = new MutationObserver((_, observer) => {
+				const lyricsContainer = document.querySelector(
+					'[page-type="MUSIC_PAGE_TYPE_TRACK_LYRICS"] > ytmusic-message-renderer'
+				);
+				if (lyricsContainer) {
+					lyricsContainer.innerHTML = `<div id="contents" class="style-scope ytmusic-section-list-renderer genius-lyrics">
+			 			${lyrics}
+
+			 			<yt-formatted-string class="footer style-scope ytmusic-description-shelf-renderer">Source&nbsp;: Genius</yt-formatted-string>
+					</div>`;
+					observer.disconnect();
+				}
+			});
+			observer.observe(tabContainer, {
+				attributes: true,
+				childList: true,
+				subtree: true,
+			});
+		};
+	});
+};

plugins/lyrics-genius/style.css

@@ -0,0 +1,12 @@
+/* Disable links in Genius lyrics */
+.genius-lyrics a {
+	color: var(--ytmusic-text-primary);
+	display: inline-block;
+	pointer-events: none;
+	text-decoration: none;
+}
+
+#contents.genius-lyrics {
+    font-size: 1vw;
+    opacity: 0.9;
+}

plugins/notifications/back.js

@@ -1,9 +1,9 @@
 const { Notification } = require("electron");
 const is = require("electron-is");
-const getSongInfo = require("../../providers/song-info");
+const registerCallback = require("../../providers/song-info");
 const { notificationImage } = require("./utils");
 
-const { setupInteractive, notifyInteractive } = require("./interactive")
+const setupInteractive = require("./interactive")
 
 const notify = (info, options) => {
 
@@ -23,38 +23,24 @@ const notify = (info, options) => {
 	return currentNotification;
 };
 
-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);
+const setup = (options) => {
 	let oldNotification;
-	let oldURL = "";
-	win.once("ready-to-show", () => {
-		// Register the callback for new song information
-		registerCallback(songInfo => {
-			// on pause - reset url? and skip notification
-			if (songInfo.isPaused) {
-				//reset oldURL if unpause notification option is on
-				if (options.unpauseNotification) {
-					oldURL = "";
-				}
-				return;
-			}
-			// If url isn't the same as last one - send notification
-			if (songInfo.url !== oldURL) {
-				oldURL = songInfo.url;
-				if (isInteractive) {
-					notifyInteractive(songInfo);
-				} else {
-					// 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);
-				}
-			}
-		});
+	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

@@ -1,17 +1,27 @@
 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 notificationOnPause;
+let notificationOnUnpause;
 
-//Save controls and onPause option
-module.exports.setupInteractive = (win, unpauseNotification) => {
+module.exports = (win, unpauseNotification) => {
+    //Save controls and onPause option
     const { playPause, next, previous } = getSongControls(win);
     controls = { playPause, next, previous };
+    notificationOnUnpause = unpauseNotification;
 
-    notificationOnPause = unpauseNotification;
+    let currentUrl;
+
+    // Register songInfoCallback
+    registerCallback(songInfo => {
+		if (!songInfo.isPaused && (songInfo.url !== currentUrl || notificationOnUnpause)) {
+            currentUrl = songInfo.url;
+            sendToaster(songInfo);
+		}
+	});
 
     win.webContents.once("closed", () => {
         deleteNotification()
@@ -33,7 +43,7 @@ function deleteNotification() {
 }
 
 //New notification
-module.exports.notifyInteractive = function sendToaster(songInfo) {
+function sendToaster(songInfo) {
     deleteNotification();
     //download image and get path
     let imgSrc = notificationImage(songInfo, true);
@@ -71,7 +81,7 @@ module.exports.notifyInteractive = function sendToaster(songInfo) {
                     // dont delete notification on play/pause
                     toDelete = undefined;
                     //manually send notification if not sending automatically
-                    if (!notificationOnPause) {
+                    if (!notificationOnUnpause) {
                         songInfo.isPaused = false;
                         sendToaster(songInfo);
                     }

plugins/playback-speed/front.js

@@ -1,83 +1,93 @@
-const {
-	getSongMenu,
-	watchDOMElement,
-} = require("../../providers/dom-elements");
+const { getSongMenu } = require("../../providers/dom-elements");
 const { ElementFromFile, templatePath } = require("../utils");
 
+function $(selector) { return document.querySelector(selector); }
+
 const slider = ElementFromFile(templatePath(__dirname, "slider.html"));
 
-const MIN_PLAYBACK_SPEED = 0.25;
-const MAX_PLAYBACK_SPEED = 2;
+const roundToTwo = n => Math.round(n * 1e2) / 1e2;
 
-let videoElement;
-let playbackSpeedPercentage = 50; // = Playback speed of 1
+const MIN_PLAYBACK_SPEED = 0.07;
+const MAX_PLAYBACK_SPEED = 16;
 
-const computePlayBackSpeed = () => {
-	if (playbackSpeedPercentage <= 50) {
-		// Slow down video by setting a playback speed between MIN_PLAYBACK_SPEED and 1
-		return (
-			MIN_PLAYBACK_SPEED +
-			((1 - MIN_PLAYBACK_SPEED) / 50) * playbackSpeedPercentage
-		);
-	}
-
-	// Accelerate video by setting a playback speed between 1 and MAX_PLAYBACK_SPEED
-	return 1 + ((MAX_PLAYBACK_SPEED - 1) / 50) * (playbackSpeedPercentage - 50);
-};
+let playbackSpeed = 1;
 
 const updatePlayBackSpeed = () => {
-	const playbackSpeed = Math.round(computePlayBackSpeed() * 100) / 100;
+	$('video').playbackRate = playbackSpeed;
 
-	if (!videoElement || videoElement.playbackRate === playbackSpeed) {
-		return;
-	}
-
-	videoElement.playbackRate = playbackSpeed;
-
-	const playbackSpeedElement = document.querySelector("#playback-speed-value");
+	const playbackSpeedElement = $("#playback-speed-value");
 	if (playbackSpeedElement) {
 		playbackSpeedElement.innerHTML = playbackSpeed;
 	}
 };
 
-module.exports = () => {
-	watchDOMElement(
-		"video",
-		(document) => document.querySelector("video"),
-		(element) => {
-			videoElement = element;
-			updatePlayBackSpeed();
-		}
-	);
+let menu;
+let observingSlider = false;
 
-	watchDOMElement(
-		"menu",
-		(document) => getSongMenu(document),
-		(menuElement) => {
-			if (!menuElement.contains(slider)) {
-				menuElement.prepend(slider);
+const observePopupContainer = () => {
+	const observer = new MutationObserver(() => {
+		if (!menu) {
+			menu = getSongMenu();
+		}
+
+		if (menu && !menu.contains(slider)) {
+			menu.prepend(slider);
+			if (!observingSlider) {
+				setupSliderListener();
+				observingSlider = true;
 			}
-
-			const playbackSpeedElement = document.querySelector(
-				"#playback-speed-slider #sliderKnob .slider-knob-inner"
-			);
-
-			const playbackSpeedObserver = new MutationObserver((mutations) => {
-				mutations.forEach(function (mutation) {
-					if (mutation.type == "attributes") {
-						const value = playbackSpeedElement.getAttribute("value");
-						playbackSpeedPercentage = parseInt(value, 10);
-						if (isNaN(playbackSpeedPercentage)) {
-							playbackSpeedPercentage = 50;
-						}
-						updatePlayBackSpeed();
-						return;
-					}
-				});
-			});
-			playbackSpeedObserver.observe(playbackSpeedElement, {
-				attributes: true,
-			});
 		}
-	);
+	});
+
+	observer.observe($('ytmusic-popup-container'), {
+		childList: true,
+		subtree: true,
+	});
+};
+
+const observeVideo = () => {
+	$('video').addEventListener('ratechange', forcePlaybackRate)
+	$('video').addEventListener('srcChanged', forcePlaybackRate)
+}
+
+const setupWheelListener = () => {
+	slider.addEventListener('wheel', e => {
+		e.preventDefault();
+		if (isNaN(playbackSpeed)) {
+			playbackSpeed = 1;
+		}
+		// e.deltaY < 0 means wheel-up
+		playbackSpeed = roundToTwo(e.deltaY < 0 ?
+			Math.min(playbackSpeed + 0.01, MAX_PLAYBACK_SPEED) :
+			Math.max(playbackSpeed - 0.01, MIN_PLAYBACK_SPEED)
+		);
+
+		updatePlayBackSpeed();
+		// update slider position
+		$('#playback-speed-slider').value = playbackSpeed;
+	})
+}
+
+function setupSliderListener() {
+	$('#playback-speed-slider').addEventListener('immediate-value-changed', e => {
+		playbackSpeed = e.detail.value || MIN_PLAYBACK_SPEED;
+		if (isNaN(playbackSpeed)) {
+			playbackSpeed = 1;
+		}
+		updatePlayBackSpeed();
+	})
+}
+
+function forcePlaybackRate(e) {
+	if (e.target.playbackRate !== playbackSpeed) {
+		e.target.playbackRate = playbackSpeed
+	}
+}
+
+module.exports = () => {
+	document.addEventListener('apiLoaded', e => {
+		observePopupContainer();
+		observeVideo();
+		setupWheelListener();
+	}, { once: true, passive: true })
 };

plugins/playback-speed/templates/slider.html

@@ -1,79 +1,88 @@
 <div
-	class="menu-item ytmusic-menu-popup-renderer"
+	class="style-scope menu-item ytmusic-menu-popup-renderer"
 	role="option"
 	tabindex="-1"
 	aria-disabled="false"
 	aria-selected="false"
 >
-	<tp-yt-paper-slider
-		id="playback-speed-slider"
-		class="volume-slider style-scope ytmusic-player-bar on-hover"
-		max="100"
-		min="0"
-		step="5"
-		dir="ltr"
-		title="Playback speed"
-		aria-label="Playback speed"
-		role="slider"
-		tabindex="0"
-		aria-valuemin="0"
-		aria-valuemax="100"
-		aria-valuenow="50"
-		aria-disabled="false"
-		value="50"
-		><!--css-build:shady-->
-		<div id="sliderContainer" class="style-scope tp-yt-paper-slider">
-			<div class="bar-container style-scope tp-yt-paper-slider">
-				<tp-yt-paper-progress
-					id="sliderBar"
-					aria-hidden="true"
-					class="style-scope tp-yt-paper-slider"
-					role="progressbar"
-					value="50"
-					aria-valuenow="50"
-					aria-valuemin="0"
-					aria-valuemax="100"
-					aria-disabled="false"
-					style="touch-action: none"
-					><!--css-build:shady-->
+	<div
+		id="navigation-endpoint"
+		class="yt-simple-endpoint style-scope ytmusic-menu-navigation-item-renderer"
+		tabindex="-1"
+	>
+		<tp-yt-paper-slider
+			id="playback-speed-slider"
+			class="volume-slider style-scope ytmusic-player-bar on-hover"
+			style="display: inherit !important"
+			max="2"
+			min="0"
+			step="0.125"
+			dir="ltr"
+			title="Playback speed"
+			aria-label="Playback speed"
+			role="slider"
+			tabindex="0"
+			aria-valuemin="0"
+			aria-valuemax="2"
+			aria-valuenow="1"
+			aria-disabled="false"
+			value="1"
+			><!--css-build:shady-->
+			<div id="sliderContainer" class="style-scope tp-yt-paper-slider">
+				<div class="bar-container style-scope tp-yt-paper-slider">
+					<tp-yt-paper-progress
+						id="sliderBar"
+						aria-hidden="true"
+						class="style-scope tp-yt-paper-slider"
+						role="progressbar"
+						value="1"
+						aria-valuenow="1"
+						aria-valuemin="0"
+						aria-valuemax="2"
+						aria-disabled="false"
+						style="touch-action: none"
+						><!--css-build:shady-->
 
-					<div id="progressContainer" class="style-scope tp-yt-paper-progress">
 						<div
-							id="secondaryProgress"
+							id="progressContainer"
 							class="style-scope tp-yt-paper-progress"
-							hidden="true"
-							style="transform: scaleX(0)"
-						></div>
-						<div
-							id="primaryProgress"
-							class="style-scope tp-yt-paper-progress"
-							style="transform: scaleX(0.5)"
-						></div>
-					</div>
-				</tp-yt-paper-progress>
+						>
+							<div
+								id="secondaryProgress"
+								class="style-scope tp-yt-paper-progress"
+								hidden="true"
+								style="transform: scaleX(0)"
+							></div>
+							<div
+								id="primaryProgress"
+								class="style-scope tp-yt-paper-progress"
+								style="transform: scaleX(0.5)"
+							></div>
+						</div>
+					</tp-yt-paper-progress>
+				</div>
+				<dom-if class="style-scope tp-yt-paper-slider"
+					><template is="dom-if"></template
+				></dom-if>
+				<div
+					id="sliderKnob"
+					class="slider-knob style-scope tp-yt-paper-slider"
+					style="left: 50%; touch-action: none"
+				>
+					<div
+						class="slider-knob-inner style-scope tp-yt-paper-slider"
+						value="1"
+					></div>
+				</div>
 			</div>
 			<dom-if class="style-scope tp-yt-paper-slider"
-				><template is="dom-if"></template
-			></dom-if>
-			<div
-				id="sliderKnob"
-				class="slider-knob style-scope tp-yt-paper-slider"
-				style="left: 50%; touch-action: none"
-			>
-				<div
-					class="slider-knob-inner style-scope tp-yt-paper-slider"
-					value="50"
-				></div>
-			</div>
+				><template is="dom-if"></template></dom-if
+		></tp-yt-paper-slider>
+		<div
+			class="text style-scope ytmusic-menu-navigation-item-renderer"
+			id="ytmcustom-playback-speed"
+		>
+			Speed (<span id="playback-speed-value">1</span>)
 		</div>
-		<dom-if class="style-scope tp-yt-paper-slider"
-			><template is="dom-if"></template></dom-if
-	></tp-yt-paper-slider>
-
-	<div
-		class="text style-scope ytmusic-toggle-menu-service-item-renderer"
-		id="ytmcustom-playback-speed"
-	>
-		Speed (<span id="playback-speed-value">1</span>)
 	</div>
 </div>

plugins/precise-volume/back.js

@@ -1,23 +1,9 @@
-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;
+module.exports = () => 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;
-};
+module.exports.enabled = () => enabled;

plugins/precise-volume/front.js

@@ -1,29 +1,84 @@
-const { ipcRenderer, remote } = require("electron");
+const { ipcRenderer } = require("electron");
+const { globalShortcut } = require('@electron/remote');
 
 const { setOptions } = require("../../config/plugins");
 
 function $(selector) { return document.querySelector(selector); }
+let api;
 
 module.exports = (options) => {
+	document.addEventListener('apiLoaded', e => {
+		api = e.detail;
+		firstRun(options);
+	}, { once: true, passive: true })
+};
+
+/** Restore saved volume and setup tooltip */
+function firstRun(options) {
+	if (typeof options.savedVolume === "number") {
+		// Set saved volume as tooltip
+		setTooltip(options.savedVolume);
+
+		if (api.getVolume() !== options.savedVolume) {
+			api.setVolume(options.savedVolume);
+		}
+	}
 
 	setupPlaybar(options);
 
-	setupSliderObserver(options);
-
 	setupLocalArrowShortcuts(options);
 
-	if (options.globalShortcuts?.enabled) {
-		setupGlobalShortcuts(options);
+	setupGlobalShortcuts(options);
+
+	const noVid = $("#main-panel")?.computedStyleMap().get("display").value === "none";
+	injectVolumeHud(noVid);
+	if (!noVid) {
+		setupVideoPlayerOnwheel(options);
 	}
 
-	firstRun(options);
-
-	// This way the ipc listener gets cleared either way
-	ipcRenderer.once("setupVideoPlayerVolumeMousewheel", (_event, toEnable) => {
-		if (toEnable)
-			setupVideoPlayerOnwheel(options);
+	// Change options from renderer to keep sync
+	ipcRenderer.on("setOptions", (_event, newOptions = {}) => {
+		for (option in newOptions) {
+			options[option] = newOptions[option];
+		}
+		setOptions("precise-volume", options);
 	});
-};
+}
+
+function injectVolumeHud(noVid) {
+	if (noVid) {
+		const position = "top: 18px; right: 60px; z-index: 999; position: absolute;";
+		const mainStyle = "font-size: xx-large; padding: 10px; transition: opacity 1s; pointer-events: none;";
+
+		$(".center-content.ytmusic-nav-bar").insertAdjacentHTML("beforeend",
+			`<span id="volumeHud" style="${position + mainStyle}"></span>`)
+	} else {
+		const position = `top: 10px; left: 10px; z-index: 999; position: absolute;`;
+		const mainStyle = "font-size: xxx-large; padding: 10px; transition: opacity 0.6s; webkit-text-stroke: 1px black; font-weight: 600; pointer-events: none;";
+
+		$("#song-video").insertAdjacentHTML('afterend',
+			`<span id="volumeHud" style="${position + mainStyle}"></span>`)
+	}
+}
+
+let hudFadeTimeout;
+
+function showVolumeHud(volume) {
+	let volumeHud = $("#volumeHud");
+	if (!volumeHud) return;
+
+	volumeHud.textContent = volume + '%';
+	volumeHud.style.opacity = 1;
+
+	if (hudFadeTimeout) {
+		clearTimeout(hudFadeTimeout);
+	}
+
+	hudFadeTimeout = setTimeout(() => {
+		volumeHud.style.opacity = 0;
+		hudFadeTimeout = null;
+	}, 2000);
+}
 
 /** Add onwheel event to video player */
 function setupVideoPlayerOnwheel(options) {
@@ -34,35 +89,20 @@ function setupVideoPlayerOnwheel(options) {
 	});
 }
 
-function toPercent(volume) {
-	return Math.round(Number.parseFloat(volume) * 100);
-}
-
 function saveVolume(volume, options) {
 	options.savedVolume = volume;
-	setOptions("precise-volume", options);
+	writeOptions(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
-	}
+//without this function it would rewrite config 20 time when volume change by 20
+let writeTimeout;
+function writeOptions(options) {
+	if (writeTimeout) clearTimeout(writeTimeout);
+
+	writeTimeout = setTimeout(() => {
+		setOptions("precise-volume", options);
+		writeTimeout = null;
+	}, 1000)
 }
 
 /** Add onwheel event to play bar and also track if play bar is hovered*/
@@ -83,32 +123,63 @@ function setupPlaybar(options) {
 	playerbar.addEventListener("mouseleave", () => {
 		playerbar.classList.remove("on-hover");
 	});
+
+	setupSliderObserver(options);
+}
+
+/** 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 &&
+				(typeof options.savedVolume !== "number" || 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
+	});
 }
 
 /** 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);
+	const steps = Number(options.steps || 1);
+	api.setVolume(toIncrease ?
+		Math.min(api.getVolume() + steps, 100) :
+		Math.max(api.getVolume() - steps, 0));
 
 	// Save the new volume
-	saveVolume(toPercent(videoStream.volume), options);
-	// Slider value automatically rounds to multiples of 5
-	slider.value = options.savedVolume;
+	saveVolume(api.getVolume(), options);
+
+	// change slider position (important)
+	updateVolumeSlider(options);
+
 	// Change tooltips to new value
 	setTooltip(options.savedVolume);
-	// Show volume slider on volume change
-	showVolumeSlider(slider);
+	// Show volume slider
+	showVolumeSlider();
+	// Show volume HUD
+	showVolumeHud(options.savedVolume);
+}
+
+function updateVolumeSlider(options) {
+	// Slider value automatically rounds to multiples of 5
+	$("#volume-slider").value = options.savedVolume > 0 && options.savedVolume < 5 ?
+		5 : options.savedVolume;
 }
 
 let volumeHoverTimeoutID;
 
-function showVolumeSlider(slider) {
+function showVolumeSlider() {
+	const slider = $("#volume-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
@@ -124,27 +195,6 @@ function showVolumeSlider(slider) {
 	}, 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",
@@ -161,47 +211,26 @@ function setTooltip(volume) {
 
 function setupGlobalShortcuts(options) {
 	if (options.globalShortcuts.volumeUp) {
-		remote.globalShortcut.register((options.globalShortcuts.volumeUp), () => changeVolume(true, options));
+		globalShortcut.register((options.globalShortcuts.volumeUp), () => changeVolume(true, options));
 	}
 	if (options.globalShortcuts.volumeDown) {
-		remote.globalShortcut.register((options.globalShortcuts.volumeDown), () => changeVolume(false, options));
+		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;
-		}
+		window.addEventListener('keydown', (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

@@ -1,19 +1,82 @@
 const { enabled } = require("./back");
 const { setOptions } = require("../../config/plugins");
+const prompt = require("custom-electron-prompt");
+const promptOptions = require("../../providers/prompt-options");
+
+function changeOptions(changedOptions, options, win) {
+	for (option in changedOptions) {
+		options[option] = changedOptions[option];
+	}
+	// Dynamically change setting if plugin is enabled
+	if (enabled()) {
+		win.webContents.send("setOptions", changedOptions);
+	} else { // Fallback to usual method if disabled
+		setOptions("precise-volume", options);
+	}
+}
 
 module.exports = (win, options) => [
 	{
-		label: "Arrowkeys controls",
+		label: "Local 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);
-			}
+		click: item => {
+			changeOptions({ arrowsShortcut: item.checked }, options, win);
 		}
+	},
+	{
+		label: "Global Hotkeys",
+		type: "checkbox",
+		checked: !!options.globalShortcuts.volumeUp || !!options.globalShortcuts.volumeDown,
+		click: item => promptGlobalShortcuts(win, options, item)
+	},
+	{
+		label: "Set Custom Volume Steps",
+		click: () => promptVolumeSteps(win, options)
 	}
 ];
+
+// Helper function for globalShortcuts prompt
+const kb = (label_, value_, default_) => { return { value: value_, label: label_, default: default_ || undefined }; };
+
+async function promptVolumeSteps(win, options) {
+	const output = await prompt({
+		title: "Volume Steps",
+		label: "Choose Volume Increase/Decrease Steps",
+		value: options.steps || 1,
+		type: "counter",
+		counterOptions: { minimum: 0, maximum: 100, multiFire: true },
+		width: 380,
+		...promptOptions()
+	}, win)
+
+	if (output || output === 0) { // 0 is somewhat valid
+		changeOptions({ steps: output}, options, win);
+	}
+}
+
+async function promptGlobalShortcuts(win, options, item) {
+	const output = await prompt({
+		title: "Global Volume Keybinds",
+		label: "Choose Global Volume Keybinds:",
+		type: "keybind",
+		keybindOptions: [
+			kb("Increase Volume", "volumeUp", options.globalShortcuts?.volumeUp),
+			kb("Decrease Volume", "volumeDown", options.globalShortcuts?.volumeDown)
+		],
+		...promptOptions()
+	}, win)
+
+	if (output) {
+		let newGlobalShortcuts = {};
+		for (const { value, accelerator } of output) {
+			newGlobalShortcuts[value] = accelerator;
+		}
+		changeOptions({ globalShortcuts: newGlobalShortcuts }, options, win);
+
+		item.checked = !!options.globalShortcuts.volumeUp || !!options.globalShortcuts.volumeDown;
+	} else {
+		// Reset checkbox if prompt was canceled
+		item.checked = !item.checked;
+	}
+}

plugins/precise-volume/preload.js

@@ -1,28 +1,33 @@
 const { ipcRenderer } = require("electron");
+const is = require("electron-is");
+
+let ignored = {
+    id: ["volume-slider", "expand-volume-slider"],
+    types: ["mousewheel", "keydown", "keyup"]
+};
 
-// 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);
+        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
+    // Restore original function after finished loading to avoid keeping Element.prototype altered
+    window.addEventListener('load', () => {
         Element.prototype.addEventListener = Element.prototype._addEventListener;
-    });
+        Element.prototype._addEventListener = undefined;
+        ignored = undefined;
+    }, { once: true });
 };

plugins/quality-changer/front.js

@@ -0,0 +1,41 @@
+const { ElementFromFile, templatePath } = require("../utils");
+const { dialog } = require('@electron/remote');
+
+function $(selector) { return document.querySelector(selector); }
+
+const qualitySettingsButton = ElementFromFile(
+    templatePath(__dirname, "qualitySettingsTemplate.html")
+);
+
+
+module.exports = () => {
+    document.addEventListener('apiLoaded', setup, { once: true, passive: true });
+}
+
+function setup(event) {
+    const api = event.detail;
+
+    $('.top-row-buttons.ytmusic-player').prepend(qualitySettingsButton);
+
+    qualitySettingsButton.onclick = function chooseQuality() {
+        if (api.getPlayerState() === 2) api.playVideo();
+        else if (api.getPlayerState() === 1) api.pauseVideo();
+
+        const currentIndex = api.getAvailableQualityLevels().indexOf(api.getPlaybackQuality())
+
+        dialog.showMessageBox({
+            type: "question",
+            buttons: api.getAvailableQualityLabels(),
+            defaultId: currentIndex,
+            title: "Choose Video Quality",
+            message: "Choose Video Quality:",
+            detail: `Current Quality: ${api.getAvailableQualityLabels()[currentIndex]}`,
+            cancelId: -1
+        }).then((promise) => {
+            if (promise.response === -1) return;
+            const newQuality = api.getAvailableQualityLevels()[promise.response];
+            api.setPlaybackQualityRange(newQuality);
+            api.setPlaybackQuality(newQuality)
+        })
+    }
+}

plugins/quality-changer/templates/qualitySettingsTemplate.html

@@ -0,0 +1,13 @@
+<tp-yt-paper-icon-button class="player-quality-button style-scope ytmusic-player" icon="yt-icons:settings"
+    title="Open player quality changer" aria-label="Open player quality changer" role="button" tabindex="0" aria-disabled="false">
+    <tp-yt-iron-icon id="icon" class="style-scope tp-yt-paper-icon-button"><svg viewBox="0 0 24 24"
+            preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon"
+            style="pointer-events: none; display: block; width: 100%; height: 100%;">
+            <g class="style-scope yt-icon">
+                <path
+                    d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.1-1.65c.2-.15.25-.42.13-.64l-2-3.46c-.12-.22-.4-.3-.6-.22l-2.5 1c-.52-.4-1.08-.73-1.7-.98l-.37-2.65c-.06-.24-.27-.42-.5-.42h-4c-.27 0-.48.18-.5.42l-.4 2.65c-.6.25-1.17.6-1.7.98l-2.48-1c-.23-.1-.5 0-.6.22l-2 3.46c-.14.22-.08.5.1.64l2.12 1.65c-.04.32-.07.65-.07.98s.02.66.06.98l-2.1 1.65c-.2.15-.25.42-.13.64l2 3.46c.12.22.4.3.6.22l2.5-1c.52.4 1.08.73 1.7.98l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.6-.25 1.17-.6 1.7-.98l2.48 1c.23.1.5 0 .6-.22l2-3.46c.13-.22.08-.5-.1-.64l-2.12-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
+                    class="style-scope yt-icon"></path>
+            </g>
+        </svg>
+    </tp-yt-iron-icon>
+</tp-yt-paper-icon-button>

plugins/shortcuts/back.js

@@ -1,7 +1,8 @@
 const { globalShortcut } = require("electron");
+const is = require("electron-is");
 const electronLocalshortcut = require("electron-localshortcut");
-
 const getSongControls = require("../../providers/song-controls");
+const registerMPRIS = require("./mpris");
 
 function _registerGlobalShortcut(webContents, shortcut, action) {
 	globalShortcut.register(shortcut, () => {
@@ -19,31 +20,43 @@ function registerShortcuts(win, options) {
 	const songControls = getSongControls(win);
 	const { playPause, next, previous, search } = songControls;
 
-	_registerGlobalShortcut(win.webContents, "MediaPlayPause", playPause);
-	_registerGlobalShortcut(win.webContents, "MediaNextTrack", next);
-	_registerGlobalShortcut(win.webContents, "MediaPreviousTrack", previous);
+	if (options.overrideMediaKeys) {
+		_registerGlobalShortcut(win.webContents, "MediaPlayPause", playPause);
+		_registerGlobalShortcut(win.webContents, "MediaNextTrack", next);
+		_registerGlobalShortcut(win.webContents, "MediaPreviousTrack", previous);
+	}
+
 	_registerLocalShortcut(win, "CommandOrControl+F", search);
 	_registerLocalShortcut(win, "CommandOrControl+L", search);
 
+	if (is.linux()) registerMPRIS(win);
+
 	const { global, local } = options;
-	(global || []).forEach(({ shortcut, action }) => {
-		console.debug("Registering global shortcut", shortcut, ":", action);
-		if (!action || !songControls[action]) {
-			console.warn("Invalid action", action);
-			return;
-		}
+	const shortcutOptions = { global, local };
 
-		_registerGlobalShortcut(win.webContents, shortcut, songControls[action]);
-	});
-	(local || []).forEach(({ shortcut, action }) => {
-		console.debug("Registering local shortcut", shortcut, ":", action);
-		if (!action || !songControls[action]) {
-			console.warn("Invalid action", action);
-			return;
-		}
+	for (const optionType in shortcutOptions) {
+		registerAllShortcuts(shortcutOptions[optionType], optionType);
+	}
 
-		_registerLocalShortcut(win, shortcut, songControls[action]);
-	});
+	function registerAllShortcuts(container, type) {
+		for (const action in container) {
+			if (!container[action]) {
+				continue; // Action accelerator is empty
+			}
+
+			console.debug(`Registering ${type} shortcut`, container[action], ":", action);
+			if (!songControls[action]) {
+				console.warn("Invalid action", action);
+				continue;
+			}
+
+			if (type === "global") {
+				_registerGlobalShortcut(win.webContents, container[action], songControls[action]);
+			} else { // type === "local"
+				_registerLocalShortcut(win, local[action], songControls[action]);
+			}
+		}
+	}
 }
 
 module.exports = registerShortcuts;

plugins/shortcuts/menu.js

@@ -0,0 +1,53 @@
+const { setOptions } = require("../../config/plugins");
+const prompt = require("custom-electron-prompt");
+const promptOptions = require("../../providers/prompt-options");
+
+module.exports = (win, options) => [
+	{
+		label: "Set Global Song Controls",
+		click: () => promptKeybind(options, win)
+	},
+	{
+		label: "Override MediaKeys",
+		type: "checkbox",
+		checked: options.overrideMediaKeys,
+		click: item => setOption(options, "overrideMediaKeys", item.checked)
+	}
+];
+
+function setOption(options, key = null, newValue = null) {
+	if (key && newValue !== null) {
+		options[key] = newValue;
+	}
+
+	setOptions("shortcuts", options);
+}
+
+// Helper function for keybind prompt
+const kb = (label_, value_, default_) => { return { value: value_, label: label_, default: default_ }; };
+
+async function promptKeybind(options, win) {
+	const output = await prompt({
+		title: "Global Keybinds",
+		label: "Choose Global Keybinds for Songs Control:",
+		type: "keybind",
+		keybindOptions: [ // If default=undefined then no default is used
+			kb("Previous", "previous", options.global?.previous),
+			kb("Play / Pause", "playPause", options.global?.playPause),
+			kb("Next", "next", options.global?.next)
+		],
+		height: 270,
+		...promptOptions()
+	}, win);
+
+	if (output) {
+		if (!options.global) {
+			options.global = {};
+		}
+		for (const { value, accelerator } of output) {
+			options.global[value] = accelerator;
+		}
+		setOption(options);
+	}
+	// else -> pressed cancel
+}

plugins/shortcuts/mpris.js

@@ -0,0 +1,85 @@
+const mpris = require("mpris-service");
+const { ipcMain } = require("electron");
+const registerCallback = require("../../providers/song-info");
+const getSongControls = require("../../providers/song-controls");
+
+function setupMPRIS() {
+	const player = mpris({
+		name: "youtube-music",
+		identity: "YouTube Music",
+		canRaise: true,
+		supportedUriSchemes: ["https"],
+		supportedMimeTypes: ["audio/mpeg"],
+		supportedInterfaces: ["player"],
+		desktopEntry: "youtube-music",
+	});
+
+	return player;
+}
+
+function registerMPRIS(win) {
+	const songControls = getSongControls(win);
+	const { playPause, next, previous } = songControls;
+	try {
+		const secToMicro = n => Math.round(Number(n) * 1e6);
+		const microToSec = n => Math.round(Number(n) / 1e6);
+
+		const seekTo = e => win.webContents.send("seekTo", microToSec(e.position));
+		const seekBy = o => win.webContents.send("seekBy", microToSec(o));
+
+		const player = setupMPRIS();
+
+		ipcMain.on('seeked', (_, t) => player.seeked(secToMicro(t)));
+
+		let currentSeconds = 0;
+		ipcMain.on('timeChanged', (_, t) => currentSeconds = t);
+
+		player.getPosition = () => secToMicro(currentSeconds)
+
+		player.on("raise", () => {
+			win.setSkipTaskbar(false);
+			win.show();
+		});
+
+		player.on("play", () => {
+			if (player.playbackStatus !== 'Playing') {
+				player.playbackStatus = 'Playing';
+				playPause()
+			}
+		});
+		player.on("pause", () => {
+			if (player.playbackStatus !== 'Paused') {
+				player.playbackStatus = 'Paused';
+				playPause()
+			}
+		});
+
+		player.on("playpause", playPause);
+		player.on("next", next);
+		player.on("previous", previous);
+
+		player.on('seek', seekBy);
+		player.on('position', seekTo);
+
+		registerCallback(songInfo => {
+			if (player) {
+				const data = {
+					'mpris:length': secToMicro(songInfo.songDuration),
+					'mpris:artUrl': songInfo.imageSrc,
+					'xesam:title': songInfo.title,
+					'xesam:artist': songInfo.artist,
+					'mpris:trackid': '/'
+				};
+				if (songInfo.album) data['xesam:album'] = songInfo.album;
+				player.metadata = data;
+				player.seeked(secToMicro(songInfo.elapsedSeconds))
+				player.playbackStatus = songInfo.isPaused ? "Paused" : "Playing"
+			}
+		})
+
+	} catch (e) {
+		console.warn("Error in MPRIS", e);
+	}
+}
+
+module.exports = registerMPRIS;

plugins/skip-silences/front.js

@@ -0,0 +1,37 @@
+const hark = require("hark/hark.bundle.js");
+
+module.exports = () => {
+	let isSilent = false;
+
+	document.addEventListener("apiLoaded", (apiEvent) => {
+		const video = document.querySelector("video");
+		const speechEvents = hark(video, {
+			threshold: -100, // dB (-100 = absolute silence, 0 = loudest)
+			interval: 2, // ms
+		});
+		const skipSilence = () => {
+			if (isSilent && !video.paused) {
+				video.currentTime += 0.2; // in s
+			}
+		};
+
+		speechEvents.on("speaking", function () {
+			isSilent = false;
+		});
+
+		speechEvents.on("stopped_speaking", function () {			
+			if (!(video.paused || video.seeking || video.ended)) {
+				isSilent = true;
+				skipSilence();
+			}
+		});
+
+		video.addEventListener("play", function () {
+			skipSilence();
+		});
+
+		video.addEventListener("seeked", function () {
+			skipSilence();
+		});
+	});
+};

plugins/sponsorblock/back.js

@@ -0,0 +1,51 @@
+const fetch = require("node-fetch");
+const is = require("electron-is");
+const { ipcMain } = require("electron");
+
+const defaultConfig = require("../../config/defaults");
+const { sortSegments } = require("./segments");
+
+let videoID;
+
+module.exports = (win, options) => {
+	const { apiURL, categories } = {
+		...defaultConfig.plugins.sponsorblock,
+		...options,
+	};
+
+	ipcMain.on("video-src-changed", async (_, data) => {
+		videoID = JSON.parse(data)?.videoDetails?.videoId;
+		const segments = await fetchSegments(apiURL, categories);
+		win.webContents.send("sponsorblock-skip", segments);
+	});
+};
+
+
+const fetchSegments = async (apiURL, categories) => {
+	const sponsorBlockURL = `${apiURL}/api/skipSegments?videoID=${videoID}&categories=${JSON.stringify(
+		categories
+	)}`;
+	try {
+		const resp = await fetch(sponsorBlockURL, {
+			method: "GET",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			redirect: "follow",
+		});
+		if (resp.status !== 200) {
+			return [];
+		}
+		const segments = await resp.json();
+		const sortedSegments = sortSegments(
+			segments.map((submission) => submission.segment)
+		);
+
+		return sortedSegments;
+	} catch (e) {
+		if (is.dev()) {
+			console.log('error on sponsorblock request:', e);
+		}
+		return [];
+	}
+};

plugins/sponsorblock/front.js

@@ -0,0 +1,31 @@
+const { ipcRenderer } = require("electron");
+
+const is = require("electron-is");
+
+let currentSegments = [];
+
+module.exports = () => {
+	ipcRenderer.on("sponsorblock-skip", (_, segments) => {
+		currentSegments = segments;
+	});
+
+	document.addEventListener('apiLoaded', () => {
+		const video = document.querySelector('video');
+
+		video.addEventListener('timeupdate', e => {
+			currentSegments.forEach((segment) => {
+				if (
+					e.target.currentTime >= segment[0] &&
+					e.target.currentTime < segment[1]
+				) {
+					e.target.currentTime = segment[1];
+					if (is.dev()) {
+						console.log("SponsorBlock: skipping segment", segment);
+					}
+				}
+			});
+		})
+		// Reset segments on song end
+		video.addEventListener('emptied', () => currentSegments = []);
+	}, { once: true, passive: true })
+};

plugins/sponsorblock/segments.js

@@ -0,0 +1,29 @@
+// Segments are an array [ [start, end], … ]
+module.exports.sortSegments = (segments) => {
+	segments.sort((segment1, segment2) =>
+		segment1[0] === segment2[0]
+			? segment1[1] - segment2[1]
+			: segment1[0] - segment2[0]
+	);
+
+	const compiledSegments = [];
+	let currentSegment;
+
+	segments.forEach((segment) => {
+		if (!currentSegment) {
+			currentSegment = segment;
+			return;
+		}
+
+		if (currentSegment[1] < segment[0]) {
+			compiledSegments.push(currentSegment);
+			currentSegment = segment;
+			return;
+		}
+
+		currentSegment[1] = Math.max(currentSegment[1], segment[1]);
+	});
+	compiledSegments.push(currentSegment);
+
+	return compiledSegments;
+};

plugins/sponsorblock/tests/segments.test.js

@@ -0,0 +1,34 @@
+const { sortSegments } = require("../segments");
+
+test("Segment sorting", () => {
+	expect(
+		sortSegments([
+			[0, 3],
+			[7, 8],
+			[5, 6],
+		])
+	).toEqual([
+		[0, 3],
+		[5, 6],
+		[7, 8],
+	]);
+
+	expect(
+		sortSegments([
+			[0, 5],
+			[6, 8],
+			[4, 6],
+		])
+	).toEqual([[0, 8]]);
+
+	expect(
+		sortSegments([
+			[0, 6],
+			[7, 8],
+			[4, 6],
+		])
+	).toEqual([
+		[0, 6],
+		[7, 8],
+	]);
+});

plugins/taskbar-mediacontrol/back.js

@@ -1,12 +1,11 @@
 const getSongControls = require('../../providers/song-controls');
-const getSongInfo = require('../../providers/song-info');
+const registerCallback = require('../../providers/song-info');
 const path = require('path');
 
 let controls;
 let currentSongInfo;
 
 module.exports = win => {
-	const registerCallback = getSongInfo(win);
 	const { playPause, next, previous } = getSongControls(win);
 	controls = { playPause, next, previous };
 

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,7 +59,6 @@ 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

plugins/tuna-obs/back.js

@@ -0,0 +1,52 @@
+const { ipcMain } = require("electron");
+const fetch = require('node-fetch');
+
+const registerCallback = require("../../providers/song-info");
+
+const secToMilisec = t => Math.round(Number(t) * 1e3);
+const data = {
+	cover_url: '',
+	title: '',
+	artists: [],
+	status: '',
+	progress: 0,
+	duration: 0,
+	album_url: '',
+	album: undefined
+};
+
+const post = async (data) => {
+	const port = 1608;
+	headers = {
+		'Content-Type': 'application/json',
+		'Accept': 'application/json',
+		'Access-Control-Allow-Headers': '*',
+		'Access-Control-Allow-Origin': '*'
+	}
+	const url = `http://localhost:${port}/`;
+	fetch(url, { method: 'POST', headers, body: JSON.stringify({ data }) }).catch(e => console.log(`Error: '${e.code || e.errno}' - when trying to access obs-tuna webserver at port ${port}`));
+}
+
+module.exports = async (win) => {
+	ipcMain.on('timeChanged', async (_, t) => {
+		if (!data.title) return;
+		data.progress = secToMilisec(t);
+		post(data);
+	});
+
+	registerCallback((songInfo) => {
+		if (!songInfo.title && !songInfo.artist) {
+			return;
+		}
+
+		data.duration = secToMilisec(songInfo.songDuration)
+		data.progress = secToMilisec(songInfo.elapsedSeconds)
+		data.cover_url = songInfo.imageSrc;
+		data.album_url = songInfo.imageSrc;
+		data.title = songInfo.title;
+		data.artists = [songInfo.artist];
+		data.status = songInfo.isPaused ? 'stopped' : 'playing';
+		data.album = songInfo.album;
+		post(data);
+	})
+}

plugins/utils.js

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

plugins/video-toggle/back.js

@@ -0,0 +1,10 @@
+const { injectCSS } = require("../utils");
+const path = require("path");
+
+module.exports = (win, options) => {
+	if (options.forceHide) {
+		injectCSS(win.webContents, path.join(__dirname, "force-hide.css"));
+	} else {
+		injectCSS(win.webContents, path.join(__dirname, "button-switcher.css"));
+	}
+};

plugins/video-toggle/button-switcher.css

@@ -0,0 +1,77 @@
+#main-panel.ytmusic-player-page {
+    align-items: unset !important;
+}
+
+.video-switch-button {
+    z-index: 999;
+    box-sizing: border-box;
+    padding: 0;
+    margin-top: 20px;
+    margin-left: 10px;
+    background: rgba(33, 33, 33, 0.4);
+    border-radius: 30px;
+    overflow: hidden;
+    width: 240px;
+    text-align: center;
+    font-size: 18px;
+    letter-spacing: 1px;
+    color: #fff;
+    padding-right: 120px;
+    position: absolute;
+}
+
+.video-switch-button:before {
+    content: "Video";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    pointer-events: none;
+}
+
+.video-switch-button-checkbox {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    z-index: 2;
+}
+
+.video-switch-button-label-span {
+    position: relative;
+}
+
+.video-switch-button-checkbox:checked+.video-switch-button-label:before {
+    transform: translateX(120px);
+    transition: transform 300ms linear;
+}
+
+.video-switch-button-checkbox+.video-switch-button-label {
+    position: relative;
+    padding: 15px 0;
+    display: block;
+    user-select: none;
+    pointer-events: none;
+}
+
+.video-switch-button-checkbox+.video-switch-button-label:before {
+    content: "";
+    background: rgba(60, 60, 60, 0.4);
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 30px;
+    transform: translateX(0);
+    transition: transform 300ms;
+}

plugins/video-toggle/front.js

@@ -0,0 +1,116 @@
+const { ElementFromFile, templatePath } = require("../utils");
+
+const { setOptions } = require("../../config/plugins");
+
+function $(selector) { return document.querySelector(selector); }
+
+let options, player, video, api;
+
+const switchButtonDiv = ElementFromFile(
+    templatePath(__dirname, "button_template.html")
+);
+
+module.exports = (_options) => {
+    if (_options.forceHide) return;
+    options = _options;
+    document.addEventListener('apiLoaded', setup, { once: true, passive: true });
+}
+
+function setup(e) {
+    api = e.detail;
+    player = $('ytmusic-player');
+    video = $('video');
+
+    $('ytmusic-player-page').prepend(switchButtonDiv);
+
+    $('#song-image.ytmusic-player').style.display = "block";
+
+    if (options.hideVideo) {
+        $('.video-switch-button-checkbox').checked = false;
+        changeDisplay(false);
+        forcePlaybackMode();
+        // fix black video
+        video.style.height = "auto";
+    }
+
+    // button checked = show video
+    switchButtonDiv.addEventListener('change', (e) => {
+        options.hideVideo = !e.target.checked;
+        changeDisplay(e.target.checked);
+        setOptions("video-toggle", options);
+    })
+  
+    video.addEventListener('srcChanged', videoStarted);
+
+    observeThumbnail();
+}
+
+function changeDisplay(showVideo) {
+    player.style.margin = showVideo ? '' : 'auto 0px';
+    player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
+    $('#song-video.ytmusic-player').style.display = showVideo ? 'unset' : 'none';
+    if (showVideo && !video.style.top) {
+        video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
+    }
+    moveVolumeHud(showVideo);
+}
+
+function videoStarted() {
+    if (api.getPlayerResponse().videoDetails.musicVideoType !== 'MUSIC_VIDEO_TYPE_ATV') {
+        // switch to high res thumbnail
+        forceThumbnail($('#song-image img'));
+        // show toggle button
+        switchButtonDiv.style.display = "initial";
+        // change display to video mode if video exist & video is hidden & option.hideVideo = false
+        if (!options.hideVideo && $('#song-video.ytmusic-player').style.display === "none") {
+            changeDisplay(true);
+        } else {
+            moveVolumeHud(!options.hideVideo);
+        }
+    } else {
+        // video doesn't exist -> switch to song mode
+        changeDisplay(false);
+        // hide toggle button
+        switchButtonDiv.style.display = "none";
+    }
+}
+
+// on load, after a delay, the page overrides the playback-mode to 'OMV_PREFERRED' which causes weird aspect ratio in the image container
+// this function fix the problem by overriding that override :)
+function forcePlaybackMode() {
+    const playbackModeObserver = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+            if (mutation.target.getAttribute('playback-mode') !== "ATV_PREFERRED") {
+                playbackModeObserver.disconnect();
+                mutation.target.setAttribute('playback-mode', "ATV_PREFERRED");
+            }
+        });
+    });
+    playbackModeObserver.observe(player, { attributeFilter: ["playback-mode"] });
+}
+
+// if precise volume plugin is enabled, move its hud to be on top of the video
+function moveVolumeHud(showVideo) {
+    const volumeHud = $('#volumeHud');
+    if (volumeHud)
+        volumeHud.style.top = showVideo ? `${(player.clientHeight - video.clientHeight) / 2}px` : 0;
+}
+
+function observeThumbnail() {
+    const playbackModeObserver = new MutationObserver(mutations => {
+        if (!player.videoMode_) return;
+
+        mutations.forEach(mutation => {
+            if (!mutation.target.src.startsWith('data:')) return;
+            forceThumbnail(mutation.target)
+        });
+    });
+    playbackModeObserver.observe($('#song-image img'), { attributeFilter: ["src"] })
+}
+
+function forceThumbnail(img) {
+    const thumbnails = $('#movie_player').getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails;
+    if (thumbnails && thumbnails.length > 0) {
+        img.src = thumbnails[thumbnails.length - 1].url.split("?")[0];
+    }
+}

plugins/video-toggle/menu.js

@@ -0,0 +1,13 @@
+const { setOptions } = require("../../config/plugins");
+
+module.exports = (win, options) => [
+    {
+        label: "Force Remove Video Tab",
+        type: "checkbox",
+        checked: options.forceHide,
+        click: item => {
+            options.forceHide = item.checked;
+            setOptions("video-toggle", options);
+        }
+    }
+];

plugins/video-toggle/templates/button_template.html

@@ -0,0 +1,4 @@
+<div class="video-switch-button">
+    <input class="video-switch-button-checkbox" type="checkbox" checked="true"></input>
+    <label class="video-switch-button-label" for=""><span class="video-switch-button-label-span">Song</span></label>
+</div>

preload.js

@@ -1,13 +1,17 @@
 const path = require("path");
 
-const { remote } = require("electron");
+const remote = require('@electron/remote');
 
 const config = require("./config");
 const { fileExists } = require("./plugins/utils");
 const setupFrontLogger = require("./providers/front-logger");
+const setupSongInfo = require("./providers/song-info-front");
+const { setupSongControls } = require("./providers/song-controls-front");
 
 const plugins = config.plugins.getEnabled();
 
+let api;
+
 plugins.forEach(([plugin, options]) => {
 	const preloadPath = path.join(__dirname, "plugins", plugin, "preload.js");
 	fileExists(preloadPath, () => {
@@ -36,9 +40,14 @@ document.addEventListener("DOMContentLoaded", () => {
 		});
 	});
 
+	// wait for complete load of youtube api
+	listenForApiLoad();
+
 	// inject song-info provider
-	const songInfoProviderPath = path.join(__dirname, "providers", "song-info-front.js")
-	fileExists(songInfoProviderPath, require(songInfoProviderPath));
+	setupSongInfo();
+
+	// inject song-controls
+	setupSongControls();
 
 	// inject front logger
 	setupFrontLogger();
@@ -46,4 +55,37 @@ document.addEventListener("DOMContentLoaded", () => {
 	// Add action for reloading
 	global.reload = () =>
 		remote.getCurrentWindow().webContents.loadURL(config.get("url"));
+
+	// Blocks the "Are You Still There?" popup by setting the last active time to Date.now every 15min
+	setInterval(() => window._lact = Date.now(), 900000);
 });
+
+function listenForApiLoad() {
+	api = document.querySelector('#movie_player');
+	if (api) {
+		onApiLoaded();
+		return;
+	}
+
+	const observer = new MutationObserver(() => {
+		api = document.querySelector('#movie_player');
+		if (api) {
+			observer.disconnect();
+			onApiLoaded();
+		}
+	})
+
+	observer.observe(document.documentElement, { childList: true, subtree: true });
+}
+
+function onApiLoaded() {
+	document.dispatchEvent(new CustomEvent('apiLoaded', { detail: api }));
+
+	// Remove upgrade button
+	if (config.get("options.removeUpgradeButton")) {
+		const upgradeButtton = document.querySelector('ytmusic-pivot-bar-item-renderer[tab-id="SPunlimited"]')
+		if (upgradeButtton) {
+			upgradeButtton.style.display = "none";
+		}
+	}
+}

providers/dom-elements.js

@@ -1,23 +1,4 @@
-let domElements = {};
-
-const watchDOMElement = (name, selectorFn, cb) => {
-	const observer = new MutationObserver((mutations, observer) => {
-		if (!domElements[name]) {
-			domElements[name] = selectorFn(document);
-		}
-
-		if (domElements[name]) {
-			cb(domElements[name]);
-		}
-	});
-
-	observer.observe(document, {
-		childList: true,
-		subtree: true,
-	});
-};
-
 const getSongMenu = () =>
 	document.querySelector("ytmusic-menu-popup-renderer tp-yt-paper-listbox");
 
-module.exports = { getSongMenu, watchDOMElement };
+module.exports = { getSongMenu };

providers/prompt-custom-titlebar.js

@@ -0,0 +1,14 @@
+const customTitlebar = require("custom-electron-titlebar");
+
+module.exports = () => {
+	new customTitlebar.Titlebar({
+		backgroundColor: customTitlebar.Color.fromHex("#050505"),
+		minimizable: false,
+		maximizable: false,
+		menu: null
+	});
+	const mainStyle = document.querySelector("#container").style;
+	mainStyle.width = "100%";
+	mainStyle.position = "fixed";
+	mainStyle.border = "unset";
+};

providers/prompt-options.js

@@ -0,0 +1,18 @@
+const path = require("path");
+const is = require("electron-is");
+
+const iconPath = path.join(__dirname, "..", "assets", "youtube-music-tray.png");
+const customTitlebarPath = path.join(__dirname, "prompt-custom-titlebar.js");
+
+const promptOptions = is.macOS() ? {
+    customStylesheet: "dark",
+    icon: iconPath
+} : {
+    customStylesheet: "dark",
+    // The following are used for custom titlebar
+    frame: false,
+    customScript: customTitlebarPath,
+    enableRemoteModule: true
+};
+
+module.exports = () => promptOptions;

providers/song-controls-front.js

@@ -0,0 +1,13 @@
+const { ipcRenderer } = require("electron");
+const config = require("../config");
+const is = require("electron-is");
+
+module.exports.setupSongControls = () => {
+    document.addEventListener('apiLoaded', e => {
+        ipcRenderer.on("seekTo", (_, t) => e.detail.seekTo(t));
+        ipcRenderer.on("seekBy", (_, t) => e.detail.seekBy(t));
+        if (is.linux() && config.plugins.isEnabled('shortcuts')) { // MPRIS Enabled
+            document.querySelector('video').addEventListener('seeked', v => ipcRenderer.send('seeked', v.target.currentTime));
+        }
+    }, { once: true, passive: true })
+};

providers/song-controls.js

@@ -13,8 +13,8 @@ module.exports = (win) => {
 		previous: () => pressKey(win, "k"),
 		next: () => pressKey(win, "j"),
 		playPause: () => pressKey(win, "space"),
-		like: () => pressKey(win, "_"),
-		dislike: () => pressKey(win, "+"),
+		like: () => pressKey(win, "+"),
+		dislike: () => pressKey(win, "_"),
 		go10sBack: () => pressKey(win, "h"),
 		go10sForward: () => pressKey(win, "l"),
 		go1sBack: () => pressKey(win, "h", ["shift"]),
@@ -24,8 +24,6 @@ module.exports = (win) => {
 		// General
 		volumeMinus10: () => pressKey(win, "-"),
 		volumePlus10: () => pressKey(win, "="),
-		dislikeAndNext: () => pressKey(win, "-", ["shift"]),
-		like: () => pressKey(win, "=", ["shift"]),
 		fullscreen: () => pressKey(win, "f"),
 		muteUnmute: () => pressKey(win, "m"),
 		maximizeMinimisePlayer: () => pressKey(win, "q"),
@@ -38,14 +36,14 @@ module.exports = (win) => {
 			pressKey(win, "g");
 			pressKey(win, "l");
 		},
-		goToHotlist: () => {
-			pressKey(win, "g");
-			pressKey(win, "t");
-		},
 		goToSettings: () => {
 			pressKey(win, "g");
 			pressKey(win, ",");
 		},
+		goToExplore: () => {
+			pressKey(win, "g");
+			pressKey(win, "e");
+		},
 		search: () => pressKey(win, "/"),
 		showShortcuts: () => pressKey(win, "/", ["shift"]),
 	};

providers/song-info-front.js

@@ -1,32 +1,60 @@
 const { ipcRenderer } = require("electron");
-
+const is = require('electron-is');
 const { getImage } = require("./song-info");
 
+const config = require("../config");
+
 global.songInfo = {};
 
+function $(selector) { return document.querySelector(selector); }
+
 ipcRenderer.on("update-song-info", async (_, extractedSongInfo) => {
 	global.songInfo = JSON.parse(extractedSongInfo);
 	global.songInfo.image = await getImage(global.songInfo.imageSrc);
 });
 
-const injectListener = () => {
-	var oldXHR = window.XMLHttpRequest;
-	function newXHR() {
-		var realXHR = new oldXHR();
-		realXHR.addEventListener(
-			"readystatechange",
-			() => {
-				if (realXHR.readyState == 4 && realXHR.status == 200) {
-					if (realXHR.responseURL.includes("/player")) {
-						// if the request contains the song info, send the response to ipcMain
-						ipcRenderer.send("song-info-request", realXHR.responseText);
-					}
+// used because 'loadeddata' or 'loadedmetadata' weren't firing on song start for some users (https://github.com/th-ch/youtube-music/issues/473)
+const srcChangedEvent = new CustomEvent('srcChanged');
+
+module.exports = () => {
+	document.addEventListener('apiLoaded', apiEvent => {
+		if (config.plugins.isEnabled('tuna-obs') ||
+			(is.linux() && config.plugins.isEnabled('shortcuts'))) {
+			setupTimeChangeListener();
+		}
+		const video = $('video');
+		// name = "dataloaded" and abit later "dataupdated"
+		apiEvent.detail.addEventListener('videodatachange', (name, _dataEvent) => {
+			if (name !== 'dataloaded') return;
+			video.dispatchEvent(srcChangedEvent);
+			sendSongInfo();
+		})
+
+		for (const status of ['playing', 'pause']) {
+			video.addEventListener(status, e => {
+				if (Math.round(e.target.currentTime) > 0) {
+					ipcRenderer.send("playPaused", {
+						isPaused: status === 'pause',
+						elapsedSeconds: Math.floor(e.target.currentTime)
+					});
 				}
-			},
-			false
-		);
-		return realXHR;
-	}
-	window.XMLHttpRequest = newXHR;
+			});
+		}
+
+		function sendSongInfo() {
+			const data = apiEvent.detail.getPlayerResponse();
+			data.videoDetails.album = $('ytmusic-player-page')?.__data?.playerPageWatchMetadata?.albumName?.runs[0].text
+			data.videoDetails.elapsedSeconds = Math.floor(video.currentTime);
+			data.videoDetails.isPaused = false;
+			ipcRenderer.send("video-src-changed", JSON.stringify(data));
+		}
+	}, { once: true, passive: true });
 };
-module.exports = injectListener;
+
+function setupTimeChangeListener() {
+	const progressObserver = new MutationObserver(mutations => {
+		ipcRenderer.send('timeChanged', mutations[0].target.value);
+		global.songInfo.elapsedSeconds = mutations[0].target.value;
+	});
+	progressObserver.observe($('#progress-bar'), { attributeFilter: ["value"] })
+}

providers/song-info.js

@@ -2,46 +2,12 @@ const { ipcMain, nativeImage } = require("electron");
 
 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
-	const elapsedSeconds = await win.webContents.executeJavaScript(
-		'document.querySelector("' + progressSelector + '").value'
-	);
-
-	return elapsedSeconds;
-};
-
-// Grab the native image using the src
-const getImage = async (src) => {
-	const result = await fetch(src);
-	const buffer = await result.buffer();
-	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(
-		`
-		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;
-		}
-		`
-	)
-}
+const config = require("../config");
 
 // Fill songInfo with empty values
+/**
+ * @typedef {songInfo} SongInfo
+ */
 const songInfo = {
 	title: "",
 	artist: "",
@@ -53,54 +19,111 @@ const songInfo = {
 	songDuration: 0,
 	elapsedSeconds: 0,
 	url: "",
+	album: undefined,
+	videoId: "",
+	playlistId: "",
+};
+
+// Grab the native image using the src
+const getImage = async (src) => {
+	const result = await fetch(src);
+	const buffer = await result.buffer();
+	const output = nativeImage.createFromBuffer(buffer);
+	if (output.isEmpty() && !src.endsWith(".jpg") && src.includes(".jpg")) { // fix hidden webp files (https://github.com/th-ch/youtube-music/issues/315)
+		return getImage(src.slice(0, src.lastIndexOf(".jpg") + 4));
+	} else {
+		return output;
+	}
 };
 
 const handleData = async (responseText, win) => {
-	let data = JSON.parse(responseText);
-	songInfo.title = data?.videoDetails?.title;
-	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;
-	songInfo.image = await getImage(songInfo.imageSrc);
-	songInfo.uploadDate = data?.microformat?.microformatDataRenderer?.uploadDate;
-	songInfo.url = data?.microformat?.microformatDataRenderer?.urlCanonical;
+	const data = JSON.parse(responseText);
+	if (!data) return;
 
-	win.webContents.send("update-song-info", JSON.stringify(songInfo));
+	const microformat = data.microformat?.microformatDataRenderer;
+	if (microformat) {
+		songInfo.uploadDate = microformat.uploadDate;
+		songInfo.url = microformat.urlCanonical?.split("&")[0];
+		songInfo.playlistId = new URL(microformat.urlCanonical).searchParams.get("list");
+		// used for options.resumeOnStart
+		config.set("url", microformat.urlCanonical);
+	}
+
+	const videoDetails = data.videoDetails;
+	if (videoDetails) {
+		songInfo.title = cleanupName(videoDetails.title);
+		songInfo.artist = cleanupName(videoDetails.author);
+		songInfo.views = videoDetails.viewCount;
+		songInfo.songDuration = videoDetails.lengthSeconds;
+		songInfo.elapsedSeconds = videoDetails.elapsedSeconds;
+		songInfo.isPaused = videoDetails.isPaused;
+		songInfo.videoId = videoDetails.videoId;
+		songInfo.album = data?.videoDetails?.album; // Will be undefined if video exist
+
+		const oldUrl = songInfo.imageSrc;
+		songInfo.imageSrc = videoDetails.thumbnail?.thumbnails?.pop()?.url.split("?")[0];
+		if (oldUrl !== songInfo.imageSrc) {
+			songInfo.image = await getImage(songInfo.imageSrc);
+		}
+
+		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
+/**
+ * @callback songInfoCallback
+ * @param {songInfo} songInfo
+ * @returns {void}
+ */
+/**
+ * @param {songInfoCallback} callback
+ */
+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 () => {
-		// Get and set the new data
-		songInfo.isPaused = await getPausedStatus(win);
-
-		const elapsedSeconds = await getProgress(win);
-		songInfo.elapsedSeconds = elapsedSeconds;
-
-		// Trigger the callbacks
-		callbacks.forEach((c) => {
-			c(songInfo);
-		});
-	});
-
 	// This will be called when the song-info-front finds a new request with song data
-	ipcMain.on("song-info-request", async (_, responseText) => {
+	ipcMain.on("video-src-changed", async (_, responseText) => {
 		await handleData(responseText, win);
 		callbacks.forEach((c) => {
 			c(songInfo);
 		});
 	});
-
-	return registerCallback;
+	ipcMain.on("playPaused", (_, { isPaused, elapsedSeconds }) => {
+		songInfo.isPaused = isPaused;
+		songInfo.elapsedSeconds = elapsedSeconds;
+		callbacks.forEach((c) => {
+			c(songInfo);
+		});
+	})
 };
 
-module.exports = registerProvider;
+const suffixesToRemove = [
+	" - topic",
+	"vevo",
+	" (performance video)",
+	" (official music video)",
+	" (official video)",
+	" (clip officiel)",
+];
+
+function cleanupName(name) {
+	if (!name) return name;
+	const lowCaseName = name.toLowerCase();
+	for (const suffix of suffixesToRemove) {
+		if (lowCaseName.endsWith(suffix)) {
+			return name.slice(0, -suffix.length);
+		}
+	}
+	return name;
+}
+
+module.exports = registerCallback;
+module.exports.setupSongInfo = registerProvider;
 module.exports.getImage = getImage;
+module.exports.cleanupName = cleanupName;

readme.md

@@ -34,16 +34,32 @@ You can check out the [latest release](https://github.com/th-ch/youtube-music/re
 Install the `youtube-music-bin` package from the AUR. For AUR installation instructions, take a look at this [wiki page](https://wiki.archlinux.org/index.php/Arch_User_Repository#Installing_packages).
 
 ## Available plugins:
-
 - **Ad Blocker**: block all ads and tracking out of the box
-- **Downloader**: download to MP3 directly from the interface (youtube-dl)
-- **No Google Login**: remove Google login buttons and links from the interface
-- **Shortcuts**: use your usual shortcuts (media keys, Ctrl/CMD + F…) to control YouTube Music
+- **Audio compressor**: apply compression to audio (lowers the volume of the loudest parts of the signal and raises the volume of the softest parts)
+- **Blur navigation bar**: makes navigation bar transparent and blurry
+- **Disable autoplay**: makes every song start in "paused" mode
+- [**Discord**](https://discord.com/): show your friends what you listen to with [Rich Presence](https://user-images.githubusercontent.com/28219076/104362104-a7a0b980-5513-11eb-9744-bb89eabe0016.png)
+- **Downloader**: downloads MP3 [directly from the interface](https://user-images.githubusercontent.com/61631665/129977677-83a7d067-c192-45e1-98ae-b5a4927393be.png) [(youtube-dl)](https://github.com/ytdl-org/youtube-dl)
+- **In-app menu**: [gives bars a fancy, dark look](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png)
+  > (see [this post](https://github.com/th-ch/youtube-music/issues/410#issuecomment-952060709) if you have problem accessing the menu after enabling this plugin and hide-menu option)
+- [**Last.fm**](https://www.last.fm/): scrobbles support
 - **Navigation**: next/back navigation arrows directly integrated in the interface, like in your favorite browser
-- **Auto confirm when paused**: when the "Continue Watching?" modal appears, automatically click "Yes"
-- **Hide video player**: no video in the interface when playing music
-- **Notifications**: display a notification when a song starts playing
+- **No Google Login**: remove Google login buttons and links from the interface
+- **Notifications**: display a notification when a song starts playing ([interactive notifications](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png) are available on windows)
+- **Playback speed**: listen fast, listen slow! [Adds a slider that controls song speed](https://user-images.githubusercontent.com/61631665/129976003-e55db5ba-bf42-448c-a059-26a009775e68.png)
+- **Precise volume**: customizable volume steps for more comfort, allows controlling the volume precisely using mousewheel
+- **Quality changer**: Allows changing the video quality with a [button](https://user-images.githubusercontent.com/78568641/138574366-70324a5e-2d64-4f6a-acdd-dc2a2b9cecc5.png) on the video overlay
+- **Shortcuts**: Allows setting global hotkeys for playback (play/pause/next/previous) + disable [media osd](https://user-images.githubusercontent.com/84923831/128601225-afa38c1f-dea8-4209-9f72-0f84c1dd8b54.png) by overriding media keys + enable Ctrl/CMD + F to search + enable linux mpris support for mediakeys + [custom hotkeys](https://github.com/Araxeus/youtube-music/blob/1e591d6a3df98449bcda6e63baab249b28026148/providers/song-controls.js#L13-L50) for [advanced users](https://github.com/th-ch/youtube-music/issues/106#issuecomment-952156902)
+- [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): skips non-music parts
+- **Taskbar media control**: control playback from your [Windows taskbar](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png)
 - **Touchbar**: custom TouchBar layout for macOS
+- **Video Toggle**: Adds a button to switch between Video/Song mode. can also optionally remove the whole video tab
+
+---
+
+- **Auto confirm when paused** (Always Enabled): disable the ["Continue Watching?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png) popup that pause music after a certain time
+
+> If using `Hide Menu` option - you can show the menu with the `alt` key (or `escape` if using the in-app-menu plugin)
 
 ## Dev
 

tests/environment.js

@@ -1,9 +1,7 @@
 const path = require("path");
 
-const getPort = require("get-port");
 const NodeEnvironment = require("jest-environment-node");
-const electronPath = require("electron");
-const { Application } = require("spectron");
+const { _electron: electron } = require("playwright");
 
 class TestEnvironment extends NodeEnvironment {
 	constructor(config) {
@@ -14,21 +12,12 @@ class TestEnvironment extends NodeEnvironment {
 		await super.setup();
 
 		const appPath = path.resolve(__dirname, "..");
-		const port = await getPort();
-
-		this.global.__APP__ = new Application({
-			path: electronPath,
-			args: [appPath],
-			port,
-		});
-		await this.global.__APP__.start();
-		const { client } = this.global.__APP__;
-		await client.waitUntilWindowLoaded();
+		this.global.__APP__ = await electron.launch({ args: [appPath] });
 	}
 
 	async teardown() {
-		if (this.global.__APP__.isRunning()) {
-			await this.global.__APP__.stop();
+		if (this.global.__APP__) {
+			await this.global.__APP__.close();
 		}
 		await super.teardown();
 	}

tests/index.test.js

@@ -1,23 +1,16 @@
+/**
+ * @jest-environment ./tests/environment
+ */
+
 describe("YouTube Music App", () => {
 	const app = global.__APP__;
 
 	test("With default settings, app is launched and visible", async () => {
-		expect(app.isRunning()).toBe(true);
-
-		const win = app.browserWindow;
-
-		const isMenuVisible = await win.isMenuBarVisible();
-		expect(isMenuVisible).toBe(true);
-
-		const isVisible = await win.isVisible();
-		expect(isVisible).toBe(true);
-
-		const { width, height } = await win.getBounds();
-		expect(width).toBeGreaterThan(0);
-		expect(height).toBeGreaterThan(0);
-
-		const { client } = app;
-		const title = await client.getTitle();
+		const window = await app.firstWindow();
+		const title = await window.title();
 		expect(title).toEqual("YouTube Music");
+
+		const url = window.url();
+		expect(url.startsWith("https://music.youtube.com")).toBe(true);
 	});
 });

tray.js

@@ -63,12 +63,7 @@ module.exports.setUpTray = (app, win) => {
 				app.quit();
 			},
 		},
-		{
-			label: "Quit",
-			click: () => {
-				app.quit();
-			},
-		},
+		 { role: "quit" } 
 	];
 
 	const trayMenu = Menu.buildFromTemplate(template);

youtube-music.css

@@ -28,3 +28,14 @@ ytmusic-search-box.ytmusic-nav-bar {
 ytmusic-mealbar-promo-renderer {
 	display: none !important;
 }
+
+/* Disable Image Selection */
+img {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+/* Hide cast button which doesn't work */
+ytmusic-cast-button {
+	display: none !important;
+}