Merge pull request #116 from th-ch/snyk-upgrade-041c3272121410c1cb380e1fbc7f9dce

[Snyk] Upgrade electron-updater from 4.3.5 to 4.3.6

.github/workflows/build.yml

@@ -0,0 +1,62 @@
+name: Build YouTube Music
+
+on:
+  - push
+
+jobs:
+  build:
+    name: Build YouTube Music
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: true
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup NodeJS
+        uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Test
+        uses: GabrielBB/xvfb-action@v1
+        with:
+          run: yarn test
+
+      - name: Build on Mac
+        if: startsWith(matrix.os, 'macOS')
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          yarn run release:mac
+
+      - name: Build on Linux
+        if: startsWith(matrix.os, 'ubuntu')
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          yarn run release:linux
+
+      - name: Build on Windows
+        if: startsWith(matrix.os, 'windows')
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        run: |
+          yarn run release:win

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 /dist
-/assets/generated
+/assets/generated
+electron-builder.yml

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+scripts-prepend-node-path=true

config/defaults.js

@@ -0,0 +1,38 @@
+const defaultConfig = {
+	"window-size": {
+		width: 1100,
+		height: 550,
+	},
+	url: "https://music.youtube.com",
+	options: {
+		tray: false,
+		appVisible: true,
+		autoUpdates: true,
+		hideMenu: false,
+		startAtLogin: false,
+		disableHardwareAcceleration: false,
+		restartOnConfigChanges: false,
+	},
+	plugins: {
+		// Enabled plugins
+		navigation: {
+			enabled: true,
+		},
+		shortcuts: {
+			enabled: true,
+		},
+		adblocker: {
+			enabled: true,
+			cache: true,
+			additionalBlockLists: [], // Additional list of filters, e.g "https://raw.githubusercontent.com/uBlockOrigin/uAssets/master/filters/filters.txt"
+		},
+		// Disabled plugins
+		downloader: {
+			enabled: false,
+			ffmpegArgs: [], // e.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
+			downloadFolder: undefined, // Custom download folder (absolute path)
+		},
+	},
+};
+
+module.exports = defaultConfig;

config/index.js

@@ -0,0 +1,21 @@
+const plugins = require("./plugins");
+const store = require("./store");
+
+const set = (key, value) => {
+	store.set(key, value);
+};
+
+const get = (key) => {
+	return store.get(key);
+};
+
+module.exports = {
+	get,
+	set,
+	edit: () => store.openInEditor(),
+	watch: (cb) => {
+		store.onDidChange("options", cb);
+		store.onDidChange("plugins", cb);
+	},
+	plugins,
+};

config/plugins.js

@@ -0,0 +1,41 @@
+const store = require("./store");
+
+function getEnabled() {
+	const plugins = store.get("plugins");
+	const enabledPlugins = Object.entries(plugins).filter(([plugin, options]) =>
+		isEnabled(plugin)
+	);
+	return enabledPlugins;
+}
+
+function isEnabled(plugin) {
+	const pluginConfig = store.get("plugins")[plugin];
+	return pluginConfig !== undefined && pluginConfig.enabled;
+}
+
+function setOptions(plugin, options) {
+	const plugins = store.get("plugins");
+	store.set("plugins", {
+		...plugins,
+		[plugin]: {
+			...plugins[plugin],
+			...options,
+		},
+	});
+}
+
+function enable(plugin) {
+	setOptions(plugin, { enabled: true });
+}
+
+function disable(plugin) {
+	setOptions(plugin, { enabled: false });
+}
+
+module.exports = {
+	isEnabled,
+	getEnabled,
+	enable,
+	disable,
+	setOptions,
+};

config/store.js

@@ -0,0 +1,40 @@
+const Store = require("electron-store");
+
+const defaults = require("./defaults");
+
+const migrations = {
+	">=1.7.0": (store) => {
+		const enabledPlugins = store.get("plugins");
+		if (!Array.isArray(enabledPlugins)) {
+			console.warn("Plugins are not in array format, cannot migrate");
+			return;
+		}
+
+		// Include custom options
+		const plugins = {
+			adblocker: {
+				enabled: true,
+				cache: true,
+				additionalBlockLists: [],
+			},
+			downloader: {
+				enabled: false,
+				ffmpegArgs: [], // e.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
+				downloadFolder: undefined, // Custom download folder (absolute path)
+			},
+		};
+		enabledPlugins.forEach((enabledPlugin) => {
+			plugins[enabledPlugin] = {
+				...plugins[enabledPlugin],
+				enabled: true,
+			};
+		});
+		store.set("plugins", plugins);
+	},
+};
+
+module.exports = new Store({
+	defaults,
+	clearInvalidConfig: false,
+	migrations,
+});

