Merge pull request #1279 from th-ch/fix/1274

plugins/discord/back.ts

@@ -39,12 +39,9 @@ const resetInfo = () => {
     console.log('discord disconnected');
   }
 
-  setTimeout(() => {
-    for (const cb of refreshCallbacks) {
-      cb();
-    }
-  }, 100);
-
+  for (const cb of refreshCallbacks) {
+    cb();
+  }
 };
 
 const connectTimeout = () => new Promise((resolve, reject) => setTimeout(() => {

plugins/in-app-menu/assets/close.svg

@@ -0,0 +1,3 @@
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="m4.21 4.387.083-.094a1 1 0 0 1 1.32-.083l.094.083L12 10.585l6.293-6.292a1 1 0 1 1 1.414 1.414L13.415 12l6.292 6.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.32.083l-.094-.083L12 13.415l-6.293 6.292a1 1 0 0 1-1.414-1.414L10.585 12 4.293 5.707a1 1 0 0 1-.083-1.32l.083-.094-.083.094Z"/>
+</svg>

plugins/in-app-menu/assets/maximize.svg

@@ -0,0 +1,3 @@
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M6 3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6Z"/>
+</svg>

plugins/in-app-menu/assets/minimize.svg

@@ -0,0 +1,3 @@
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M3.755 12.5h16.492a.75.75 0 0 0 0-1.5H3.755a.75.75 0 0 0 0 1.5Z" />
+</svg>

plugins/in-app-menu/assets/unmaximize.svg

@@ -0,0 +1,3 @@
+<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M7.518 5H6.009a3.25 3.25 0 0 1 3.24-3h8.001A4.75 4.75 0 0 1 22 6.75v8a3.25 3.25 0 0 1-3 3.24v-1.508a1.75 1.75 0 0 0 1.5-1.732v-8a3.25 3.25 0 0 0-3.25-3.25h-8A1.75 1.75 0 0 0 7.518 5ZM5.25 6A3.25 3.25 0 0 0 2 9.25v9.5A3.25 3.25 0 0 0 5.25 22h9.5A3.25 3.25 0 0 0 18 18.75v-9.5A3.25 3.25 0 0 0 14.75 6h-9.5ZM3.5 9.25c0-.966.784-1.75 1.75-1.75h9.5c.967 0 1.75.784 1.75 1.75v9.5a1.75 1.75 0 0 1-1.75 1.75h-9.5a1.75 1.75 0 0 1-1.75-1.75v-9.5Z"/>
+</svg>

plugins/in-app-menu/back.ts

@@ -1,5 +1,3 @@
-import path from 'node:path';
-
 import { register } from 'electron-localshortcut';
 
 import { BrowserWindow, Menu, MenuItem, ipcMain } from 'electron';
@@ -25,7 +23,7 @@ export default (win: BrowserWindow) => {
       (key: string, value: unknown) => (key !== 'commandsMap' && key !== 'menu') ? value : undefined),
     ),
   );
-  
+
   const getMenuItemById = (commandId: number): MenuItem | null => {
     const menu = Menu.getApplicationMenu();
 
@@ -40,7 +38,7 @@ export default (win: BrowserWindow) => {
         break;
       }
     }
-    
+
     return target;
   };
 
@@ -57,4 +55,11 @@ export default (win: BrowserWindow) => {
       (key: string, value: unknown) => (key !== 'commandsMap' && key !== 'menu') ? value : undefined),
     );
   });
+
+  ipcMain.handle('window-is-maximized', () => win.isMaximized());
+
+  ipcMain.handle('window-close', () => win.close());
+  ipcMain.handle('window-minimize', () => win.minimize());
+  ipcMain.handle('window-maximize', () => win.maximize());
+  ipcMain.handle('window-unmaximize', () => win.unmaximize());
 };

plugins/in-app-menu/front.ts

@@ -2,7 +2,12 @@ import { ipcRenderer, Menu } from 'electron';
 
 import { createPanel } from './menu/panel';
 
