From b8c5c87cfa0d9e3920570ef650b9a4ebe0ca8197 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 23 Mar 2021 02:46:13 +0200
Subject: [PATCH 01/25] Styled Bars [Titlebar + Scrollbar]

---
 index.js                      |   4 +-
 package.json                  |   1 +
 plugins/styled-bars/back.js   | 228 ++++++++++++++++++++++++++++++++++
 plugins/styled-bars/front.js  |  10 ++
 plugins/styled-bars/style.css |  27 ++++
 yarn.lock                     |   5 +
 6 files changed, 273 insertions(+), 2 deletions(-)
 create mode 100644 plugins/styled-bars/back.js
 create mode 100644 plugins/styled-bars/front.js
 create mode 100644 plugins/styled-bars/style.css

diff --git a/index.js b/index.js
index 8b687673..58db846c 100644
--- a/index.js
+++ b/index.js
@@ -75,7 +75,7 @@ function createMainWindow() {
 	const windowSize = config.get("window-size");
 	const windowMaximized = config.get("window-maximized");
 	const windowPosition = config.get("window-position");
-
+	
 	const win = new electron.BrowserWindow({
 		icon: icon,
 		width: windowSize.width,
@@ -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"),
 	});
diff --git a/package.json b/package.json
index f5524a37..94eab900 100644
--- a/package.json
+++ b/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",
diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
new file mode 100644
index 00000000..ab666a00
--- /dev/null
+++ b/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();
+					}
+				},
+			},
+		],
+	},
+];
\ No newline at end of file
diff --git a/plugins/styled-bars/front.js b/plugins/styled-bars/front.js
new file mode 100644
index 00000000..e3f9d32b
--- /dev/null
+++ b/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";
+}
diff --git a/plugins/styled-bars/style.css b/plugins/styled-bars/style.css
new file mode 100644
index 00000000..cac7e8b8
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index f4ac5ed3..e37cca43 100644
--- a/yarn.lock
+++ b/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"

From 8727a2e2996258a1fa0ebfaf2c9270acb876414d Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 23 Mar 2021 02:51:12 +0200
Subject: [PATCH 02/25] separate plugins to different branches

---
 plugins/taskbar-mediacontrol/back.js      |  58 ----------------------
 plugins/taskbar-mediacontrol/backward.png | Bin 570 -> 0 bytes
 plugins/taskbar-mediacontrol/forward.png  | Bin 545 -> 0 bytes
 plugins/taskbar-mediacontrol/pause.png    | Bin 300 -> 0 bytes
 plugins/taskbar-mediacontrol/play.png     | Bin 468 -> 0 bytes
 5 files changed, 58 deletions(-)
 delete mode 100644 plugins/taskbar-mediacontrol/back.js
 delete mode 100644 plugins/taskbar-mediacontrol/backward.png
 delete mode 100644 plugins/taskbar-mediacontrol/forward.png
 delete mode 100644 plugins/taskbar-mediacontrol/pause.png
 delete mode 100644 plugins/taskbar-mediacontrol/play.png

diff --git a/plugins/taskbar-mediacontrol/back.js b/plugins/taskbar-mediacontrol/back.js
deleted file mode 100644
index 64ad6815..00000000
--- a/plugins/taskbar-mediacontrol/back.js
+++ /dev/null
@@ -1,58 +0,0 @@
-const getSongControls = require('../../providers/song-controls');
-const getSongInfo = require('../../providers/song-info');
-const path = require('path');
-
-module.exports = win => {
-	win.hide = function () {
-		win.minimize();
-		win.setSkipTaskbar(true);
-	};
-
-	const show = win.show;
-	win.show = function () {
-		win.restore();
-		win.focus();
-		win.setSkipTaskbar(false);
-		show.apply(win);
-	};
-
-	win.isVisible = function () {
-		return !win.isMinimized();
-	};
-
-	const registerCallback = getSongInfo(win);
-	const {playPause, next, previous} = getSongControls(win);
-
-	// If the page is ready, register the callback
-	win.on('ready-to-show', () => {
-		registerCallback(songInfo => {
-			// Wait for song to start before setting thumbar
-			if (songInfo.title === '') {
-				return;
-			}
-
-			// Win32 require full rewrite of components
-			win.setThumbarButtons([
-				{
-					tooltip: 'Previous',
-					icon: get('backward.png'),
-					click() {previous(win.webContents);}
-				}, {
-					tooltip: 'Play/Pause',
-					// Update icon based on play state
-					icon: songInfo.isPaused ? get('play.png') : get('pause.png'),
-					click() {playPause(win.webContents);}
-				}, {
-					tooltip: 'Next',
-					icon: get('forward.png'),
-					click() {next(win.webContents);}
-				}
-			]);
-		});
-	});
-};
-
-// Util
-function get(address) {
-	return path.join(__dirname, address);
-}
diff --git a/plugins/taskbar-mediacontrol/backward.png b/plugins/taskbar-mediacontrol/backward.png
deleted file mode 100644
index 3f1a27f89aeec3b9acc06844d69e15d053d6c733..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 570
zcmV-A0>%A_P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS00009a7bBm0003S0003S0gd-g<p2Nx8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10k=s+K~z|U#n(M-Phk`X;OEzn2m=F4Q;CH}gvLjFObkLWn?x)U
z5*ADniG{&Z9}_lWV<yDFhWJQ{p_?FG7#JjyhGS?OH&WXE`|ov<yS(qY?|E|Wn|t4@
zs#F#9;XRH|jJ0v~_#K<D96PlbJyWN2Cz1>#xu4`^l7+1Sk}OSf6)&(0>#=TPe%>4w
zo{wWVizR={n-f5iJ-CSesdBptNYal%?49mCUD*Rk7AG0Ro0$}6mK{jagTpw7Wu2_i
zF(AoyT*g4BYtX?XNU|cyZ9JN7ac0ngB#Uqwr?6nQg{KWj5*)w<^meQ8v;avq;|jKP
zyYNIzx(AZ<Cb@wpb6K3pJJ5%>{_*<kX0-M-oC)9~*5D@Ue*jd~NL3xeRy=JT(11L{
zHXOuA>ws}YRn;x5!g+je70`futEw|tjXSLa8jyEYwI4e$)H<L6d5jG>f={gj#t}cO
z>N-{$JA#e23TQySR@F(Y#og8c4ajg+?K5^P8*UxYfZQ|IjT89NI$#_zT2+^f?T>5t
z(JG(;`CL^;u@MjO3a=;T=j_jD637sC|2f|5z;k@S!?sZH3o1d=5r;NBg8%>k07*qo
IM6N<$f(z#Er2qf`

diff --git a/plugins/taskbar-mediacontrol/forward.png b/plugins/taskbar-mediacontrol/forward.png
deleted file mode 100644
index 5a7ff54ec3a01ee917eddbe60161dbfe5e4054cd..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 545
zcmV++0^a?JP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS00009a7bBm0003S0003S0gd-g<p2Nx8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10iH=jK~z|U#ne4)PGK0v@!y3sA@LDOW9ov$S7IQhb`&ckMr;NW
zX(bjS7TqLl#D)zkHWh=AkdzjkI&~8g5{cY~I?`yVzU}*-e{z=RJkPoQx$Y-NRq54(
z%b3E(W^I+;atK?ot6BIhkfcA!M3VbSw)e_tZUckZfg>1CGMZ#VF9qh(hhe-=axzKR
zMzz?7x8NpTBpGT$pkW`LCb^qrpbdeBqnJ!`DapDv1Yj*LVj{`0HUt_5a3{%FlKpK6
zGz^-(q_>i6X+r>l6Znv1BuQVd1sc}lD&8hJ+=f8IHatl3ILV$i1R4(Fb&~5zHn$-F
zt8p4{u&E7!f6@zqAGm?N`1I$?HC+yWg0odM4oT*1=$60~&Q;aJ#Wt?=2)^JvcK=T}
zE7w5bHZD}v%u)`ngupYLsj8Qq9A3@{rg6NghB^(Wvj)Cl6r)x3wbS5E1@2*_s-~A4
zyi|c#X6HP%Qo#+2-GLdL!hvpt^Y;e6;~K71)#q*mFC_3BlX!>Ws`}W?;CTYSejq!0
j5xSs2k9dTBvn_+4eRaN8KPH<_00000NkvXXu0mjf*~{fK

diff --git a/plugins/taskbar-mediacontrol/pause.png b/plugins/taskbar-mediacontrol/pause.png
deleted file mode 100644
index 9268aef146d7812fa1fa3268c61a4090b04321fc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 300
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8!34
zA`oWWagwbJC@5Lt8c`CQpH@<ySd_|8US6)3nU`IhoLG>mmtT}V`<;yxP|-?H7srr@
z*0<9)@-_$XxX4cw+Q`hTa4}`;8Hdw0Jd@bADcEY(Nrg|`KQVZLNczdMcW>6M)m$2o
zy?{OK0qdFr%o$BJ$uqB}r7hskXE|+^z<esa|KOPyPs|tmW=$xXCYrz=rG9_b^Rqr%
zt;JuJu744pQ1Ip8o-^wN9!&eP>8Eo;uonZ9Km!Ad0s|w51CZ&!vO#@s&Od<%kr(eD
nc=V#Xa%OD(pE>is&Z}q0j`Ud-U7eN=bTosftDnm{r-UW|uH<f1

diff --git a/plugins/taskbar-mediacontrol/play.png b/plugins/taskbar-mediacontrol/play.png
deleted file mode 100644
index 27d9ad1535ff0de4af3363f9195012d45dbef306..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 468
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dy%*9TgAsieWw;%dH0CG7CJR*x3
z7?`$zFk^ksOB<k|WQl7;NpOBzNqJ&XDnogBxn5>oc5!lIL8@MUQTpt6Hc~)EjR8I(
zuK)l42Qmi`G_G4^1hihOB*-tAfr*)gl}$)QR8~t{N6*&VHy}DWBe$S<^3)kScJ1D~
z@8Fdix9+@s|KazaoHN@pfV%oUT^vI!dY4|d6gp%e;1bAq?9K0eQp{|B-q$-YX(&b8
zCp-#Q&AcM(^g^~f=OW+M%V!whZH_W{VEjCgcSb$q(|ysL)BZf$>G_BuFPO1Fifh50
z(nkz(uT}USSP3$;?_-F&ZNj%8V(TLYy_F1~+8B=gXR>zE(>%Y$_2jCjo1g5~H4w7o
k%q@Mh)gsDPcm0+Byqg_j_7?w&HUNdEr>mdKI;Vst01fbf5dZ)H


From 87558c67c8e8cdcdc0e2fa27402d18e3a0151786 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 23 Mar 2021 03:50:59 +0200
Subject: [PATCH 03/25] stylecheck

---
 index.js                     | 12 +++----
 plugins/styled-bars/back.js  | 64 ++++++++++++++++++------------------
 plugins/styled-bars/front.js |  2 +-
 3 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/index.js b/index.js
index 58db846c..559bd20d 100644
--- a/index.js
+++ b/index.js
@@ -75,7 +75,7 @@ function createMainWindow() {
 	const windowSize = config.get("window-size");
 	const windowMaximized = config.get("window-maximized");
 	const windowPosition = config.get("window-position");
-	
+
 	const win = new electron.BrowserWindow({
 		icon: icon,
 		width: windowSize.width,
@@ -93,13 +93,13 @@ function createMainWindow() {
 			affinity: "main-window", // main window, and addition windows should work in one process
 			...(isTesting()
 				? {
-						// Only necessary when testing with Spectron
-						contextIsolation: false,
-						nodeIntegration: true,
-				  }
+					// Only necessary when testing with Spectron
+					contextIsolation: false,
+					nodeIntegration: true,
+				}
 				: undefined),
 		},
-		frame:  !is.macOS() && !config.plugins.isEnabled("styled-bars"),
+		frame: !is.macOS() && !config.plugins.isEnabled("styled-bars"),
 		titleBarStyle: is.macOS() ? "hiddenInset" : "default",
 		autoHideMenuBar: config.get("options.hideMenu"),
 	});
diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index ab666a00..ba591a65 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -5,24 +5,24 @@ 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);
-    })
+	//css for custom scrollbar + disable drag area(was causing bugs)
+	injectCSS(win.webContents, path.join(__dirname, "style.css"));
+	win.on('ready-to-show', () => {
+		const menu = Menu.buildFromTemplate(mainMenuTemplate(win));
+		Menu.setApplicationMenu(menu);
+	})
 }
 
-function checkCheckbox(item) { 
-		item.checked = !item.checked
+function checkCheckbox(item) {
+	item.checked = !item.checked
 }
 
- const mainMenuTemplate = (win) => [
+//create new template because it works abit different (need to manually change checkbox + tray is out of submenu)
+const mainMenuTemplate = (win) => [
 	{
 		label: "Plugins",
 		submenu: [
@@ -100,33 +100,33 @@ function 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);
-							},
+					{
+						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);
-							},
+				// 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",
diff --git a/plugins/styled-bars/front.js b/plugins/styled-bars/front.js
index e3f9d32b..f4db7888 100644
--- a/plugins/styled-bars/front.js
+++ b/plugins/styled-bars/front.js
@@ -6,5 +6,5 @@ module.exports = () => {
         itemBackgroundColor: customTitlebar.Color.fromHex('#121212'), //#020
     });
     myBar.updateTitle(' ');
-    document.title ="Youtube Music";
+    document.title = "Youtube Music";
 }

From 459ebf707069e8b6a510b9926421906de956070d Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 23 Mar 2021 03:58:19 +0200
Subject: [PATCH 04/25] xo lint --fix

---
 plugins/styled-bars/back.js  | 262 +++++++++++++++++------------------
 plugins/styled-bars/front.js |  14 +-
 2 files changed, 137 insertions(+), 139 deletions(-)

diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index ba591a65..b21903fb 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -1,228 +1,226 @@
-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 {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');
 
 module.exports = win => {
-	//css for custom scrollbar + disable drag area(was causing bugs)
-	injectCSS(win.webContents, path.join(__dirname, "style.css"));
+	// css for custom scrollbar + disable drag area(was causing bugs)
+	injectCSS(win.webContents, path.join(__dirname, 'style.css'));
 	win.on('ready-to-show', () => {
 		const menu = Menu.buildFromTemplate(mainMenuTemplate(win));
 		Menu.setApplicationMenu(menu);
-	})
-}
+	});
+};
 
 function checkCheckbox(item) {
-	item.checked = !item.checked
+	item.checked = !item.checked;
 }
 
