feat: migrate to new plugin api

Co-authored-by: Su-Yong <simssy2205@gmail.com>

src/plugins/disable-autoplay/index.ts

@@ -0,0 +1,23 @@
+import { createPluginBuilder } from '../utils/builder';
+
+export type DisableAutoPlayPluginConfig = {
+  enabled: boolean;
+  applyOnce: boolean;
+}
+
+const builder = createPluginBuilder('disable-autoplay', {
+  name: 'Disable Autoplay',
+  restartNeeded: false,
+  config: {
+    enabled: false,
+    applyOnce: false,
+  } as DisableAutoPlayPluginConfig,
+});
+
+export default builder;
+
+declare global {
+  interface PluginBuilderList {
+    [builder.id]: typeof builder;
+  }
+}

src/plugins/disable-autoplay/menu.ts

@@ -1,20 +1,19 @@
-import { BrowserWindow } from 'electron';
+import builder from './index';
 
-import { setMenuOptions } from '../../config/plugins';
+export default builder.createMenu(async ({ getConfig, setConfig }) => {
+  const config = await getConfig();
 
-import { MenuTemplate } from '../../menu';
-
-import type { ConfigType } from '../../config/dynamic';
-
-export default (_: BrowserWindow, options: ConfigType<'disable-autoplay'>): MenuTemplate => [
-  {
-    label: 'Applies only on startup',
-    type: 'checkbox',
-    checked: options.applyOnce,
-    click() {
-      setMenuOptions('disable-autoplay', {
-        applyOnce: !options.applyOnce,
-      });
-    }
-  }
-];
+  return [
+    {
+      label: 'Applies only on startup',
+      type: 'checkbox',
+      checked: config.applyOnce,
+      async click() {
+        const nowConfig = await getConfig();
+        setConfig({
+          applyOnce: !nowConfig.applyOnce,
+        });
+      },
+    },
+  ];
+});

src/plugins/disable-autoplay/renderer.ts

@@ -1,23 +1,44 @@
-import type { ConfigType } from '../../config/dynamic';
+import builder from './index';
+
+import type { YoutubePlayer } from '../../types/youtube-player';
+
+export default builder.createRenderer(({ getConfig }) => {
+  let config: Awaited<ReturnType<typeof getConfig>>;
+
+  let apiEvent: CustomEvent<YoutubePlayer>;
 
-export default (options: ConfigType<'disable-autoplay'>) => {
   const timeUpdateListener = (e: Event) => {
     if (e.target instanceof HTMLVideoElement) {
       e.target.pause();
     }
   };
 
-  document.addEventListener('apiLoaded', (apiEvent) => {
-    const eventListener = (name: string) => {
-      if (options.applyOnce) {
-        apiEvent.detail.removeEventListener('videodatachange', eventListener);
-      }
+  const eventListener = async (name: string) => {
+    if (config.applyOnce) {
+      apiEvent.detail.removeEventListener('videodatachange', eventListener);
+    }
 
-      if (name === 'dataloaded') {
-        apiEvent.detail.pauseVideo();
-        document.querySelector<HTMLVideoElement>('video')?.addEventListener('timeupdate', timeUpdateListener, { once: true });
-      }
-    };
-    apiEvent.detail.addEventListener('videodatachange', eventListener);
-  }, { once: true, passive: true });
-};
+    if (name === 'dataloaded') {
+      apiEvent.detail.pauseVideo();
+      document.querySelector<HTMLVideoElement>('video')?.addEventListener('timeupdate', timeUpdateListener, { once: true });
+    }
+  };
+
+  return {
+    async onLoad() {
+      config = await getConfig();
+
+      document.addEventListener('apiLoaded', (api) => {
+        apiEvent = api;
+
+        apiEvent.detail.addEventListener('videodatachange', eventListener);
+      }, { once: true, passive: true });
+    },
+    onUnload() {
+      apiEvent.detail.removeEventListener('videodatachange', eventListener);
+    },
+    onConfigChange(newConfig) {
+      config = newConfig;
+    }
+  };
+});