QOL: Move source code under the src directory. (#1318)

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

@@ -0,0 +1,163 @@
+import { ipcRenderer, Menu } from 'electron';
+
+import { createPanel } from './menu/panel';
+
+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';
+
+function $<E extends Element = Element>(selector: string) {
+  return document.querySelector<E>(selector);
+}
+
+const isMacOS = navigator.userAgent.includes('Macintosh');
+const isNotWindowsOrMacOS = !navigator.userAgent.includes('Windows') && !isMacOS;
+
+export default async () => {
+  let hideMenu = config.get('options.hideMenu');
+  const titleBar = document.createElement('title-bar');
+  const navBar = document.querySelector<HTMLDivElement>('#nav-bar-background');
+  let maximizeButton: HTMLButtonElement;
+  if (isMacOS) titleBar.style.setProperty('--offset-left', '70px');
+
+  logo.classList.add('title-bar-icon');
+  const logoClick = () => {
+    hideMenu = !hideMenu;
+    let visibilityStyle: string;
+    if (hideMenu) {
+      visibilityStyle = 'hidden';
+    } else {
+      visibilityStyle = 'visible';
+    }
+    const menus = document.querySelectorAll<HTMLElement>('menu-button');
+    menus.forEach((menu) => {
+      menu.style.visibility = visibilityStyle;
+    });
+  };
+  logo.onclick = logoClick;
+
+  ipcRenderer.on('toggleMenu', logoClick);
+
+  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');
+
+    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(() => {
+        titleBar.style.setProperty('--titlebar-background-color', navBar.style.backgroundColor);
+        document.querySelector('html')!.style.setProperty('--titlebar-background-color', navBar.style.backgroundColor);
+      });
+    });
+
+    observer.observe(navBar, { attributes : true, attributeFilter : ['style'] });
+  }
+
+  const updateMenu = async () => {
+    const children = [...titleBar.children];
+    children.forEach((child) => {
+      if (child !== logo) child.remove();
+    });
+
+    const menu = await ipcRenderer.invoke('get-menu') as Menu | null;
+    if (!menu) return;
+
+    menu.items.forEach((menuItem) => {
+      const menu = document.createElement('menu-button');
+      createPanel(titleBar, menu, menuItem.submenu?.items ?? []);
+
+      menu.append(menuItem.label);
+      titleBar.appendChild(menu);
+      if (hideMenu) {
+        menu.style.visibility = 'hidden';
+      }
+    });
+    if (isNotWindowsOrMacOS) await addWindowControls();
+  };
+  await updateMenu();
+
+  document.title = 'Youtube Music';
+
+  ipcRenderer.on('refreshMenu', () => updateMenu());
+  ipcRenderer.on('window-maximize', () => {
+    maximizeButton.removeChild(maximizeButton.firstChild!);
+    maximizeButton.appendChild(unmaximize);
+  });
+  ipcRenderer.on('window-unmaximize', () => {
+    maximizeButton.removeChild(maximizeButton.firstChild!);
+    maximizeButton.appendChild(maximize);
+  });
+
+  if (isEnabled('picture-in-picture')) {
+    ipcRenderer.on('pip-toggle', () => {
+      updateMenu();
+    });
+  }
+
+  // Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)
+  document.addEventListener('apiLoaded', () => {
+    const htmlHeadStyle = $('head > div > style');
+    if (htmlHeadStyle) {
+      // HACK: This is a hack to remove the scrollbar width
+      htmlHeadStyle.innerHTML = htmlHeadStyle.innerHTML.replace('html::-webkit-scrollbar {width: var(--ytmusic-scrollbar-width);', 'html::-webkit-scrollbar {');
+    }
+  }, { once: true, passive: true });
+};