Merge pull request #406 from th-ch/snyk-upgrade-3c48abddd3d31d59f08172a32b5dd378

[Snyk] Upgrade @cliqz/adblocker-electron from 1.22.4 to 1.22.5

.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

@@ -63,7 +63,19 @@ const defaultConfig = {
 				volumeDown: "Shift+PageDown"
 			},
 			savedVolume: undefined //plugin save volume between session here
-		}
+		},
+		sponsorblock: {
+			enabled: false,
+			apiURL: "https://sponsor.ajay.app",
+			categories: [
+				"sponsor",
+				"intro",
+				"outro",
+				"interaction",
+				"selfpromo",
+				"music_offtopic",
+			],
+		},
 	},
 };
 

index.js

@@ -2,6 +2,7 @@
 const path = require("path");
 
 const electron = require("electron");
+const enhanceWebRequest = require("electron-better-web-request").default;
 const is = require("electron-is");
 const unhandled = require("electron-unhandled");
 const { autoUpdater } = require("electron-updater");
@@ -143,17 +144,19 @@ 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;
 }
 
@@ -204,8 +207,18 @@ app.once("browser-window-created", (event, win) => {
 			// 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";
+			// Uses custom user agent to Google alert with a correct device type (https://github.com/th-ch/youtube-music/issues/327)
+			// User agents are from https://developers.whatismybrowser.com/useragents/explore/
+			const userAgents = {
+				mac: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:70.0) Gecko/20100101 Firefox/70.0",
+				windows: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:90.0) Gecko/20100101 Firefox/90.0",
+				linux: "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0",
+			}
+			
+			const userAgent = 
+				is.macOS() ? userAgents.mac :
+				is.windows() ? userAgents.windows :
+				userAgents.linux;
 
 			win.webContents.session.webRequest.onBeforeSendHeaders((details, cb) => {
 				details.requestHeaders["User-Agent"] = userAgent;
@@ -373,7 +386,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

@@ -7,12 +7,13 @@ const is = require("electron-is");
 const { getAllPlugins } = require("./plugins/utils");
 const config = require("./config");
 
-const pluginEnabledMenu = (win, plugin, label = "", hasSubmenu = false) => ({
+// 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 +21,226 @@ 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);
-				},
-			},
-			{
-				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",
-						type: "checkbox",
-						checked: config.get("options.hideMenu"),
-						click: (item) => {
-							config.set("options.hideMenu", 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);
 					},
-				]
-				: []),
-			...(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: "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: "Resume last song when app starts",
+					type: "checkbox",
+					checked: config.get("options.resumeOnStart"),
+					click: (item) => {
+						config.set("options.resumeOnStart", item.checked);
+					},
 				},
-			},
-			{ type: "separator" },
-			{
-				label: "Zoom In",
-				click: () => {
-					win.webContents.setZoomLevel(
-						win.webContents.getZoomLevel() + 1
-					);
+				...(is.windows() || is.linux()
+					? [
+						{
+							label: "Hide menu",
+							type: "checkbox",
+							checked: config.get("options.hideMenu"),
+							click: (item) => {
+								config.set("options.hideMenu", item.checked);
+							},
+						},
+					]
+					: []),
+				...(is.windows() || is.macOS()
+					? // Only works on Win/Mac
+					// https://www.electronjs.org/docs/api/app#appsetloginitemsettingssettings-macos-windows
+					[
+						{
+							label: "Start at login",
+							type: "checkbox",
+							checked: config.get("options.startAtLogin"),
+							click: (item) => {
+								config.set("options.startAtLogin", item.checked);
+							},
+						},
+					]
+					: []),
+				{
+					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);
+							},
+						},
+					],
 				},
-			},
-			{
-				label: "Zoom Out",
-				click: () => {
-					win.webContents.setZoomLevel(
-						win.webContents.getZoomLevel() - 1
-					);
+				{ 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" },
+						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: "Reset Zoom",
-				click: () => {
-					win.webContents.setZoomLevel(0);
+			],
+		},
+		{
+			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();
+						}
+					},
 				},
