convert plugins

src/plugins/quality-changer/index.ts

@@ -1,17 +1,65 @@
-import { createPluginBuilder } from '../utils/builder';
+import { dialog } from 'electron';
 
-const builder = createPluginBuilder('quality-changer', {
+import QualitySettingsTemplate from './templates/qualitySettingsTemplate.html?raw';
+
+import { createPlugin } from '@/utils';
+import { ElementFromHtml } from '@/plugins/utils/renderer';
+
+import type { YoutubePlayer } from '@/types/youtube-player';
+
+export default createPlugin({
   name: 'Video Quality Changer',
   restartNeeded: false,
   config: {
     enabled: false,
   },
+
+  backend({ ipc, window }) {
+    ipc.handle('qualityChanger', async (qualityLabels: string[], currentIndex: number) => await dialog.showMessageBox(window, {
+      type: 'question',
+      buttons: qualityLabels,
+      defaultId: currentIndex,
+      title: 'Choose Video Quality',
+      message: 'Choose Video Quality:',
+      detail: `Current Quality: ${qualityLabels[currentIndex]}`,
+      cancelId: -1,
+    }));
+  },
+
+  renderer: {
+    qualitySettingsButton: ElementFromHtml(QualitySettingsTemplate),
+    onPlayerApiReady(api: YoutubePlayer, context) {
+      const getPlayer = () => document.querySelector<HTMLVideoElement>('#player');
+      const chooseQuality = () => {
+        setTimeout(() => getPlayer()?.click());
+
+        const qualityLevels = api.getAvailableQualityLevels();
+
+        const currentIndex = qualityLevels.indexOf(api.getPlaybackQuality());
+
+        (context.ipc.invoke('qualityChanger', api.getAvailableQualityLabels(), currentIndex) as Promise<{ response: number }>)
+          .then((promise) => {
+            if (promise.response === -1) {
+              return;
+            }
+
+            const newQuality = qualityLevels[promise.response];
+            api.setPlaybackQualityRange(newQuality);
+            api.setPlaybackQuality(newQuality);
+          });
+      };
+
+      const setup = () => {
+        document.querySelector('.top-row-buttons.ytmusic-player')?.prepend(this.qualitySettingsButton);
+
+        this.qualitySettingsButton.addEventListener('click', chooseQuality);
+      };
+
+      setup();
+    },
+    stop() {
+      document.querySelector('.top-row-buttons.ytmusic-player')?.removeChild(this.qualitySettingsButton);
+    },
+  }
 });
 
-export default builder;
-
-declare global {
-  interface PluginBuilderList {
-    [builder.id]: typeof builder;
-  }
-}

src/plugins/quality-changer/main.ts

@@ -1,17 +0,0 @@
-import { dialog, BrowserWindow } from 'electron';
-
-import builder from './index';
-
-export default builder.createMain(({ handle }) => ({
-  onLoad(win: BrowserWindow) {
-    handle('qualityChanger', async (qualityLabels: string[], currentIndex: number) => await dialog.showMessageBox(win, {
-      type: 'question',
-      buttons: qualityLabels,
-      defaultId: currentIndex,
-      title: 'Choose Video Quality',
-      message: 'Choose Video Quality:',
-      detail: `Current Quality: ${qualityLabels[currentIndex]}`,
-      cancelId: -1,
-    }));
-  }
-}));

src/plugins/quality-changer/renderer.ts

@@ -1,54 +0,0 @@
-import qualitySettingsTemplate from './templates/qualitySettingsTemplate.html?raw';
-
-import builder from './index';
-
-import { ElementFromHtml } from '../utils/renderer';
-
-import type { YoutubePlayer } from '../../types/youtube-player';
-
-export default builder.createRenderer(({ invoke }) => {
-  function $(selector: string): HTMLElement | null {
-    return document.querySelector(selector);
-  }
-
-  const qualitySettingsButton = ElementFromHtml(qualitySettingsTemplate);
-
-  let api: YoutubePlayer;
-
-  const chooseQuality = () => {
-    setTimeout(() => $('#player')?.click());
-
-    const qualityLevels = api.getAvailableQualityLevels();
-
-    const currentIndex = qualityLevels.indexOf(api.getPlaybackQuality());
-
-    invoke<{ response: number }>('qualityChanger', api.getAvailableQualityLabels(), currentIndex)
-      .then((promise) => {
-        if (promise.response === -1) {
-          return;
-        }
-
-        const newQuality = qualityLevels[promise.response];
-        api.setPlaybackQualityRange(newQuality);
-        api.setPlaybackQuality(newQuality);
-      });
-  };
-
-  function setup() {
-    $('.top-row-buttons.ytmusic-player')?.prepend(qualitySettingsButton);
-
-    qualitySettingsButton.addEventListener('click', chooseQuality);
-  }
-
-  return {
-    onPlayerApiReady(playerApi) {
-      api = playerApi;
-
-      setup();
-    },
-    onUnload() {
-      $('.top-row-buttons.ytmusic-player')?.removeChild(qualitySettingsButton);
-      qualitySettingsButton.removeEventListener('click', chooseQuality);
-    }
-  };
-});