-import logo from '../../assets/menu.svg';
+import logo from './assets/menu.svg';
+import close from './assets/close.svg';
+import minimize from './assets/minimize.svg';
+import maximize from './assets/maximize.svg';
+import unmaximize from './assets/unmaximize.svg';
+
 import { isEnabled } from '../../config/plugins';
 import config from '../../config';
 
@@ -11,8 +16,9 @@ function $<E extends Element = Element>(selector: string) {
 }
 
 const isMacOS = navigator.userAgent.includes('Macintosh');
+const isNotWindowsOrMacOS = !navigator.userAgent.includes('Windows') && !isMacOS;
 
-export default () => {
+export default async () => {
   let hideMenu = config.get('options.hideMenu');
   const titleBar = document.createElement('title-bar');
   const navBar = document.querySelector<HTMLDivElement>('#nav-bar-background');
@@ -39,6 +45,60 @@ export default () => {
   if (!isMacOS) titleBar.appendChild(logo);
   document.body.appendChild(titleBar);
 
+  titleBar.appendChild(logo);
+
+  const addWindowControls = async () => {
+
+    // Create window control buttons
+    const minimizeButton = document.createElement('button');
+    minimizeButton.classList.add('window-control');
+    minimizeButton.appendChild(minimize);
+    minimizeButton.onclick = () => ipcRenderer.invoke('window-minimize');
+
+    const maximizeButton = document.createElement('button');
+    if (await ipcRenderer.invoke('window-is-maximized')) {
+      maximizeButton.classList.add('window-control');
+      maximizeButton.appendChild(unmaximize);
+    } else {
+      maximizeButton.classList.add('window-control');
+      maximizeButton.appendChild(maximize);
+    }
+    maximizeButton.onclick = async () => {
+      if (await ipcRenderer.invoke('window-is-maximized')) {
+        // change icon to maximize
+        maximizeButton.removeChild(maximizeButton.firstChild!);
+        maximizeButton.appendChild(maximize);
+
+        // call unmaximize
+        await ipcRenderer.invoke('window-unmaximize');
+      } else {
+        // change icon to unmaximize
+        maximizeButton.removeChild(maximizeButton.firstChild!);
+        maximizeButton.appendChild(unmaximize);
+
+        // call maximize
+        await ipcRenderer.invoke('window-maximize');
+      }
+    };
+
+    const closeButton = document.createElement('button');
+    closeButton.classList.add('window-control');
+    closeButton.appendChild(close);
+    closeButton.onclick = () => ipcRenderer.invoke('window-close');
+
+    // Create a container div for the window control buttons
+    const windowControlsContainer = document.createElement('div');
+    windowControlsContainer.classList.add('window-controls-container');
+    windowControlsContainer.appendChild(minimizeButton);
+    windowControlsContainer.appendChild(maximizeButton);
+    windowControlsContainer.appendChild(closeButton);
+
+    // Add window control buttons to the title bar
+    titleBar.appendChild(windowControlsContainer);
+  };
+
+  if (isNotWindowsOrMacOS) await addWindowControls();
+
   if (navBar) {
     const observer = new MutationObserver((mutations) => {
       mutations.forEach(() => {
@@ -69,8 +129,9 @@ export default () => {
         menu.style.visibility = 'hidden';
       }
     });
+    if (isNotWindowsOrMacOS) await addWindowControls();
   };
-  updateMenu();
+  await updateMenu();
 
   document.title = 'Youtube Music';
 

plugins/in-app-menu/titlebar.css

@@ -126,6 +126,33 @@ menu-separator {
   margin-left: -4px;
 }
 
+/* Window control container */
+
+.window-controls-container {
+  -webkit-app-region: no-drag;
+  display: flex;
+  justify-content: flex-end; /* Align to the right end of the title-bar */
+  align-items: center;
+  gap: 4px; /* Add spacing between the window control buttons */
+  position: absolute; /* Position it absolutely within title-bar */
+  right: 4px; /* Adjust the right position as needed */
+}
+
+/* Window control buttons */
+
+.window-control {
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  color: #f1f1f1;
+  font-size: 14px;
+  padding: 0;
+}
+
 /* youtube-music style */
 
 ytmusic-app-layout {