add fullscreen visualizer (#1546)

src/renderer/layouts/default-layout/full-screen-visualizer-overlay.tsx

@@ -0,0 +1,14 @@
+import { AnimatePresence } from 'motion/react';
+
+import { FullScreenVisualizer } from '/@/renderer/features/player/components/full-screen-visualizer';
+import { useFullScreenPlayerStore } from '/@/renderer/store/full-screen-player.store';
+
+export const FullScreenVisualizerOverlay = () => {
+    const { visualizerExpanded: isFullScreenVisualizerExpanded } = useFullScreenPlayerStore();
+
+    return (
+        <AnimatePresence initial={false}>
+            {isFullScreenVisualizerExpanded && <FullScreenVisualizer />}
+        </AnimatePresence>
+    );
+};

src/renderer/layouts/default-layout/main-content.tsx

@@ -7,6 +7,7 @@ import { shallow } from 'zustand/shallow';
 import styles from './main-content.module.css';
 
 import { FullScreenOverlay } from '/@/renderer/layouts/default-layout/full-screen-overlay';
+import { FullScreenVisualizerOverlay } from '/@/renderer/layouts/default-layout/full-screen-visualizer-overlay';
 import { LeftSidebar } from '/@/renderer/layouts/default-layout/left-sidebar';
 import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
 import { useAppStore, useAppStoreActions, useSideQueueType } from '/@/renderer/store';
@@ -143,6 +144,7 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
         >
             {!shell && (
                 <>
+                    <FullScreenVisualizerOverlay />
                     <FullScreenOverlay />
                     <LeftSidebar isResizing={isResizing} startResizing={startResizing} />
                     <RightSidebar

src/renderer/layouts/mobile-layout/mobile-layout.tsx

@@ -6,6 +6,7 @@ import { Outlet } from 'react-router';
 import styles from './mobile-layout.module.css';
 
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
+import { FullScreenVisualizer } from '/@/renderer/features/player/components/full-screen-visualizer';
 import { MobileFullscreenPlayer } from '/@/renderer/features/player/components/mobile-fullscreen-player';
 import { CommandPalette } from '/@/renderer/features/search/components/command-palette';
 import { MobileSidebar } from '/@/renderer/features/sidebar/components/mobile-sidebar';
@@ -30,7 +31,10 @@ interface MobileLayoutProps {
 export const MobileLayout = ({ shell }: MobileLayoutProps) => {
     const { opened, ...handlers } = useCommandPalette();
     const [sidebarOpened, { close: closeSidebar, open: openSidebar }] = useDisclosure(false);
-    const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
+    const {
+        expanded: isFullScreenPlayerExpanded,
+        visualizerExpanded: isFullScreenVisualizerExpanded,
+    } = useFullScreenPlayerStore();
     const { windowBarStyle } = useWindowSettings();
 
     return (
@@ -82,6 +86,13 @@ export const MobileLayout = ({ shell }: MobileLayoutProps) => {
                     </div>
                 )}
             </AnimatePresence>
+            <AnimatePresence initial={false}>
+                {isFullScreenVisualizerExpanded && (
+                    <div className={styles.fullScreenPlayerOverlay}>
+                        <FullScreenVisualizer />
+                    </div>
+                )}
+            </AnimatePresence>
             <CommandPalette modalProps={{ handlers, opened }} />
             <ContextMenuController.Root />
         </>