Bump version to 1.3.2

[Snyk] Upgrade electron-updater from 4.2.5 to 4.3.0

.npmrc

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

.travis.yml

@@ -1,42 +1,34 @@
-matrix:
+language: node_js
+node_js: "10"
+env:
+  - ELECTRON_CACHE=$HOME/.cache/electron ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
+
+jobs:
   include:
     - os: osx
-      osx_image: xcode9.4
-      language: node_js
-      node_js: "10"
-      env:
-        - ELECTRON_CACHE=$HOME/.cache/electron
-        - ELECTRON_BUILDER_CACHE=$HOME/.cache/electron-builder
-
+      osx_image: xcode11.3
     - os: linux
-      services: docker
-      language: generic
+      dist: xenial
 
 cache:
+  yarn: false
   directories:
-    - node_modules
     - $HOME/.cache/electron
     - $HOME/.cache/electron-builder
 
 script:
   - |
     if [ "$TRAVIS_OS_NAME" == "linux" ]; then
-      docker run --rm \
-        $(env | \
-          grep -Eo '^[^\s=]*(DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS|APPVEYOR_|CSC_|_TOKEN|_KEY|AWS_|STRIP|BUILD_)[^\s=]*' | \
-          sed '/^$/d;s/^/-e /' | \
-          paste -sd ' ' \
-        ) \
-        -v ${PWD}:/project \
-        -v ~/.cache/electron:/root/.cache/electron \
-        -v ~/.cache/electron-builder:/root/.cache/electron-builder \
-        electronuserland/builder \
-        /bin/bash -c "npm install && npm run release:linux"
+      yarn run release:linux
     else
-      npm run release:mac
+      yarn run release:mac
     fi
 before_cache:
   - rm -rf $HOME/.cache/electron-builder
+before_install:
+  - rm -rf node_modules
+  # Install dependencies
+  - travis_wait 30 yarn --frozen-lockfile
 
 branches:
   except:

appveyor.yml

@@ -1,4 +1,4 @@
-image: Visual Studio 2017
+image: Visual Studio 2019
 
 platform:
   - x64
@@ -11,10 +11,17 @@ init:
   - git config --global core.autocrlf input
 
 install:
-  - ps: Install-Product node 8 x64
-  - npm install
+  # Install node
+  - ps: Install-Product node 10 x64
+  # Install dependencies
+  - yarn --frozen-lockfile
+
+# on_finish:
+#   # Enable RDP to the build worker (using APPVEYOR_RDP_PASSWORD env var)
+#   # https://www.appveyor.com/docs/how-to/rdp-to-build-worker/
+#   - ps: $blockRdp = $true; iex ((new-object net.webclient).DownloadString('https://raw.githubusercontent.com/appveyor/ci/master/scripts/enable-rdp.ps1'))
 
 build_script:
-  - npm run release:win
+  - yarn run release:win
 
 test: off

index.js

@@ -1,13 +1,20 @@
 "use strict";
 const path = require("path");
 
-const electron        = require("electron");
-const isDev           = require("electron-is-dev");
+const electron = require("electron");
+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 { setApplicationMenu } = require("./menu");
+const {
+	autoUpdate,
+	getEnabledPlugins,
+	isAppVisible,
+	isTrayEnabled,
+	store,
+} = require("./store");
+const { fileExists, injectCSS } = require("./plugins/utils");
+const { setUpTray } = require("./tray");
 
 const app = electron.app;
 