-			},
-		],
-	},
-	{
-		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: "Go forward",
-				click: () => {
-					if (win.webContents.canGoForward()) {
-						win.webContents.goForward();
-					}
+				{
+					label: "Restart App",
+					click: () => {
+						app.relaunch();
+						app.quit();
+					},
 				},
-			},
-			{
-				label: "Restart App",
-				click: () => {
-					app.relaunch();
-					app.quit();
-				},
-			},
-			{
-				label: "Quit App",
-				click: () => {
-					app.quit();
-				},
-			},
-		],
-	},
-];
+				{ role: "quit" },
+			],
+		},
+	];
+}
 
 module.exports.mainMenuTemplate = mainMenuTemplate;
 module.exports.setApplicationMenu = (win) => {

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version": "1.12.1",
+	"version": "1.13.0",
 	"description": "YouTube Music Desktop App - including custom plugins",
 	"license": "MIT",
 	"repository": "th-ch/youtube-music",
@@ -51,6 +51,7 @@
 		"build:linux": "yarn run clean && electron-builder --linux",
 		"build:mac": "yarn run clean && electron-builder --mac",
 		"build:win": "yarn run clean && electron-builder --win",
+		"lint": "xo",
 		"plugins": "yarn run plugin:adblocker && yarn run plugin:autoconfirm",
 		"plugin:adblocker": "rimraf plugins/adblocker/ad-blocker-engine.bin && node plugins/adblocker/blocker.js",
 		"plugin:autoconfirm": "yarn run generate:package YoutubeNonStop",
@@ -59,31 +60,33 @@
 		"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.5",
-		"@ffmpeg/core": "^0.9.0",
-		"@ffmpeg/ffmpeg": "^0.9.7",
+		"@cliqz/adblocker-electron": "^1.22.5",
+		"@ffmpeg/core": "^0.10.0",
+		"@ffmpeg/ffmpeg": "^0.10.0",
 		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.9.0",
 		"async-mutex": "^0.3.1",
 		"browser-id3-writer": "^4.4.0",
-		"chokidar": "^3.5.1",
-		"custom-electron-titlebar": "^3.2.6",
+		"chokidar": "^3.5.2",
+		"custom-electron-titlebar": "^3.2.7",
 		"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",
+		"electron-updater": "^4.4.6",
 		"filenamify": "^4.3.0",
 		"md5": "^2.3.0",
+		"mpris-service": "^2.1.2",
 		"node-fetch": "^2.6.1",
 		"node-notifier": "^9.0.1",
-		"ytdl-core": "^4.7.0",
-		"ytpl": "^2.2.0"
+		"ytdl-core": "^4.9.1",
+		"ytpl": "^2.2.3"
 	},
 	"devDependencies": {
 		"electron": "^12.0.8",
@@ -94,9 +97,11 @@
 		"jest": "^26.6.3",
 		"rimraf": "^3.0.2",
 		"spectron": "^14.0.0",
-		"xo": "^0.38.2"
+		"xo": "^0.40.3"
 	},
 	"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/disable-autoplay/front.js

@@ -1,25 +1,10 @@
-let videoElement = null;
+const { ontimeupdate } = require("../../providers/video-element");
 
-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 = () => {
+	ontimeupdate((videoElement) => {
+		if (videoElement.currentTime === 0 && videoElement.duration !== NaN) {
+			// auto-confirm-when-paused plugin can interfere here if not disabled!
+			videoElement.pause();
+		}
 	});
-}
-
-module.exports = observeVideoElement;
+};

plugins/discord/back.js

@@ -29,6 +29,9 @@ module.exports = (win, {activityTimoutEnabled, activityTimoutTime}) => {
 						songInfo.uploadDate,
 						songInfo.views.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " views"
 					].join(' || '),
