Update version to 1.5.0

Bump node-fetch from 2.6.0 to 2.6.1

.travis.yml

@@ -9,6 +9,8 @@ jobs:
       osx_image: xcode11.3
     - os: linux
       dist: xenial
+      services:
+        - xvfb
 
 cache:
   yarn: false
@@ -18,6 +20,7 @@ cache:
 
 script:
   - |
+    yarn test
     if [ "$TRAVIS_OS_NAME" == "linux" ]; then
       yarn run release:linux
     else

appveyor.yml

@@ -21,6 +21,11 @@ install:
 #   # 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'))
 
+# @FIXME: tests disabled because app fails to launch on AppVeyor/Windows
+# os: unstable # https://github.com/electron-userland/spectron#on-appveyor
+# test_script:
+#   - yarn test
+
 build_script:
   - yarn run release:win
 

index.js

@@ -10,12 +10,16 @@ const {
 	autoUpdate,
 	getEnabledPlugins,
 	isAppVisible,
+	isTrayEnabled,
 	store,
+	startAtLogin,
 } = require("./store");
 const { fileExists, injectCSS } = require("./plugins/utils");
+const { isTesting } = require("./utils/testing");
 const { setUpTray } = require("./tray");
 
 const app = electron.app;
+app.allowRendererProcessReuse = true; // https://github.com/electron/electron/issues/18397
 
 // Adds debug features like hotkeys for triggering dev tools and reload
 require("electron-debug")();