@@ -32,21 +39,23 @@ function onClosed() {
 }
 
 function createMainWindow() {
-	const windowSize      = store.get("window-size");
+	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,
+		icon: icon,
+		width: windowSize.width,
+		height: windowSize.height,
 		backgroundColor: "#000",
-		show           : false,
-		webPreferences : {
+		show: false,
+		webPreferences: {
 			nodeIntegration: false,
-			preload        : path.join(__dirname, "preload.js")
+			preload: path.join(__dirname, "preload.js"),
+			nativeWindowOpen: true, // window.open return Window object(like in regular browsers), not BrowserWindowProxy
+			affinity: "main-window", // main window, and addition windows should work in one process
 		},
-		frame        : false,
-		titleBarStyle: "hiddenInset"
+		frame: !is.macOS(),
+		titleBarStyle: is.macOS() ? "hiddenInset" : "default",
 	});
 	if (windowMaximized) {
 		win.maximize();
@@ -57,13 +66,13 @@ function createMainWindow() {
 
 	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 => {
+	getEnabledPlugins().forEach((plugin) => {
 		console.log("Loaded plugin - " + plugin);
 		const pluginPath = path.join(__dirname, "plugins", plugin, "back.js");
 		fileExists(pluginPath, () => {
@@ -73,7 +82,7 @@ function createMainWindow() {
 	});
 
 	win.webContents.on("did-fail-load", () => {
-		if (isDev) {
+		if (is.dev()) {
 			console.log("did fail load");
 		}
 		win.webContents.loadFile(path.join(__dirname, "error.html"));
@@ -86,6 +95,32 @@ function createMainWindow() {
 		}
 	});
 
+	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";
+		}
+	);
+
 	win.on("move", () => {
 		let position = win.getPosition();
 		store.set("window-position", { x: position[0], y: position[1] });
@@ -101,7 +136,9 @@ function createMainWindow() {
 	});
 
 	win.once("ready-to-show", () => {
-		win.show();
+		if (isAppVisible()) {
+			win.show();
+		}
 	});
 
 	return win;
@@ -129,28 +166,41 @@ app.on("activate", () => {
 app.on("ready", () => {
 	setApplicationMenu();
 	mainWindow = createMainWindow();
-	if (!isDev) {
+	const tray = setUpTray(app, mainWindow);
+	tray.on("click", () => {
+		mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
+	});
+
+	if (!is.dev() && autoUpdate()) {
 		autoUpdater.checkForUpdatesAndNotify();
 		autoUpdater.on("update-available", () => {
 			const dialogOpts = {
-				type   : "info",
+				type: "info",
 				buttons: ["OK"],
-				title  : "Application Update",
+				title: "Application Update",
 				message: "A new version is available",
-				detail : 
-					"A new version is available and can be downloaded at https://github.com/th-ch/youtube-music/releases/latest"
+				detail:
+					"A new version is available and can be downloaded at https://github.com/th-ch/youtube-music/releases/latest",
 			};
 			electron.dialog.showMessageBox(dialogOpts);
 		});
 	}
 
 	// 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 (!isAppVisible()) {
+			app.dock.hide();
+		}
+	}
+
+	var forceQuit = false;
+	app.on("before-quit", () => {
+		forceQuit = true;
+	});
+
+	if (is.macOS() || isTrayEnabled()) {
+		mainWindow.on("close", (event) => {
+			// Hide the window instead of quitting (quit is available in tray options)
 			if (!forceQuit) {
 				event.preventDefault();
 				mainWindow.hide();

menu.js

@@ -1,33 +1,79 @@
 const { app, Menu } = require("electron");
 
-const { getAllPlugins }                                = require("./plugins/utils");
-const { isPluginEnabled, enablePlugin, disablePlugin } = require("./store");
+const { getAllPlugins } = require("./plugins/utils");
+const {
+	isPluginEnabled,
+	enablePlugin,
+	disablePlugin,
+	autoUpdate,
+	isAppVisible,
+	isTrayEnabled,
+	setOptions,
+} = require("./store");
 
-module.exports.setApplicationMenu = () => {
-	const menuTemplate = [
-		{
-			label  : "Plugins",
-			submenu: getAllPlugins().map(plugin => {
-				return {
-					label  : plugin,
-					type   : "checkbox",
-					checked: isPluginEnabled(plugin),
-					click  : item => {
-						if (item.checked) {
-							enablePlugin(plugin);
-						} else {
-							disablePlugin(plugin);
-						}
+const mainMenuTemplate = [
+	{
+		label: "Plugins",
+		submenu: getAllPlugins().map((plugin) => {
+			return {
+				label: plugin,
+				type: "checkbox",
+				checked: isPluginEnabled(plugin),
+				click: (item) => {
+					if (item.checked) {
+						enablePlugin(plugin);
+					} else {
+						disablePlugin(plugin);
 					}
-				};
-			})
-		}
-	];
+				},
+			};
+		}),
+	},
+	{
+		label: "Options",
+		submenu: [
+			{
+				label: "Auto-update",
+				type: "checkbox",
+				checked: autoUpdate(),
+				click: (item) => {
+					setOptions({ autoUpdates: item.checked });
+				},
+			},
+			{
+				label: "Tray",
+				submenu: [
+					{
+						label: "Disabled",
+						type: "radio",
+						checked: !isTrayEnabled(),
+						click: () => setOptions({ tray: false, appVisible: true }),
+					},
+					{
+						label: "Enabled + app visible",
+						type: "radio",
+						checked: isTrayEnabled() && isAppVisible(),
+						click: () => setOptions({ tray: true, appVisible: true }),
+					},
+					{
+						label: "Enabled + app hidden",
+						type: "radio",
+						checked: isTrayEnabled() && !isAppVisible(),
+						click: () => setOptions({ tray: true, appVisible: false }),
+					},
+				],
+			},
+		],
+	},
+];
 
+module.exports.mainMenuTemplate = mainMenuTemplate;
+module.exports.setApplicationMenu = () => {
+	const menuTemplate = [...mainMenuTemplate];
 	if (process.platform === "darwin") {
 		const name = app.getName();
 		menuTemplate.unshift({
-			label  : name,
+			label: name,
 			submenu: [
 				{ role: "about" },
 				{ type: "separator" },
@@ -36,9 +82,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 +92,8 @@ module.exports.setApplicationMenu = () => {
 				{ type: "separator" },
 				{ role: "minimize" },
 				{ role: "close" },
-				{ role: "quit" }
-			]
+				{ role: "quit" },
+			],
 		});
 	}
 

package.json

@@ -1,60 +1,68 @@
 {
-	"name"       : "youtube-music",
+	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version"    : "1.1.3",
+	"version": "1.3.2",
 	"description": "YouTube Music Desktop App - including custom plugins",
-	"license"    : "MIT",
-	"repository" : "th-ch/youtube-music",
-	"author"     : {
-		"name" : "th-ch",
+	"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",
+		"appId": "com.github.th-ch.youtube-music",
 		"productName": "YouTube Music",
-		"mac"        : {
+		"mac": {
 			"identity": null,
-			"icon"    : "assets/generated/icons/mac/icon.icns"
+			"icon": "assets/generated/icons/mac/icon.icns"
 		},
 		"win": {
 			"icon": "assets/generated/icons/win/icon.ico"
 		},
 		"linux": {
-			"icon"    : "assets/generated/icons/png",
+			"icon": "assets/generated/icons/png",
 			"category": "AudioVideo"
 		}
 	},
 	"scripts": {
-		"test"         : "xo",
-		"start"        : "electron .",
-		"icon"         : "rimraf assets/generated && electron-icon-maker --input=assets/youtube-music.png --output=assets/generated",
-		"postinstall"  : "npm run icon && npm rebuild && node plugins/adblocker/generator.js && electron-rebuild",
-		"clean"        : "rimraf dist",
-		"build"        : "npm run clean && build --win --mac --linux",
-		"build:mac"    : "npm run clean && build --mac",
-		"build:win"    : "npm run clean && build --win",
-		"release:linux": "npm run clean && build --linux -p always",
-		"release:mac"  : "npm run clean && build --mac -p always",
-		"release:win"  : "npm run clean && build --win -p always"
+		"test": "xo",
+		"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: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": {
+		"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",
-		"electron-updater"      : "^4.0.6"
+		"@cliqz/adblocker-electron": "^1.14.1",
+		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.7.1",
+		"electron-debug": "^3.0.1",
+		"electron-is": "^3.0.0",
+		"electron-localshortcut": "^3.2.1",
+		"electron-store": "^5.1.1",
+		"electron-updater": "^4.3.0",
+		"node-fetch": "^2.6.0"
 	},
 	"devDependencies": {
-		"devtron"                    : "^1.4.0",
-		"electron"                   : "^4.0.8",
-		"electron-builder"           : "^20.40.2",
-		"electron-devtools-installer": "^2.2.4",
-		"electron-icon-maker"        : "0.0.4",
-		"electron-rebuild"           : "^1.8.4",
-		"rimraf"                     : "^2.6.3",
-		"xo"                         : "^0.24.0"
+		"devtron": "^1.4.0",
+		"electron": "^8.2.1",
+		"electron-builder": "^22.4.1",
+		"electron-devtools-installer": "^3.0.0",
+		"electron-icon-maker": "0.0.4",
+		"rimraf": "^3.0.2",
+		"xo": "^0.29.0"
 	},
 	"xo": {
 		"envs": [

plugins/adblocker/.gitignore

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

plugins/adblocker/back.js

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

plugins/adblocker/blocker.js

@@ -1,12 +1,34 @@
-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",
+];
+
+const loadAdBlockerEngine = (session = undefined) =>
+	ElectronBlocker.fromLists(
+		fetch,
+		SOURCES,
+		{},
+		{
+			path: path.resolve(__dirname, "ad-blocker-engine.bin"),
+			read: promises.readFile,
+			write: promises.writeFile,
 		}
-	);
-};
+	)
+		.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/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/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,51 @@
-<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>
+<div
+	class="style-scope ytmusic-pivot-bar-renderer navigation-item"
+	tab-id="FEmusic_back"
+	role="tab"
+	onclick="goToPreviousPage()"
+>
+	<div
+		class="tab-icon style-scope ytmusic-pivot-bar-item-renderer yt-icon-container"
+	>
+		<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>
+	</div>
 
-    <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="search-icon style-scope ytmusic-search-box"
+		role="button"
+		tabindex="0"
+		aria-disabled="false"
+		title="Go to previous page"
+	>
+		<div id="icon" class="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
+						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>
+		</div>
+	</div>
+</div>

plugins/navigation/templates/forward.html

@@ -1,26 +1,53 @@
-<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
+<div
+	class="style-scope ytmusic-pivot-bar-renderer navigation-item"
+	tab-id="FEmusic_next"
+	role="tab"
+	onclick="goToNextPage()"
+>
+	<div 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>
+                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>
+	</div>
 
-    <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="search-icon style-scope ytmusic-search-box"
+		role="button"
+		tabindex="0"
+		aria-disabled="false"
+		title="Go to next page"
+	>
+		<div id="icon" class="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
+						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
                     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>

readme.md

@@ -1,9 +1,12 @@
 # YouTube Music
+
 [![GitHub release](https://img.shields.io/github/release/th-ch/youtube-music.svg)](https://GitHub.com/th-ch/youtube-music/releases/)
 [![GitHub license](https://img.shields.io/github/license/th-ch/youtube-music.svg)](https://github.com/th-ch/youtube-music/blob/master/LICENSE)
 [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
 [![Build status](https://ci.appveyor.com/api/projects/status/tgre12r150ynvwl2?svg=true)](https://ci.appveyor.com/project/th-ch/youtube-music)
 [![Build Status](https://travis-ci.org/th-ch/youtube-music.svg?branch=master)](https://travis-ci.org/th-ch/youtube-music)
+[![Known Vulnerabilities](https://snyk.io/test/github/th-ch/youtube-music/badge.svg)](https://snyk.io/test/github/th-ch/youtube-music)
+![GitHub All Releases](https://img.shields.io/github/downloads/th-ch/youtube-music/total)
 
 ![Screenshot](screenshot.jpg "Screenshot")
 
@@ -22,14 +25,15 @@ You can check out the [latest release](https://github.com/th-ch/youtube-music/re
 - **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"
 
 ## 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
@@ -80,7 +84,7 @@ module.exports = win => {
 // 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();
 };
 ```
 
@@ -89,7 +93,7 @@ module.exports = () => {
 ## Build
 
 ```sh
-npm run build
+yarn run build
 ```
 
 Builds the app for macOS, Linux, and Windows, using [electron-builder](https://github.com/electron-userland/electron-builder).

store/index.js

@@ -4,18 +4,30 @@ const plugins = require("./plugins");
 const store = new Store({
 	defaults: {
 		"window-size": {
-			width : 1100,
+			width: 1100,
 			height: 550
 		},
-		url    : "https://music.youtube.com",
-		plugins: ["navigation", "shortcuts", "adblocker", "no-google-login"]
+		url: "https://music.youtube.com",
+		plugins: ["navigation", "shortcuts", "adblocker"],
+		options: {
+			tray: false,
+			appVisible: true,
+			autoUpdates: true
+		}
 	}
 });
 
 module.exports = {
-	store            : store,
-	isPluginEnabled  : plugin => plugins.isEnabled(store, plugin),
+	store: store,
+	// Plugins
+	isPluginEnabled: plugin => plugins.isEnabled(store, plugin),
 	getEnabledPlugins: () => plugins.getEnabledPlugins(store),
-	enablePlugin     : plugin => plugins.enablePlugin(store, plugin),
-	disablePlugin    : plugin => plugins.disablePlugin(store, plugin)
+	enablePlugin: plugin => plugins.enablePlugin(store, plugin),
+	disablePlugin: plugin => plugins.disablePlugin(store, plugin),
+	// Options
+	setOptions: options =>
+		store.set("options", { ...store.get("options"), ...options }),
+	isTrayEnabled: () => store.get("options.tray"),
+	isAppVisible: () => store.get("options.appVisible"),
+	autoUpdate: () => store.get("options.autoUpdates")
 };

tray.js

@@ -0,0 +1,72 @@
+const path = require("path");
+
+const { Menu, nativeImage, Tray } = require("electron");
+
+const { mainMenuTemplate } = require("./menu");
+const { isTrayEnabled } = require("./store");
+const { clickInYoutubeMusic } = require("./utils/youtube-music");
+
+// Prevent tray being garbage collected
+let tray;
+
+module.exports.setUpTray = (app, win) => {
+	if (!isTrayEnabled()) {
+		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);
+
+	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,
+		{
+			label: "Quit",
+			click: () => {
+				app.quit();
+			},
+		},
+	]);
+	tray.setContextMenu(trayMenu);
+
+	return tray;
+};

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

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

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;
+}