fix fullscreen player transition

src/renderer/features/player/components/full-screen-player.tsx

@@ -566,7 +566,7 @@ const containerVariants: Variants = {
                 ease: 'easeInOut',
             },
             width: '100vw',
-            y: -100,
+            y: 0,
         };
     },
     open: (custom) => {

src/renderer/features/player/components/mobile-fullscreen-player.module.css

@@ -1,5 +1,7 @@
 .container {
-    position: relative;
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;

src/renderer/features/player/components/mobile-fullscreen-player.tsx

@@ -320,24 +320,45 @@ const MobilePlayerContainer = memo(
         }
 
         return (
-            <div
+            <motion.div
+                animate="open"
                 className={styles.container}
+                exit="closed"
+                initial="closed"
                 style={{
                     backgroundColor,
                 }}
+                variants={mobileContainerVariants}
             >
                 <BackgroundImage
                     dynamicBackground={dynamicBackground}
                     dynamicIsImage={dynamicIsImage}
                 />
                 {children}
-            </div>
+            </motion.div>
         );
     },
 );
 
 MobilePlayerContainer.displayName = 'MobilePlayerContainer';
 
+const mobileContainerVariants: Variants = {
+    closed: {
+        y: '100%',
+        transition: {
+            duration: 0.5,
+            ease: 'easeInOut',
+        },
+    },
+    open: {
+        y: 0,
+        transition: {
+            duration: 0.5,
+            ease: 'easeInOut',
+        },
+    },
+};
+
 export const MobileFullscreenPlayer = () => {
     const { t } = useTranslation();
     const setFullScreenPlayerStore = useSetFullScreenPlayerStore();

src/renderer/layouts/mobile-layout/mobile-layout.module.css

@@ -39,17 +39,5 @@
     bottom: 0;
     left: 0;
     z-index: 200;
-    visibility: hidden;
+    overflow: hidden;
-    pointer-events: none;
-    background: var(--theme-colors-background);
-    opacity: 0;
-    transition:
-        opacity 0.3s ease-in-out,
-        visibility 0.3s ease-in-out;
-}
-
-.full-screen-player-visible {
-    visibility: visible;
-    pointer-events: auto;
-    opacity: 1;
 }

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

@@ -1,3 +1,4 @@
+import { AnimatePresence } from 'motion/react';
 import clsx from 'clsx';
 import { lazy } from 'react';
 import { Outlet } from 'react-router';
@@ -66,13 +67,13 @@ export const MobileLayout = ({ shell }: MobileLayoutProps) => {
             >
                 <MobileSidebar />
             </Drawer>
-            <div
+            <AnimatePresence initial={false}>
-                className={clsx(styles.fullScreenPlayerOverlay, {
+                {isFullScreenPlayerExpanded && (
-                    [styles.fullScreenPlayerVisible]: isFullScreenPlayerExpanded,
+                    <div className={styles.fullScreenPlayerOverlay}>
-                })}
+                        <MobileFullscreenPlayer />
-            >
+                    </div>
-                <MobileFullscreenPlayer />
+                )}
-            </div>
+            </AnimatePresence>
             <CommandPalette modalProps={{ handlers, opened }} />
             <ContextMenuController.Root />
         </>