Merge pull request #64 from th-ch/ci

Improve CI

.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

.travis.yml

@@ -1,38 +0,0 @@
-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: xcode11.3
-    - os: linux
-      dist: xenial
-      services:
-        - xvfb
-
-cache:
-  yarn: false
-  directories:
-    - $HOME/.cache/electron
-    - $HOME/.cache/electron-builder
-
-script:
-  - |
-    yarn test
-    if [ "$TRAVIS_OS_NAME" == "linux" ]; then
-      yarn run release:linux
-    else
-      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:
-    - "/^v\\d+\\.\\d+\\.\\d+$/"

appveyor.yml

@@ -1,32 +0,0 @@
-image: Visual Studio 2019
-
-platform:
-  - x64
-
-cache:
-  - node_modules
-  - '%USERPROFILE%\.electron'
-
-init:
-  - git config --global core.autocrlf input
-
-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'))
-
-# @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
-
-test: off

index.js

@@ -12,12 +12,18 @@ const {
 	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.commandLine.appendSwitch(
+	"js-flags",
+	// WebAssembly flags
+	"--experimental-wasm-threads --experimental-wasm-bulk-memory"
+);
 app.allowRendererProcessReuse = true; // https://github.com/electron/electron/issues/18397
 
 // Adds debug features like hotkeys for triggering dev tools and reload
@@ -40,32 +46,7 @@ function onClosed() {
 	mainWindow = null;
 }
 
-function createMainWindow() {
+function loadPlugins(win) {
-	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: 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
-			affinity: "main-window", // main window, and addition windows should work in one process
-		},
-		frame: !is.macOS(),
-		titleBarStyle: is.macOS() ? "hiddenInset" : "default",
-	});
-	if (windowMaximized) {
-		win.maximize();
-	}
-
-	win.webContents.loadURL(store.get("url"));
-	win.on("closed", onClosed);
-
 	injectCSS(win.webContents, path.join(__dirname, "youtube-music.css"));
 	win.webContents.on("did-finish-load", () => {
 		if (is.dev()) {
@@ -82,6 +63,61 @@ function createMainWindow() {
 			handle(win);
 		});
 	});