-//create new template because it works abit different (need to manually change checkbox + tray is out of submenu)
-const mainMenuTemplate = (win) => [
+// Create new template because it works abit different (need to manually change checkbox + tray is out of submenu)
+const mainMenuTemplate = win => [
 	{
-		label: "Plugins",
+		label: 'Plugins',
 		submenu: [
-			...getAllPlugins().map((plugin) => {
+			...getAllPlugins().map(plugin => {
 				return {
 					label: plugin,
-					type: "checkbox",
+					type: 'checkbox',
 					checked: config.plugins.isEnabled(plugin),
-					click: (item) => {
-						//checkCheckbox(item);
+					click: item => {
+						// CheckCheckbox(item);
 						if (item.checked) {
 							config.plugins.enable(plugin);
 						} else {
 							config.plugins.disable(plugin);
 						}
+
 						checkCheckbox(item);
-					},
+					}
 				};
 			}),
-			{ type: "separator" },
+			{type: 'separator'},
 			{
-				label: "Advanced options",
+				label: 'Advanced options',
 				click: () => {
 					config.edit();
-				},
-			},
-		],
+				}
+			}
+		]
 	},
 	{
-		label: "Options",
+		label: 'Options',
 		submenu: [
 			{
-				label: "Auto-update",
-				type: "checkbox",
-				checked: config.get("options.autoUpdates"),
-				click: (item) => {
-					config.set("options.autoUpdates", item.checked);
+				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: '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);
+				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);
+				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);
+				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()
-				? [
+			...(is.windows() || is.linux() ?
+				[
 					{
-						label: "Hide menu",
-						type: "checkbox",
-						checked: config.get("options.hideMenu"),
-						click: (item) => {
-							config.set("options.hideMenu", item.checked);
+						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
+						}
+					}
+				] :
+				[]),
+			...(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);
+						label: 'Start at login',
+						type: 'checkbox',
+						checked: config.get('options.startAtLogin'),
+						click: item => {
+							config.set('options.startAtLogin', item.checked);
 							checkCheckbox(item);
-						},
-					},
-				]
-				: []),
+						}
+					}
+				] :
+				[]),
 
-			{ type: "separator" },
+			{type: 'separator'},
 			{
-				label: "Toggle DevTools",
+				label: 'Toggle DevTools',
 				// Cannot use "toggleDevTools" role in MacOS
 				click: () => {
-					const { webContents } = win;
+					const {webContents} = win;
 					if (webContents.isDevToolsOpened()) {
 						webContents.closeDevTools();
 					} else {
 						const devToolsOptions = {};
 						webContents.openDevTools(devToolsOptions);
 					}
-				},
+				}
 			},
 			{
-				label: "Advanced options",
+				label: 'Advanced options',
 				click: () => {
 					config.edit();
-				},
-			},
-		],
+				}
+			}
+		]
 	},
 	{
-		label: "Tray",
+		label: 'Tray',
 		submenu: [
 			{
-				label: "Disabled",
-				type: "radio",
-				checked: !config.get("options.tray"),
+				label: 'Disabled',
+				type: 'radio',
+				checked: !config.get('options.tray'),
 				click: () => {
-					config.set("options.tray", false);
-					config.set("options.appVisible", true);
-				},
+					config.set('options.tray', false);
+					config.set('options.appVisible', true);
+				}
 			},
 			{
-				label: "Enabled + app visible",
-				type: "radio",
+				label: 'Enabled + app visible',
+				type: 'radio',
 				checked:
-					config.get("options.tray") && config.get("options.appVisible"),
+					config.get('options.tray') && config.get('options.appVisible'),
 				click: () => {
-					config.set("options.tray", true);
-					config.set("options.appVisible", true);
-				},
+					config.set('options.tray', true);
+					config.set('options.appVisible', true);
+				}
 			},
 			{
-				label: "Enabled + app hidden",
-				type: "radio",
+				label: 'Enabled + app hidden',
+				type: 'radio',
 				checked:
-					config.get("options.tray") && !config.get("options.appVisible"),
+					config.get('options.tray') && !config.get('options.appVisible'),
 				click: () => {
-					config.set("options.tray", true);
-					config.set("options.appVisible", false);
-				},
+					config.set('options.tray', true);
+					config.set('options.appVisible', false);
+				}
 			},
-			{ type: "separator" },
+			{type: 'separator'},
 			{
-				label: "Play/Pause on click",
-				type: "checkbox",
-				checked: config.get("options.trayClickPlayPause"),
-				click: (item) => {
-					config.set("options.trayClickPlayPause", item.checked);
+				label: 'Play/Pause on click',
+				type: 'checkbox',
+				checked: config.get('options.trayClickPlayPause'),
+				click: item => {
+					config.set('options.trayClickPlayPause', item.checked);
 					checkCheckbox(item);
-				},
-			},
-		],
+				}
+			}
+		]
 	},
 	{
-		label: "View",
+		label: 'View',
 		submenu: [
-			{ role: "reload" },
-			{ role: "forceReload" },
-			{ type: "separator" },
-			{ role: "zoomIn" },
-			{ role: "zoomOut" },
-			{ role: "resetZoom" },
-		],
+			{role: 'reload'},
+			{role: 'forceReload'},
+			{type: 'separator'},
+			{role: 'zoomIn'},
+			{role: 'zoomOut'},
+			{role: 'resetZoom'}
+		]
 	},
 	{
-		label: "Navigation",
+		label: 'Navigation',
 		submenu: [
 			{
-				label: "Go back",
+				label: 'Go back',
 				click: () => {
 					if (win.webContents.canGoBack()) {
 						win.webContents.goBack();
 					}
-				},
+				}
 			},
 			{
-				label: "Go forward",
+				label: 'Go forward',
 				click: () => {
 					if (win.webContents.canGoForward()) {
 						win.webContents.goForward();
 					}
-				},
-			},
-		],
-	},
-];
\ No newline at end of file
+				}
+			}
+		]
+	}
+];
diff --git a/plugins/styled-bars/front.js b/plugins/styled-bars/front.js
index f4db7888..d613ef86 100644
--- a/plugins/styled-bars/front.js
+++ b/plugins/styled-bars/front.js
@@ -1,10 +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";
-}
+	const myBar = new customTitlebar.Titlebar({
+		backgroundColor: customTitlebar.Color.fromHex('#030303'),
+		itemBackgroundColor: customTitlebar.Color.fromHex('#121212') // #020
+	});
+	myBar.updateTitle(' ');
+	document.title = 'Youtube Music';
+};

From f1dbe4ab6c9c65331f8d7b30a5c350dbc11cad2f Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 23 Mar 2021 15:07:31 +0200
Subject: [PATCH 05/25] Allow hide menu options (uses Escape key)

---
 plugins/styled-bars/back.js  | 24 +++++++++++++++++++++---
 plugins/styled-bars/front.js | 15 +++++++++++++--
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index b21903fb..7a59e5e7 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -1,17 +1,35 @@
 const {injectCSS} = require('../utils');
 const {Menu} = require('electron');
 const path = require('path');
-
+const electronLocalshortcut = require("electron-localshortcut");
 const is = require('electron-is');
 const {getAllPlugins} = require('../../plugins/utils');
 const config = require('../../config');
+const {ipcMain} = require('electron')
 
 module.exports = win => {
 	// css for custom scrollbar + disable drag area(was causing bugs)
 	injectCSS(win.webContents, path.join(__dirname, 'style.css'));
 	win.on('ready-to-show', () => {
-		const menu = Menu.buildFromTemplate(mainMenuTemplate(win));
+		//build new menu
+		const template = mainMenuTemplate(win)
+		const menu = Menu.buildFromTemplate(template);
 		Menu.setApplicationMenu(menu);
+		
+		//register keyboard shortcut && hide menu if hideMenu is enabled
+		if (config.get('options.hideMenu')) {
+			win.webContents.send('updateMenu', false); 
+			var enabled=  false;
+			electronLocalshortcut.register(win, 'Esc', () => {
+				if(enabled) {
+					win.webContents.send('updateMenu', false); 
+					enabled = false;
+				} else {
+					win.webContents.send('updateMenu', true); 
+					enabled =  true;
+				}
+			});
+		} 
 	});
 };
 
