change plugin system

src/plugins/audio-compressor.ts

@@ -0,0 +1,25 @@
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
+  name: 'Audio Compressor',
+  description: '',
+
+  renderer() {
+    document.addEventListener(
+      'audioCanPlay',
+      ({ detail: { audioSource, audioContext } }) => {
+        const compressor = audioContext.createDynamicsCompressor();
+
+        compressor.threshold.value = -50;
+        compressor.ratio.value = 12;
+        compressor.knee.value = 40;
+        compressor.attack.value = 0;
+        compressor.release.value = 0.25;
+
+        audioSource.connect(compressor);
+        compressor.connect(audioContext.destination);
+      },
+      { once: true, passive: true },
+    );
+  },
+});

src/plugins/audio-compressor/index.ts

@@ -1,17 +0,0 @@
-import { createPluginBuilder } from '../utils/builder';
-
-const builder = createPluginBuilder('audio-compressor', {
-  name: 'Audio Compressor',
-  restartNeeded: false,
-  config: {
-    enabled: false,
-  },
-});
-
-export default builder;
-
-declare global {
-  interface PluginBuilderList {
-    [builder.id]: typeof builder;
-  }
-}

src/plugins/audio-compressor/renderer.ts

@@ -1,24 +0,0 @@
-import builder from './index';
-
-export default builder.createRenderer(() => {
-  return {
-    onLoad() {
-      document.addEventListener('audioCanPlay', (e) => {
-        const { audioContext } = e.detail;
-
-        const compressor = audioContext.createDynamicsCompressor();
-        compressor.threshold.value = -50;
-        compressor.ratio.value = 12;
-        compressor.knee.value = 40;
-        compressor.attack.value = 0;
-        compressor.release.value = 0.25;
-
-        e.detail.audioSource.connect(compressor);
-        compressor.connect(audioContext.destination);
-      }, {
-        once: true, // Only create the audio compressor once, not on each video
-        passive: true,
-      });
-    }
-  };
-});

src/plugins/blur-nav-bar/index.ts

@@ -1,20 +1,7 @@
+import { createPlugin } from '@/utils';
 import style from './style.css?inline';
 
