Styled Bars [Titlebar + Scrollbar]

index.js

@@ -99,7 +99,7 @@ function createMainWindow() {
 				  }
 				: undefined),
 		},
-		frame: !is.macOS(),
+		frame:  !is.macOS() && !config.plugins.isEnabled("styled-bars"),
 		titleBarStyle: is.macOS() ? "hiddenInset" : "default",
 		autoHideMenuBar: config.get("options.hideMenu"),
 	});

package.json

@@ -67,6 +67,7 @@
 		"@ffmpeg/ffmpeg": "^0.9.7",
 		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.8.1",
 		"browser-id3-writer": "^4.4.0",
+		"custom-electron-titlebar": "^3.2.6",
 		"discord-rpc": "^3.2.0",
 		"downloads-folder": "^3.0.1",
 		"electron-debug": "^3.2.0",

plugins/styled-bars/back.js

@@ -0,0 +1,228 @@
+const { injectCSS } = require("../utils");
+const { Menu } = require("electron");
+const path = require("path");
+
+const is = require("electron-is");
+const { getAllPlugins } = require("../../plugins/utils");
+const config = require("../../config");
+//const { myBar } = require("./front");
+
+
+module.exports = win => {
+    injectCSS(win.webContents, path.join(__dirname, "style.css"));
+    //myBar.updateMenu(Menu.buildFromTemplate(mainMenuTemplate));
+    win.on('ready-to-show', () => {
+        console.log("building new menu");
+        const menu = Menu.buildFromTemplate(mainMenuTemplate(win));
+	    Menu.setApplicationMenu(menu);
+    })
+}
+
+function checkCheckbox(item) { 
+		item.checked = !item.checked
+}
+
+ const mainMenuTemplate = (win) => [
+	{
+		label: "Plugins",
+		submenu: [
+			...getAllPlugins().map((plugin) => {
+				return {
+					label: plugin,
+					type: "checkbox",
+					checked: config.plugins.isEnabled(plugin),
+					click: (item) => {
+						//checkCheckbox(item);
+						if (item.checked) {
+							config.plugins.enable(plugin);
+						} else {
+							config.plugins.disable(plugin);
+						}
+						checkCheckbox(item);
+					},
+				};
+			}),
+			{ type: "separator" },
+			{
+				label: "Advanced options",
+				click: () => {
+					config.edit();
+				},
+			},
+		],
+	},
+	{
+		label: "Options",
+		submenu: [
+			{
+				label: "Auto-update",
+				type: "checkbox",
+				checked: config.get("options.autoUpdates"),
+				click: (item) => {
+					config.set("options.autoUpdates", item.checked);
+					checkCheckbox(item);
+				},
+			},
+			{
+				label: "Disable hardware acceleration",
+				type: "checkbox",
+				checked: config.get("options.disableHardwareAcceleration"),
+				click: (item) => {
+					config.set("options.disableHardwareAcceleration", item.checked);
+				},
+			},
+			{
+				label: "Restart on config changes",
+				type: "checkbox",
+				checked: config.get("options.restartOnConfigChanges"),
+				click: (item) => {
+					config.set("options.restartOnConfigChanges", item.checked);
+					checkCheckbox(item);
+				},
+			},
+			{
+				label: "Reset App cache when app starts",
+				type: "checkbox",
+				checked: config.get("options.autoResetAppCache"),
+				click: (item) => {
+					config.set("options.autoResetAppCache", item.checked);
+					checkCheckbox(item);
+				},
+			},
+			{
+				label: "Resume last song when app starts",
+				type: "checkbox",
+				checked: config.get("options.resumeOnStart"),
+				click: (item) => {
+					config.set("options.resumeOnStart", item.checked);
+					checkCheckbox(item);
+				},
+			},
+			...(is.windows() || is.linux()
+				? [
+						{
+							label: "Hide menu",
+							type: "checkbox",
+							checked: config.get("options.hideMenu"),
+							click: (item) => {
+								config.set("options.hideMenu", item.checked);
+								checkCheckbox(item);
+							},
+						},
+				  ]
+				: []),
+			...(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: config.get("options.startAtLogin"),
+							click: (item) => {
+								config.set("options.startAtLogin", item.checked);
+								checkCheckbox(item);
+							},
+						},
+				  ]
+				: []),
+			
+			{ type: "separator" },
+			{
+				label: "Toggle DevTools",
+				// Cannot use "toggleDevTools" role in MacOS
+				click: () => {
+					const { webContents } = win;
+					if (webContents.isDevToolsOpened()) {
+						webContents.closeDevTools();
+					} else {
+						const devToolsOptions = {};
+						webContents.openDevTools(devToolsOptions);
+					}
+				},
+			},
+			{
+				label: "Advanced options",
+				click: () => {
+					config.edit();
+				},
+			},
+		],
+	},
+	{
+		label: "Tray",
+		submenu: [
+			{
+				label: "Disabled",
+				type: "radio",
+				checked: !config.get("options.tray"),
+				click: () => {
+					config.set("options.tray", false);
+					config.set("options.appVisible", true);
+				},
+			},
+			{
+				label: "Enabled + app visible",
+				type: "radio",
+				checked:
+					config.get("options.tray") && config.get("options.appVisible"),
+				click: () => {
+					config.set("options.tray", true);
+					config.set("options.appVisible", true);
+				},
+			},
+			{
+				label: "Enabled + app hidden",
+				type: "radio",
+				checked:
+					config.get("options.tray") && !config.get("options.appVisible"),
+				click: () => {
+					config.set("options.tray", true);
+					config.set("options.appVisible", false);
+				},
+			},
+			{ type: "separator" },
+			{
+				label: "Play/Pause on click",
+				type: "checkbox",
+				checked: config.get("options.trayClickPlayPause"),
+				click: (item) => {
+					config.set("options.trayClickPlayPause", item.checked);
+					checkCheckbox(item);
+				},
+			},
+		],
+	},
+	{
+		label: "View",
+		submenu: [
+			{ role: "reload" },
+			{ role: "forceReload" },
+			{ type: "separator" },
+			{ role: "zoomIn" },
+			{ role: "zoomOut" },
+			{ role: "resetZoom" },
+		],
+	},
+	{
+		label: "Navigation",
+		submenu: [
+			{
+				label: "Go back",
+				click: () => {
+					if (win.webContents.canGoBack()) {
+						win.webContents.goBack();
+					}
+				},
+			},
+			{
+				label: "Go forward",
+				click: () => {
+					if (win.webContents.canGoForward()) {
+						win.webContents.goForward();
+					}
+				},
+			},
+		],
+	},
+];