+}
+
+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: 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",
+	});
+	if (windowMaximized) {
+		win.maximize();
+	}
+
+	win.webContents.loadURL(store.get("url"));
+	win.on("closed", onClosed);
+
+	win.on("move", () => {
+		let position = win.getPosition();
+		store.set("window-position", { x: position[0], y: position[1] });
+	});
+
+	win.on("resize", () => {
+		const windowSize = win.getSize();
+
+		store.set("window-maximized", win.isMaximized());
+		if (!win.isMaximized()) {
+			store.set("window-size", { width: windowSize[0], height: windowSize[1] });
+		}
+	});
+
+	win.once("ready-to-show", () => {
+		if (isAppVisible()) {
+			win.show();
+		}
+	});
+
+	return win;
+}
+
+app.on("browser-window-created", (event, win) => {
+	loadPlugins(win);
 
 	win.webContents.on("did-fail-load", () => {
 		if (is.dev()) {
@@ -90,6 +126,10 @@ function createMainWindow() {
 		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")) {
@@ -122,29 +162,7 @@ function createMainWindow() {
 			options.webPreferences.affinity = "main-window";
 		}
 	);
-
+});
-	win.on("move", () => {
-		let position = win.getPosition();
-		store.set("window-position", { x: position[0], y: position[1] });
-	});
-
-	win.on("resize", () => {
-		const windowSize = win.getSize();
-
-		store.set("window-maximized", win.isMaximized());
-		if (!win.isMaximized()) {
-			store.set("window-size", { width: windowSize[0], height: windowSize[1] });
-		}
-	});
-
-	win.once("ready-to-show", () => {
-		if (isAppVisible()) {
-			win.show();
-		}
-	});
-
-	return win;
-}
 
 app.on("window-all-closed", () => {
 	if (process.platform !== "darwin") {
@@ -166,10 +184,15 @@ app.on("activate", () => {
 });
 
 app.on("ready", () => {
-	setApplicationMenu();
 	mainWindow = createMainWindow();
+	setApplicationMenu(mainWindow);
 	setUpTray(app, mainWindow);
 
+	// Autostart at login
+	app.setLoginItemSettings({
+		openAtLogin: startAtLogin(),
+	});
+
 	if (!is.dev() && autoUpdate()) {
 		autoUpdater.checkForUpdatesAndNotify();
 		autoUpdater.on("update-available", () => {

menu.js

@@ -1,4 +1,5 @@
 const { app, Menu } = require("electron");
+const is = require("electron-is");
 
 const { getAllPlugins } = require("./plugins/utils");
 const {
@@ -9,9 +10,10 @@ const {
 	isAppVisible,
 	isTrayEnabled,
 	setOptions,
+	startAtLogin,
 } = require("./store");
 
-const mainMenuTemplate = [
+const mainMenuTemplate = (win) => [
 	{
 		label: "Plugins",
 		submenu: getAllPlugins().map((plugin) => {
@@ -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: [
@@ -63,13 +79,26 @@ const mainMenuTemplate = [
 					},
 				],
 			},
+			{
+				label: "Toggle DevTools",
+				// Cannot use "toggleDevTools" role in MacOS
+				click: () => {
+					const { webContents } = win;
+					if (webContents.isDevToolsOpened()) {
+						webContents.closeDevTools();
+					} else {
+						const devToolsOptions = {};
+						webContents.openDevTools(devToolsOptions);
+					}
+				},
+			},
 		],
 	},
 ];
 
 module.exports.mainMenuTemplate = mainMenuTemplate;
-module.exports.setApplicationMenu = () => {
+module.exports.setApplicationMenu = (win) => {
-	const menuTemplate = [...mainMenuTemplate];
+	const menuTemplate = [...mainMenuTemplate(win)];
 	if (process.platform === "darwin") {
 		const name = app.name;
 		menuTemplate.unshift({

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "youtube-music",
 	"productName": "YouTube Music",
-	"version": "1.3.3",
+	"version": "1.6.3",
 	"description": "YouTube Music Desktop App - including custom plugins",
 	"license": "MIT",
 	"repository": "th-ch/youtube-music",
@@ -43,29 +43,37 @@
 		"release:win": "yarn run clean && electron-builder --win -p always"
 	},
 	"engines": {
+		"node": ">=12.16.1",
 		"npm": "Please use yarn and not npm"
 	},
 	"dependencies": {
-		"@cliqz/adblocker-electron": "^1.15.0",
+		"@cliqz/adblocker-electron": "^1.18.6",
-		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.7.1",
+		"@ffmpeg/core": "^0.8.4",
+		"@ffmpeg/ffmpeg": "^0.9.5",
+		"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": "^5.2.0",
+		"electron-store": "^6.0.1",
-		"electron-updater": "^4.3.2",
+		"electron-updater": "^4.3.5",
-		"node-fetch": "^2.6.0"
+		"filenamify": "^4.2.0",
+		"node-fetch": "^2.6.1",
+		"ytdl-core": "^4.0.3"
 	},
 	"devDependencies": {
-		"devtron": "^1.4.0",
+		"electron": "^10.1.3",
-		"electron": "^8.2.4",
+		"electron-builder": "^22.8.1",
-		"electron-builder": "^22.4.1",
+		"electron-devtools-installer": "^3.1.1",
-		"electron-devtools-installer": "^3.0.0",
+		"electron-icon-maker": "0.0.5",
-		"electron-icon-maker": "0.0.4",
 		"get-port": "^5.1.1",
-		"jest": "^25.5.1",
+		"jest": "^26.4.2",
 		"rimraf": "^3.0.2",
-		"spectron": "^10.0.1",
+		"spectron": "^12.0.0",
-		"xo": "^0.29.0"
+		"xo": "^0.33.1"
+	},
+	"resolutions": {
+		"yargs-parser": "18.1.3"
 	},
 	"xo": {
 		"envs": [

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,57 @@
+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")
+);
+
+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
+	);
+};
+
+function observeMenu() {
+	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,89 @@
+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) => {
+	sendFeedback("Downloading…");
+
+	let videoName = "YouTube Music - Unknown title";
+	let videoReadableStream;
+	try {
+		videoReadableStream = ytdl(videoUrl, {
+			filter: "audioonly",
+			quality: "highestaudio",
+			highWaterMark: 32 * 1024 * 1024, // 32 MB
+		});
+	} 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);
+		});
+};
+
+const toMP3 = async (videoName, buffer, sendFeedback, sendError, reinit) => {
+	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, safeVideoName + ".mp3");
+
+		const filename = filenamify(videoName + ".mp3", { replacement: "_" });
+		writeFileSync(
+			join(downloadsFolder(), 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/style.css

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

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/utils.js

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

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

@@ -3,8 +3,7 @@
 [![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://github.com/th-ch/youtube-music/workflows/Build%20YouTube%20Music/badge.svg)](https://GitHub.com/th-ch/youtube-music/releases/)
-[![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)
 
@@ -22,10 +21,13 @@ You can check out the [latest release](https://github.com/th-ch/youtube-music/re
 ## 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
 
 ## Dev
 

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

@@ -2,6 +2,7 @@ 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 {
@@ -12,13 +13,6 @@ class TestEnvironment extends NodeEnvironment {
 	async setup() {
 		await super.setup();
 
-		const electronPath = path.resolve(
-			__dirname,
-			"..",
-			"node_modules",
-			".bin",
-			"electron"
-		);
 		const appPath = path.resolve(__dirname, "..");
 		const port = await getPort();
 

tests/index.test.js

@@ -6,6 +6,9 @@ describe("YouTube Music App", () => {
 
 		const win = app.browserWindow;
 
+		const isMenuVisible = await win.isMenuBarVisible();
+		expect(isMenuVisible).toBe(true);
+
 		const isVisible = await win.isVisible();
 		expect(isVisible).toBe(true);
 

tray.js

@@ -61,7 +61,7 @@ module.exports.setUpTray = (app, win) => {
 				win.show();
 			},
 		},
-		...mainMenuTemplate,
+		...mainMenuTemplate(win),
 		{
 			label: "Quit",
 			click: () => {