in-app-menu

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

@@ -1,21 +1,28 @@
 import titlebarStyle from './titlebar.css?inline';
+import { createPlugin } from '@/utils';
+import { onMainLoad } from '@/plugins/in-app-menu/main';
+import { onMenu } from '@/plugins/in-app-menu/menu';
+import { onPlayerApiReady, onRendererLoad } from '@/plugins/in-app-menu/renderer';
 
-import { createPluginBuilder } from '../utils/builder';
+export interface InAppMenuConfig {
+  enabled: boolean;
+  hideDOMWindowControls: boolean;
+}
 
-const builder = createPluginBuilder('in-app-menu', {
+export default createPlugin({
   name: 'In-App Menu',
   restartNeeded: true,
   config: {
     enabled: false,
     hideDOMWindowControls: false,
+  } as InAppMenuConfig,
+  stylesheets: [titlebarStyle],
+  menu: onMenu,
+
+  backend: onMainLoad,
+  renderer: {
+    start: onRendererLoad,
+    onPlayerApiReady,
   },
-  styles: [titlebarStyle],
 });
 
-export default builder;
-
-declare global {
-  interface PluginBuilderList {
-    [builder.id]: typeof builder;
-  }
-}

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

@@ -2,12 +2,10 @@ import { register } from 'electron-localshortcut';
 
 import { BrowserWindow, Menu, MenuItem, ipcMain, nativeImage } from 'electron';
 
-import builder from './index';
+import { BackendContext } from '@/types/contexts';
+import { InAppMenuConfig } from '@/plugins/in-app-menu/index';
 
-export default builder.createMain(({ handle, send }) => {
-
-  return {
-    onLoad(win) {
+export const onMainLoad = ({ window: win, ipc: { handle, send } }: BackendContext<InAppMenuConfig>) => {
   win.on('close', () => {
     send('close-all-in-app-menu-panel');
   });
@@ -71,6 +69,4 @@ export default builder.createMain(({ handle, send }) => {
     const nativeImageIcon = nativeImage.createFromPath(imagePath);
     return nativeImageIcon?.toDataURL();
   });
-    },
-  };
-});
+};

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

@@ -1,10 +1,12 @@
 import is from 'electron-is';
 
-import builder from './index';
+import { setMenuOptions } from '@/config/plugins';
 
-import { setMenuOptions } from '../../config/plugins';
+import type { InAppMenuConfig } from './index';
+import type { MenuContext } from '@/types/contexts';
+import type { MenuTemplate } from '@/menu';
 
-export default builder.createMenu(async ({ getConfig }) => {
+export const onMenu = async ({ getConfig }: MenuContext<InAppMenuConfig>): Promise<MenuTemplate> => {
   const config = await getConfig();
 
   if (is.linux()) {
@@ -22,4 +24,4 @@ export default builder.createMenu(async ({ getConfig }) => {
   }
 
   return [];
-});
+};

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

@@ -6,16 +6,15 @@ import minimizeRaw from './assets/minimize.svg?inline';
 import maximizeRaw from './assets/maximize.svg?inline';
 import unmaximizeRaw from './assets/unmaximize.svg?inline';
 
-import builder from './index';
-
 import type { Menu } from 'electron';
 
+import type { RendererContext } from '@/types/contexts';
+import type { InAppMenuConfig } from '@/plugins/in-app-menu/index';
+
 const isMacOS = navigator.userAgent.includes('Macintosh');
 const isNotWindowsOrMacOS = !navigator.userAgent.includes('Windows') && !isMacOS;
 
-export default builder.createRenderer(({ getConfig, invoke, on }) => {
-  return {
-    async onLoad() {
+export const onRendererLoad = async ({ getConfig, ipc: { invoke, on } }: RendererContext<InAppMenuConfig>) => {
   const config = await getConfig();
 
   const hideDOMWindowControls = config.hideDOMWindowControls;
@@ -140,7 +139,7 @@ export default builder.createRenderer(({ getConfig, invoke, on }) => {
     });
     panelClosers = [];
 
-        const menu = await invoke<Menu | null>('get-menu');
+    const menu = await invoke('get-menu') as Menu | null;
     if (!menu) return;
 
     menu.items.forEach((menuItem) => {
@@ -182,14 +181,12 @@ export default builder.createRenderer(({ getConfig, invoke, on }) => {
       updateMenu();
     });
   }
-    },
-    // Increases the right margin of Navbar background when the scrollbar is visible to avoid blocking it (z-index doesn't affect it)
-    onPlayerApiReady() {
+};
+
+export const onPlayerApiReady = () => {
   const htmlHeadStyle = document.querySelector('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 {');
   }
-    },
-  };
-});
+};