+					buttons: [
+						{ label: "Listen Along", url: songInfo.url },
+					]
 				};
 
 				if (songInfo.isPaused) {

plugins/downloader/back.js

@@ -55,7 +55,9 @@ function handle(win) {
 			{ ...nowPlayingMetadata, ...currentMetadata };
 
 		try {
-			const coverBuffer = songMetadata.image ? songMetadata.image.toPNG() : null;
+			const coverBuffer = songMetadata.image && !songMetadata.image.isEmpty() ?
+				songMetadata.image.toPNG() : null;
+
 			const writer = new ID3Writer(songBuffer);
 
 			// Create the metadata tags

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/youtube-dl.js

@@ -15,7 +15,7 @@ const ytdl = require("ytdl-core");
 const { triggerAction, triggerActionSync } = require("../utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
 const { getFolder, urlToJPG } = require("./utils");
-const { cleanupArtistName } = require("../../providers/song-info");
+const { cleanupName } = require("../../providers/song-info");
 
 const { createFFmpeg } = FFmpeg;
 const ffmpeg = createFFmpeg({
@@ -40,7 +40,10 @@ const downloadVideoToMP3 = async (
 		const { videoDetails } = await ytdl.getInfo(videoUrl);
 		const thumbnails = videoDetails?.thumbnails;
 		metadata = {
-			artist: videoDetails?.media?.artist || cleanupArtistName(videoDetails?.author?.name) || "",
+			artist:
+				videoDetails?.media?.artist ||
+				cleanupName(videoDetails?.author?.name) ||
+				"",
 			title: videoDetails?.media?.song || videoDetails?.title || "",
 			imageSrcYTPL: thumbnails ? 
 				urlToJPG(thumbnails[thumbnails.length - 1].url, videoDetails?.videoId)

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

@@ -10,15 +10,7 @@ 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 ? remote.Menu.getApplicationMenu() : null);
 	});
 };

plugins/in-app-menu/style.css

@@ -4,11 +4,6 @@
 	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;

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,65 @@
+const { ipcRenderer } = require("electron");
+
+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;
+		}
+
+		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");
+			console.log("tabContainer", tabContainer);
+			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,7 @@
+/* Disable links in Genius lyrics */
+.genius-lyrics a {
+	color: var(--ytmusic-text-primary);
+	display: inline-block;
+	pointer-events: none;
+	text-decoration: none;
+}

plugins/playback-speed/templates/slider.html

@@ -1,79 +1,87 @@
 <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"
+			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="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="50"
+					></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/shortcuts/back.js

@@ -1,7 +1,9 @@
 const { globalShortcut } = require("electron");
+const is = require("electron-is");
 const electronLocalshortcut = require("electron-localshortcut");
 
 const getSongControls = require("../../providers/song-controls");
+const { setupMPRIS } = require("./mpris");
 
 function _registerGlobalShortcut(webContents, shortcut, action) {
 	globalShortcut.register(shortcut, () => {
@@ -25,6 +27,22 @@ function registerShortcuts(win, options) {
 	_registerLocalShortcut(win, "CommandOrControl+F", search);
 	_registerLocalShortcut(win, "CommandOrControl+L", search);
 
+	if (is.linux()) {
+		try {
+			const player = setupMPRIS();
+
+			player.on("raise", () => {
+				win.setSkipTaskbar(false);
+				win.show();
+			});
+			player.on("playpause", playPause);
+			player.on("next", next);
+			player.on("previous", previous);
+		} catch (e) {
+			console.warn("Error in MPRIS", e);
+		}
+	}
+
 	const { global, local } = options;
 	(global || []).forEach(({ shortcut, action }) => {
 		console.debug("Registering global shortcut", shortcut, ":", action);

plugins/shortcuts/mpris.js

@@ -0,0 +1,19 @@
+const mpris = require("mpris-service");
+
+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;
+}
+
+module.exports = {
+	setupMPRIS,
+};

plugins/sponsorblock/back.js

@@ -0,0 +1,51 @@
+const fetch = require("node-fetch");
+
+const defaultConfig = require("../../config/defaults");
+const registerCallback = require("../../providers/song-info");
+const { sortSegments } = require("./segments");
+
+let videoID;
+
+module.exports = (win, options) => {
+	const { apiURL, categories } = {
+		...defaultConfig.plugins.sponsorblock,
+		...options,
+	};
+
+	registerCallback(async (info) => {
+		const newURL = info.url || win.webContents.getURL();
+		const newVideoID = new URL(newURL).searchParams.get("v");
+
+		if (videoID !== newVideoID) {
+			videoID = newVideoID;
+			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 {
+		return [];
+	}
+};

plugins/sponsorblock/front.js

@@ -0,0 +1,27 @@
+const { ipcRenderer } = require("electron");
+
+const is = require("electron-is");
+
+const { ontimeupdate } = require("../../providers/video-element");
+
+let currentSegments = [];
+
+module.exports = () => {
+	ipcRenderer.on("sponsorblock-skip", (_, segments) => {
+		currentSegments = segments;
+	});
+
+	ontimeupdate((videoElement) => {
+		currentSegments.forEach((segment) => {
+			if (
+				videoElement.currentTime >= segment[0] &&
+				videoElement.currentTime <= segment[1]
+			) {
+				videoElement.currentTime = segment[1];
+				if (is.dev()) {
+					console.log("SponsorBlock: skipping segment", segment);
+				}
+			}
+		});
+	});
+};

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/tuna-obs/back.js

@@ -0,0 +1,33 @@
+const { ipcRenderer } = require("electron");
+const fetch = require('node-fetch');
+
+const registerCallback = require("../../providers/song-info");
+
+const post = (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})});
+}
+
+module.exports = async (win) => {
+	registerCallback((songInfo) => {
+
+		// Register the callback
+		if (songInfo.title.length === 0 && songInfo.artist.length === 0) {
+			return;
+		}
+
+		const duration =  Number(songInfo.songDuration)*1000
+		const progress = Number(songInfo.elapsedSeconds)*1000
+		const cover_url = songInfo.imageSrc
+		const album_url = songInfo.imageSrc
+		const title = songInfo.title
+		const artists = [songInfo.artist]
+		const status = !songInfo.isPaused ? 'Playing': 'Paused'
+		post({ cover_url, title, artists, status, progress, duration, album_url});
+	})
+}

providers/song-info.js

@@ -9,18 +9,21 @@ 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(
+	return 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);
+	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;
+	}
 };
 
 // To find the paused status, we check if the title contains `-`
@@ -30,7 +33,7 @@ const getPausedStatus = async (win) => {
 };
 
 const getArtist = async (win) => {
-	return await win.webContents.executeJavaScript(`
+	return win.webContents.executeJavaScript(`
 		document.querySelector(".subtitle.ytmusic-player-bar .yt-formatted-string")
 			?.textContent
 	`);
@@ -52,8 +55,9 @@ const songInfo = {
 
 const handleData = async (responseText, win) => {
 	let data = JSON.parse(responseText);
-	songInfo.title = data?.videoDetails?.title;
-	songInfo.artist = await getArtist(win) || cleanupArtistName(data?.videoDetails?.author);
+	songInfo.title = cleanupName(data?.videoDetails?.title);
+	songInfo.artist =
+		(await getArtist(win)) || cleanupName(data?.videoDetails?.author);
 	songInfo.views = data?.videoDetails?.viewCount;
 	songInfo.imageSrc = data?.videoDetails?.thumbnail?.thumbnails?.pop()?.url;
 	songInfo.songDuration = data?.videoDetails?.lengthSeconds;
@@ -95,8 +99,15 @@ const registerProvider = (win) => {
 	});
 };
 
-const suffixesToRemove = [' - Topic', 'VEVO'];
-function cleanupArtistName(artist) {
+const suffixesToRemove = [
+	" - Topic",
+	"VEVO",
+	" (Performance Video)",
+	" (Official Music Video)",
+	" (Official Video)",
+	" (Clip officiel)",
+];
+function cleanupName(artist) {
 	if (!artist) {
 		return artist;
 	}
@@ -111,5 +122,4 @@ function cleanupArtistName(artist) {
 module.exports = registerCallback;
 module.exports.setupSongInfo = registerProvider;
 module.exports.getImage = getImage;
-module.exports.cleanupArtistName = cleanupArtistName;
-
+module.exports.cleanupName = cleanupName;

providers/video-element.js

@@ -0,0 +1,22 @@
+let videoElement = null;
+
+module.exports.ontimeupdate = (cb) => {
+	const observer = new MutationObserver((mutations, observer) => {
+		if (!videoElement) {
+			videoElement = document.querySelector("video");
+			if (videoElement) {
+				observer.disconnect();
+				videoElement.ontimeupdate = () => cb(videoElement);
+			}
+		}
+	});
+
+	if (!videoElement) {
+		observer.observe(document, {
+			childList: true,
+			subtree: true,
+		});
+	} else {
+		videoElement.ontimeupdate = () => cb(videoElement);
+	}
+};

readme.md

@@ -34,15 +34,22 @@ 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
-- **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"
+- **Auto confirm when paused**: when the ["Continue Watching?"](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png) modal appears, automatically click "Yes"
+- **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)
 - **Hide video player**: no video in the interface when playing music
-- **Notifications**: display a notification when a song starts playing
+- **In-app menu**: [gives bars a fancy, dark look](https://user-images.githubusercontent.com/78568641/112215894-923dbf00-8c29-11eb-95c3-3ce15db27eca.png)
+- [**Last.fm**](https://www.last.fm/): scrobbles support
+- **Navigation**: next/back navigation arrows directly integrated in the interface, like in your favorite browser
+- **No Google Login**: remove Google login buttons and links from the interface
+- **Notifications**: display a [notification](https://user-images.githubusercontent.com/78568641/114102651-63ce0e00-98d0-11eb-9dfe-c5a02bb54f9c.png) when a song starts playing
+- **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
+- **Shortcuts**: use your usual shortcuts (media keys, Ctrl/CMD + F…) to control YouTube Music, you may setup custom global hotkeys for play/pause/next/previous song
+- [**SponsorBlock**](https://github.com/ajayyy/SponsorBlock): skips non-music parts
+- **Taskbar media control**: control app from your [Windows taskbar](https://user-images.githubusercontent.com/78568641/111916130-24a35e80-8a82-11eb-80c8-5021c1aa27f4.png)
 - **Touchbar**: custom TouchBar layout for macOS
 
 ## Dev

tests/index.test.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment ./tests/environment
+ */
+
 describe("YouTube Music App", () => {
 	const app = global.__APP__;
 

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);