add web visualizer (#314)

* add web visualizer

* fallback to simple model

* less samples, hopefully more efficient

* Use audiomotion analyzer

- Note: fixed to 4.1.1 because 4.2.0 uses esm which breaks in the current workflow...

* revert publish changes

* r2

* don't massively change package.json

* lazy

src/renderer/app.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useState, useRef } from 'react';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ModuleRegistry } from '@ag-grid-community/core';
 import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
@@ -21,8 +21,9 @@ import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-han
 import { PlayQueueHandlerContext } from '/@/renderer/features/player';
 import { getMpvProperties } from '/@/renderer/features/settings/components/playback/mpv-settings';
 import { PlayerState, useCssSettings, usePlayerStore, useQueueControls } from '/@/renderer/store';
-import { FontType, PlaybackType, PlayerStatus } from '/@/renderer/types';
+import { FontType, PlaybackType, PlayerStatus, WebAudio } from '/@/renderer/types';
 import '@ag-grid-community/styles/ag-grid.css';
+import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
 import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
 import i18n from '/@/i18n/i18n';
 import { useServerVersion } from '/@/renderer/hooks/use-server-version';
@@ -91,6 +92,8 @@ export const App = () => {
         }
     }, [builtIn, custom, system, type]);
 
+    const [webAudio, setWebAudio] = useState<WebAudio>();
+
     useEffect(() => {
         if (enabled && content) {
             // Yes, CSS is sanitized here as well. Prevent a suer from changing the
@@ -125,6 +128,10 @@ export const App = () => {
         return { handlePlayQueueAdd };
     }, [handlePlayQueueAdd]);
 
+    const webAudioProvider = useMemo(() => {
+        return { setWebAudio, webAudio };
+    }, [webAudio]);
+
     // Start the mpv instance on startup
     useEffect(() => {
         const initializeMpv = async () => {
@@ -278,7 +285,9 @@ export const App = () => {
         >
             <PlayQueueHandlerContext.Provider value={providerValue}>
                 <ContextMenuProvider>
-                    <AppRouter />
+                    <WebAudioContext.Provider value={webAudioProvider}>
+                        <AppRouter />
+                    </WebAudioContext.Provider>{' '}
                 </ContextMenuProvider>
             </PlayQueueHandlerContext.Provider>
             <IsUpdatedDialog />