-import { createPluginBuilder } from '../utils/builder';
-
-const builder = createPluginBuilder('blur-nav-bar', {
+export default createPlugin({
   name: 'Blur Navigation Bar',
-  restartNeeded: true,
-  config: {
-    enabled: false,
-  },
-  styles: [style],
+  renderer: { stylesheet: style },
 });
-
-export default builder;
-
-declare global {
-  interface PluginBuilderList {
-    [builder.id]: typeof builder;
-  }
-}

src/plugins/bypass-age-restrictions/index.ts

@@ -1,17 +1,9 @@
-import { createPluginBuilder } from '../utils/builder';
+import { createPlugin } from '@/utils';
 
-const builder = createPluginBuilder('bypass-age-restrictions', {
+export default createPlugin({
   name: 'Bypass Age Restrictions',
   restartNeeded: true,
-  config: {
-    enabled: false,
-  },
+
+  // See https://github.com/zerodytrash/Simple-YouTube-Age-Restriction-Bypass#userscript
+  renderer: () => import('simple-youtube-age-restriction-bypass'),
 });
-
-export default builder;
-
-declare global {
-  interface PluginBuilderList {
-    [builder.id]: typeof builder;
-  }
-}

src/plugins/bypass-age-restrictions/renderer.ts

@@ -1,8 +0,0 @@
-import builder from './index';
-
-export default builder.createRenderer(() => ({
-  async onLoad() {
-    // See https://github.com/zerodytrash/Simple-YouTube-Age-Restriction-Bypass#userscript
-    await import('simple-youtube-age-restriction-bypass');
-  },
-}));

src/plugins/captions-selector/index.ts

@@ -1,20 +1,54 @@
-import { createPluginBuilder } from '../utils/builder';
+import prompt from 'custom-electron-prompt';
 
-const builder = createPluginBuilder('captions-selector', {
+import promptOptions from '@/providers/prompt-options';
+import { createPlugin } from '@/utils';
+
+export default createPlugin({
   name: 'Captions Selector',
-  restartNeeded: false,
   config: {
-    enabled: false,
     disableCaptions: false,
     autoload: false,
     lastCaptionsCode: '',
   },
+
+  menu({ getConfig, setConfig }) {
+    const config = getConfig();
+    return [
+      {
+        label: 'Automatically select last used caption',
+        type: 'checkbox',
+        checked: config.autoload as boolean,
+        click(item) {
+          setConfig({ autoload: item.checked });
+        },
+      },
+      {
+        label: 'No captions by default',
+        type: 'checkbox',
+        checked: config.disableCaptions as boolean,
+        click(item) {
+          setConfig({ disableCaptions: item.checked });
+        },
+      },
+    ];
+  },
+
+  backend({ ipc: { handle }, win }) {
+    handle(
+      'captionsSelector',
+      async (_, captionLabels: Record<string, string>, currentIndex: string) =>
+        await prompt(
+          {
+            title: 'Choose Caption',
+            label: `Current Caption: ${captionLabels[currentIndex] || 'None'}`,
+            type: 'select',
+            value: currentIndex,
+            selectOptions: captionLabels,
+            resizable: true,
+            ...promptOptions(),
+          },
+          win,
+        ),
+    );
+  },
 });
-
-export default builder;
-
-declare global {
-  interface PluginBuilderList {
-    [builder.id]: typeof builder;
-  }
-}

src/plugins/captions-selector/main.ts

@@ -1,22 +0,0 @@
-import prompt from 'custom-electron-prompt';
-
-import builder from './index';
-
-import promptOptions from '../../providers/prompt-options';
-
-export default builder.createMain(({ handle }) => ({
-  onLoad(window) {
-    handle('captionsSelector', async (_, captionLabels: Record<string, string>, currentIndex: string) => await prompt(
-      {
-        title: 'Choose Caption',
-        label: `Current Caption: ${captionLabels[currentIndex] || 'None'}`,
-        type: 'select',
-        value: currentIndex,
-        selectOptions: captionLabels,
-        resizable: true,
-        ...promptOptions(),
-      },
-      window,
-    ));
-  }
-}));

src/plugins/captions-selector/menu.ts

@@ -1,26 +0,0 @@
-import builder from './index';
-
-import type { MenuTemplate } from '../../menu';
-
-export default builder.createMenu(async ({ getConfig, setConfig }): Promise<MenuTemplate> => {
-  const config = await getConfig();
-
-  return [
-    {
-      label: 'Automatically select last used caption',
-      type: 'checkbox',
-      checked: config.autoload,
-      click(item) {
-        setConfig({ autoload: item.checked });
-      },
-    },
-    {
-      label: 'No captions by default',
-      type: 'checkbox',
-      checked: config.disableCaptions,
-      click(item) {
-        setConfig({ disableCaptions: item.checked });
-      },
-    },
-  ];
-});

src/plugins/utils/main/index.ts

@@ -1,5 +1,4 @@
 export * from './css';
 export * from './fs';
-export * from './plugin';
 export * from './types';
 export * from './fetch';

src/plugins/utils/main/plugin.ts

@@ -1,18 +0,0 @@
-import is from 'electron-is';
-
-import { pluginBuilders } from 'virtual:PluginBuilders';
-
-export const getAvailablePluginNames = () => {
-  return Object.keys(pluginBuilders)
-    .sort()
-    .filter((id) => {
-      if (is.windows() && id === 'touchbar') {
-        return false;
-      } else if (is.macOS() && id === 'taskbar-mediacontrol') {
-        return false;
-      } else if (is.linux() && (id === 'taskbar-mediacontrol' || id === 'touchbar')) {
-        return false;
-      }
-      return true;
-    });
-};