feat(in-app-menu): add an option to hide the window controls (#1335)

src/config/defaults.ts

@@ -125,6 +125,7 @@ const defaultConfig = {
        * true in Windows, false in Linux and macOS (see youtube-music/config/store.ts)
        */
       enabled: false,
+      hideDOMWindowControls: false,
     },
     'last-fm': {
       enabled: false,

src/menu.ts

@@ -13,6 +13,7 @@ import crossfadeMenu from './plugins/crossfade/menu';
 import disableAutoplayMenu from './plugins/disable-autoplay/menu';
 import discordMenu from './plugins/discord/menu';
 import downloaderMenu from './plugins/downloader/menu';
+import inAppMenuTitlebarMenu from './plugins/in-app-menu/menu';
 import lyricsGeniusMenu from './plugins/lyrics-genius/menu';
 import notificationsMenu from './plugins/notifications/menu';
 import pictureInPictureMenu from './plugins/picture-in-picture/menu';
@@ -36,6 +37,7 @@ const pluginMenus = {
   'crossfade': crossfadeMenu,
   'discord': discordMenu,
   'downloader': downloaderMenu,
+  'in-app-menu': inAppMenuTitlebarMenu,
   'lyrics-genius': lyricsGeniusMenu,
   'notifications': notificationsMenu,
   'picture-in-picture': pictureInPictureMenu,

src/plugins/in-app-menu/front.ts

@@ -19,6 +19,7 @@ const isMacOS = navigator.userAgent.includes('Macintosh');
 const isNotWindowsOrMacOS = !navigator.userAgent.includes('Windows') && !isMacOS;
 
 export default async () => {
+  const hideDOMWindowControls = config.get('plugins.in-app-menu.hideDOMWindowControls');
   let hideMenu = config.get('options.hideMenu');
   const titleBar = document.createElement('title-bar');
   const navBar = document.querySelector<HTMLDivElement>('#nav-bar-background');
@@ -98,7 +99,7 @@ export default async () => {
     titleBar.appendChild(windowControlsContainer);
   };
 
-  if (isNotWindowsOrMacOS) await addWindowControls();
+  if (isNotWindowsOrMacOS && !hideDOMWindowControls) await addWindowControls();
 
   if (navBar) {
     const observer = new MutationObserver((mutations) => {
@@ -130,7 +131,7 @@ export default async () => {
         menu.style.visibility = 'hidden';
       }
     });
-    if (isNotWindowsOrMacOS) await addWindowControls();
+    if (isNotWindowsOrMacOS && !hideDOMWindowControls) await addWindowControls();
   };
   await updateMenu();
 
@@ -138,13 +139,13 @@ export default async () => {
 
   ipcRenderer.on('refreshMenu', () => updateMenu());
   ipcRenderer.on('window-maximize', () => {
-    if (isNotWindowsOrMacOS && maximizeButton.firstChild) {
+    if (isNotWindowsOrMacOS && !hideDOMWindowControls && maximizeButton.firstChild) {
       maximizeButton.removeChild(maximizeButton.firstChild);
       maximizeButton.appendChild(unmaximize);
     }
   });
   ipcRenderer.on('window-unmaximize', () => {
-    if (isNotWindowsOrMacOS && maximizeButton.firstChild) {
+    if (isNotWindowsOrMacOS && !hideDOMWindowControls && maximizeButton.firstChild) {
       maximizeButton.removeChild(maximizeButton.firstChild);
       maximizeButton.appendChild(unmaximize);
     }

src/plugins/in-app-menu/menu.ts

@@ -0,0 +1,22 @@
+import { BrowserWindow } from 'electron';
+
+import is from 'electron-is';
+
+import { setMenuOptions } from '../../config/plugins';
+
+import type { MenuTemplate } from '../../menu';
+import type { ConfigType } from '../../config/dynamic';
+
+export default (_: BrowserWindow, config: ConfigType<'in-app-menu'>): MenuTemplate => [
+  ...(is.linux() ? [
+    {
+      label: 'Hide DOM Window Controls',
+      type: 'checkbox',
+      checked: config.hideDOMWindowControls,
+      click(item) {
+        config.hideDOMWindowControls = item.checked;
+        setMenuOptions('in-app-menu', config);
+      }
+    }
+  ] : []) satisfies Electron.MenuItemConstructorOptions[],
+];