@@ -100,7 +118,7 @@ const mainMenuTemplate = win => [
 			...(is.windows() || is.linux() ?
 				[
 					{
-						label: 'Hide menu',
+						label: 'Hide menu (show with Escape key)',
 						type: 'checkbox',
 						checked: config.get('options.hideMenu'),
 						click: item => {
diff --git a/plugins/styled-bars/front.js b/plugins/styled-bars/front.js
index d613ef86..e11427da 100644
--- a/plugins/styled-bars/front.js
+++ b/plugins/styled-bars/front.js
@@ -1,10 +1,21 @@
 const customTitlebar = require('custom-electron-titlebar');
+const {remote, ipcRenderer} = require('electron');
 
 module.exports = () => {
+	//const windowProxy = window.open('https://music.youtube.com', null);
 	const myBar = new customTitlebar.Titlebar({
 		backgroundColor: customTitlebar.Color.fromHex('#030303'),
-		itemBackgroundColor: customTitlebar.Color.fromHex('#121212') // #020
+		itemBackgroundColor: customTitlebar.Color.fromHex('#121212')
 	});
 	myBar.updateTitle(' ');
 	document.title = 'Youtube Music';
-};
+
+	ipcRenderer.on('updateMenu', function(event, menu) {
+		//let menu = Menu.buildFromTemplate(template);
+		//Menu.setApplicationMenu(menu);
+		if(menu)
+			myBar.updateMenu(remote.Menu.getApplicationMenu());
+		else
+			myBar.updateMenu(null);
+	});
+};
\ No newline at end of file

From c1f176fa21edf76c1e1188637e4d143a6540f364 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 23 Mar 2021 16:17:50 +0200
Subject: [PATCH 06/25] Fixed MenuItem roles + add restart+quit button

---
 plugins/styled-bars/back.js  | 37 +++++++++++++++++++++++++++++-------
 plugins/styled-bars/front.js | 13 +++++++++----
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index 7a59e5e7..95593285 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -5,7 +5,7 @@ const electronLocalshortcut = require("electron-localshortcut");
 const is = require('electron-is');
 const {getAllPlugins} = require('../../plugins/utils');
 const config = require('../../config');
-const {ipcMain} = require('electron')
+const { app } = require('electron')
 
 module.exports = win => {
 	// css for custom scrollbar + disable drag area(was causing bugs)
@@ -15,7 +15,7 @@ module.exports = win => {
 		const template = mainMenuTemplate(win)
 		const menu = Menu.buildFromTemplate(template);
 		Menu.setApplicationMenu(menu);
-		
+
 		//register keyboard shortcut && hide menu if hideMenu is enabled
 		if (config.get('options.hideMenu')) {
 			win.webContents.send('updateMenu', false); 
@@ -212,12 +212,27 @@ const mainMenuTemplate = win => [
 	{
 		label: 'View',
 		submenu: [
-			{role: 'reload'},
-			{role: 'forceReload'},
+			{
+			label: 'Reload',
+			click: () => {win.webContents.reload();}
+			},
+			{
+				label: 'Force Reload',
+				click: () => {win.webContents.reloadIgnoringCache();}
+			},
 			{type: 'separator'},
-			{role: 'zoomIn'},
-			{role: 'zoomOut'},
-			{role: 'resetZoom'}
+			{
+				label: 'Zoom In',
+				click: () => {win.webContents.setZoomLevel(win.webContents.getZoomLevel() + 1);}
+			},
+			{
+				label: 'Zoom Out',
+				click: () => {win.webContents.setZoomLevel(win.webContents.getZoomLevel() - 1);}
+			},
+			{
+				label: 'Reset Zoom',
+				click: () => {win.webContents.setZoomLevel(0)}
+			}
 		]
 	},
 	{
@@ -238,6 +253,14 @@ const mainMenuTemplate = win => [
 						win.webContents.goForward();
 					}
 				}
+			} ,
+			{
+				label: 'Restart App',
+				click: () => {app.relaunch(); app.quit();}
+			} ,
+			{
+				label: 'Quit App',
+				click: () => {app.quit();}
 			}
 		]
 	}
diff --git a/plugins/styled-bars/front.js b/plugins/styled-bars/front.js
index e11427da..6ea48454 100644
--- a/plugins/styled-bars/front.js
+++ b/plugins/styled-bars/front.js
@@ -10,12 +10,17 @@ module.exports = () => {
 	myBar.updateTitle(' ');
 	document.title = 'Youtube Music';
 
-	ipcRenderer.on('updateMenu', function(event, menu) {
+	ipcRenderer.on('updateMenu', function (event, menu) {
 		//let menu = Menu.buildFromTemplate(template);
 		//Menu.setApplicationMenu(menu);
-		if(menu)
+		if (menu) {
 			myBar.updateMenu(remote.Menu.getApplicationMenu());
-		else
-			myBar.updateMenu(null);
+		} else {
+			try {
+				myBar.updateMenu(null);
+			} catch (e) {
+				//will always throw type error - null isn't menu, but it works
+			}
+		}
 	});
 };
\ No newline at end of file

From a12d5a982fbef621c897dc9a2f18d8335e9963e7 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 23 Mar 2021 19:29:07 +0200
Subject: [PATCH 07/25] fix library UI bug

---
 plugins/styled-bars/style.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/plugins/styled-bars/style.css b/plugins/styled-bars/style.css
index cac7e8b8..fd531285 100644
--- a/plugins/styled-bars/style.css
+++ b/plugins/styled-bars/style.css
@@ -3,6 +3,15 @@ ytmusic-nav-bar {
 	-webkit-app-region : unset;
 }
 
+.center-content.ytmusic-nav-bar {
+  background: black;
+}
+yt-page-navigation-progress, #progress.yt-page-navigation-progress {
+  top: 75px !important;
+}
+ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer {
+  top: 60px !important;
+}
 ::-webkit-scrollbar {
   width: 12px; 
   background-color: #030303;

From f9c66ead507ff4b208e017b5426674f16606df79 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 23 Mar 2021 19:47:47 +0200
Subject: [PATCH 08/25] css color fix

---
 plugins/styled-bars/style.css | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/plugins/styled-bars/style.css b/plugins/styled-bars/style.css
index fd531285..da4c5c39 100644
--- a/plugins/styled-bars/style.css
+++ b/plugins/styled-bars/style.css
@@ -3,14 +3,22 @@ ytmusic-nav-bar {
 	-webkit-app-region : unset;
 }
 
+ytmusic-app-layout {
+	--ytmusic-nav-bar-height: 120px;
+}
+
+ytmusic-search-box.ytmusic-nav-bar {
+	margin-top: 25px;
+}
+
 .center-content.ytmusic-nav-bar {
-  background: black;
+  background: #030303;
 }
 yt-page-navigation-progress, #progress.yt-page-navigation-progress {
-  top: 75px !important;
+  top: 90px !important;
 }
 ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer {
-  top: 60px !important;
+  top: 90px !important;
 }
 ::-webkit-scrollbar {
   width: 12px; 

From 7d8afe3476d1dd1708c6a0a730d8669c2bd300fe Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 23 Mar 2021 22:03:48 +0200
Subject: [PATCH 09/25] style check

---
 index.js                      | 8 ++++----
 plugins/styled-bars/back.js   | 4 ++--
 plugins/styled-bars/front.js  | 3 ---
 plugins/styled-bars/style.css | 2 ++
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/index.js b/index.js
index 559bd20d..fabf3312 100644
--- a/index.js
+++ b/index.js
@@ -93,10 +93,10 @@ function createMainWindow() {
 			affinity: "main-window", // main window, and addition windows should work in one process
 			...(isTesting()
 				? {
-					// Only necessary when testing with Spectron
-					contextIsolation: false,
-					nodeIntegration: true,
-				}
+						// Only necessary when testing with Spectron
+						contextIsolation: false,
+						nodeIntegration: true,
+				  }
 				: undefined),
 		},
 		frame: !is.macOS() && !config.plugins.isEnabled("styled-bars"),
diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index 95593285..83f4570a 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -1,11 +1,10 @@
 const {injectCSS} = require('../utils');
-const {Menu} = require('electron');
+const {Menu , app} = require('electron');
 const path = require('path');
 const electronLocalshortcut = require("electron-localshortcut");
 const is = require('electron-is');
 const {getAllPlugins} = require('../../plugins/utils');
 const config = require('../../config');
-const { app } = require('electron')
 
 module.exports = win => {
 	// css for custom scrollbar + disable drag area(was causing bugs)
@@ -86,6 +85,7 @@ const mainMenuTemplate = win => [
 				checked: config.get('options.disableHardwareAcceleration'),
 				click: item => {
 					config.set('options.disableHardwareAcceleration', item.checked);
+					checkCheckbox(item);
 				}
 			},
 			{
diff --git a/plugins/styled-bars/front.js b/plugins/styled-bars/front.js
index 6ea48454..e4eae2c0 100644
--- a/plugins/styled-bars/front.js
+++ b/plugins/styled-bars/front.js
@@ -2,7 +2,6 @@ const customTitlebar = require('custom-electron-titlebar');
 const {remote, ipcRenderer} = require('electron');
 
 module.exports = () => {
-	//const windowProxy = window.open('https://music.youtube.com', null);
 	const myBar = new customTitlebar.Titlebar({
 		backgroundColor: customTitlebar.Color.fromHex('#030303'),
 		itemBackgroundColor: customTitlebar.Color.fromHex('#121212')
@@ -11,8 +10,6 @@ module.exports = () => {
 	document.title = 'Youtube Music';
 
 	ipcRenderer.on('updateMenu', function (event, menu) {
-		//let menu = Menu.buildFromTemplate(template);
-		//Menu.setApplicationMenu(menu);
 		if (menu) {
 			myBar.updateMenu(remote.Menu.getApplicationMenu());
 		} else {
diff --git a/plugins/styled-bars/style.css b/plugins/styled-bars/style.css
index da4c5c39..b629695c 100644
--- a/plugins/styled-bars/style.css
+++ b/plugins/styled-bars/style.css
@@ -3,6 +3,7 @@ ytmusic-nav-bar {
 	-webkit-app-region : unset;
 }
 
+/* Move navBar downwards and make it opaque */
 ytmusic-app-layout {
 	--ytmusic-nav-bar-height: 120px;
 }
@@ -20,6 +21,7 @@ yt-page-navigation-progress, #progress.yt-page-navigation-progress {
 ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer {
   top: 90px !important;
 }
+/* Custom scrollbar */
 ::-webkit-scrollbar {
   width: 12px; 
   background-color: #030303;

From 92603a1e7f84ef163ade86a9932a61a70f4450fa Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 23 Mar 2021 22:09:10 +0200
Subject: [PATCH 10/25] fix search button alignment

---
 plugins/styled-bars/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/styled-bars/style.css b/plugins/styled-bars/style.css
index b629695c..a9c90ebe 100644
--- a/plugins/styled-bars/style.css
+++ b/plugins/styled-bars/style.css
@@ -9,7 +9,7 @@ ytmusic-app-layout {
 }
 
 ytmusic-search-box.ytmusic-nav-bar {
-	margin-top: 25px;
+	margin-top: 30px;
 }
 
 .center-content.ytmusic-nav-bar {

From 5fd11bf0099edffbdedbc3c055213f804d39510d Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 23 Mar 2021 22:15:16 +0200
Subject: [PATCH 11/25] fixed search page header height

---
 plugins/styled-bars/style.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/plugins/styled-bars/style.css b/plugins/styled-bars/style.css
index a9c90ebe..beb3db58 100644
--- a/plugins/styled-bars/style.css
+++ b/plugins/styled-bars/style.css
@@ -9,7 +9,7 @@ ytmusic-app-layout {
 }
 
 ytmusic-search-box.ytmusic-nav-bar {
-	margin-top: 30px;
+	margin-top: 29px;
 }
 
 .center-content.ytmusic-nav-bar {
@@ -21,6 +21,9 @@ yt-page-navigation-progress, #progress.yt-page-navigation-progress {
 ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer {
   top: 90px !important;
 }
+ytmusic-header-renderer.ytmusic-search-page {
+  top: 90px !important;
+}
 /* Custom scrollbar */
 ::-webkit-scrollbar {
   width: 12px; 

From d3337c7d3ce95c58b32fcc390f989f75a85e1d69 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Wed, 24 Mar 2021 00:13:38 +0200
Subject: [PATCH 12/25] titlebar dragArea fix + refactor

---
 plugins/styled-bars/style.css | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/plugins/styled-bars/style.css b/plugins/styled-bars/style.css
index beb3db58..57235c33 100644
--- a/plugins/styled-bars/style.css
+++ b/plugins/styled-bars/style.css
@@ -1,5 +1,7 @@
 /* remove window dragging for nav bar (conflict with titlebar drag) */
-ytmusic-nav-bar {
+ytmusic-nav-bar, 
+.tab-titleiron-icon,
+ytmusic-pivot-bar-item-renderer {
 	-webkit-app-region : unset;
 }
 
@@ -15,12 +17,9 @@ ytmusic-search-box.ytmusic-nav-bar {
 .center-content.ytmusic-nav-bar {
   background: #030303;
 }
-yt-page-navigation-progress, #progress.yt-page-navigation-progress {
-  top: 90px !important;
-}
-ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer {
-  top: 90px !important;
-}
+yt-page-navigation-progress, 
+#progress.yt-page-navigation-progress,
+ytmusic-item-section-renderer[has-item-section-tabbed-header-renderer_] #header.ytmusic-item-section-renderer,
 ytmusic-header-renderer.ytmusic-search-page {
   top: 90px !important;
 }

From 5218b80cabbde71b427496d0640fde224465d953 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Thu, 25 Mar 2021 01:00:06 +0200
Subject: [PATCH 13/25] preparation for plugin menu update

---
 plugins/styled-bars/back.js   | 136 +++++++++++++++++++---------------
 plugins/styled-bars/style.css |   4 +
 2 files changed, 82 insertions(+), 58 deletions(-)

diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index 83f4570a..f0a0a13a 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -1,11 +1,26 @@
 const {injectCSS} = require('../utils');
 const {Menu , app} = require('electron');
+const { existsSync } = require("fs");
 const path = require('path');
 const electronLocalshortcut = require("electron-localshortcut");
 const is = require('electron-is');
 const {getAllPlugins} = require('../../plugins/utils');
 const config = require('../../config');
 
+const pluginEnabledMenu = (plugin, label = "") => ({
+	label: label || plugin,
+	type: "checkbox",
+	checked: config.plugins.isEnabled(plugin),
+	click: (item) => {
+		if (item.checked) {
+			config.plugins.enable(plugin);
+		} else {
+			config.plugins.disable(plugin);
+		}
+		checkCheckbox(item);
+	},
+});
+
 module.exports = win => {
 	// css for custom scrollbar + disable drag area(was causing bugs)
 	injectCSS(win.webContents, path.join(__dirname, 'style.css'));
@@ -42,21 +57,26 @@ 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);
-						}
+				const pluginPath = path.join(__dirname, "plugins", plugin, "menu.js");
+				
+				if (!config.plugins.isEnabled(plugin)) {
+					return pluginEnabledMenu(plugin);
+				}
 
-						checkCheckbox(item);
-					}
-				};
+				if (existsSync(pluginPath)) {
+					const getPluginMenu = require(pluginPath);
+					return {
+						label: plugin,
+						submenu: [
+							pluginEnabledMenu(plugin, "Enabled"),
+							...getPluginMenu(win, config.plugins.getOptions(plugin), () =>
+								module.exports.setApplicationMenu(win)
+							),
+						],
+					};
+				}
+
+				return pluginEnabledMenu(plugin);
 			}),
 			{type: 'separator'},
 			{
@@ -142,6 +162,50 @@ const mainMenuTemplate = win => [
 					}
 				] :
 				[]),
+				{
+					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);
+							}
+						}
+					]
+				},
 
 			{type: 'separator'},
 			{
@@ -165,50 +229,6 @@ const mainMenuTemplate = win => [
 			}
 		]
 	},
-	{
-		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: [
diff --git a/plugins/styled-bars/style.css b/plugins/styled-bars/style.css
index 57235c33..88fb8818 100644
--- a/plugins/styled-bars/style.css
+++ b/plugins/styled-bars/style.css
@@ -1,3 +1,7 @@
+/* allow submenu's to show correctly */
+.menubar-menu-container{
+  overflow-y: visible !important;
+}
 /* remove window dragging for nav bar (conflict with titlebar drag) */
 ytmusic-nav-bar, 
 .tab-titleiron-icon,

From d4daf7231c1959d4b319d90271f3edba7aba1d3c Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Thu, 25 Mar 2021 01:36:22 +0200
Subject: [PATCH 14/25] merge source (#3)

* Added Discord timeout

* Add getOptions in plugin util

* Mutex in ffmpeg conversion (only supports one command at a time)

* Add menu customization in plugin system

* Add ytpl package (playlist info)

* Handle ffmpeg metadata flags when metadata is not present

* Only use artist in file name if present

* Export sendError method

* Handle image not present in metadata util

* Add downloader utils (getFolder and default menu label)

* Pass (optional) existing metadata and subfolder in mp3 converter

* Add listener to download playlist

* Add custom menu in downloader plugin ("download playlist" item)

* nit: fix main CSS style

* Only set the "enable" item in menu if plugin not enabled

* Navigation plugin: inject HTML once CSS is loaded

Co-authored-by: Sem Visscher <semvisscher10@gmail.com>
Co-authored-by: TC <th-ch@users.noreply.github.com>
---
 config/defaults.js                     |  4 ++
 config/plugins.js                      |  5 ++
 menu.js                                | 48 ++++++++++----
 package.json                           |  4 +-
 plugins/discord/back.js                | 10 ++-
 plugins/downloader/back.js             | 25 ++++----
 plugins/downloader/menu.js             | 63 +++++++++++++++++++
 plugins/downloader/utils.js            |  4 ++
 plugins/downloader/youtube-dl.js       | 87 +++++++++++++++++++-------
 plugins/navigation/back.js             |  5 +-
 plugins/navigation/front.js            | 20 +++---
 plugins/navigation/templates/back.html |  2 +-
 plugins/utils.js                       |  9 ++-
 yarn.lock                              | 21 ++++++-
 youtube-music.css                      |  2 +-
 15 files changed, 248 insertions(+), 61 deletions(-)
 create mode 100644 plugins/downloader/menu.js
 create mode 100644 plugins/downloader/utils.js

diff --git a/config/defaults.js b/config/defaults.js
index 6238e114..855b1964 100644
--- a/config/defaults.js
+++ b/config/defaults.js
@@ -35,6 +35,10 @@ const defaultConfig = {
 			ffmpegArgs: [], // e.g. ["-b:a", "192k"] for an audio bitrate of 192kb/s
 			downloadFolder: undefined, // Custom download folder (absolute path)
 		},
+		discord: {
+			activityTimoutEnabled: true, // if enabled, the discord rich presence gets cleared when music paused after the time specified below
+			activityTimoutTime: 10 * 60 * 1000 // 10 minutes
+		},
 	},
 };
 
diff --git a/config/plugins.js b/config/plugins.js
index 03962c3d..7a73335c 100644
--- a/config/plugins.js
+++ b/config/plugins.js
@@ -24,6 +24,10 @@ function setOptions(plugin, options) {
 	});
 }
 
+function getOptions(plugin) {
+	return store.get("plugins")[plugin];
+}
+
 function enable(plugin) {
 	setOptions(plugin, { enabled: true });
 }
@@ -38,4 +42,5 @@ module.exports = {
 	enable,
 	disable,
 	setOptions,
+	getOptions,
 };
diff --git a/menu.js b/menu.js
index 661929ca..91bb073d 100644
--- a/menu.js
+++ b/menu.js
@@ -1,26 +1,50 @@
+const { existsSync } = require("fs");
+const path = require("path");
+
 const { app, Menu } = require("electron");
 const is = require("electron-is");
 
 const { getAllPlugins } = require("./plugins/utils");
 const config = require("./config");
 
+const pluginEnabledMenu = (plugin, label = "") => ({
+	label: label || plugin,
+	type: "checkbox",
+	checked: config.plugins.isEnabled(plugin),
+	click: (item) => {
+		if (item.checked) {
+			config.plugins.enable(plugin);
+		} else {
+			config.plugins.disable(plugin);
+		}
+	},
+});
+
 const mainMenuTemplate = (win) => [
 	{
 		label: "Plugins",
 		submenu: [
 			...getAllPlugins().map((plugin) => {
-				return {
-					label: plugin,
-					type: "checkbox",
-					checked: config.plugins.isEnabled(plugin),
-					click: (item) => {
-						if (item.checked) {
-							config.plugins.enable(plugin);
-						} else {
-							config.plugins.disable(plugin);
-						}
-					},
-				};
+				const pluginPath = path.join(__dirname, "plugins", plugin, "menu.js");
+
+				if (!config.plugins.isEnabled(plugin)) {
+					return pluginEnabledMenu(plugin);
+				}
+
+				if (existsSync(pluginPath)) {
+					const getPluginMenu = require(pluginPath);
+					return {
+						label: plugin,
+						submenu: [
+							pluginEnabledMenu(plugin, "Enabled"),
+							...getPluginMenu(win, config.plugins.getOptions(plugin), () =>
+								module.exports.setApplicationMenu(win)
+							),
+						],
+					};
+				}
+
+				return pluginEnabledMenu(plugin);
 			}),
 			{ type: "separator" },
 			{
diff --git a/package.json b/package.json
index 94eab900..bfb89748 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
 		"@ffmpeg/core": "^0.8.5",
 		"@ffmpeg/ffmpeg": "^0.9.7",
 		"YoutubeNonStop": "git://github.com/lawfx/YoutubeNonStop.git#v0.8.1",
+		"async-mutex": "^0.3.1",
 		"browser-id3-writer": "^4.4.0",
 		"custom-electron-titlebar": "^3.2.6",
 		"discord-rpc": "^3.2.0",
@@ -78,7 +79,8 @@
 		"electron-updater": "^4.3.6",
 		"filenamify": "^4.2.0",
 		"node-fetch": "^2.6.1",
-		"ytdl-core": "^4.4.5"
+		"ytdl-core": "^4.4.5",
+		"ytpl": "^2.0.5"
 	},
 	"devDependencies": {
 		"electron": "^11.2.3",
diff --git a/plugins/discord/back.js b/plugins/discord/back.js
index 3e4ab629..0ebcc624 100644
--- a/plugins/discord/back.js
+++ b/plugins/discord/back.js
@@ -9,7 +9,9 @@ const rpc = new Discord.Client({
 // Application ID registered by @semvis123
 const clientId = "790655993809338398";
 
-module.exports = (win) => {
+let clearActivity;
+
+module.exports = (win, {activityTimoutEnabled, activityTimoutTime}) => {
 	const registerCallback = getSongInfo(win);
 
 	// If the page is ready, register the callback
@@ -29,7 +31,13 @@ module.exports = (win) => {
 					// Add an idle icon to show that the song is paused
 					activityInfo.smallImageKey = "idle";
 					activityInfo.smallImageText = "idle/paused";
+					// Set start the timer so the activity gets cleared after a while if enabled
+					if (activityTimoutEnabled)
+						clearActivity = setTimeout(()=>rpc.clearActivity(), activityTimoutTime||10,000);
+
 				} else {
+					// stop the clear activity timout
+					clearTimeout(clearActivity);
 					// Add the start and end time of the song
 					const songStartTime = Date.now() - songInfo.elapsedSeconds * 1000;
 					activityInfo.startTimestamp = songStartTime;
diff --git a/plugins/downloader/back.js b/plugins/downloader/back.js
index a5a49958..a1d2ff80 100644
--- a/plugins/downloader/back.js
+++ b/plugins/downloader/back.js
@@ -45,19 +45,21 @@ function handle(win) {
 		let fileBuffer = songBuffer;
 
 		try {
-			const coverBuffer = metadata.image.toPNG();
 			const writer = new ID3Writer(songBuffer);
+			if (metadata.image) {
+				const coverBuffer = metadata.image.toPNG();
 
-			// Create the metadata tags
-			writer
-				.setFrame("TIT2", metadata.title)
-				.setFrame("TPE1", [metadata.artist])
-				.setFrame("APIC", {
-					type: 3,
-					data: coverBuffer,
-					description: "",
-				});
-			writer.addTag();
+				// Create the metadata tags
+				writer
+					.setFrame("TIT2", metadata.title)
+					.setFrame("TPE1", [metadata.artist])
+					.setFrame("APIC", {
+						type: 3,
+						data: coverBuffer,
+						description: "",
+					});
+				writer.addTag();
+			}
 			fileBuffer = Buffer.from(writer.arrayBuffer);
 		} catch (error) {
 			sendError(win, error);
@@ -70,3 +72,4 @@ function handle(win) {
 }
 
 module.exports = handle;
+module.exports.sendError = sendError;
diff --git a/plugins/downloader/menu.js b/plugins/downloader/menu.js
new file mode 100644
index 00000000..4eda01a5
--- /dev/null
+++ b/plugins/downloader/menu.js
@@ -0,0 +1,63 @@
+const { existsSync, mkdirSync } = require("fs");
+const { join } = require("path");
+const { URL } = require("url");
+
+const { ipcMain } = require("electron");
+const is = require("electron-is");
+const ytpl = require("ytpl");
+
+const { sendError } = require("./back");
+const { defaultMenuDownloadLabel, getFolder } = require("./utils");
+
+let downloadLabel = defaultMenuDownloadLabel;
+
+module.exports = (win, options, refreshMenu) => [
+	{
+		label: downloadLabel,
+		click: async () => {
+			const currentURL = win.webContents.getURL();
+			const playlistID = new URL(currentURL).searchParams.get("list");
+			if (!playlistID) {
+				sendError(win, new Error("No playlist ID found"));
+				return;
+			}
+
+			const playlist = await ytpl(playlistID);
+			const playlistTitle = playlist.title;
+
+			const folder = getFolder(options.downloadFolder);
+			const playlistFolder = join(folder, playlistTitle);
+			if (existsSync(playlistFolder)) {
+				sendError(
+					win,
+					new Error(`The folder ${playlistFolder} already exists`)
+				);
+				return;
+			}
+			mkdirSync(playlistFolder, { recursive: true });
+
+			ipcMain.on("downloader-feedback", (_, feedback) => {
+				downloadLabel = feedback;
+				refreshMenu();
+			});
+
+			downloadLabel = `Downloading "${playlistTitle}"`;
+			refreshMenu();
+
+			if (is.dev()) {
+				console.log(
+					`Downloading playlist "${playlistTitle}" (${playlist.items.length} songs)`
+				);
+			}
+
+			playlist.items.slice(0, options.playlistMaxItems).forEach((song) => {
+				win.webContents.send(
+					"downloader-download-playlist",
+					song,
+					playlistTitle,
+					options
+				);
+			});
+		},
+	},
+];
diff --git a/plugins/downloader/utils.js b/plugins/downloader/utils.js
new file mode 100644
index 00000000..3e0727cb
--- /dev/null
+++ b/plugins/downloader/utils.js
@@ -0,0 +1,4 @@
+const downloadsFolder = require("downloads-folder");
+
+module.exports.getFolder = (customFolder) => customFolder || downloadsFolder();
+module.exports.defaultMenuDownloadLabel = "Download playlist";
diff --git a/plugins/downloader/youtube-dl.js b/plugins/downloader/youtube-dl.js
index 3541391f..65907e2b 100644
--- a/plugins/downloader/youtube-dl.js
+++ b/plugins/downloader/youtube-dl.js
@@ -1,7 +1,8 @@
 const { randomBytes } = require("crypto");
+const { writeFileSync } = require("fs");
 const { join } = require("path");
 
-const downloadsFolder = require("downloads-folder");
+const Mutex = require("async-mutex").Mutex;
 const { ipcRenderer } = require("electron");
 const is = require("electron-is");
 const filenamify = require("filenamify");
@@ -12,8 +13,9 @@ const filenamify = require("filenamify");
 const FFmpeg = require("@ffmpeg/ffmpeg/dist/ffmpeg.min");
 const ytdl = require("ytdl-core");
 
-const { triggerActionSync } = require("../utils");
+const { triggerAction, triggerActionSync } = require("../utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
+const { defaultMenuDownloadLabel, getFolder } = require("./utils");
 
 const { createFFmpeg } = FFmpeg;
 const ffmpeg = createFFmpeg({
@@ -21,13 +23,16 @@ const ffmpeg = createFFmpeg({
 	logger: () => {}, // console.log,
 	progress: () => {}, // console.log,
 });
+const ffmpegMutex = new Mutex();
 
 const downloadVideoToMP3 = (
 	videoUrl,
 	sendFeedback,
 	sendError,
 	reinit,
-	options
+	options,
+	metadata = undefined,
+	subfolder = ""
 ) => {
 	sendFeedback("Downloading…");
 
@@ -66,9 +71,18 @@ const downloadVideoToMP3 = (
 			}
 		})
 		.on("error", sendError)
-		.on("end", () => {
+		.on("end", async () => {
 			const buffer = Buffer.concat(chunks);
-			toMP3(videoName, buffer, sendFeedback, sendError, reinit, options);
+			await toMP3(
+				videoName,
+				buffer,
+				sendFeedback,
+				sendError,
+				reinit,
+				options,
+				metadata,
+				subfolder
+			);
 		});
 };
 
@@ -78,10 +92,13 @@ const toMP3 = async (
 	sendFeedback,
 	sendError,
 	reinit,
-	options
+	options,
+	existingMetadata = undefined,
+	subfolder = ""
 ) => {
 	const safeVideoName = randomBytes(32).toString("hex");
 	const extension = options.extension || "mp3";
+	const releaseFFmpegMutex = await ffmpegMutex.acquire();
 
 	try {
 		if (!ffmpeg.isLoaded()) {
@@ -93,7 +110,7 @@ const toMP3 = async (
 		ffmpeg.FS("writeFile", safeVideoName, buffer);
 
 		sendFeedback("Converting…");
-		const metadata = getMetadata();
+		const metadata = existingMetadata || getMetadata();
 		await ffmpeg.run(
 			"-i",
 			safeVideoName,
@@ -102,24 +119,31 @@ const toMP3 = async (
 			safeVideoName + "." + extension
 		);
 
-		const folder = options.downloadFolder || downloadsFolder();
+		const folder = getFolder(options.downloadFolder);
 		const name = metadata
-			? `${metadata.artist} - ${metadata.title}`
+			? `${metadata.artist ? `${metadata.artist} - ` : ""}${metadata.title}`
 			: videoName;
 		const filename = filenamify(name + "." + extension, {
 			replacement: "_",
 		});
 
-		// Add the metadata
-		sendFeedback("Adding metadata…");
-		ipcRenderer.send(
-			"add-metadata",
-			join(folder, filename),
-			ffmpeg.FS("readFile", safeVideoName + "." + extension)
-		);
-		ipcRenderer.once("add-metadata-done", reinit);
+		const filePath = join(folder, subfolder, filename);
+		const fileBuffer = ffmpeg.FS("readFile", safeVideoName + "." + extension);
+
+		if (existingMetadata) {
+			writeFileSync(filePath, fileBuffer);
+			reinit();
+		} else {
+			// Add the metadata
+			sendFeedback("Adding metadata…");
+			ipcRenderer.send("add-metadata", filePath, fileBuffer);
+			ipcRenderer.once("add-metadata-done", reinit);
+			sendFeedback("Finished converting", metadata);
+		}
 	} catch (e) {
 		sendError(e);
+	} finally {
+		releaseFFmpegMutex();
 	}
 };
 
@@ -133,13 +157,34 @@ const getFFmpegMetadataArgs = (metadata) => {
 	}
 
 	return [
-		"-metadata",
-		`title=${metadata.title}`,
-		"-metadata",
-		`artist=${metadata.artist}`,
+		...(metadata.title ? ["-metadata", `title=${metadata.title}`] : []),
+		...(metadata.artist ? ["-metadata", `artist=${metadata.artist}`] : []),
 	];
 };
 
 module.exports = {
 	downloadVideoToMP3,
 };
+
+ipcRenderer.on(
+	"downloader-download-playlist",
+	(_, songMetadata, playlistFolder, options) => {
+		const reinit = () =>
+			ipcRenderer.send("downloader-feedback", defaultMenuDownloadLabel);
+
+		downloadVideoToMP3(
+			songMetadata.url,
+			(feedback) => {
+				ipcRenderer.send("downloader-feedback", feedback);
+			},
+			(error) => {
+				triggerAction(CHANNEL, ACTIONS.ERROR, error);
+				reinit();
+			},
+			reinit,
+			options,
+			songMetadata,
+			playlistFolder
+		);
+	}
+);
diff --git a/plugins/navigation/back.js b/plugins/navigation/back.js
index 6d0d0a2a..4c3e00dc 100644
--- a/plugins/navigation/back.js
+++ b/plugins/navigation/back.js
@@ -4,7 +4,10 @@ const { injectCSS, listenAction } = require("../utils");
 const { ACTIONS, CHANNEL } = require("./actions.js");
 
 function handle(win) {
-	injectCSS(win.webContents, path.join(__dirname, "style.css"));
+	injectCSS(win.webContents, path.join(__dirname, "style.css"), () => {
+		win.webContents.send("navigation-css-ready");
+	});
+
 	listenAction(CHANNEL, (event, action) => {
 		switch (action) {
 			case ACTIONS.NEXT:
diff --git a/plugins/navigation/front.js b/plugins/navigation/front.js
index 92bc1325..d89c9891 100644
--- a/plugins/navigation/front.js
+++ b/plugins/navigation/front.js
@@ -1,15 +1,19 @@
+const { ipcRenderer } = require("electron");
+
 const { ElementFromFile, templatePath } = require("../utils");
 
 function run() {
-	const forwardButton = ElementFromFile(
-		templatePath(__dirname, "forward.html")
-	);
-	const backButton = ElementFromFile(templatePath(__dirname, "back.html"));
-	const menu       = document.querySelector("ytmusic-pivot-bar-renderer");
+	ipcRenderer.on("navigation-css-ready", () => {
+		const forwardButton = ElementFromFile(
+			templatePath(__dirname, "forward.html")
+		);
+		const backButton = ElementFromFile(templatePath(__dirname, "back.html"));
+		const menu = document.querySelector("ytmusic-pivot-bar-renderer");
 
-	if (menu) {
-		menu.prepend(backButton, forwardButton);
-	}
+		if (menu) {
+			menu.prepend(backButton, forwardButton);
+		}
+	});
 }
 
 module.exports = run;
diff --git a/plugins/navigation/templates/back.html b/plugins/navigation/templates/back.html
index 2a675163..b872ada5 100644
--- a/plugins/navigation/templates/back.html
+++ b/plugins/navigation/templates/back.html
@@ -20,7 +20,7 @@
 				preserveAspectRatio="xMidYMid meet"
 				focusable="false"
 				class="style-scope iron-icon"
-				style="pointer-events: none; display: block; width: 100%; height: 100%;"
+				style="pointer-events: none; display: block; width: 100%; height: 100%"
 			>
 				<g class="style-scope iron-icon">
 					<path
diff --git a/plugins/utils.js b/plugins/utils.js
index 82085aa6..b265692f 100644
--- a/plugins/utils.js
+++ b/plugins/utils.js
@@ -42,9 +42,12 @@ module.exports.fileExists = (path, callbackIfExists) => {
 	});
 };
 
-module.exports.injectCSS = (webContents, filepath) => {
-	webContents.on("did-finish-load", () => {
-		webContents.insertCSS(fs.readFileSync(filepath, "utf8"));
+module.exports.injectCSS = (webContents, filepath, cb = undefined) => {
+	webContents.on("did-finish-load", async () => {
+		await webContents.insertCSS(fs.readFileSync(filepath, "utf8"));
+		if (cb) {
+			cb();
+		}
 	});
 };
 
diff --git a/yarn.lock b/yarn.lock
index e37cca43..76f32f7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1661,6 +1661,13 @@ async-exit-hook@^2.0.1:
   resolved "https://registry.yarnpkg.com/async-exit-hook/-/async-exit-hook-2.0.1.tgz#8bd8b024b0ec9b1c01cccb9af9db29bd717dfaf3"
   integrity sha512-NW2cX8m1Q7KPA7a5M2ULQeZ2wR5qI5PAbw5L0UOMxdioVk9PMZ0h1TmyZEkPYrCvYjDlFICusOu1dlEKAAeXBw==
 
+async-mutex@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/async-mutex/-/async-mutex-0.3.1.tgz#7033af665f1c7cebed8b878267a43ba9e77c5f67"
+  integrity sha512-vRfQwcqBnJTLzVQo72Sf7KIUbcSUP5hNchx6udI1U6LuPQpfePgdjJzlCe76yFZ8pxlLjn9lwcl/Ya0TSOv0Tw==
+  dependencies:
+    tslib "^2.1.0"
+
 async@0.9.x:
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
@@ -6152,7 +6159,7 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-miniget@^4.0.0:
+miniget@^4.0.0, miniget@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/miniget/-/miniget-4.2.0.tgz#0004e95536b192d95a7d09f4435d67b9285481d0"
   integrity sha512-IzTOaNgBw/qEpzkPTE7X2cUVXQfSKbG8w52Emi93zb+Zya2ZFrbmavpixzebuDJD9Ku4ecbaFlC7Y1cEESzQtQ==
@@ -8367,6 +8374,11 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
+  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
+
 tsutils@^3.17.1:
   version "3.20.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.20.0.tgz#ea03ea45462e146b53d70ce0893de453ff24f698"
@@ -9070,6 +9082,13 @@ ytdl-core@^4.4.5:
     miniget "^4.0.0"
     sax "^1.1.3"
 
+ytpl@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/ytpl/-/ytpl-2.0.5.tgz#c56900bccaf96e289304de647bc861121f61223e"
+  integrity sha512-8hc+f3pijaogj1yoZTCGImMDS4x0ogFPDsx1PefNQ+2EAhJMm1K4brcYT9zpJhPi9SXh+O103pEIHDw3+dAhxA==
+  dependencies:
+    miniget "^4.1.0"
+
 zip-stream@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-4.0.4.tgz#3a8f100b73afaa7d1ae9338d910b321dec77ff3a"
diff --git a/youtube-music.css b/youtube-music.css
index d9c7b3ec..fe5eb326 100644
--- a/youtube-music.css
+++ b/youtube-music.css
@@ -5,7 +5,7 @@
 /* Allow window dragging */
 ytmusic-nav-bar {
 	-webkit-user-select: none;
-	-webkit-app-region : drag;
+	-webkit-app-region: drag;
 }
 
 iron-icon,

From 95c3f04c107d12eb5731947197298c3c8d1f3a04 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Thu, 25 Mar 2021 02:18:23 +0200
Subject: [PATCH 15/25] more fixes for plugin options menu

---
 plugins/styled-bars/back.js  | 18 ++++++++++++++----
 plugins/styled-bars/front.js |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index f0a0a13a..f1ac29bd 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -21,6 +21,15 @@ const pluginEnabledMenu = (plugin, label = "") => ({
 	},
 });
 
+var enabled = !config.get('options.hideMenu');
+
+//override Menu.setApplicationMenu to also point to also refresh custom menu
+const setMenu = Menu.setApplicationMenu;
+Menu.setApplicationMenu = function (menu) {
+	setMenu.apply(Menu,menu)
+	win.webContents.send('updateMenu', true);
+}
+
 module.exports = win => {
 	// css for custom scrollbar + disable drag area(was causing bugs)
 	injectCSS(win.webContents, path.join(__dirname, 'style.css'));
@@ -28,12 +37,12 @@ module.exports = win => {
 		//build new menu
 		const template = mainMenuTemplate(win)
 		const menu = Menu.buildFromTemplate(template);
-		Menu.setApplicationMenu(menu);
+		setMenu(menu);
 
 		//register keyboard shortcut && hide menu if hideMenu is enabled
 		if (config.get('options.hideMenu')) {
 			win.webContents.send('updateMenu', false); 
-			var enabled=  false;
+			 var enabled=  false;
 			electronLocalshortcut.register(win, 'Esc', () => {
 				if(enabled) {
 					win.webContents.send('updateMenu', false); 
@@ -57,13 +66,14 @@ const mainMenuTemplate = win => [
 		label: 'Plugins',
 		submenu: [
 			...getAllPlugins().map(plugin => {
-				const pluginPath = path.join(__dirname, "plugins", plugin, "menu.js");
+				const pluginPath = path.join(path.dirname(path.dirname(__dirname))
+					, "plugins", plugin, "menu.js");
 				
 				if (!config.plugins.isEnabled(plugin)) {
 					return pluginEnabledMenu(plugin);
 				}
-
 				if (existsSync(pluginPath)) {
+					console.log("alert in");
 					const getPluginMenu = require(pluginPath);
 					return {
 						label: plugin,
diff --git a/plugins/styled-bars/front.js b/plugins/styled-bars/front.js
index e4eae2c0..d5274364 100644
--- a/plugins/styled-bars/front.js
+++ b/plugins/styled-bars/front.js
@@ -3,7 +3,7 @@ const {remote, ipcRenderer} = require('electron');
 
 module.exports = () => {
 	const myBar = new customTitlebar.Titlebar({
-		backgroundColor: customTitlebar.Color.fromHex('#030303'),
+		backgroundColor: customTitlebar.Color.fromHex('#050505'),
 		itemBackgroundColor: customTitlebar.Color.fromHex('#121212')
 	});
 	myBar.updateTitle(' ');

From eb32c98b764daa4560fc4798db4553297be78351 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Thu, 25 Mar 2021 07:51:06 +0200
Subject: [PATCH 16/25] fix tray option radio selection

---
 plugins/styled-bars/back.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index f1ac29bd..b83dfa08 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -21,8 +21,6 @@ const pluginEnabledMenu = (plugin, label = "") => ({
 	},
 });
 
-var enabled = !config.get('options.hideMenu');
-
 //override Menu.setApplicationMenu to also point to also refresh custom menu
 const setMenu = Menu.setApplicationMenu;
 Menu.setApplicationMenu = function (menu) {
@@ -41,11 +39,11 @@ module.exports = win => {
 
 		//register keyboard shortcut && hide menu if hideMenu is enabled
 		if (config.get('options.hideMenu')) {
-			win.webContents.send('updateMenu', false); 
+			win.webContents.send('updateMenu', null); 
 			 var enabled=  false;
 			electronLocalshortcut.register(win, 'Esc', () => {
 				if(enabled) {
-					win.webContents.send('updateMenu', false); 
+					win.webContents.send('updateMenu', null); 
 					enabled = false;
 				} else {
 					win.webContents.send('updateMenu', true); 
@@ -56,8 +54,11 @@ module.exports = win => {
 	});
 };
 
-function checkCheckbox(item) {
+function checkCheckbox(item, updateMenu, win) {
 	item.checked = !item.checked;
+	if(updateMenu) {
+		win.webContents.send('updateMenu', true); 
+	}
 }
 
 // Create new template because it works abit different (need to manually change checkbox + tray is out of submenu)
@@ -73,7 +74,6 @@ const mainMenuTemplate = win => [
 					return pluginEnabledMenu(plugin);
 				}
 				if (existsSync(pluginPath)) {
-					console.log("alert in");
 					const getPluginMenu = require(pluginPath);
 					return {
 						label: plugin,
@@ -179,9 +179,10 @@ const mainMenuTemplate = win => [
 							label: 'Disabled',
 							type: 'radio',
 							checked: !config.get('options.tray'),
-							click: () => {
+							click: item => {
 								config.set('options.tray', false);
 								config.set('options.appVisible', true);
+								checkCheckbox(item, true, win)
 							}
 						},
 						{
@@ -189,9 +190,10 @@ const mainMenuTemplate = win => [
 							type: 'radio',
 							checked:
 								config.get('options.tray') && config.get('options.appVisible'),
-							click: () => {
+							click: item => {
 								config.set('options.tray', true);
 								config.set('options.appVisible', true);
+								checkCheckbox(item, true, win)
 							}
 						},
 						{
@@ -199,9 +201,10 @@ const mainMenuTemplate = win => [
 							type: 'radio',
 							checked:
 								config.get('options.tray') && !config.get('options.appVisible'),
-							click: () => {
+							click: item => {
 								config.set('options.tray', true);
 								config.set('options.appVisible', false);
+								checkCheckbox(item, true, win)
 							}
 						},
 						{type: 'separator'},

From c9f172ef21e4ec270d6bb1a59a531d78a233b955 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Thu, 25 Mar 2021 16:43:01 +0200
Subject: [PATCH 17/25] fix scrollbar clash with nav bar

---
 plugins/styled-bars/style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/plugins/styled-bars/style.css b/plugins/styled-bars/style.css
index 88fb8818..108bb2ca 100644
--- a/plugins/styled-bars/style.css
+++ b/plugins/styled-bars/style.css
@@ -2,6 +2,10 @@
 .menubar-menu-container{
   overflow-y: visible !important;
 }
+/* fixes scrollbar positioning relative to nav bar  */
+#nav-bar-background.ytmusic-app-layout {
+  right: 15px !important;
+}
 /* remove window dragging for nav bar (conflict with titlebar drag) */
 ytmusic-nav-bar, 
 .tab-titleiron-icon,

From 13ff5f26a2b677d441611d29c86cff41e9102b69 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Thu, 25 Mar 2021 23:13:54 +0200
Subject: [PATCH 18/25] Plugin doesn't create a new menu anymore instead it
 modifies the original menu

---
 plugins/styled-bars/back.js | 350 +++++++++---------------------------
 1 file changed, 80 insertions(+), 270 deletions(-)

diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index b83dfa08..3253cf8d 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -1,46 +1,43 @@
 const {injectCSS} = require('../utils');
-const {Menu , app} = require('electron');
-const { existsSync } = require("fs");
+const {Menu} = require('electron');
 const path = require('path');
 const electronLocalshortcut = require("electron-localshortcut");
-const is = require('electron-is');
-const {getAllPlugins} = require('../../plugins/utils');
 const config = require('../../config');
+var { mainMenuTemplate } = require("../../menu");
 
-const pluginEnabledMenu = (plugin, label = "") => ({
-	label: label || plugin,
-	type: "checkbox",
-	checked: config.plugins.isEnabled(plugin),
-	click: (item) => {
-		if (item.checked) {
-			config.plugins.enable(plugin);
-		} else {
-			config.plugins.disable(plugin);
-		}
-		checkCheckbox(item);
-	},
-});
-
-//override Menu.setApplicationMenu to also point to also refresh custom menu
-const setMenu = Menu.setApplicationMenu;
-Menu.setApplicationMenu = function (menu) {
-	setMenu.apply(Menu,menu)
-	win.webContents.send('updateMenu', true);
+//override menu template for custom menu
+const originTemplate = mainMenuTemplate;
+mainMenuTemplate = function (winHook) {
+	//get template
+	let template = originTemplate(winHook);
+	//fix checkbox and roles
+	fixCheck(template);
+	//return as normal
+	return template;
 }
+//win hook for fixing menu
+let win;
 
-module.exports = win => {
+//check that menu doesn't get created twice
+let isFixed = false;
+
+module.exports = winImport => {
+	win = winImport;
 	// css for custom scrollbar + disable drag area(was causing bugs)
 	injectCSS(win.webContents, path.join(__dirname, 'style.css'));
 	win.on('ready-to-show', () => {
-		//build new menu
-		const template = mainMenuTemplate(win)
-		const menu = Menu.buildFromTemplate(template);
-		setMenu(menu);
-
+		//build new menu (once)		
+		if(!isFixed) {
+			let template = mainMenuTemplate(win);
+			let menu = Menu.buildFromTemplate(template);
+			Menu.setApplicationMenu(menu);
+			isFixed = true;
+		}
+		
 		//register keyboard shortcut && hide menu if hideMenu is enabled
 		if (config.get('options.hideMenu')) {
 			win.webContents.send('updateMenu', null); 
-			 var enabled=  false;
+			let enabled=  false;
 			electronLocalshortcut.register(win, 'Esc', () => {
 				if(enabled) {
 					win.webContents.send('updateMenu', null); 
@@ -54,247 +51,60 @@ module.exports = win => {
 	});
 };
 
-function checkCheckbox(item, updateMenu, win) {
-	item.checked = !item.checked;
-	if(updateMenu) {
-		win.webContents.send('updateMenu', true); 
+//go over each item in menu
+function fixCheck(ogTemplate){
+	for(let position in ogTemplate) {
+		let item = ogTemplate[position];
+		//apply function on submenu
+		if(item.submenu != null) {
+			fixCheck(item.submenu);
+		} 
+		//change onClick of checkbox+radio
+		else if(item.type === 'checkbox' || item.type === 'radio') {
+			let ogOnclick = item.click;
+			item.click = (itemClicked) => {
+				ogOnclick(itemClicked);
+				checkCheckbox(itemClicked);
+			};
+		}  
+		//customize roles
+		else if (item.role != null) {
+			fixRoles(item)
+		}
 	}
 }
 
-// Create new template because it works abit different (need to manually change checkbox + tray is out of submenu)
-const mainMenuTemplate = win => [
-	{
-		label: 'Plugins',
-		submenu: [
-			...getAllPlugins().map(plugin => {
-				const pluginPath = path.join(path.dirname(path.dirname(__dirname))
-					, "plugins", plugin, "menu.js");
-				
-				if (!config.plugins.isEnabled(plugin)) {
-					return pluginEnabledMenu(plugin);
-				}
-				if (existsSync(pluginPath)) {
-					const getPluginMenu = require(pluginPath);
-					return {
-						label: plugin,
-						submenu: [
-							pluginEnabledMenu(plugin, "Enabled"),
-							...getPluginMenu(win, config.plugins.getOptions(plugin), () =>
-								module.exports.setApplicationMenu(win)
-							),
-						],
-					};
-				}
-
-				return pluginEnabledMenu(plugin);
-			}),
-			{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);
-					checkCheckbox(item);
-				}
-			},
-			{
-				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 (show with Escape key)',
-						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);
-						}
-					}
-				] :
-				[]),
-				{
-					label: 'Tray',
-					submenu: [
-						{
-							label: 'Disabled',
-							type: 'radio',
-							checked: !config.get('options.tray'),
-							click: item => {
-								config.set('options.tray', false);
-								config.set('options.appVisible', true);
-								checkCheckbox(item, true, win)
-							}
-						},
-						{
-							label: 'Enabled + app visible',
-							type: 'radio',
-							checked:
-								config.get('options.tray') && config.get('options.appVisible'),
-							click: item => {
-								config.set('options.tray', true);
-								config.set('options.appVisible', true);
-								checkCheckbox(item, true, win)
-							}
-						},
-						{
-							label: 'Enabled + app hidden',
-							type: 'radio',
-							checked:
-								config.get('options.tray') && !config.get('options.appVisible'),
-							click: item => {
-								config.set('options.tray', true);
-								config.set('options.appVisible', false);
-								checkCheckbox(item, true, win)
-							}
-						},
-						{type: 'separator'},
-						{
-							label: 'Play/Pause on click',
-							type: 'checkbox',
-							checked: config.get('options.trayClickPlayPause'),
-							click: item => {
-								config.set('options.trayClickPlayPause', 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: 'View',
-		submenu: [
-			{
-			label: 'Reload',
-			click: () => {win.webContents.reload();}
-			},
-			{
-				label: 'Force Reload',
-				click: () => {win.webContents.reloadIgnoringCache();}
-			},
-			{type: 'separator'},
-			{
-				label: 'Zoom In',
-				click: () => {win.webContents.setZoomLevel(win.webContents.getZoomLevel() + 1);}
-			},
-			{
-				label: 'Zoom Out',
-				click: () => {win.webContents.setZoomLevel(win.webContents.getZoomLevel() - 1);}
-			},
-			{
-				label: 'Reset Zoom',
-				click: () => {win.webContents.setZoomLevel(0)}
-			}
-		]
-	},
-	{
-		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();
-					}
-				}
-			} ,
-			{
-				label: 'Restart App',
-				click: () => {app.relaunch(); app.quit();}
-			} ,
-			{
-				label: 'Quit App',
-				click: () => {app.quit();}
-			}
-		]
+function fixRoles(MenuItem) {
+	switch (MenuItem.role) {
+		case 'reload':
+			MenuItem['label'] = 'Reload';
+			MenuItem.click = () => {win.webContents.reload();}
+			break;
+		case 'forceReload' :
+			MenuItem.label = 'Force Reload';
+			MenuItem.click = () => {win.webContents.reloadIgnoringCache();}
+			break;
+		case 'zoomIn':
+			MenuItem.label = 'Zoom In';
+			MenuItem.click = () => {win.webContents.setZoomLevel(win.webContents.getZoomLevel() + 1);}
+			break;
+		case 'zoomOut':
+			MenuItem.label = 'Zoom Out';
+			MenuItem.click = () => {win.webContents.setZoomLevel(win.webContents.getZoomLevel() - 1);}
+			break;
+		case 'resetZoom':
+			MenuItem.label = 'Reset Zoom';
+			MenuItem.click = () => {win.webContents.setZoomLevel(0);}
+			break;
+		default : 
+			console.log(MenuItem.role +' was not expected');
 	}
-];
+	delete MenuItem.role;
+}
+
+function checkCheckbox(item) {
+	//check item
+	item.checked = !item.checked;
+	//update menu
+	win.webContents.send('updateMenu', true); 
+}

From 903b7f87181991fdf0423e1abee8d81d0a438763 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Thu, 25 Mar 2021 23:16:00 +0200
Subject: [PATCH 19/25] lint

---
 plugins/styled-bars/back.js | 57 +++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index 3253cf8d..1dc7539b 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -1,5 +1,5 @@
-const {injectCSS} = require('../utils');
-const {Menu} = require('electron');
+const { injectCSS } = require('../utils');
+const { Menu } = require('electron');
 const path = require('path');
 const electronLocalshortcut = require("electron-localshortcut");
 const config = require('../../config');
@@ -27,46 +27,46 @@ module.exports = winImport => {
 	injectCSS(win.webContents, path.join(__dirname, 'style.css'));
 	win.on('ready-to-show', () => {
 		//build new menu (once)		
-		if(!isFixed) {
+		if (!isFixed) {
 			let template = mainMenuTemplate(win);
 			let menu = Menu.buildFromTemplate(template);
 			Menu.setApplicationMenu(menu);
 			isFixed = true;
 		}
-		
+
 		//register keyboard shortcut && hide menu if hideMenu is enabled
 		if (config.get('options.hideMenu')) {
-			win.webContents.send('updateMenu', null); 
-			let enabled=  false;
+			win.webContents.send('updateMenu', null);
+			let enabled = false;
 			electronLocalshortcut.register(win, 'Esc', () => {
-				if(enabled) {
-					win.webContents.send('updateMenu', null); 
+				if (enabled) {
+					win.webContents.send('updateMenu', null);
 					enabled = false;
 				} else {
-					win.webContents.send('updateMenu', true); 
-					enabled =  true;
+					win.webContents.send('updateMenu', true);
+					enabled = true;
 				}
 			});
-		} 
+		}
 	});
 };
 
 //go over each item in menu
-function fixCheck(ogTemplate){
-	for(let position in ogTemplate) {
+function fixCheck(ogTemplate) {
+	for (let position in ogTemplate) {
 		let item = ogTemplate[position];
 		//apply function on submenu
-		if(item.submenu != null) {
+		if (item.submenu != null) {
 			fixCheck(item.submenu);
-		} 
+		}
 		//change onClick of checkbox+radio
-		else if(item.type === 'checkbox' || item.type === 'radio') {
+		else if (item.type === 'checkbox' || item.type === 'radio') {
 			let ogOnclick = item.click;
 			item.click = (itemClicked) => {
 				ogOnclick(itemClicked);
 				checkCheckbox(itemClicked);
 			};
-		}  
+		}
 		//customize roles
 		else if (item.role != null) {
 			fixRoles(item)
@@ -74,30 +74,31 @@ function fixCheck(ogTemplate){
 	}
 }
 
+//custom menu doesn't support roles, so they get injected manually
 function fixRoles(MenuItem) {
 	switch (MenuItem.role) {
 		case 'reload':
-			MenuItem['label'] = 'Reload';
-			MenuItem.click = () => {win.webContents.reload();}
+			MenuItem.label = 'Reload';
+			MenuItem.click = () => { win.webContents.reload(); }
 			break;
-		case 'forceReload' :
+		case 'forceReload':
 			MenuItem.label = 'Force Reload';
-			MenuItem.click = () => {win.webContents.reloadIgnoringCache();}
+			MenuItem.click = () => { win.webContents.reloadIgnoringCache(); }
 			break;
 		case 'zoomIn':
 			MenuItem.label = 'Zoom In';
-			MenuItem.click = () => {win.webContents.setZoomLevel(win.webContents.getZoomLevel() + 1);}
+			MenuItem.click = () => { win.webContents.setZoomLevel(win.webContents.getZoomLevel() + 1); }
 			break;
 		case 'zoomOut':
 			MenuItem.label = 'Zoom Out';
-			MenuItem.click = () => {win.webContents.setZoomLevel(win.webContents.getZoomLevel() - 1);}
+			MenuItem.click = () => { win.webContents.setZoomLevel(win.webContents.getZoomLevel() - 1); }
 			break;
 		case 'resetZoom':
 			MenuItem.label = 'Reset Zoom';
-			MenuItem.click = () => {win.webContents.setZoomLevel(0);}
+			MenuItem.click = () => { win.webContents.setZoomLevel(0); }
 			break;
-		default : 
-			console.log(MenuItem.role +' was not expected');
+		default:
+			console.log(MenuItem.role + ' was not expected');
 	}
 	delete MenuItem.role;
 }
@@ -105,6 +106,6 @@ function fixRoles(MenuItem) {
 function checkCheckbox(item) {
 	//check item
 	item.checked = !item.checked;
-	//update menu
-	win.webContents.send('updateMenu', true); 
+	//update menu (closes it)
+	win.webContents.send('updateMenu', true);
 }

From 33d4c1a60e4aadcd7c5840177aaa8de9f68633f3 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Fri, 26 Mar 2021 00:23:28 +0200
Subject: [PATCH 20/25] Refactor into switchMenuVisibility

---
 plugins/styled-bars/back.js | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index 1dc7539b..71f2ff9d 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -19,38 +19,38 @@ mainMenuTemplate = function (winHook) {
 let win;
 
 //check that menu doesn't get created twice
-let isFixed = false;
+let done = false;
 
 module.exports = winImport => {
 	win = winImport;
 	// css for custom scrollbar + disable drag area(was causing bugs)
 	injectCSS(win.webContents, path.join(__dirname, 'style.css'));
 	win.on('ready-to-show', () => {
-		//build new menu (once)		
-		if (!isFixed) {
-			let template = mainMenuTemplate(win);
-			let menu = Menu.buildFromTemplate(template);
-			Menu.setApplicationMenu(menu);
-			isFixed = true;
+		// (apparently ready-to-show is called twice)		
+		if (done) {
+			return
 		}
-
+		done = true;
+		let template = mainMenuTemplate(win);
+		let menu = Menu.buildFromTemplate(template);
+		Menu.setApplicationMenu(menu);
+		
 		//register keyboard shortcut && hide menu if hideMenu is enabled
 		if (config.get('options.hideMenu')) {
-			win.webContents.send('updateMenu', null);
-			let enabled = false;
+			switchMenuVisibility();
 			electronLocalshortcut.register(win, 'Esc', () => {
-				if (enabled) {
-					win.webContents.send('updateMenu', null);
-					enabled = false;
-				} else {
-					win.webContents.send('updateMenu', true);
-					enabled = true;
-				}
+				switchMenuVisibility();
 			});
 		}
 	});
 };
 
+let visible = true;
+function switchMenuVisibility() {
+	visible=!visible;
+	win.webContents.send('updateMenu',visible)
+}
+
 //go over each item in menu
 function fixCheck(ogTemplate) {
 	for (let position in ogTemplate) {

From 09d2feb15bdcfaadeb94a648d1980088b8245cc9 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Fri, 26 Mar 2021 00:24:03 +0200
Subject: [PATCH 21/25] Add quit + restart button to main menu )

---
 menu.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/menu.js b/menu.js
index 91bb073d..3f5744b4 100644
--- a/menu.js
+++ b/menu.js
@@ -219,6 +219,14 @@ const mainMenuTemplate = (win) => [
 					}
 				},
 			},
+			{
+				label: 'Restart App',
+				click: () => {app.relaunch(); app.quit();}
+			} ,
+			{
+				label: 'Quit App',
+				click: () => {app.quit();}
+			}
 		],
 	},
 ];

From ea3d19872368eff438ac21cbf76cd1f704c882ac Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Fri, 26 Mar 2021 05:25:46 +0300
Subject: [PATCH 22/25] in tray, delete quit button from submenu also delete
 useless nonfunctional view submenu

---
 tray.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/tray.js b/tray.js
index 75af7494..5f5ea35d 100644
--- a/tray.js
+++ b/tray.js
@@ -32,7 +32,7 @@ module.exports.setUpTray = (app, win) => {
 		}
 	});
 
-	const trayMenu = Menu.buildFromTemplate([
+	let template = [
 		{
 			label: "Play/Pause",
 			click: () => {
@@ -64,6 +64,13 @@ module.exports.setUpTray = (app, win) => {
 				app.quit();
 			},
 		},
-	]);
+	];
+
+
+	// delete quit button from navigation submenu
+	delete template[template.findIndex(item => item.label==='Navigation')].submenu[3];
+	// delete View submenu (all buttons are useless in tray)
+	delete template[template.findIndex(item => item.label==='View')];
+	const trayMenu = Menu.buildFromTemplate(template);
 	tray.setContextMenu(trayMenu);
 };

From b67b1bed1348abbfcef9b1a72883f216c61ad616 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Fri, 26 Mar 2021 20:32:30 +0300
Subject: [PATCH 23/25] refactor for clarity

---
 tray.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/tray.js b/tray.js
index 5f5ea35d..e8eb22d3 100644
--- a/tray.js
+++ b/tray.js
@@ -66,11 +66,18 @@ module.exports.setUpTray = (app, win) => {
 		},
 	];
 
-
 	// delete quit button from navigation submenu
-	delete template[template.findIndex(item => item.label==='Navigation')].submenu[3];
+	let navigation = getIndex(template,'Navigation');
+	let quit = getIndex(template[navigation].submenu,'Quit App');
+	delete template[navigation].submenu[quit];
+
 	// delete View submenu (all buttons are useless in tray)
-	delete template[template.findIndex(item => item.label==='View')];
+	delete template[getIndex(template, 'View')];
+
 	const trayMenu = Menu.buildFromTemplate(template);
 	tray.setContextMenu(trayMenu);
 };
+
+function getIndex(arr,label) {
+	return arr.findIndex(item => item.label === label)
+}

From ae7def23130fb62661ddb367958f995e0b4ded97 Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 30 Mar 2021 02:00:35 +0300
Subject: [PATCH 24/25] Rename variables and function for clarity

---
 plugins/styled-bars/back.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/plugins/styled-bars/back.js b/plugins/styled-bars/back.js
index 71f2ff9d..37fd6c8b 100644
--- a/plugins/styled-bars/back.js
+++ b/plugins/styled-bars/back.js
@@ -11,7 +11,7 @@ mainMenuTemplate = function (winHook) {
 	//get template
 	let template = originTemplate(winHook);
 	//fix checkbox and roles
-	fixCheck(template);
+	fixMenu(template);
 	//return as normal
 	return template;
 }
@@ -52,12 +52,12 @@ function switchMenuVisibility() {
 }
 
 //go over each item in menu
-function fixCheck(ogTemplate) {
-	for (let position in ogTemplate) {
-		let item = ogTemplate[position];
+function fixMenu(template) {
+	for (let index in template) {
+		let item = template[index];
 		//apply function on submenu
 		if (item.submenu != null) {
-			fixCheck(item.submenu);
+			fixMenu(item.submenu);
 		}
 		//change onClick of checkbox+radio
 		else if (item.type === 'checkbox' || item.type === 'radio') {
@@ -98,7 +98,7 @@ function fixRoles(MenuItem) {
 			MenuItem.click = () => { win.webContents.setZoomLevel(0); }
 			break;
 		default:
-			console.log(MenuItem.role + ' was not expected');
+			console.log(`Error fixing MenuRoles: "${MenuItem.role}" was not expected`);
 	}
 	delete MenuItem.role;
 }

From ba42a8b269dfda0234b3c38cfd3230f21b6fc98f Mon Sep 17 00:00:00 2001
From: Araxeus <78568641+Araxeus@users.noreply.github.com>
Date: Tue, 30 Mar 2021 02:18:02 +0300
Subject: [PATCH 25/25] increase font size for menu and menuItems

---
 plugins/styled-bars/style.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/plugins/styled-bars/style.css b/plugins/styled-bars/style.css
index 108bb2ca..f0d0c88b 100644
--- a/plugins/styled-bars/style.css
+++ b/plugins/styled-bars/style.css
@@ -1,3 +1,8 @@
+/* increase font size for menu and menuItems */
+.titlebar, .menubar-menu-container .action-label{
+  font-size: 14px !important;
+}
+
 /* allow submenu's to show correctly */
 .menubar-menu-container{
   overflow-y: visible !important;