feat: migrate to new plugin api

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

src/plugins/visualizer/index.ts

@@ -0,0 +1,132 @@
+import emptyStyle from './empty-player.css?inline';
+
+import { createPluginBuilder } from '../utils/builder';
+
+type WaveColor = {
+  gradient: string[];
+  rotate?: number;
+};
+
+export type VisualizerPluginConfig = {
+  enabled: boolean;
+  type: 'butterchurn' | 'vudio' | 'wave';
+  butterchurn: {
+    preset: string;
+    renderingFrequencyInMs: number;
+    blendTimeInSeconds: number;
+  },
+  vudio: {
+    effect: string;
+    accuracy: number;
+    lighting: {
+      maxHeight: number;
+      maxSize: number;
+      lineWidth: number;
+      color: string;
+      shadowBlur: number;
+      shadowColor: string;
+      fadeSide: boolean;
+      prettify: boolean;
+      horizontalAlign: string;
+      verticalAlign: string;
+      dottify: boolean;
+    }
+  };
+  wave: {
+    animations: {
+      type: string;
+      config: {
+        bottom?: boolean;
+        top?: boolean;
+        count?: number;
+        cubeHeight?: number;
+        lineWidth?: number;
+        diameter?: number;
+        fillColor?: string | WaveColor;
+        lineColor?: string | WaveColor;
+        radius?: number;
+        frequencyBand?: string;
+      }
+    }[];
+  };
+};
+
+const builder = createPluginBuilder('visualizer', {
+  name: 'Visualizer',
+  restartNeeded: true,
+  config: {
+    enabled: false,
+    type: 'butterchurn',
+    // Config per visualizer
+    butterchurn: {
+      preset: 'martin [shadow harlequins shape code] - fata morgana',
+      renderingFrequencyInMs: 500,
+      blendTimeInSeconds: 2.7,
+    },
+    vudio: {
+      effect: 'lighting',
+      accuracy: 128,
+      lighting: {
+        maxHeight: 160,
+        maxSize: 12,
+        lineWidth: 1,
+        color: '#49f3f7',
+        shadowBlur: 2,
+        shadowColor: 'rgba(244,244,244,.5)',
+        fadeSide: true,
+        prettify: false,
+        horizontalAlign: 'center',
+        verticalAlign: 'middle',
+        dottify: true,
+      },
+    },
+    wave: {
+      animations: [
+        {
+          type: 'Cubes',
+          config: {
+            bottom: true,
+            count: 30,
+            cubeHeight: 5,
+            fillColor: { gradient: ['#FAD961', '#F76B1C'] },
+            lineColor: 'rgba(0,0,0,0)',
+            radius: 20,
+          },
+        },
+        {
+          type: 'Cubes',
+          config: {
+            top: true,
+            count: 12,
+            cubeHeight: 5,
+            fillColor: { gradient: ['#FAD961', '#F76B1C'] },
+            lineColor: 'rgba(0,0,0,0)',
+            radius: 10,
+          },
+        },
+        {
+          type: 'Circles',
+          config: {
+            lineColor: {
+              gradient: ['#FAD961', '#FAD961', '#F76B1C'],
+              rotate: 90,
+            },
+            lineWidth: 4,
+            diameter: 20,
+            count: 10,
+            frequencyBand: 'base',
+          },
+        },
+      ],
+    },
+  } as VisualizerPluginConfig,
+  styles: [emptyStyle],
+});
+
+export default builder;
+
+declare global {
+  interface PluginBuilderList {
+    [builder.id]: typeof builder;
+  }
+}