Merge pull request #988 from Araxeus/in-app-menu-icon

[in-app-menu] add toggle menu icon

plugins/in-app-menu/back.js

@@ -2,14 +2,12 @@ const path = require("path");
 
 const electronLocalshortcut = require("electron-localshortcut");
 
-const config = require("../../config");
 const { injectCSS } = require("../utils");
 
 const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-titlebar/main');
 setupTitlebar();
 
 //tracks menu visibility
-let visible = !config.get("options.hideMenu");
 
 module.exports = (win) => {
 	// css for custom scrollbar + disable drag area(was causing bugs)
@@ -18,16 +16,8 @@ module.exports = (win) => {
 	win.once("ready-to-show", () => {
 		attachTitlebarToWindow(win);
 
-		//register keyboard shortcut && hide menu if hideMenu is enabled
-		if (config.get("options.hideMenu")) {
-			electronLocalshortcut.register(win, "Esc", () => {
-				setMenuVisibility(!visible);
-			});
-		}
+		electronLocalshortcut.register(win, "`", () => {
+			win.webContents.send("toggleMenu");
+		});
 	});
-
-	function setMenuVisibility(value) {
-		visible = value;
-		win.webContents.send("refreshMenu", visible);
-	}
 };

plugins/in-app-menu/front.js

@@ -5,28 +5,31 @@ const { isEnabled } = require("../../config/plugins");
 function $(selector) { return document.querySelector(selector); }
 
 module.exports = (options) => {
-	let visible = !config.get("options.hideMenu");
+	let visible = () => !!$('.cet-menubar').firstChild;
 	const bar = new Titlebar({
+		icon: "https://cdn-icons-png.flaticon.com/512/5358/5358672.png",
 		backgroundColor: Color.fromHex("#050505"),
 		itemBackgroundColor: Color.fromHex("#1d1d1d"),
 		svgColor: Color.WHITE,
-		menu: visible ? undefined : null
+		menu: config.get("options.hideMenu") ? null : undefined
 	});
 	bar.updateTitle(" ");
 	document.title = "Youtube Music";
 
-	const hideIcon = hide => $('.cet-window-icon').style.display = hide ? 'none' : 'flex';
-
-	if (options.hideIcon) hideIcon(true);
-
-	ipcRenderer.on("refreshMenu", (_, showMenu) => {
-		if (showMenu === undefined && !visible) return;
-		if (showMenu === false) {
+	const toggleMenu = () => {
+		if (visible()) {
 			bar.updateMenu(null);
-			visible = false;
 		} else {
 			bar.refreshMenu();
-			visible = true;
+		}
+	};
+
+	$('.cet-window-icon').addEventListener('click', toggleMenu);
+	ipcRenderer.on("toggleMenu", toggleMenu);
+
+	ipcRenderer.on("refreshMenu", () => {
+		if (visible()) {
+			bar.refreshMenu();
 		}
 	});
 
@@ -36,8 +39,6 @@ module.exports = (options) => {
 		});
 	}
 
-	ipcRenderer.on("hideIcon", (_, hide) => hideIcon(hide));
-
 	// Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)
 	document.addEventListener('apiLoaded', () => {
 		setNavbarMargin();

plugins/in-app-menu/menu.js

@@ -1,14 +0,0 @@
-const { setOptions } = require("../../config/plugins");
-
-module.exports = (win, options) => [
-    {
-        label: "Hide Icon",
-        type: "checkbox",
-        checked: options.hideIcon,
-        click: (item) => {
-            win.webContents.send("hideIcon", item.checked);
-            options.hideIcon = item.checked;
-            setOptions("in-app-menu", options);
-        },
-    }
-];

plugins/in-app-menu/style.css

@@ -46,7 +46,7 @@ yt-page-navigation-progress,
 	top: 30px !important;
 }
 
-/* Custom scrollbar */
+/* custom scrollbar */
 ::-webkit-scrollbar {
 	width: 12px;
 	background-color: #030303;
@@ -59,7 +59,7 @@ yt-page-navigation-progress,
 	background-color: rgba(15, 15, 15, 0.699);
 }
 
-/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
+/* the scrollbar 'thumb' ...that marque oval shape in a scrollbar */
 ::-webkit-scrollbar-thumb:vertical {
 	border: 2px solid rgba(0, 0, 0, 0);
 
@@ -70,7 +70,7 @@ yt-page-navigation-progress,
 	-webkit-border-radius: 100px;
 }
 ::-webkit-scrollbar-thumb:vertical:active {
-	background: #4d4c4c; /* Some darker color when you click it */
+	background: #4d4c4c; /* some darker color when you click it */
 	border-radius: 100px;
 	-moz-border-radius: 100px;
 	-webkit-border-radius: 100px;
@@ -80,6 +80,17 @@ yt-page-navigation-progress,
 	background-color: inherit
 }
 
+/** hideMenu toggler **/
+.cet-window-icon {
+	-webkit-app-region: no-drag;
+}
+
+.cet-window-icon img {
+	-webkit-user-drag: none;
+    filter: invert(50%);
+}
+
+/** make navbar draggable **/
 #nav-bar-background {
     -webkit-app-region: drag;
 }