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/features/player/components/full-screen-player-queue.tsx

@@ -11,7 +11,16 @@ import {
     useFullScreenPlayerStoreActions,
 } from '/@/renderer/store/full-screen-player.store';
 import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
-import { FullScreenSimilarSongs } from '/@/renderer/features/player/components/full-screen-similar-songs';
+import { Visualizer } from '/@/renderer/features/player/components/visualizer';
+import { lazy, useMemo } from 'react';
+import { usePlaybackSettings } from '/@/renderer/store';
+import { PlaybackType } from '/@/renderer/types';
+
+const FullScreenSimilarSongs = lazy(() =>
+    import('/@/renderer/features/player/components/full-screen-similar-songs').then((module) => ({
+        default: module.FullScreenSimilarSongs,
+    })),
+);
 
 const QueueContainer = styled.div`
     position: relative;
@@ -61,27 +70,41 @@ export const FullScreenPlayerQueue = () => {
     const { t } = useTranslation();
     const { activeTab, opacity } = useFullScreenPlayerStore();
     const { setStore } = useFullScreenPlayerStoreActions();
+    const { type, webAudio } = usePlaybackSettings();
 
-    const headerItems = [
-        {
-            active: activeTab === 'queue',
-            icon: <RiFileMusicLine size="1.5rem" />,
-            label: t('page.fullscreenPlayer.upNext'),
-            onClick: () => setStore({ activeTab: 'queue' }),
-        },
-        {
-            active: activeTab === 'related',
-            icon: <HiOutlineQueueList size="1.5rem" />,
-            label: t('page.fullscreenPlayer.related'),
-            onClick: () => setStore({ activeTab: 'related' }),
-        },
-        {
-            active: activeTab === 'lyrics',
-            icon: <RiFileTextLine size="1.5rem" />,
-            label: t('page.fullscreenPlayer.lyrics'),
-            onClick: () => setStore({ activeTab: 'lyrics' }),
-        },
-    ];
+    const headerItems = useMemo(() => {
+        const items = [
+            {
+                active: activeTab === 'queue',
+                icon: <RiFileMusicLine size="1.5rem" />,
+                label: t('page.fullscreenPlayer.upNext'),
+                onClick: () => setStore({ activeTab: 'queue' }),
+            },
+            {
+                active: activeTab === 'related',
+                icon: <HiOutlineQueueList size="1.5rem" />,
+                label: t('page.fullscreenPlayer.related'),
+                onClick: () => setStore({ activeTab: 'related' }),
+            },
+            {
+                active: activeTab === 'lyrics',
+                icon: <RiFileTextLine size="1.5rem" />,
+                label: t('page.fullscreenPlayer.lyrics'),
+                onClick: () => setStore({ activeTab: 'lyrics' }),
+            },
+        ];
+
+        if (type === PlaybackType.WEB && webAudio) {
+            items.push({
+                active: activeTab === 'visualizer',
+                icon: <RiFileTextLine size="1.5rem" />,
+                label: 'Visualizer',
+                onClick: () => setStore({ activeTab: 'visualizer' }),
+            });
+        }
+
+        return items;
+    }, [activeTab, setStore, t, type, webAudio]);
 
     return (
         <GridContainer
@@ -91,6 +114,7 @@ export const FullScreenPlayerQueue = () => {
             <Group
                 grow
                 align="center"
+                className="full-screen-player-queue-header"
                 position="center"
             >
                 {headerItems.map((item) => (
@@ -127,6 +151,8 @@ export const FullScreenPlayerQueue = () => {
                 </QueueContainer>
             ) : activeTab === 'lyrics' ? (
                 <Lyrics />
+            ) : activeTab === 'visualizer' && type === PlaybackType.WEB && webAudio ? (
+                <Visualizer />
             ) : null}
         </GridContainer>
     );

src/renderer/features/player/components/visualizer.tsx

@@ -0,0 +1,72 @@
+import { createRef, useCallback, useEffect, useState } from 'react';
+import { useWebAudio } from '/@/renderer/features/player/hooks/use-webaudio';
+import AudioMotionAnalyzer from 'audiomotion-analyzer';
+import styled from 'styled-components';
+import { useSettingsStore } from '/@/renderer/store';
+
+const StyledContainer = styled.div`
+    margin: auto;
+    max-width: 100%;
+
+    canvas {
+        margin: auto;
+        width: 100%;
+    }
+`;
+
+export const Visualizer = () => {
+    const { webAudio } = useWebAudio();
+    const canvasRef = createRef<HTMLDivElement>();
+    const accent = useSettingsStore((store) => store.general.accent);
+    const [motion, setMotion] = useState<AudioMotionAnalyzer>();
+
+    const [length, setLength] = useState(500);
+
+    useEffect(() => {
+        const { context, gain } = webAudio || {};
+        if (gain && context && canvasRef.current && !motion) {
+            const audioMotion = new AudioMotionAnalyzer(canvasRef.current, {
+                ansiBands: true,
+                audioCtx: context,
+                connectSpeakers: false,
+                gradient: 'prism',
+                mode: 4,
+                showPeaks: false,
+                smoothing: 0.8,
+            });
+            setMotion(audioMotion);
+            audioMotion.connectInput(gain);
+        }
+
+        return () => {};
+    }, [accent, canvasRef, motion, webAudio]);
+
+    const resize = useCallback(() => {
+        const body = document.querySelector('.full-screen-player-queue-container');
+        const header = document.querySelector('.full-screen-player-queue-header');
+
+        if (body && header) {
+            const width = body.clientWidth - 30;
+            const height = body.clientHeight - header.clientHeight - 30;
+
+            setLength(Math.min(width, height));
+        }
+    }, []);
+
+    useEffect(() => {
+        resize();
+
+        window.addEventListener('resize', resize);
+
+        return () => {
+            window.removeEventListener('resize', resize);
+        };
+    }, [resize]);
+
+    return (
+        <StyledContainer
+            ref={canvasRef}
+            style={{ height: length, width: length }}
+        />
+    );
+};

src/renderer/features/player/context/webaudio-context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+import { WebAudio } from '/@/renderer/types';
+
+export const WebAudioContext = createContext<{
+    setWebAudio?: (audio: WebAudio) => void;
+    webAudio?: WebAudio;
+}>({});

src/renderer/features/player/hooks/use-webaudio.ts

@@ -0,0 +1,7 @@
+import { useContext } from 'react';
+import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
+
+export const useWebAudio = () => {
+    const { webAudio, setWebAudio } = useContext(WebAudioContext);
+    return { setWebAudio, webAudio };
+};