error.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>Cannot load YouTube Music</title>
+		<style>
+			body {
+				background: #000;
+			}
+
+			.container {
+				margin: 0;
+				font-family: Roboto, Arial, sans-serif;
+				font-size: 20px;
+				font-weight: 500;
+				color: rgba(255, 255, 255, 0.5);
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				margin-right: -50%;
+				transform: translate(-50%, -50%);
+				text-align: center;
+			}
+
+			.button {
+				background: #065fd4;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				color: white;
+				font: inherit;
+				text-transform: uppercase;
+				text-decoration: none;
+				border-radius: 2px;
+				font-size: 16px;
+				font-weight: normal;
+				text-align: center;
+				padding: 8px 22px;
+				display: inline-block;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div class="container">
+			<p>Cannot load YouTube Music… Internet disconnected?</p>
+			<a href="#" class="button" onclick="reload()">Retry</a>
+		</div>
+	</body>
+</html>

index.js

@@ -2,19 +2,35 @@
 const path = require("path");
 
 const electron = require("electron");
-const isDev    = require("electron-is-dev");
+const is = require("electron-is");
+const { autoUpdater } = require("electron-updater");
 
-const { setApplicationMenu }       = require("./menu");
-const { getEnabledPlugins, store } = require("./store");
-const { fileExists, injectCSS }    = require("./plugins/utils");
+const config = require("./config");
+const { setApplicationMenu } = require("./menu");
+const { fileExists, injectCSS } = require("./plugins/utils");
+const { isTesting } = require("./utils/testing");
+const { setUpTray } = require("./tray");
 
 const app = electron.app;
+app.commandLine.appendSwitch(
+	"js-flags",
+	// WebAssembly flags
+	"--experimental-wasm-threads --experimental-wasm-bulk-memory"
+);
+app.allowRendererProcessReuse = true; // https://github.com/electron/electron/issues/18397
+if (config.get("options.disableHardwareAcceleration")) {
+	if (is.dev()) {
+		console.log("Disabling hardware acceleration");
+	}
+	app.disableHardwareAcceleration();
+}
 
 // Adds debug features like hotkeys for triggering dev tools and reload
 require("electron-debug")();
 
 // Prevent window being garbage collected
 let mainWindow;
+autoUpdater.autoDownload = false;
 
 let icon = "assets/youtube-music.png";
 if (process.platform == "win32") {
@@ -29,75 +45,128 @@ function onClosed() {
 	mainWindow = null;
 }
 
-function createMainWindow() {
-	const windowSize      = store.get("window-size");
-	const windowMaximized = store.get("window-maximized");
-
-	const win = new electron.BrowserWindow({
-		icon           : icon,
-		width          : windowSize.width,
-		height         : windowSize.height,
-		backgroundColor: "#000",
-		show           : false,
-		webPreferences : {
-			nodeIntegration: false,
-			preload        : path.join(__dirname, "preload.js")
-		},
-		frame        : false,
-		titleBarStyle: "hiddenInset"
-	});
-	if (windowMaximized) {
-		win.maximize();
-	}
-
-	win.webContents.loadURL(store.get("url"));
-	win.on("closed", onClosed);
-
+function loadPlugins(win) {
 	injectCSS(win.webContents, path.join(__dirname, "youtube-music.css"));
 	win.webContents.on("did-finish-load", () => {
-		if (isDev) {
+		if (is.dev()) {
 			console.log("did finish load");
 			win.webContents.openDevTools();
 		}
 	});
 
-	getEnabledPlugins().forEach(plugin => {
+	config.plugins.getEnabled().forEach(([plugin, options]) => {
 		console.log("Loaded plugin - " + plugin);
 		const pluginPath = path.join(__dirname, "plugins", plugin, "back.js");
 		fileExists(pluginPath, () => {
 			const handle = require(pluginPath);
-			handle(win);
+			handle(win, options);
 		});
 	});
+}
 
-	win.webContents.on("did-navigate-in-page", () => {
-		const url = win.webContents.getURL();
-		if (url.startsWith("https://music.youtube.com")) {
-			store.set("url", url);
-		}
+function createMainWindow() {
+	const windowSize = config.get("window-size");
+	const windowMaximized = config.get("window-maximized");
+
+	const win = new electron.BrowserWindow({
+		icon: icon,
+		width: windowSize.width,
+		height: windowSize.height,
+		backgroundColor: "#000",
+		show: false,
+		webPreferences: {
+			nodeIntegration: isTesting(), // Only necessary when testing with Spectron
+			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
+		},
+		frame: !is.macOS(),
+		titleBarStyle: is.macOS() ? "hiddenInset" : "default",
+		autoHideMenuBar: config.get("options.hideMenu"),
 	});
+	if (windowMaximized) {
+		win.maximize();
+	}
+
+	win.webContents.loadURL(config.get("url"));
+	win.on("closed", onClosed);
 
 	win.on("move", () => {
 		let position = win.getPosition();
-		store.set("window-position", { x: position[0], y: position[1] });
+		config.set("window-position", { x: position[0], y: position[1] });
 	});
 
 	win.on("resize", () => {
 		const windowSize = win.getSize();
 
-		store.set("window-maximized", win.isMaximized());
+		config.set("window-maximized", win.isMaximized());
 		if (!win.isMaximized()) {
-			store.set("window-size", { width: windowSize[0], height: windowSize[1] });
+			config.set("window-size", {
+				width: windowSize[0],
+				height: windowSize[1],
+			});
 		}
 	});
 
 	win.once("ready-to-show", () => {
-		win.show();
+		if (config.get("options.appVisible")) {
+			win.show();
+		}
 	});
 
 	return win;
 }
 
+app.on("browser-window-created", (event, win) => {
+	loadPlugins(win);
+
+	win.webContents.on("did-fail-load", () => {
+		if (is.dev()) {
+			console.log("did fail load");
+		}
+		win.webContents.loadFile(path.join(__dirname, "error.html"));
+	});
+
+	win.webContents.on("will-prevent-unload", (event) => {
+		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) => {
+			// hook on new opened window
+
+			// at now new window in mainWindow renderer process.
+			// Also, this will automatically get an option `nodeIntegration=false`(not override to true, like in iframe's) - like in regular browsers
+			options.webPreferences.affinity = "main-window";
+		}
+	);
+});
+
 app.on("window-all-closed", () => {
 	if (process.platform !== "darwin") {
 		app.quit();
@@ -118,16 +187,65 @@ app.on("activate", () => {
 });
 
 app.on("ready", () => {
-	setApplicationMenu();
 	mainWindow = createMainWindow();
+	setApplicationMenu(mainWindow);
+	if (config.get("options.restartOnConfigChanges")) {
+		config.watch(() => {
+			app.relaunch();
+			app.exit();
+		});
+	}
+	setUpTray(app, mainWindow);
+
+	// Autostart at login
+	app.setLoginItemSettings({
+		openAtLogin: config.get("options.startAtLogin"),
+	});
+
+	if (!is.dev() && config.get("options.autoUpdates")) {
+		autoUpdater.checkForUpdatesAndNotify();
+		autoUpdater.on("update-available", () => {
+			const downloadLink =
+				"https://github.com/th-ch/youtube-music/releases/latest";
+			const dialogOpts = {
+				type: "info",
+				buttons: ["OK", "Download", "Disable updates"],
+				title: "Application Update",
+				message: "A new version is available",
+				detail: `A new version is available and can be downloaded at ${downloadLink}`,
+			};
+			electron.dialog.showMessageBox(dialogOpts).then((dialogOutput) => {
+				switch (dialogOutput.response) {
+					// Download
+					case 1:
+						electron.shell.openExternal(downloadLink);
+						break;
+					// Disable updates
+					case 2:
+						config.set("options.autoUpdates", false);
+						break;
+					default:
+						break;
+				}
+			});
+		});
+	}
 
 	// Optimized for Mac OS X
-	if (process.platform === "darwin") {
-		var forceQuit = false;
-		app.on("before-quit", () => {
-			forceQuit = true;
-		});
-		mainWindow.on("close", event => {
+	if (is.macOS()) {
+		if (!config.get("options.appVisible")) {
+			app.dock.hide();
+		}
+	}
+
+	var forceQuit = false;
+	app.on("before-quit", () => {
+		forceQuit = true;
+	});
+
+	if (is.macOS() || config.get("options.tray")) {
+		mainWindow.on("close", (event) => {
+			// Hide the window instead of quitting (quit is available in tray options)
 			if (!forceQuit) {
 				event.preventDefault();
 				mainWindow.hide();

jest.config.js

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

menu.js

@@ -1,33 +1,154 @@
 const { app, Menu } = require("electron");
+const is = require("electron-is");
 
-const { getAllPlugins }                                = require("./plugins/utils");
-const { isPluginEnabled, enablePlugin, disablePlugin } = require("./store");
+const { getAllPlugins } = require("./plugins/utils");
+const config = require("./config");
 
-module.exports.setApplicationMenu = () => {
-	const menuTemplate = [
-		{
-			label  : "Plugins",
-			submenu: getAllPlugins().map(plugin => {
+const mainMenuTemplate = (win) => [
+	{
+		label: "Plugins",
+		submenu: [
+			...getAllPlugins().map((plugin) => {
 				return {
-					label  : plugin,
-					type   : "checkbox",
-					checked: isPluginEnabled(plugin),
-					click  : item => {
+					label: plugin,
+					type: "checkbox",
+					checked: config.plugins.isEnabled(plugin),
+					click: (item) => {
 						if (item.checked) {
-							enablePlugin(plugin);
+							config.plugins.enable(plugin);
 						} else {
-							disablePlugin(plugin);
+							config.plugins.disable(plugin);
 						}
-					}
+					},
 				};
-			})
-		}
-	];
+			}),
+			{ type: "separator" },
+			{
+				label: "Advanced options",
+				click: () => {
+					config.edit();
+				},
+			},
+		],
+	},
+	{
+		label: "Options",
+		submenu: [
+			{
+				label: "Auto-update",
+				type: "checkbox",
+				checked: config.get("options.autoUpdates"),
+				click: (item) => {
+					config.set("options.autoUpdates", item.checked);
+				},
+			},
+			{
+				label: "Disable hardware acceleration",
+				type: "checkbox",
+				checked: config.get("options.disableHardwareAcceleration"),
+				click: (item) => {
+					config.set("options.disableHardwareAcceleration", item.checked);
+				},
+			},
+			{
+				label: "Restart on config changes",
+				type: "checkbox",
+				checked: config.get("options.restartOnConfigChanges"),
+				click: (item) => {
+					config.set("options.restartOnConfigChanges", item.checked);
+				},
+			},
+			...(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: "Toggle DevTools",
+				// Cannot use "toggleDevTools" role in MacOS
+				click: () => {
+					const { webContents } = win;
+					if (webContents.isDevToolsOpened()) {
+						webContents.closeDevTools();
+					} else {
+						const devToolsOptions = {};
+						webContents.openDevTools(devToolsOptions);
+					}
+				},
+			},
+			{
+				label: "Advanced options",
+				click: () => {
+					config.edit();
+				},
+			},
+		],
+	},
+];
 
+module.exports.mainMenuTemplate = mainMenuTemplate;
+module.exports.setApplicationMenu = (win) => {
+	const menuTemplate = [...mainMenuTemplate(win)];
 	if (process.platform === "darwin") {
-		const name = app.getName();
+		const name = app.name;
 		menuTemplate.unshift({
-			label  : name,
+			label: name,
 			submenu: [
 				{ role: "about" },
 				{ type: "separator" },
@@ -36,9 +157,9 @@ module.exports.setApplicationMenu = () => {
 				{ role: "unhide" },
 				{ type: "separator" },
 				{
-					label      : "Select All",
+					label: "Select All",
 					accelerator: "CmdOrCtrl+A",
-					selector   : "selectAll:"
+					selector: "selectAll:",
 				},
 				{ label: "Cut", accelerator: "CmdOrCtrl+X", selector: "cut:" },
 				{ label: "Copy", accelerator: "CmdOrCtrl+C", selector: "copy:" },
@@ -46,8 +167,8 @@ module.exports.setApplicationMenu = () => {
 				{ type: "separator" },
 				{ role: "minimize" },
 				{ role: "close" },
-				{ role: "quit" }
-			]
+				{ role: "quit" },
+			],
 		});
 	}
 

package.json

@@ -1,38 +1,81 @@
 {
-	"name"       : "youtube-music",
+	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version"    : "1.0.0",
-	"description": "",
-	"license"    : "MIT",
-	"repository" : "th-ch/youtube-music",
-	"author"     : {
-		"name" : "th-ch",
+	"version": "1.8.0",
+	"description": "YouTube Music Desktop App - including custom plugins",
+	"license": "MIT",
+	"repository": "th-ch/youtube-music",
+	"author": {
+		"name": "th-ch",
 		"email": "th-ch@users.noreply.github.com",
-		"url"  : "https://github.com/th-ch/youtube-music"
+		"url": "https://github.com/th-ch/youtube-music"
+	},
+	"build": {
+		"appId": "com.github.th-ch.youtube-music",
+		"productName": "YouTube Music",
+		"mac": {
+			"identity": null,
+			"icon": "assets/generated/icons/mac/icon.icns"
+		},
+		"win": {
+			"icon": "assets/generated/icons/win/icon.ico"
+		},
+		"linux": {
+			"icon": "assets/generated/icons/png",
+			"category": "AudioVideo",
+			"target": ["AppImage", "snap", "freebsd", "deb", "rpm"]
+		}
 	},
 	"scripts": {
-		"test"       : "xo",
-		"start"      : "electron .",
-		"icon"       : "electron-icon-maker --input=assets/youtube-music.png --output=assets/generated",
-		"postinstall": "npm run icon && npm rebuild && node plugins/adblocker/generator.js && electron-rebuild",
-		"build"      : "electron-packager . --out=dist --asar --overwrite --all --icon=assets/generated/icons/mac/icon.icns --prune=true",
-		"build:macos": "electron-packager . --platform=darwin --arch=x64 --out=dist --asar --overwrite --icon=assets/generated/icons/mac/icon.icns --prune=true"
+		"test": "jest",
+		"start": "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",
+		"clean": "rimraf dist",
+		"build": "yarn run clean && electron-builder --win --mac --linux",
+		"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",
+		"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",
+		"npm": "Please use yarn and not npm"
 	},
 	"dependencies": {
-		"ad-block"              : "^4.1.3",
-		"electron-debug"        : "^2.0.0",
-		"electron-is-dev"       : "^1.0.1",
-		"electron-localshortcut": "^3.1.0",
-		"electron-store"        : "^2.0.0"
+		"@cliqz/adblocker-electron": "^1.19.0",
+		"@ffmpeg/core": "^0.8.5",
+		"@ffmpeg/ffmpeg": "^0.9.6",
+		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.8.0",
+		"downloads-folder": "^3.0.1",
+		"electron-debug": "^3.1.0",
+		"electron-is": "^3.0.0",
+		"electron-localshortcut": "^3.2.1",
+		"electron-store": "^6.0.1",
+		"electron-updater": "^4.3.6",
+		"filenamify": "^4.2.0",
+		"node-fetch": "^2.6.1",
+		"ytdl-core": "^4.1.2"
 	},
 	"devDependencies": {
-		"devtron"                    : "^1.4.0",
-		"electron"                   : "^4.0.8",
-		"electron-devtools-installer": "^2.2.4",
-		"electron-icon-maker"        : "0.0.4",
-		"electron-packager"          : "^13.1.1",
-		"electron-rebuild"           : "^1.8.4",
-		"xo"                         : "^0.24.0"
+		"electron": "^10.1.3",
+		"electron-builder": "^22.8.1",
+		"electron-devtools-installer": "^3.1.1",
+		"electron-icon-maker": "0.0.5",
+		"get-port": "^5.1.1",
+		"jest": "^26.4.2",
+		"rimraf": "^3.0.2",
+		"spectron": "^12.0.0",
+		"xo": "^0.33.1"
+	},
+	"resolutions": {
+		"yargs-parser": "18.1.3"
 	},
 	"xo": {
 		"envs": [

plugins/adblocker/.gitignore

@@ -1 +1 @@
-detector.buffer
+/ad-blocker-engine.bin

plugins/adblocker/back.js

@@ -1,3 +1,8 @@
-const { blockWindowAds } = require("./blocker");
-
-module.exports = win => blockWindowAds(win.webContents);
+const { loadAdBlockerEngine } = require("./blocker");
+module.exports = (win, options) =>
+	loadAdBlockerEngine(
+		win.webContents.session,
+		options.cache,
+		options.additionalBlockLists,
+		options.disableDefaultLists
+	);

plugins/adblocker/blocker.js

@@ -1,12 +1,48 @@
-const { initialize, containsAds } = require("./contains-ads");
+const { promises } = require("fs"); // used for caching
+const path = require("path");
 
-module.exports.blockWindowAds = webContents => {
-	initialize();
-	webContents.session.webRequest.onBeforeRequest(
-		["*://*./*"],
-		(details, cb) => {
-			const shouldBeBlocked = containsAds(details.url);
-			cb({ cancel: shouldBeBlocked });
-		}
-	);
+const { ElectronBlocker } = require("@cliqz/adblocker-electron");
+const fetch = require("node-fetch");
+
+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",
+];
+
+const loadAdBlockerEngine = (
+	session = undefined,
+	cache = true,
+	additionalBlockLists = [],
+	disableDefaultLists = false
+) => {
+	// Only use cache if no additional blocklists are passed
+	const cachingOptions =
+		cache && additionalBlockLists.length === 0
+			? {
+					path: path.resolve(__dirname, "ad-blocker-engine.bin"),
+					read: promises.readFile,
+					write: promises.writeFile,
+			  }
+			: undefined;
+	const lists = [
+		...(disableDefaultLists ? [] : SOURCES),
+		...additionalBlockLists,
+	];
+
+	ElectronBlocker.fromLists(fetch, lists, {}, cachingOptions)
+		.then((blocker) => {
+			if (session) {
+				blocker.enableBlockingInSession(session);
+			} else {
+				console.log("Successfully generated adBlocker engine.");
+			}
+		})
+		.catch((err) => console.log("Error loading adBlocker engine", err));
 };
+
+module.exports = { loadAdBlockerEngine };
+if (require.main === module) {
+	loadAdBlockerEngine(); // Generate the engine without enabling it
+}

plugins/adblocker/contains-ads.js

@@ -1,24 +0,0 @@
-const fs = require("fs");
-const path    = require("path");
-const Blocker = require("ad-block");
-
-const client = new Blocker.AdBlockClient();
-const file   = path.resolve(__dirname, "detector.buffer");
-
-module.exports.client     = client;
-module.exports.initialize = () =>
-	new Promise((resolve, reject) => {
-		fs.readFile(file, (err, buffer) => {
-			if (err) {
-				return reject(err);
-			}
-			client.deserialize(buffer);
-			return resolve();
-		});
-	});
-
-const none = Blocker.FilterOptions.noFilterOption;
-const isAd = (req, base) => client.matches(req, none, base);
-
-module.exports.containsAds = (req, base) => isAd(req, base);
-module.exports.isAd        = isAd;

plugins/adblocker/front.js

@@ -0,0 +1,4 @@
+module.exports = () => {
+	// Preload adblocker to inject scripts/styles
+	require("@cliqz/adblocker-electron-preload/dist/preload.cjs");
+};

plugins/adblocker/generator.js

@@ -1,67 +0,0 @@
-// This file generates the detector buffer
-const fs      = require("fs");
-const path    = require("path");
-const Blocker = require("ad-block");
-const https   = require("https");
-
-const SOURCES = [
-	"https://raw.githubusercontent.com/kbinani/adblock-youtube-ads/master/signed.txt"
-];
-
-function parseAdblockList(client, adblockList) {
-	const urls      = adblockList.split("\n");
-	const totalSize = urls.length;
-	console.log(
-		"Parsing " + totalSize + " urls (this can take a couple minutes)."
-	);
-	urls.map(line => client.parse(line));
-	console.log("Created buffer.");
-}
-
-function writeBuffer(client) {
-	const output = path.resolve(__dirname, "detector.buffer");
-	fs.writeFile(output, client.serialize(64), err => {
-		if (err) {
-			console.error(err);
-			return;
-		}
-		console.log("Wrote buffer to detector.buffer!");
-	});
-}
-
-function generateDetectorBuffer() {
-	const client           = new Blocker.AdBlockClient();
-	let   nbSourcesFetched = 0;
-
-	// fetch updated versions
-	SOURCES.forEach(source => {
-		console.log("Downloading " + source);
-		https
-			.get(source, resp => {
-				let data = "";
-
-				// A chunk of data has been recieved.
-				resp.on("data", chunk => {
-					data += chunk;
-				});
-
-				// The whole response has been received. Print out the result.
-				resp.on("end", () => {
-					parseAdblockList(client, data);
-					nbSourcesFetched++;
-
-					if (nbSourcesFetched === SOURCES.length) {
-						writeBuffer(client);
-					}
-				});
-			})
-			.on("error", err => {
-				console.log("Error: " + err.message);
-			});
-	});
-}
-
-module.exports = generateDetectorBuffer;
-if (require.main === module) {
-	generateDetectorBuffer();
-}

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

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

plugins/downloader/actions.js

@@ -0,0 +1,9 @@
+const CHANNEL = "downloader";
+const ACTIONS = {
+	ERROR: "error",
+};
+
+module.exports = {
+	CHANNEL: CHANNEL,
+	ACTIONS: ACTIONS,
+};

plugins/downloader/back.js

@@ -0,0 +1,33 @@
+const { join } = require("path");
+
+const { dialog } = require("electron");
+
+const { injectCSS, listenAction } = require("../utils");
+const { ACTIONS, CHANNEL } = require("./actions.js");
+
+const sendError = (win, err) => {
+	const dialogOpts = {
+		type: "info",
+		buttons: ["OK"],
+		title: "Error in download!",
+		message: "Argh! Apologies, download failed…",
+		detail: err.toString(),
+	};
+	dialog.showMessageBox(dialogOpts);
+};
+
+function handle(win) {
+	injectCSS(win.webContents, join(__dirname, "style.css"));
+
+	listenAction(CHANNEL, (event, action, error) => {
+		switch (action) {
+			case ACTIONS.ERROR:
+				sendError(win, error);
+				break;
+			default:
+				console.log("Unknown action: " + action);
+		}
+	});
+}
+
+module.exports = handle;

plugins/downloader/front.js

@@ -0,0 +1,60 @@
+const { ElementFromFile, templatePath, triggerAction } = require("../utils");
+const { ACTIONS, CHANNEL } = require("./actions.js");
+const { downloadVideoToMP3 } = require("./youtube-dl");
+
+let menu = null;
+let progress = null;
+const downloadButton = ElementFromFile(
+	templatePath(__dirname, "download.html")
+);
+let pluginOptions = {};
+
+const observer = new MutationObserver((mutations, observer) => {
+	if (!menu) {
+		menu = document.querySelector("ytmusic-menu-popup-renderer paper-listbox");
+	}
+
+	if (menu && !menu.contains(downloadButton)) {
+		menu.prepend(downloadButton);
+		progress = document.querySelector("#ytmcustom-download");
+	}
+});
+
+const reinit = () => {
+	if (!progress) {
+		console.warn("Cannot update progress");
+	} else {
+		progress.innerHTML = "Download";
+	}
+};
+
+global.download = () => {
+	const videoUrl = window.location.href;
+
+	downloadVideoToMP3(
+		videoUrl,
+		(feedback) => {
+			if (!progress) {
+				console.warn("Cannot update progress");
+			} else {
+				progress.innerHTML = feedback;
+			}
+		},
+		(error) => {
+			triggerAction(CHANNEL, ACTIONS.ERROR, error);
+			reinit();
+		},
+		reinit,
+		pluginOptions
+	);
+};
+
+function observeMenu(options) {
+	pluginOptions = { ...pluginOptions, ...options };
+	observer.observe(document, {
+		childList: true,
+		subtree: true,
+	});
+}
+
+module.exports = observeMenu;

plugins/downloader/style.css

@@ -0,0 +1,13 @@
+.menu-item {
+	display: var(--ytmusic-menu-item_-_display);
+	height: var(--ytmusic-menu-item_-_height);
+	align-items: var(--ytmusic-menu-item_-_align-items);
+	padding: var(--ytmusic-menu-item_-_padding);
+	cursor: pointer;
+}
+
+.menu-icon {
+	flex: var(--ytmusic-menu-item-icon_-_flex);
+	margin: var(--ytmusic-menu-item-icon_-_margin);
+	fill: var(--ytmusic-menu-item-icon_-_fill);
+}

plugins/downloader/templates/download.html

@@ -0,0 +1,37 @@
+<div
+	class="menu-item ytmusic-menu-popup-renderer"
+	role="option"
+	tabindex="-1"
+	aria-disabled="false"
+	aria-selected="false"
+	onclick="download()"
+>
+	<div
+		class="menu-icon yt-icon-container yt-icon ytmusic-toggle-menu-service-item-renderer"
+	>
+		<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"
+				/>
+				<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"
+				/>
+			</g>
+		</svg>
+	</div>
+	<div
+		class="text style-scope ytmusic-toggle-menu-service-item-renderer"
+		id="ytmcustom-download"
+	>
+		Download
+	</div>
+</div>

plugins/downloader/youtube-dl.js

@@ -0,0 +1,109 @@
+const { randomBytes } = require("crypto");
+const { writeFileSync } = require("fs");
+const { join } = require("path");
+
+const downloadsFolder = require("downloads-folder");
+const is = require("electron-is");
+const filenamify = require("filenamify");
+
+// Browser version of FFmpeg (in renderer process) instead of loading @ffmpeg/ffmpeg
+// because --js-flags cannot be passed in the main process when the app is packaged
+// See https://github.com/electron/electron/issues/22705
+const FFmpeg = require("@ffmpeg/ffmpeg/dist/ffmpeg.min");
+const ytdl = require("ytdl-core");
+
+const { createFFmpeg } = FFmpeg;
+const ffmpeg = createFFmpeg({
+	log: false,
+	logger: () => {}, // console.log,
+	progress: () => {}, // console.log,
+});
+
+const downloadVideoToMP3 = (
+	videoUrl,
+	sendFeedback,
+	sendError,
+	reinit,
+	options
+) => {
+	sendFeedback("Downloading…");
+
+	let videoName = "YouTube Music - Unknown title";
+	let videoReadableStream;
+	try {
+		videoReadableStream = ytdl(videoUrl, {
+			filter: "audioonly",
+			quality: "highestaudio",
+			highWaterMark: 32 * 1024 * 1024, // 32 MB
+			requestOptions: { maxRetries: 3 },
+		});
+	} catch (err) {
+		sendError(err);
+		return;
+	}
+
+	const chunks = [];
+	videoReadableStream
+		.on("data", (chunk) => {
+			chunks.push(chunk);
+		})
+		.on("progress", (chunkLength, downloaded, total) => {
+			const progress = Math.floor((downloaded / total) * 100);
+			sendFeedback("Download: " + progress + "%");
+		})
+		.on("info", (info, format) => {
+			videoName = info.videoDetails.title.replace("|", "").toString("ascii");
+			if (is.dev()) {
+				console.log("Downloading video - name:", videoName);
+			}
+		})
+		.on("error", sendError)
+		.on("end", () => {
+			const buffer = Buffer.concat(chunks);
+			toMP3(videoName, buffer, sendFeedback, sendError, reinit, options);
+		});
+};
+
+const toMP3 = async (
+	videoName,
+	buffer,
+	sendFeedback,
+	sendError,
+	reinit,
+	options
+) => {
+	const safeVideoName = randomBytes(32).toString("hex");
+
+	try {
+		if (!ffmpeg.isLoaded()) {
+			sendFeedback("Loading…");
+			await ffmpeg.load();
+		}
+
+		sendFeedback("Preparing file…");
+		ffmpeg.FS("writeFile", safeVideoName, buffer);
+
+		sendFeedback("Converting…");
+		await ffmpeg.run(
+			"-i",
+			safeVideoName,
+			...options.ffmpegArgs,
+			safeVideoName + ".mp3"
+		);
+
+		const folder = options.downloadFolder || downloadsFolder();
+		const filename = filenamify(videoName + ".mp3", { replacement: "_" });
+		writeFileSync(
+			join(folder, filename),
+			ffmpeg.FS("readFile", safeVideoName + ".mp3")
+		);
+
+		reinit();
+	} catch (e) {
+		sendError(e);
+	}
+};
+
+module.exports = {
+	downloadVideoToMP3,
+};

plugins/hide-video-player/back.js

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

plugins/hide-video-player/style.css

@@ -0,0 +1,11 @@
+/* Hide the video player */
+#main-panel {
+	display: none !important;
+}
+
+/* Make the side-panel full width */
+.side-panel.ytmusic-player-page {
+	max-width: 100% !important;
+	width: 100% !important;
+	margin: 0 !important;
+}

plugins/navigation/back.js

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

plugins/navigation/front.js

@@ -1,14 +1,15 @@
-const { ElementFromFile, templatePath } = require('../utils');
+const { ElementFromFile, templatePath } = require("../utils");
 
 function run() {
-    const forwardButton = ElementFromFile(templatePath(__dirname, 'forward.html'));
-    const backButton = ElementFromFile(templatePath(__dirname, 'back.html'));
-    const menu = document.querySelector("ytmusic-pivot-bar-renderer");
+	const forwardButton = ElementFromFile(
+		templatePath(__dirname, "forward.html")
+	);
+	const backButton = ElementFromFile(templatePath(__dirname, "back.html"));
+	const menu       = document.querySelector("ytmusic-pivot-bar-renderer");
 
-    if (menu) {
-        menu.prepend(forwardButton);
-        menu.prepend(backButton);
-    }
+	if (menu) {
+		menu.prepend(backButton, forwardButton);
+	}
 }
 
 module.exports = run;

plugins/navigation/style.css

@@ -0,0 +1,36 @@
+.navigation-item {
+	font-family: Roboto, Noto Naskh Arabic UI, Arial, sans-serif;
+	font-size: 20px;
+	line-height: var(--ytmusic-title-1_-_line-height);
+	font-weight: 500;
+	color: #fff;
+	--yt-endpoint-color: #fff;
+	--yt-endpoint-hover-color: #fff;
+	--yt-endpoint-visited-color: #fff;
+	display: inline-flex;
+	align-items: center;
+	color: rgba(255, 255, 255, 0.5);
+	cursor: pointer;
+	margin: 0 var(--ytmusic-pivot-bar-tab-margin);
+}
+
+.navigation-item:hover {
+	color: #fff;
+}
+
+.navigation-icon {
+	display: inline-flex;
+	-ms-flex-align: center;
+	-webkit-align-items: center;
+	align-items: center;
+	-ms-flex-pack: center;
+	-webkit-justify-content: center;
+	justify-content: center;
+	position: relative;
+	vertical-align: middle;
+	fill: var(--iron-icon-fill-color, currentcolor);
+	stroke: none;
+	width: var(--iron-icon-width, 24px);
+	height: var(--iron-icon-height, 24px);
+	animation: var(--iron-icon_-_animation);
+}

plugins/navigation/templates/back.html

@@ -1,21 +1,33 @@
-<ytmusic-pivot-bar-item-renderer class="style-scope ytmusic-pivot-bar-renderer" tab-id="FEmusic_back" role="tab" onclick="goToPreviousPage()">
-    <yt-icon class="tab-icon style-scope ytmusic-pivot-bar-item-renderer">
-        <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 class="st0" d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z" class="style-scope yt-icon">
-                </path>
-            </g>
-        </svg>
-    </yt-icon>
-
-    <paper-icon-button class="search-icon style-scope ytmusic-search-box" role="button" tabindex="0" aria-disabled="false" title="Go to previous page">
-        <iron-icon id="icon" class="style-scope paper-icon-button">
-            <svg viewBox="0 0 492 492"  preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
-                <g class="style-scope iron-icon">
-                    <path class="st0" d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z">
-                    </path>
-                </g>
-            </svg>
-        </iron-icon>
-    </paper-icon-button>
-</ytmusic-pivot-bar-item-renderer>
+<div
+	class="style-scope ytmusic-pivot-bar-renderer navigation-item"
+	tab-id="FEmusic_back"
+	role="tab"
+	onclick="goToPreviousPage()"
+>
+	<div
+		class="search-icon style-scope ytmusic-search-box"
+		role="button"
+		tabindex="0"
+		aria-disabled="false"
+		title="Go to previous page"
+	>
+		<div
+			id="icon"
+			class="tab-icon style-scope paper-icon-button navigation-icon"
+		>
+			<svg
+				viewBox="0 0 492 492"
+				preserveAspectRatio="xMidYMid meet"
+				focusable="false"
+				class="style-scope iron-icon"
+				style="pointer-events: none; display: block; width: 100%; height: 100%;"
+			>
+				<g class="style-scope iron-icon">
+					<path
+						d="M109.3 265.2l218.9 218.9c5.1 5.1 11.8 7.9 19 7.9s14-2.8 19-7.9l16.1-16.1c10.5-10.5 10.5-27.6 0-38.1L198.6 246.1 382.7 62c5.1-5.1 7.9-11.8 7.9-19 0-7.2-2.8-14-7.9-19L366.5 7.9c-5.1-5.1-11.8-7.9-19-7.9-7.2 0-14 2.8-19 7.9L109.3 227c-5.1 5.1-7.9 11.9-7.8 19.1 0 7.2 2.8 14 7.8 19.1z"
+					></path>
+				</g>
+			</svg>
+		</div>
+	</div>
+</div>

plugins/navigation/templates/forward.html

@@ -1,26 +1,35 @@
-<ytmusic-pivot-bar-item-renderer class="style-scope ytmusic-pivot-bar-renderer" tab-id="FEmusic_next" role="tab" onclick="goToNextPage()">
-    <yt-icon class="tab-icon style-scope ytmusic-pivot-bar-item-renderer">
-        <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="M382.678,226.804L163.73,7.86C158.666,2.792,151.906,0,144.698,0s-13.968,2.792-19.032,7.86l-16.124,16.12
-                c-10.492,10.504-10.492,27.576,0,38.064L293.398,245.9l-184.06,184.06c-5.064,5.068-7.86,11.824-7.86,19.028
-                c0,7.212,2.796,13.968,7.86,19.04l16.124,16.116c5.068,5.068,11.824,7.86,19.032,7.86s13.968-2.792,19.032-7.86L382.678,265
-                c5.076-5.084,7.864-11.872,7.848-19.088C390.542,238.668,387.754,231.884,382.678,226.804z" class="style-scope yt-icon">
-                </path>
-            </g>
-        </svg>
-    </yt-icon>
-
-    <paper-icon-button class="search-icon style-scope ytmusic-search-box" role="button" tabindex="0" aria-disabled="false" title="Go to next page">
-        <iron-icon id="icon" class="style-scope paper-icon-button">
-            <svg viewBox="0 0 492 492"  preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
-                <g class="style-scope iron-icon">
-                    <path class="st0" d="M382.7,226.8L163.7,7.9c-5.1-5.1-11.8-7.9-19-7.9s-14,2.8-19,7.9L109.5,24c-10.5,10.5-10.5,27.6,0,38.1
+<div
+	class="style-scope ytmusic-pivot-bar-renderer navigation-item"
+	tab-id="FEmusic_next"
+	role="tab"
+	onclick="goToNextPage()"
+>
+	<div
+		class="search-icon style-scope ytmusic-search-box"
+		role="button"
+		tabindex="0"
+		aria-disabled="false"
+		title="Go to next page"
+	>
+		<div
+			id="icon"
+			class="tab-icon style-scope paper-icon-button navigation-icon"
+		>
+			<svg
+				viewBox="0 0 492 492"
+				preserveAspectRatio="xMidYMid meet"
+				focusable="false"
+				class="style-scope iron-icon"
+				style="pointer-events: none; display: block; width: 100%; height: 100%;"
+			>
+				<g class="style-scope iron-icon">
+					<path
+						d="M382.7,226.8L163.7,7.9c-5.1-5.1-11.8-7.9-19-7.9s-14,2.8-19,7.9L109.5,24c-10.5,10.5-10.5,27.6,0,38.1
                     l183.9,183.9L109.3,430c-5.1,5.1-7.9,11.8-7.9,19c0,7.2,2.8,14,7.9,19l16.1,16.1c5.1,5.1,11.8,7.9,19,7.9s14-2.8,19-7.9L382.7,265
-                    c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z">
-                    </path>
-                </g>
-            </svg>
-        </iron-icon>
-    </paper-icon-button>
-</ytmusic-pivot-bar-item-renderer>
+                    c5.1-5.1,7.9-11.9,7.8-19.1C390.5,238.7,387.8,231.9,382.7,226.8z"
+					></path>
+				</g>
+			</svg>
+		</div>
+	</div>
+</div>

plugins/notifications/actions.js

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

plugins/notifications/back.js

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

plugins/notifications/front.js

@@ -0,0 +1,86 @@
+let videoElement = null;
+let image = null;
+
+const observer = new MutationObserver((mutations, observer) => {
+	if (!videoElement) {
+		videoElement = document.querySelector("video");
+	}
+
+	if (!image) {
+		image = document.querySelector(".ytmusic-player-bar.image");
+	}
+
+	if (videoElement !== null && image !== null) {
+		observer.disconnect();
+		let notificationImage = null;
+
+		videoElement.addEventListener("play", () => {
+			notify({
+				title: getTitle(),
+				artist: getArtist(),
+				image: notificationImage,
+			});
+		});
+
+		image.addEventListener("load", () => {
+			notificationImage = null;
+			const imageInBase64 = convertImageToBase64(image);
+			if (image && image.complete && image.naturalHeight !== 0) {
+				notificationImage = imageInBase64;
+			}
+		});
+	}
+});
+
+// Convert an image (DOM element) to base64 string
+const convertImageToBase64 = (image, size = 256) => {
+	image.setAttribute("crossorigin", "anonymous");
+
+	const c = document.createElement("canvas");
+	c.height = size;
+	c.width = size;
+
+	const ctx = c.getContext("2d");
+	ctx.drawImage(
+		image,
+		0,
+		0,
+		image.naturalWidth,
+		image.naturalHeight,
+		0,
+		0,
+		c.width,
+		c.height
+	);
+
+	const imageInBase64 = c.toDataURL();
+	return imageInBase64;
+};
+
+const getTitle = () => {
+	const title = document.querySelector(".title.ytmusic-player-bar").textContent;
+	return title;
+};
+
+const getArtist = () => {
+	const bar = document.querySelectorAll(".subtitle.ytmusic-player-bar")[0];
+	let artist;
+
+	if (bar.querySelectorAll(".yt-simple-endpoint.yt-formatted-string")[0]) {
+		artist = bar.querySelectorAll(".yt-simple-endpoint.yt-formatted-string")[0]
+			.textContent;
+	} else if (bar.querySelectorAll(".byline.ytmusic-player-bar")[0]) {
+		artist = bar.querySelectorAll(".byline.ytmusic-player-bar")[0].textContent;
+	}
+
+	return artist;
+};
+
+const observeVideoAndThumbnail = () => {
+	observer.observe(document, {
+		childList: true,
+		subtree: true,
+	});
+};
+
+module.exports = observeVideoAndThumbnail;

plugins/touchbar/back.js

@@ -0,0 +1,110 @@
+const {
+	TouchBar, nativeImage
+} = require('electron');
+const {
+	TouchBarButton,
+	TouchBarLabel,
+	TouchBarSpacer,
+	TouchBarSegmentedControl,
+	TouchBarScrubber
+} = TouchBar;
+const fetch = require('node-fetch');
+
+// This selects the song title
+const titleSelector = '.title.style-scope.ytmusic-player-bar';
+
+// This selects the song image
+const imageSelector = '#layout > ytmusic-player-bar > div.middle-controls.style-scope.ytmusic-player-bar > img';
+
+// These keys will be used to go backwards, pause, skip songs, like songs, dislike songs
+const keys = ['k', 'space', 'j', '_', '+'];
+
+const presskey = (window, key) => {
+	window.webContents.sendInputEvent({
+		type: 'keydown',
+		keyCode: key
+	});
+};
+
+// Grab the title using the selector
+const getTitle = win => {
+	return win.webContents.executeJavaScript(
+		'document.querySelector(\'' + titleSelector + '\').innerText'
+	).catch(error => {
+		console.log(error);
+	});
+};
+
+// Grab the image src using the selector
+const getImage = win => {
+	return win.webContents.executeJavaScript(
+		'document.querySelector(\'' + imageSelector + '\').src'
+	).catch(error => {
+		console.log(error);
+	});
+};
+
+module.exports = win => {
+	// Songtitle label
+	const songTitle = new TouchBarLabel({
+		label: ''
+	});
+
+	// This will store the song image once available
+	const songImage = {};
+
+	// The song control buttons (keys to press are in the same order)
+	const buttons = new TouchBarSegmentedControl({
+		mode: 'buttons',
+		segments: [
+			new TouchBarButton({
+				label: '⏮'
+			}),
+			new TouchBarButton({
+				label: '⏯️'
+			}),
+			new TouchBarButton({
+				label: '⏭'
+			}),
+			new TouchBarButton({
+				label: '👎'
+			}),
+			new TouchBarButton({
+				label: '👍'
+			})
+		],
+		change: i => presskey(win, keys[i])
+	});
+
+	// This is the touchbar object, this combines everything with proper layout
+	const touchBar = new TouchBar({
+		items: [
+			new TouchBarScrubber({
+				items: [songImage, songTitle],
+				continuous: false
+			}),
+			new TouchBarSpacer({
+				size: 'flexible'
+			}),
+			buttons
+		]
+	});
+
+	// If the page title changes, update touchbar and song title
+	win.on('page-title-updated', async () => {
+		// Set the song title
+		songTitle.label = await getTitle(win);
+
+		// Get image source
+		const imageSrc = await getImage(win);
+
+		// Fetch and set song image
+		await fetch(imageSrc)
+			.then(response => response.buffer())
+			.then(data => {
+				songImage.icon = nativeImage.createFromBuffer(data).resize({height: 23});
+			});
+
+		win.setTouchBar(touchBar);
+	});
+};

plugins/utils.js

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

preload.js

@@ -1,26 +1,32 @@
 const path = require("path");
 
-const { getEnabledPlugins } = require("./store");
-const { fileExists }        = require("./plugins/utils");
+const { remote } = require("electron");
 
-const plugins = getEnabledPlugins();
+const config = require("./config");
+const { fileExists } = require("./plugins/utils");
 
-plugins.forEach(plugin => {
+const plugins = config.plugins.getEnabled();
+
+plugins.forEach(([plugin, options]) => {
 	const pluginPath = path.join(__dirname, "plugins", plugin, "actions.js");
 	fileExists(pluginPath, () => {
 		const actions = require(pluginPath).global || {};
-		Object.keys(actions).forEach(actionName => {
+		Object.keys(actions).forEach((actionName) => {
 			global[actionName] = actions[actionName];
 		});
 	});
 });
 
 document.addEventListener("DOMContentLoaded", () => {
-	plugins.forEach(plugin => {
+	plugins.forEach(([plugin, options]) => {
 		const pluginPath = path.join(__dirname, "plugins", plugin, "front.js");
 		fileExists(pluginPath, () => {
 			const run = require(pluginPath);
-			run();
+			run(options);
 		});
 	});
+
+	// Add action for reloading
+	global.reload = () =>
+		remote.getCurrentWindow().webContents.loadURL(config.get("url"));
 });

readme.md

@@ -1,26 +1,57 @@
-# YouTube Music [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
+# YouTube Music
 
-![Screenshot](screenshot.jpg "Screenshot")
+<div align="center">
+
+[![GitHub release](https://img.shields.io/github/release/th-ch/youtube-music.svg?style=for-the-badge&logo=youtube-music)](https://github.com/th-ch/youtube-music/releases/)
+[![GitHub license](https://img.shields.io/github/license/th-ch/youtube-music.svg?style=for-the-badge)](https://github.com/th-ch/youtube-music/blob/master/LICENSE)
+[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=for-the-badge)](https://github.com/sindresorhus/xo)
+[![Build status](https://img.shields.io/github/workflow/status/th-ch/youtube-music/Build%20YouTube%20Music?style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
+[![Known Vulnerabilities](https://img.shields.io/snyk/vulnerabilities/github/th-ch/youtube-music?style=for-the-badge)](https://snyk.io/test/github/th-ch/youtube-music)
+[![GitHub All Releases](https://img.shields.io/github/downloads/th-ch/youtube-music/total?style=for-the-badge&logo=youtube-music)](https://GitHub.com/th-ch/youtube-music/releases/)
+[![AUR](https://img.shields.io/aur/version/youtube-music-bin?color=blueviolet&style=for-the-badge&logo=youtube-music)](https://aur.archlinux.org/packages/youtube-music-bin)
+
+</div>
+
+![Screenshot](web/screenshot.jpg "Screenshot")
+
+<div align="center">
+	<a href="https://github.com/th-ch/youtube-music/releases/latest">
+		<img src="web/youtube-music.svg" width="400" height="100">
+	</a>
+</div>
 
 **Electron wrapper around YouTube Music featuring:**
 
 - Native look & feel, aims at keeping the original interface
 - Framework for custom plugins: change YouTube Music to your needs (style, content, features), enable/disable plugins in one click
 
+## Download
+
+You can check out the [latest release](https://github.com/th-ch/youtube-music/releases/latest) to quickly find the latest version.
+
+### Arch Linux
+
+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"
+- **Hide video player**: no video in the interface when playing music
+- **Notifications**: display a notification when a song starts playing
+- **Touchbar**: custom TouchBar layout for macOS
 
 ## Dev
 
-```
+```sh
 git clone https://github.com/th-ch/youtube-music
 cd youtube-music
-npm install
-npm start
+yarn
+yarn start
 ```
 
 ## Build your own plugins
@@ -36,7 +67,7 @@ Create a folder in `plugins/YOUR-PLUGIN-NAME`:
 
 - if you need to manipulate the BrowserWindow, create a file `back.js` with the following template:
 
-```
+```node
 module.exports = win => {
 	// win is the BrowserWindow object
 };
@@ -44,10 +75,10 @@ module.exports = win => {
 
 - if you need to change the front, create a file `front.js` with the following template:
 
-```
+```node
 module.exports = () => {
 	// This function will be called as a preload script
-    // So you can use front features like `document.querySelector`
+	// So you can use front features like `document.querySelector`
 };
 ```
 
@@ -55,7 +86,10 @@ module.exports = () => {
 
 - injecting custom CSS: create a `style.css` file in the same folder then:
 
-```
+```node
+const path = require("path");
+const { injectCSS } = require("../utils");
+
 // back.js
 module.exports = win => {
 	injectCSS(win.webContents, path.join(__dirname, "style.css"));
@@ -64,11 +98,11 @@ module.exports = win => {
 
 - changing the HTML:
 
-```
+```node
 // front.js
 module.exports = () => {
 	// Remove the login button
-	document.querySelector('.sign-in-link.ytmusic-nav-bar').remove();
+	document.querySelector(".sign-in-link.ytmusic-nav-bar").remove();
 };
 ```
 
@@ -76,11 +110,19 @@ module.exports = () => {
 
 ## Build
 
-```
-$ npm run build
+```sh
+yarn build
 ```
 
-Builds the app for macOS, Linux, and Windows, using [electron-packager](https://github.com/electron-userland/electron-packager).
+Builds the app for macOS, Linux, and Windows, using [electron-builder](https://github.com/electron-userland/electron-builder).
+
+## Tests
+
+```sh
+yarn test
+```
+
+Uses [Spectron](https://www.electronjs.org/spectron) to test the app.
 
 ## License
 

store/index.js

@@ -1,21 +0,0 @@
-const Store = require("electron-store");
-const plugins = require("./plugins");
-
-const store = new Store({
-	defaults: {
-		"window-size": {
-			width : 1100,
-			height: 550
-		},
-		url    : "https://music.youtube.com",
-		plugins: ["navigation", "shortcuts", "adblocker", "no-google-login"]
-	}
-});
-
-module.exports = {
-	store            : store,
-	isPluginEnabled  : plugin => plugins.isEnabled(store, plugin),
-	getEnabledPlugins: () => plugins.getEnabledPlugins(store),
-	enableplugin     : plugin => plugins.enablePlugin(store, plugin),
-	disablePlugin    : plugin => plugins.disablePlugin(store, plugin)
-};

store/plugins.js

@@ -1,31 +0,0 @@
-function getEnabledPlugins(store) {
-	return store.get("plugins");
-}
-
-function isEnabled(store, plugin) {
-	return store.get("plugins").indexOf(plugin) > -1;
-}
-
-function enablePlugin(store, plugin) {
-	let plugins = getEnabledPlugins(store);
-	if (plugins.indexOf(plugin) === -1) {
-		plugins.push(plugin);
-		store.set("plugins", plugins);
-	}
-}
-
-function disablePlugin(store, plugin) {
-	let plugins = getEnabledPlugins(store);
-	let index   = plugins.indexOf(plugin);
-	if (index > -1) {
-		plugins.splice(index, 1);
-		store.set("plugins", plugins);
-	}
-}
-
-module.exports = {
-	isEnabled        : isEnabled,
-	getEnabledPlugins: getEnabledPlugins,
-	enableplugin     : enablePlugin,
-	disableplugin    : disablePlugin
-};

tests/environment.js

@@ -0,0 +1,41 @@
+const path = require("path");
+
+const getPort = require("get-port");
+const NodeEnvironment = require("jest-environment-node");
+const electronPath = require("electron");
+const { Application } = require("spectron");
+
+class TestEnvironment extends NodeEnvironment {
+	constructor(config) {
+		super(config);
+	}
+
+	async setup() {
+		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();
+	}
+
+	async teardown() {
+		if (this.global.__APP__.isRunning()) {
+			await this.global.__APP__.stop();
+		}
+		await super.teardown();
+	}
+
+	runScript(script) {
+		return super.runScript(script);
+	}
+}
+
+module.exports = TestEnvironment;

tests/index.test.js

@@ -0,0 +1,23 @@
+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();
+		expect(title).toEqual("YouTube Music");
+	});
+});

tray.js

@@ -0,0 +1,73 @@
+const path = require("path");
+
+const { Menu, nativeImage, Tray } = require("electron");
+
+const config = require("./config");
+const { mainMenuTemplate } = require("./menu");
+const { clickInYoutubeMusic } = require("./utils/youtube-music");
+
+// Prevent tray being garbage collected
+let tray;
+
+module.exports.setUpTray = (app, win) => {
+	if (!config.get("options.tray")) {
+		tray = undefined;
+		return;
+	}
+
+	const iconPath = path.join(__dirname, "assets", "youtube-music-tray.png");
+	let trayIcon = nativeImage.createFromPath(iconPath).resize({
+		width: 16,
+		height: 16,
+	});
+	tray = new Tray(trayIcon);
+	tray.setToolTip("Youtube Music");
+	tray.setIgnoreDoubleClickEvents(true);
+	tray.on("click", () => {
+		win.isVisible() ? win.hide() : win.show();
+	});
+
+	const trayMenu = Menu.buildFromTemplate([
+		{
+			label: "Play/Pause",
+			click: () => {
+				clickInYoutubeMusic(
+					win,
+					"#left-controls > div > paper-icon-button.play-pause-button.style-scope.ytmusic-player-bar"
+				);
+			},
+		},
+		{
+			label: "Next",
+			click: () => {
+				clickInYoutubeMusic(
+					win,
+					"#left-controls > div > paper-icon-button.next-button.style-scope.ytmusic-player-bar"
+				);
+			},
+		},
+		{
+			label: "Previous",
+			click: () => {
+				clickInYoutubeMusic(
+					win,
+					"#left-controls > div > paper-icon-button.previous-button.style-scope.ytmusic-player-bar"
+				);
+			},
+		},
+		{
+			label: "Show",
+			click: () => {
+				win.show();
+			},
+		},
+		...mainMenuTemplate(win),
+		{
+			label: "Quit",
+			click: () => {
+				app.quit();
+			},
+		},
+	]);
+	tray.setContextMenu(trayMenu);
+};

utils/generate-package-json.js

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+const { existsSync, writeFile } = require("fs");
+const { join } = require("path");
+const { promisify } = require("util");
+
+/**
+ * Generates a fake package.json for given packages that don't have any.
+ * Allows electron-builder to resolve them
+ */
+
+const generatePackageJson = async packageName => {
+	var filepath = join("node_modules", packageName, "package.json");
+	if (!existsSync(filepath)) {
+		console.log(
+			`No package.json found for ${packageName} module, generating one…`
+		);
+		pkg = {
+			name: packageName,
+			version: "0.0.0",
+			description: "-",
+			repository: { type: "git", url: "-" },
+			readme: "-"
+		};
+		const writeFileAsync = promisify(writeFile);
+		await writeFileAsync(filepath, JSON.stringify(pkg, null, 2));
+	}
+};
+
+if (require.main === module) {
+	process.argv.slice(2).forEach(async packageName => {
+		await generatePackageJson(packageName);
+	});
+}

utils/testing.js

@@ -0,0 +1,3 @@
+const isTesting = () => process.env.NODE_ENV === "test";
+
+module.exports = { isTesting };

utils/youtube-music.js

@@ -0,0 +1,8 @@
+const clickInYoutubeMusic = (win, selector) => {
+	win.webContents.executeJavaScript(
+		`document.querySelector("${selector}").click();`,
+		true
+	);
+};
+
+module.exports = { clickInYoutubeMusic };

web/youtube-music.svg

@@ -0,0 +1,379 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 300" width="800" height="300">
+	<foreignObject width="100%" height="100%">
+		<div xmlns="http://www.w3.org/1999/xhtml">
+			<style>
+				.container {
+					width: 100%;
+					position: relative;
+					overflow: hidden;
+				}
+				a {
+					text-decoration: none;
+				}
+				h1.main, p.demos {
+					-webkit-animation-delay: 18s;
+					-moz-animation-delay: 18s;
+					-ms-animation-delay: 18s;
+					animation-delay: 18s;
+				}
+				.container {
+					position: fixed;
+					top: 0px;
+					left: 0px;
+					width: 100%;
+					height: 100%;
+					z-index: 0;
+				}
+				.content {
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					left: 0px;
+					top: 0px;
+					z-index: 1000;
+				}
+				.container h2 {
+					position: absolute;
+					top: 50%;
+					line-height: 100px;
+					height: 90px;
+					margin-top: -90px;
+					font-size: 90px;
+					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+					width: 100%;
+					text-align: center;
+					color: transparent;
+					-webkit-animation: blurFadeInOut 3s ease-in backwards;
+					-moz-animation: blurFadeInOut 3s ease-in backwards;
+					-ms-animation: blurFadeInOut 3s ease-in backwards;
+					animation: blurFadeInOut 3s ease-in backwards;
+				}
+				.container h2.frame-1 {
+					-webkit-animation-delay: 0s;
+					-moz-animation-delay: 0s;
+					-ms-animation-delay: 0s;
+					animation-delay: 0s;
+				}
+				.container h2.frame-2 {
+					-webkit-animation-delay: 3s;
+					-moz-animation-delay: 3s;
+					-ms-animation-delay: 3s;
+					animation-delay: 3s;
+				}
+				.container h2.frame-3 {
+					-webkit-animation-delay: 6s;
+					-moz-animation-delay: 6s;
+					-ms-animation-delay: 6s;
+					animation-delay: 6s;
+				}
+				.container h2.frame-4 {
+					-webkit-animation-delay: 9s;
+					-moz-animation-delay: 9s;
+					-ms-animation-delay: 9s;
+					animation-delay: 9s;
+				}
+				.container h2.frame-5 {
+					-webkit-animation: none;
+					-moz-animation: none;
+					-ms-animation: none;
+					animation: none;
+					color: transparent;
+					text-shadow: 0px 0px 1px #fff;
+				}
+				.container h2.frame-5 span {
+					-webkit-animation: blurFadeIn 3s ease-in 12s backwards;
+					-moz-animation: blurFadeIn 1s ease-in 12s backwards;
+					-ms-animation: blurFadeIn 3s ease-in 12s backwards;
+					animation: blurFadeIn 3s ease-in 12s backwards;
+					color: transparent;
+					text-shadow: 0px 0px 1px #fff;
+				}
+				.container h2.frame-5 span:nth-child(2) {
+					-webkit-animation-delay: 13s;
+					-moz-animation-delay: 13s;
+					-ms-animation-delay: 13s;
+					animation-delay: 13s;
+				}
+				.container h2.frame-5 span:nth-child(3) {
+					-webkit-animation-delay: 14s;
+					-moz-animation-delay: 14s;
+					-ms-animation-delay: 14s;
+					animation-delay: 14s;
+				}
+				.circle-link {
+					position: absolute;
+					left: 50%;
+					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+					bottom: 50px;
+					margin-left: -100px;
+					text-align: center;
+					line-height: 200px;
+					width: 200px;
+					height: 200px;
+					background: #cc0000;
+					color: #fff;
+					font-size: 25px;
+					-webkit-border-radius: 50%;
+					-moz-border-radius: 50%;
+					border-radius: 50%;
+					box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+					-webkit-animation: fadeInRotate 0.8s ease 16s backwards;
+					-moz-animation: fadeInRotate 0.8s ease 16s backwards;
+					-ms-animation: fadeInRotate 0.8s ease 16s backwards;
+					animation: fadeInRotate 0.8s ease 16s backwards;
+					-webkit-transform: scale(1) rotate(0deg);
+					-moz-transform: scale(1) rotate(0deg);
+					-o-transform: scale(1) rotate(0deg);
+					-ms-transform: scale(1) rotate(0deg);
+					transform: scale(1) rotate(0deg);
+
+					background-repeat: no-repeat;
+					background-position: -250px -250px, 0 0;
+
+					background-image: -webkit-linear-gradient(
+						top left,
+						rgba(255, 255, 255, 0.2) 0%,
+						rgba(255, 255, 255, 0.2) 37%,
+						rgba(255, 255, 255, 0.8) 45%,
+						rgba(255, 255, 255, 0.0) 50%
+					);
+					background-image: -moz-linear-gradient(
+						0 0,
+						rgba(255, 255, 255, 0.2) 0%,
+						rgba(255, 255, 255, 0.2) 37%,
+						rgba(255, 255, 255, 0.8) 45%,
+						rgba(255, 255, 255, 0.0) 50%
+					);
+					background-image: -o-linear-gradient(
+						0 0,
+						rgba(255, 255, 255, 0.2) 0%,
+						rgba(255, 255, 255, 0.2) 37%,
+						rgba(255, 255, 255, 0.8) 45%,
+						rgba(255, 255, 255, 0.0) 50%
+					);
+					background-image: linear-gradient(
+						0 0,
+						rgba(255, 255, 255, 0.2) 0%,
+						rgba(255, 255, 255, 0.2) 37%,
+						rgba(255, 255, 255, 0.8) 45%,
+						rgba(255, 255, 255, 0.0) 50%
+					);
+
+					-moz-background-size: 250% 250%, 100% 100%;
+						background-size: 250% 250%, 100% 100%;
+
+					-webkit-transition: background-position 0s ease;
+						-moz-transition: background-position 0s ease;
+						-o-transition: background-position 0s ease;
+							transition: background-position 0s ease;
+				}
+				.circle-link:hover {
+					background-position: 0 0, 0 0;
+
+					-webkit-transition-duration: 0.5s;
+						-moz-transition-duration: 0.5s;
+							transition-duration: 0.5s;
+				}
+
+				@-webkit-keyframes blurFadeInOut {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						-webkit-transform: scale(1.3);
+					}
+					20%, 75% {
+						opacity: 1;
+						color: #cc0000;
+						text-shadow: 0px 0px 1px #fff;
+						-webkit-transform: scale(1);
+					}
+					100% {
+						opacity: 0;
+						text-shadow: 0px 0px 50px #fff;
+						-webkit-transform: scale(0);
+					}
+				}
+				@-webkit-keyframes blurFadeIn {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						-webkit-transform: scale(1.3);
+					}
+					50% {
+						opacity: 0.5;
+						color: #cc0000;
+						text-shadow: 0px 0px 10px #fff;
+						-webkit-transform: scale(1.1);
+					}
+					100% {
+						opacity: 1;
+						text-shadow: 0px 0px 1px #fff;
+						-webkit-transform: scale(1);
+					}
+				}
+				@-webkit-keyframes fadeInBack {
+					0% {
+						opacity: 0;
+						-webkit-transform: scale(0);
+					}
+					50% {
+						opacity: 0.4;
+						-webkit-transform: scale(2);
+					}
+					100% {
+						opacity: 0.2;
+						-webkit-transform: scale(5);
+					}
+				}
+				@-webkit-keyframes fadeInRotate {
+					0% {
+						opacity: 0;
+						-webkit-transform: scale(0) rotate(360deg);
+					}
+					100% {
+						opacity: 1;
+						-webkit-transform: scale(1) rotate(0deg);
+					}
+				}
+
+				@-moz-keyframes blurFadeInOut {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						-moz-transform: scale(1.3);
+					}
+					20%, 75% {
+						opacity: 1;
+						color: #cc0000;
+						text-shadow: 0px 0px 1px #fff;
+						-moz-transform: scale(1);
+					}
+					100% {
+						opacity: 0;
+						text-shadow: 0px 0px 50px #fff;
+						-moz-transform: scale(0);
+					}
+				}
+				@-moz-keyframes blurFadeIn {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						-moz-transform: scale(1.3);
+					}
+					100% {
+						opacity: 1;
+						text-shadow: 0px 0px 1px #fff;
+						-moz-transform: scale(1);
+					}
+				}
+				@-moz-keyframes fadeInBack {
+					0% {
+						opacity: 0;
+						-moz-transform: scale(0);
+					}
+					50% {
+						opacity: 0.4;
+						-moz-transform: scale(2);
+					}
+					100% {
+						opacity: 0.2;
+						-moz-transform: scale(5);
+					}
+				}
+				@-moz-keyframes fadeInRotate {
+					0% {
+						opacity: 0;
+						-moz-transform: scale(0) rotate(360deg);
+					}
+					100% {
+						opacity: 1;
+						-moz-transform: scale(1) rotate(0deg);
+					}
+				}
+
+				@keyframes blurFadeInOut {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						transform: scale(1.3);
+					}
+					20%, 75% {
+						opacity: 1;
+
+						color: #cc0000;
+						text-shadow: 0px 0px 1px #fff;
+						transform: scale(1);
+					}
+					100% {
+						opacity: 0;
+						text-shadow: 0px 0px 50px #fff;
+						transform: scale(0);
+					}
+				}
+				@keyframes blurFadeIn {
+					0% {
+						opacity: 0;
+						color: #cc0000;
+						text-shadow: 0px 0px 40px #fff;
+						transform: scale(1.3);
+					}
+					50% {
+						opacity: 0.5;
+						color: #cc0000;
+						text-shadow: 0px 0px 10px #fff;
+						transform: scale(1.1);
+					}
+					100% {
+						opacity: 1;
+						text-shadow: 0px 0px 1px #fff;
+						transform: scale(1);
+					}
+				}
+				@keyframes fadeInBack {
+					0% {
+						opacity: 0;
+						transform: scale(0);
+					}
+					50% {
+						opacity: 0.4;
+						transform: scale(2);
+					}
+					100% {
+						opacity: 0.2;
+						transform: scale(5);
+					}
+				}
+				@keyframes fadeInRotate {
+					0% {
+						opacity: 0;
+						transform: scale(0) rotate(360deg);
+					}
+					100% {
+						opacity: 1;
+						transform: scale(1) rotate(0deg);
+					}
+				}
+			</style>
+			<div class="container">
+				<div class="content">
+					<h2 class="frame-1">YouTube Music Desktop App</h2>
+					<h2 class="frame-2">With built-in ad blocker</h2>
+					<h2 class="frame-3">And built-in downloader</h2>
+					<h2 class="frame-4">Cross-platform</h2>
+					<h2 class="frame-5">
+						<span>Free,</span>
+						<span>Open source</span>
+					</h2>
+					<a class="circle-link" href="https://github.com/th-ch/youtube-music/releases/latest">
+						Download
+					</a>
+				</div>
+			</div>
+		</div>
+	</foreignObject>
+</svg>

youtube-music.css

@@ -23,3 +23,8 @@ ytmusic-app-layout {
 ytmusic-search-box.ytmusic-nav-bar {
 	margin-top: 12px;
 }
+
+/* Blocking annoying elements */
+ytmusic-mealbar-promo-renderer {
+	display: none !important;
+}