Merge pull request #596 from Araxeus/update-custom-electron-titlebar

update in-app-menu

Author: th-ch

.gitignore

@@ -2,3 +2,4 @@ node_modules
 /dist
 /assets/generated
 electron-builder.yml
+.vscode/settings.json

menu.js

@@ -33,7 +33,7 @@ const mainMenuTemplate = (win) => {
 	const refreshMenu = () => {
 		this.setApplicationMenu(win);
 		if (inAppMenuActive) {
-			win.webContents.send("updateMenu", true);
+			win.webContents.send("refreshMenu");
 		}
 	}
 	return [
@@ -254,6 +254,8 @@ const mainMenuTemplate = (win) => {
 				{ role: "zoomIn" },
 				{ role: "zoomOut" },
 				{ role: "resetZoom" },
+				{ type: "separator" },
+				{ role: "togglefullscreen" },
 			],
 		},
 		{

package.json

@@ -93,7 +93,7 @@
 		"browser-id3-writer": "^4.4.0",
 		"chokidar": "^3.5.3",
 		"custom-electron-prompt": "^1.4.1",
-		"custom-electron-titlebar": "^3.2.10",
+		"custom-electron-titlebar": "^4.1.0",
 		"discord-rpc": "^4.0.1",
 		"electron-better-web-request": "^1.0.1",
 		"electron-debug": "^3.2.0",

plugins/in-app-menu/back.js

@@ -5,14 +5,19 @@ 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 = true;
+let visible = !config.get("options.hideMenu");
 
 module.exports = (win) => {
 	// css for custom scrollbar + disable drag area(was causing bugs)
 	injectCSS(win.webContents, path.join(__dirname, "style.css"));
 
 	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", () => {
@@ -21,13 +26,8 @@ module.exports = (win) => {
 		}
 	});
 
-	win.webContents.once("did-finish-load", () => {
-		// fix bug with menu not applying on start when no internet connection available
-		setMenuVisibility(!config.get("options.hideMenu"));
-	});
-
 	function setMenuVisibility(value) {
 		visible = value;
-		win.webContents.send("updateMenu", visible);
+		win.webContents.send("refreshMenu", visible);
 	}
 };

plugins/in-app-menu/front.js

@@ -1,20 +1,28 @@
 const { ipcRenderer } = require("electron");
-const { Menu } = require("@electron/remote");
-
-
-const customTitlebar = require("custom-electron-titlebar");
+const config = require("../../config");
+const { Titlebar, Color } = require("custom-electron-titlebar");
 function $(selector) { return document.querySelector(selector); }
 
 module.exports = () => {
-	const bar = new customTitlebar.Titlebar({
-		backgroundColor: customTitlebar.Color.fromHex("#050505"),
-		itemBackgroundColor: customTitlebar.Color.fromHex("#121212"),
+	let visible = !config.get("options.hideMenu");
+	const bar = new Titlebar({
+		backgroundColor: Color.fromHex("#050505"),
+		itemBackgroundColor: Color.fromHex("#1d1d1d"),
+		svgColor: Color.WHITE,
+		menu: visible ? undefined : null
 	});
 	bar.updateTitle(" ");
 	document.title = "Youtube Music";
 
-	ipcRenderer.on("updateMenu", function (_event, showMenu) {
-		bar.updateMenu(showMenu ? Menu.getApplicationMenu() : null);
+	ipcRenderer.on("refreshMenu", (_, showMenu) => {
+		if (showMenu === undefined && !visible) return;
+		if (showMenu === false) {
+			bar.updateMenu(null);
+			visible = false;
+		} else {
+			bar.refreshMenu();
+			visible = true;
+		}
 	});
 
 	// Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)

providers/prompt-custom-titlebar.js

@@ -1,8 +1,8 @@
-const customTitlebar = require("custom-electron-titlebar");
+const { Titlebar, Color } = require("custom-electron-titlebar");
 
 module.exports = () => {
-	new customTitlebar.Titlebar({
-		backgroundColor: customTitlebar.Color.fromHex("#050505"),
+	new Titlebar({
+		backgroundColor: Color.fromHex("#050505"),
 		minimizable: false,
 		maximizable: false,
 		menu: null

providers/prompt-options.js

@@ -12,7 +12,6 @@ const promptOptions = is.macOS() ? {
     // The following are used for custom titlebar
     frame: false,
     customScript: customTitlebarPath,
-    enableRemoteModule: true
 };
 
 module.exports = () => promptOptions;

yarn.lock

@@ -716,11 +716,6 @@
     global-agent "^3.0.0"
     global-tunnel-ng "^2.7.1"
 
-"@electron/remote@^1.0.0":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@electron/remote/-/remote-1.2.2.tgz#4c390a2e669df47af973c09eec106162a296c323"
-  integrity sha512-PfnXpQGWh4vpX866NNucJRnNOzDRZcsLcLaT32fUth9k0hccsohfxprqEDYLzRg+ZK2xRrtyUN5wYYoHimMCJg==
-
 "@electron/remote@^2.0.4":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@electron/remote/-/remote-2.0.4.tgz#c3dae436aed79d1b8adcefc5a4963c06750ad5d8"
@@ -2730,12 +2725,10 @@ custom-electron-prompt@^1.4.1:
   resolved "https://registry.yarnpkg.com/custom-electron-prompt/-/custom-electron-prompt-1.4.1.tgz#79adc3d5cd9a372e5dfe43b21de70f0fe7d1c2f7"
   integrity sha512-bR6JhEusBxKnooXfFFlIIUhDbF23eaDhaYwvqcw3ZTcdEzzJew63+ilwhIwD7flRAO+sCroaLwP495VBexHg/A==
 
-custom-electron-titlebar@^3.2.10:
-  version "3.2.10"
-  resolved "https://registry.yarnpkg.com/custom-electron-titlebar/-/custom-electron-titlebar-3.2.10.tgz#8d3375e82997a97193669c249c4ebfe665a928bf"
-  integrity sha512-l2DRcuGzMGRHw5yDtcmmEve4DwVoWoJxWtsPrXeEePmWfrG3vA90eMtcbk1+qzHTrBPOpnNbVBJakdTNoxZIMQ==
-  dependencies:
-    "@electron/remote" "^1.0.0"
+custom-electron-titlebar@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/custom-electron-titlebar/-/custom-electron-titlebar-4.1.0.tgz#a34b4e557e661d604a5bb7807cd5127a68c46921"
+  integrity sha512-5iHiOAF+m97ZDBqhrn1KRtQr7j4ALEERNVqljryVx2tMcFv535wAZs4Tj7XSrbALJLHIixKvXQyypnvEf27NhA==
 
 dashdash@^1.12.0:
   version "1.14.1"