WIP 2

src/plugins/disable-autoplay/index.ts

@@ -1,23 +1,74 @@
-import { createPluginBuilder } from '../utils/builder';
+import { createPlugin } from '@/utils';
+import {YoutubePlayer} from "@/types/youtube-player";
 
 export type DisableAutoPlayPluginConfig = {
   enabled: boolean;
   applyOnce: boolean;
 }
 
-const builder = createPluginBuilder('disable-autoplay', {
+export default createPlugin<
+  unknown,
+  unknown,
+  {
+    config: DisableAutoPlayPluginConfig | null;
+    api: YoutubePlayer | null;
+    eventListener: (name: string) => void;
+    timeUpdateListener: (e: Event) => void;
+  },
+  DisableAutoPlayPluginConfig
+>({
   name: 'Disable Autoplay',
   restartNeeded: false,
   config: {
     enabled: false,
     applyOnce: false,
-  } as DisableAutoPlayPluginConfig,
+  },
+  menu: async ({ getConfig, setConfig }) => {
+    const config = await getConfig();
+
+    return [
+      {
+        label: 'Applies only on startup',
+        type: 'checkbox',
+        checked: config.applyOnce,
+        async click() {
+          const nowConfig = await getConfig();
+          setConfig({
+            applyOnce: !nowConfig.applyOnce,
+          });
+        },
+      },
+    ];
+  },
+  renderer: {
+    config: null,
+    api: null,
+    eventListener(name: string) {
+      if (this.config?.applyOnce) {
+        this.api?.removeEventListener('videodatachange', this.eventListener);
+      }
+
+      if (name === 'dataloaded') {
+        this.api?.pauseVideo();
+        document.querySelector<HTMLVideoElement>('video')?.addEventListener('timeupdate', this.timeUpdateListener, { once: true });
+      }
+    },
+    timeUpdateListener(e: Event) {
+      if (e.target instanceof HTMLVideoElement) {
+        e.target.pause();
+      }
+    },
+    onPlayerApiReady(api) {
+      this.api = api;
+
+      api.addEventListener('videodatachange', this.eventListener);
+    },
+    stop() {
+      this.api?.removeEventListener('videodatachange', this.eventListener);
+    },
+    onConfigChange(newConfig) {
+      this.config = newConfig;
+    }
+  }
 });
 
-export default builder;
-
-declare global {
-  interface PluginBuilderList {
-    [builder.id]: typeof builder;
-  }
-}

src/plugins/disable-autoplay/menu.ts

@@ -1,19 +0,0 @@
-import builder from './index';
-
-export default builder.createMenu(async ({ getConfig, setConfig }) => {
-  const config = await getConfig();
-
-  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,42 +0,0 @@
-import builder from './index';
-
-import type { YoutubePlayer } from '../../types/youtube-player';
-
-export default builder.createRenderer(({ getConfig }) => {
-  let config: Awaited<ReturnType<typeof getConfig>>;
-
-  let apiEvent: YoutubePlayer;
-
-  const timeUpdateListener = (e: Event) => {
-    if (e.target instanceof HTMLVideoElement) {
-      e.target.pause();
-    }
-  };
-
-  const eventListener = async (name: string) => {
-    if (config.applyOnce) {
-      apiEvent.removeEventListener('videodatachange', eventListener);
-    }
-
-    if (name === 'dataloaded') {
-      apiEvent.pauseVideo();
-      document.querySelector<HTMLVideoElement>('video')?.addEventListener('timeupdate', timeUpdateListener, { once: true });
-    }
-  };
-
-  return {
-    async onPlayerApiReady(api) {
-      config = await getConfig();
-
-      apiEvent = api;
-
-      apiEvent.addEventListener('videodatachange', eventListener);
-    },
-    onUnload() {
-      apiEvent.removeEventListener('videodatachange', eventListener);
-    },
-    onConfigChange(newConfig) {
-      config = newConfig;
-    }
-  };
-});