Merge pull request #10 from Boof2015/VSTs

Add cross platform VSTs

src/plugin-ui/OscilloscopeScope.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef, type JSX } from 'react'
+import { Oscilloscope } from '../renderer/visualizers/Oscilloscope'
+import type { ScopeSettings } from '../types/settings'
+import type { ResolvedOscilloscopeTheme } from '../types/theme'
+import type { BridgeOscilloscopeAnalyzer } from './BridgeOscilloscopeAnalyzer'
+import type { PluginWebViewDataSource } from './PluginWebViewDataSource'
+import { oscilloscopeSettingsToOptions } from './oscilloscopeOptions'
+
+interface OscilloscopeScopeProps {
+  dataSource: PluginWebViewDataSource
+  nativeAnalyzer: BridgeOscilloscopeAnalyzer
+  settings: ScopeSettings['oscilloscope']
+  theme: ResolvedOscilloscopeTheme
+}
+
+export default function OscilloscopeScope({
+  dataSource,
+  nativeAnalyzer,
+  settings,
+  theme,
+}: OscilloscopeScopeProps): JSX.Element {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const vizRef = useRef<Oscilloscope | null>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    const canvas = canvasRef.current
+    if (!container || !canvas) return
+
+    const viz = new Oscilloscope(canvas, {
+      ...oscilloscopeSettingsToOptions(settings, theme),
+      dataSource,
+      nativeAnalyzer,
+    })
+    vizRef.current = viz
+
+    const applySize = (): void => {
+      const rect = container.getBoundingClientRect()
+      const dpr = window.devicePixelRatio || 1
+      const pixelWidth = Math.max(1, Math.floor(rect.width * dpr))
+      const pixelHeight = Math.max(1, Math.floor(rect.height * dpr))
+      if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
+        canvas.width = pixelWidth
+        canvas.height = pixelHeight
+        viz.resize()
+      }
+    }
+
+    applySize()
+    viz.start()
+    const observer = new ResizeObserver(applySize)
+    observer.observe(container)
+
+    return () => {
+      observer.disconnect()
+      viz.dispose()
+      vizRef.current = null
+    }
+    // settings/theme applied via setOptions below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataSource, nativeAnalyzer])
+
+  useEffect(() => {
+    vizRef.current?.setOptions(oscilloscopeSettingsToOptions(settings, theme))
+  }, [settings, theme])
+
+  return (
+    <div ref={containerRef} className="spectrum-scope">
+      <canvas ref={canvasRef} className="spectrum-scope__canvas" />
+    </div>
+  )
+}