feat: migrate to new plugin api

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

src/plugins/captions-selector/config-renderer.ts

@@ -1,4 +0,0 @@
-import { PluginConfig } from '../../config/dynamic-renderer';
-
-const configRenderer = new PluginConfig('captions-selector', { enableFront: true });
-export default configRenderer;

src/plugins/captions-selector/config.ts

@@ -1,4 +0,0 @@
-import { PluginConfig } from '../../config/dynamic';
-
-const config = new PluginConfig('captions-selector', { enableFront: true });
-export default config;

src/plugins/captions-selector/index.ts

@@ -0,0 +1,20 @@
+import { createPluginBuilder } from '../utils/builder';
+
+const builder = createPluginBuilder('captions-selector', {
+  name: 'Captions Selector',
+  restartNeeded: false,
+  config: {
+    enabled: false,
+    disableCaptions: false,
+    autoload: false,
+    lastCaptionsCode: '',
+  },
+});
+
+export default builder;
+
+declare global {
+  interface PluginBuilderList {
+    [builder.id]: typeof builder;
+  }
+}

src/plugins/captions-selector/main.ts

@@ -1,19 +1,22 @@
-import { BrowserWindow, ipcMain } from 'electron';
 import prompt from 'custom-electron-prompt';
 
+import builder from './index';
+
 import promptOptions from '../../providers/prompt-options';
 
-export default (win: BrowserWindow) => {
-  ipcMain.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.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,22 +1,26 @@
-import config from './config';
+import builder from './index';
 
-import { MenuTemplate } from '../../menu';
+import type { MenuTemplate } from '../../menu';
 
-export default (): MenuTemplate => [
-  {
-    label: 'Automatically select last used caption',
-    type: 'checkbox',
-    checked: config.get('autoload'),
-    click(item) {
-      config.set('autoload', item.checked);
+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.get('disableCaptions'),
-    click(item) {
-      config.set('disableCaptions', item.checked);
+    {
+      label: 'No captions by default',
+      type: 'checkbox',
+      checked: config.disableCaptions,
+      click(item) {
+        setConfig({ disableCaptions: item.checked });
+      },
     },
-  },
-];
+  ];
+});

src/plugins/captions-selector/renderer.ts

@@ -1,7 +1,7 @@
-import configProvider from './config-renderer';
-
 import CaptionsSettingsButtonHTML from './templates/captions-settings-template.html?raw';
 
+import builder from './index';
+
 import { ElementFromHtml } from '../utils/renderer';
 import { YoutubePlayer } from '../../types/youtube-player';
 
@@ -20,28 +20,17 @@ interface LanguageOptions {
   vss_id: string;
 }
 
-let captionsSelectorConfig: ConfigType<'captions-selector'>;
-
 const $ = <Element extends HTMLElement>(selector: string): Element => document.querySelector(selector)!;
 
 const captionsSettingsButton = ElementFromHtml(CaptionsSettingsButtonHTML);
 
-export default () => {
-  captionsSelectorConfig = configProvider.getAll();
+export default builder.createRenderer(({ getConfig, setConfig }) => {
+  let config: Awaited<ReturnType<typeof getConfig>>;
+  let captionTrackList: LanguageOptions[] | null = null;
+  let api: YoutubePlayer;
 
-  configProvider.subscribeAll((newConfig) => {
-    captionsSelectorConfig = newConfig;
-  });
-  document.addEventListener('apiLoaded', (event) => setup(event.detail), { once: true, passive: true });
-};
-
-function setup(api: YoutubePlayer) {
-  $('.right-controls-buttons').append(captionsSettingsButton);
-
-  let captionTrackList = api.getOption<LanguageOptions[]>('captions', 'tracklist') ?? [];
-
-  $('video').addEventListener('srcChanged', () => {
-    if (captionsSelectorConfig.disableCaptions) {
+  const videoChangeListener = () => {
+    if (config.disableCaptions) {
       setTimeout(() => api.unloadModule('captions'), 100);
       captionsSettingsButton.style.display = 'none';
       return;
@@ -52,9 +41,9 @@ function setup(api: YoutubePlayer) {
     setTimeout(() => {
       captionTrackList = api.getOption('captions', 'tracklist') ?? [];
 
-      if (captionsSelectorConfig.autoload && captionsSelectorConfig.lastCaptionsCode) {
+      if (config.autoload && config.lastCaptionsCode) {
         api.setOption('captions', 'track', {
-          languageCode: captionsSelectorConfig.lastCaptionsCode,
+          languageCode: config.lastCaptionsCode,
         });
       }
 
@@ -62,9 +51,9 @@ function setup(api: YoutubePlayer) {
         ? 'inline-block'
         : 'none';
     }, 250);
-  });
+  };
 
-  captionsSettingsButton.addEventListener('click', async () => {
+  const captionsButtonClickListener = async () => {
     if (captionTrackList?.length) {
       const currentCaptionTrack = api.getOption<LanguageOptions>('captions', 'track')!;
       let currentIndex = currentCaptionTrack
@@ -82,7 +71,7 @@ function setup(api: YoutubePlayer) {
       }
 
       const newCaptions = captionTrackList[currentIndex];
-      configProvider.set('lastCaptionsCode', newCaptions?.languageCode);
+      setConfig({ lastCaptionsCode: newCaptions?.languageCode });
       if (newCaptions) {
         api.setOption('captions', 'track', { languageCode: newCaptions.languageCode });
       } else {
@@ -91,5 +80,38 @@ function setup(api: YoutubePlayer) {
 
       setTimeout(() => api.playVideo());
     }
-  });
-}
+  };
+
+  const listener = ({ detail }: {
+    detail: YoutubePlayer;
+  }) => {
+    api = detail;
+    $('.right-controls-buttons').append(captionsSettingsButton);
+
+    captionTrackList = api.getOption<LanguageOptions[]>('captions', 'tracklist') ?? [];
+
+    $('video').addEventListener('srcChanged', videoChangeListener);
+    captionsSettingsButton.addEventListener('click', captionsButtonClickListener);
+  };
+
+  const removeListener = () => {
+    $('.right-controls-buttons').removeChild(captionsSettingsButton);
+    $<YoutubePlayer & HTMLElement>('#movie_player').unloadModule('captions');
+
+    document.removeEventListener('apiLoaded', listener);
+  };
+
+  return {
+    async onLoad() {
+      config = await getConfig();
+
+      document.addEventListener('apiLoaded', listener, { once: true, passive: true });
+    },
+    onUnload() {
+      removeListener();
+    },
+    onConfigChange(newConfig) {
+      config = newConfig;
+    }
+  };
+});