Merge pull request #21 from th-ch/add-options-and-tray

Add options and tray

index.js

@@ -6,8 +6,14 @@ const is              = require("electron-is");
 const { autoUpdater } = require("electron-updater");
 
 const { setApplicationMenu } = require("./menu");
-const { getEnabledPlugins, store } = require("./store");
+const {
+	autoUpdate,
+	getEnabledPlugins,
+	isAppVisible,
+	store,
+} = require("./store");
 const { fileExists, injectCSS } = require("./plugins/utils");
+const { setUpTray } = require("./tray");
 
 const app = electron.app;
 
@@ -45,10 +51,10 @@ function createMainWindow() {
 			nodeIntegration: false,
 			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
+			affinity: "main-window", // main window, and addition windows should work in one process
 		},
 		frame: !is.macOS(),
-		titleBarStyle: is.macOS() ? "hiddenInset": "default"
+		titleBarStyle: is.macOS() ? "hiddenInset" : "default",
 	});
 	if (windowMaximized) {
 		win.maximize();
@@ -65,7 +71,7 @@ function createMainWindow() {
 		}
 	});
 
-	getEnabledPlugins().forEach(plugin => {
+	getEnabledPlugins().forEach((plugin) => {
 		console.log("Loaded plugin - " + plugin);
 		const pluginPath = path.join(__dirname, "plugins", plugin, "back.js");
 		fileExists(pluginPath, () => {
@@ -114,7 +120,9 @@ function createMainWindow() {
 	});
 
 	win.once("ready-to-show", () => {
+		if (isAppVisible()) {
 			win.show();
+		}
 	});
 
 	return win;
@@ -142,7 +150,9 @@ app.on("activate", () => {
 app.on("ready", () => {
 	setApplicationMenu();
 	mainWindow = createMainWindow();
-	if (!is.dev()) {
+	setUpTray(app, mainWindow);
+
+	if (!is.dev() && autoUpdate()) {
 		autoUpdater.checkForUpdatesAndNotify();
 		autoUpdater.on("update-available", () => {
 			const dialogOpts = {
@@ -151,7 +161,7 @@ app.on("ready", () => {
 				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"
+					"A new version is available and can be downloaded at https://github.com/th-ch/youtube-music/releases/latest",
 			};
 			electron.dialog.showMessageBox(dialogOpts);
 		});
@@ -159,11 +169,15 @@ app.on("ready", () => {
 
 	// Optimized for Mac OS X
 	if (process.platform === "darwin") {
+		if (!isAppVisible()) {
+			app.dock.hide();
+		}
+
 		var forceQuit = false;
 		app.on("before-quit", () => {
 			forceQuit = true;
 		});
-		mainWindow.on("close", event => {
+		mainWindow.on("close", (event) => {
 			if (!forceQuit) {
 				event.preventDefault();
 				mainWindow.hide();

menu.js

@@ -1,29 +1,75 @@
 const { app, Menu } = require("electron");
 
 const { getAllPlugins } = require("./plugins/utils");
-const { isPluginEnabled, enablePlugin, disablePlugin } = require("./store");
+const {
+	isPluginEnabled,
+	enablePlugin,
+	disablePlugin,
+	autoUpdate,
+	isAppVisible,
+	isTrayEnabled,
+	setOptions,
+} = require("./store");
 
-module.exports.setApplicationMenu = () => {
+const mainMenuTemplate = [
-	const menuTemplate = [
 	{
 		label: "Plugins",
-			submenu: getAllPlugins().map(plugin => {
+		submenu: getAllPlugins().map((plugin) => {
 			return {
 				label: plugin,
 				type: "checkbox",
 				checked: isPluginEnabled(plugin),
-					click  : item => {
+				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({
@@ -38,7 +84,7 @@ module.exports.setApplicationMenu = () => {
 				{
 					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" },
-			]
+			],
 		});
 	}
 

store/index.js

@@ -8,14 +8,26 @@ const store = new Store({
 			height: 550
 		},
 		url: "https://music.youtube.com",
-		plugins: ["navigation", "shortcuts", "adblocker"]
+		plugins: ["navigation", "shortcuts", "adblocker"],
+		options: {
+			tray: false,
+			appVisible: true,
+			autoUpdates: true
+		}
 	}
 });
 
 module.exports = {
 	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)
+	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,69 @@
+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");
+
+	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);
+};

utils/youtube-music.js

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