@@ -48,9 +52,10 @@ function createMainWindow() {
 		backgroundColor: "#000",
 		show: false,
 		webPreferences: {
-			nodeIntegration: false,
+			nodeIntegration: isTesting(), // Only necessary when testing with Spectron
 			preload: path.join(__dirname, "preload.js"),
 			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(),
@@ -167,6 +172,11 @@ app.on("ready", () => {
 	mainWindow = createMainWindow();
 	setUpTray(app, mainWindow);
 
+	// Autostart at login
+	app.setLoginItemSettings({
+		openAtLogin: startAtLogin(),
+	});
+
 	if (!is.dev() && autoUpdate()) {
 		autoUpdater.checkForUpdatesAndNotify();
 		autoUpdater.on("update-available", () => {
@@ -183,16 +193,20 @@ app.on("ready", () => {
 	}
 
 	// Optimized for Mac OS X
-	if (process.platform === "darwin") {
+	if (is.macOS()) {
 		if (!isAppVisible()) {
 			app.dock.hide();
 		}
+	}
 
-		var forceQuit = false;
-		app.on("before-quit", () => {
-			forceQuit = true;
-		});
+	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();

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,4 +1,5 @@
 const { app, Menu } = require("electron");
+const is = require("electron-is");
 
 const { getAllPlugins } = require("./plugins/utils");
 const {
@@ -9,6 +10,7 @@ const {
 	isAppVisible,
 	isTrayEnabled,
 	setOptions,
+	startAtLogin,
 } = require("./store");
 
 const mainMenuTemplate = [
@@ -40,6 +42,20 @@ const mainMenuTemplate = [
 					setOptions({ autoUpdates: item.checked });
 				},
 			},
+			...(is.windows() || is.macOS()
+				? // Only works on Win/Mac
+				  // https://www.electronjs.org/docs/api/app#appsetloginitemsettingssettings-macos-windows
+				  [
+						{
+							label: "Start at login",
+							type: "checkbox",
+							checked: startAtLogin(),
+							click: (item) => {
+								setOptions({ startAtLogin: item.checked });
+							},
+						},
+				  ]
+				: []),
 			{
 				label: "Tray",
 				submenu: [
@@ -71,7 +87,7 @@ module.exports.mainMenuTemplate = mainMenuTemplate;
 module.exports.setApplicationMenu = () => {
 	const menuTemplate = [...mainMenuTemplate];
 	if (process.platform === "darwin") {
-		const name = app.getName();
+		const name = app.name;
 		menuTemplate.unshift({
 			label: name,
 			submenu: [

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version": "1.3.1",
+	"version": "1.5.0",
 	"description": "YouTube Music Desktop App - including custom plugins",
 	"license": "MIT",
 	"repository": "th-ch/youtube-music",
@@ -26,7 +26,7 @@
 		}
 	},
 	"scripts": {
-		"test": "xo",
+		"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",
@@ -46,23 +46,28 @@
 		"npm": "Please use yarn and not npm"
 	},
 	"dependencies": {
-		"@cliqz/adblocker-electron": "^1.14.1",
+		"@cliqz/adblocker-electron": "^1.18.3",
 		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.7.1",
-		"electron-debug": "^3.0.1",
+		"electron-debug": "^3.1.0",
 		"electron-is": "^3.0.0",
 		"electron-localshortcut": "^3.2.1",
-		"electron-store": "^5.1.1",
-		"electron-updater": "^4.2.2",
-		"node-fetch": "^2.6.0"
+		"electron-store": "^6.0.0",
+		"electron-updater": "^4.3.5",
+		"node-fetch": "^2.6.1"
 	},
 	"devDependencies": {
-		"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",
+		"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",
-		"xo": "^0.29.0"
+		"spectron": "^12.0.0",
+		"xo": "^0.33.1"
+	},
+	"resolutions": {
+		"yargs-parser": "18.1.3"
 	},
 	"xo": {
 		"envs": [

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/style.css

@@ -1,17 +1,17 @@
 .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;
+	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);
+	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 {
@@ -19,18 +19,18 @@
 }
 
 .navigation-icon {
-	display                : inline-flex;
-	-ms-flex-align         : center;
-	-webkit-align-items    : center;
-	align-items            : center;
-	-ms-flex-pack          : center;
+	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);
+	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

@@ -4,26 +4,6 @@
 	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>
-
 	<div
 		class="search-icon style-scope ytmusic-search-box"
 		role="button"
@@ -31,7 +11,10 @@
 		aria-disabled="false"
 		title="Go to previous page"
 	>
-		<div id="icon" class="style-scope paper-icon-button navigation-icon">
+		<div
+			id="icon"
+			class="tab-icon style-scope paper-icon-button navigation-icon"
+		>
 			<svg
 				viewBox="0 0 492 492"
 				preserveAspectRatio="xMidYMid meet"
@@ -41,7 +24,6 @@
 			>
 				<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>

plugins/navigation/templates/forward.html

@@ -4,26 +4,6 @@
 	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>
-	</div>
-
 	<div
 		class="search-icon style-scope ytmusic-search-box"
 		role="button"
@@ -31,7 +11,10 @@
 		aria-disabled="false"
 		title="Go to next page"
 	>
-		<div id="icon" class="style-scope paper-icon-button navigation-icon">
+		<div
+			id="icon"
+			class="tab-icon style-scope paper-icon-button navigation-icon"
+		>
 			<svg
 				viewBox="0 0 492 492"
 				preserveAspectRatio="xMidYMid meet"
@@ -41,7 +24,6 @@
 			>
 				<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"

preload.js

@@ -1,6 +1,6 @@
 const path = require("path");
 
-const { getCurrentWindow } = require("electron").remote;
+const { remote } = require("electron");
 
 const { getEnabledPlugins, store } = require("./store");
 const { fileExists }               = require("./plugins/utils");
@@ -28,5 +28,5 @@ document.addEventListener("DOMContentLoaded", () => {
 
 	// Add action for reloading
 	global.reload = () =>
-		getCurrentWindow().webContents.loadURL(store.get("url"));
+		remote.getCurrentWindow().webContents.loadURL(store.get("url"));
 });

readme.md

@@ -93,11 +93,19 @@ module.exports = () => {
 ## Build
 
 ```sh
-yarn run build
+yarn build
 ```
 
 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
 
 MIT © [th-ch](https://github.com/th-ch/youtube-music)

store/index.js

@@ -5,16 +5,17 @@ const store = new Store({
 	defaults: {
 		"window-size": {
 			width: 1100,
-			height: 550
+			height: 550,
 		},
 		url: "https://music.youtube.com",
 		plugins: ["navigation", "shortcuts", "adblocker"],
 		options: {
 			tray: false,
 			appVisible: true,
-			autoUpdates: true
-		}
-	}
+			autoUpdates: true,
+			startAtLogin: false,
+		},
+	},
 });
 
 module.exports = {
@@ -29,5 +30,6 @@ module.exports = {
 		store.set("options", { ...store.get("options"), ...options }),
 	isTrayEnabled: () => store.get("options.tray"),
 	isAppVisible: () => store.get("options.appVisible"),
-	autoUpdate: () => store.get("options.autoUpdates")
+	autoUpdate: () => store.get("options.autoUpdates"),
+	startAtLogin: () => store.get("options.startAtLogin"),
 };

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,20 @@
+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 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

@@ -22,6 +22,10 @@ module.exports.setUpTray = (app, win) => {
 	});
 	tray = new Tray(trayIcon);
 	tray.setToolTip("Youtube Music");
+	tray.setIgnoreDoubleClickEvents(true);
+	tray.on("click", () => {
+		win.isVisible() ? win.hide() : win.show();
+	});
 
 	const trayMenu = Menu.buildFromTemplate([
 		{

utils/testing.js

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