plugins/styled-bars/front.js

@@ -0,0 +1,10 @@
+const customTitlebar = require('custom-electron-titlebar');
+
+module.exports = () => {
+    const myBar = new customTitlebar.Titlebar({
+        backgroundColor: customTitlebar.Color.fromHex('#030303'),
+        itemBackgroundColor: customTitlebar.Color.fromHex('#121212'), //#020
+    });
+    myBar.updateTitle(' ');
+    document.title ="Youtube Music";
+}

plugins/styled-bars/style.css

@@ -0,0 +1,27 @@
+/* remove window dragging for nav bar (conflict with titlebar drag) */
+ytmusic-nav-bar {
+	-webkit-app-region : unset;
+}
+
+::-webkit-scrollbar {
+  width: 12px; 
+  background-color: #030303;
+  -webkit-border-radius: 100px;
+}
+/* hover effect for both scrollbar area, and scrollbar 'thumb' */
+::-webkit-scrollbar:hover {
+  background-color: rgba(15, 15, 15, 0.699);
+}
+
+/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
+::-webkit-scrollbar-thumb:vertical {
+  background-clip: padding-box;
+  border: 2px solid rgba(0, 0, 0, 0);
+
+  background: rgb(49, 0, 0);
+  -webkit-border-radius: 100px;
+}
+::-webkit-scrollbar-thumb:vertical:active {
+  background: rgb(56, 0, 0); /* Some darker color when you click it */
+  -webkit-border-radius: 100px;
+}

yarn.lock

@@ -2629,6 +2629,11 @@ cssstyle@^2.2.0:
   dependencies:
     cssom "~0.3.6"
 
+custom-electron-titlebar@^3.2.6:
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/custom-electron-titlebar/-/custom-electron-titlebar-3.2.6.tgz#4cd064efa5020954c09732efa8c667a7ee3636e3"
+  integrity sha512-P3ZGEr0eouUHqhdBBXllpuy2bFhfSmp+32HQBPcwzujjIsUhQxQj/nCpJiFa4SUGAEp1ifu/icuZdDKNNX72Tw==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"