From 56098c661761f9924467e423e5e8167011335937 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 7 Dec 2025 03:08:19 -0800
Subject: [PATCH] fix fullscreen player transition

---
 .../player/components/full-screen-player.tsx  |  2 +-
 .../mobile-fullscreen-player.module.css       |  4 ++-
 .../components/mobile-fullscreen-player.tsx   | 25 +++++++++++++++++--
 .../mobile-layout/mobile-layout.module.css    | 14 +----------
 .../layouts/mobile-layout/mobile-layout.tsx   | 15 +++++------
 5 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx
index 97ff6c055..b3140ad9f 100644
--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/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) => {
diff --git a/src/renderer/features/player/components/mobile-fullscreen-player.module.css b/src/renderer/features/player/components/mobile-fullscreen-player.module.css
index ca53617db..4e13ea715 100644
--- a/src/renderer/features/player/components/mobile-fullscreen-player.module.css
+++ b/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;
diff --git a/src/renderer/features/player/components/mobile-fullscreen-player.tsx b/src/renderer/features/player/components/mobile-fullscreen-player.tsx
index 4d45d75d7..04ca875c5 100644
--- a/src/renderer/features/player/components/mobile-fullscreen-player.tsx
+++ b/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();
diff --git a/src/renderer/layouts/mobile-layout/mobile-layout.module.css b/src/renderer/layouts/mobile-layout/mobile-layout.module.css
index 030762029..481be037f 100644
--- a/src/renderer/layouts/mobile-layout/mobile-layout.module.css
+++ b/src/renderer/layouts/mobile-layout/mobile-layout.module.css
@@ -39,17 +39,5 @@
     bottom: 0;
     left: 0;
     z-index: 200;
-    visibility: 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;
+    overflow: hidden;
 }
diff --git a/src/renderer/layouts/mobile-layout/mobile-layout.tsx b/src/renderer/layouts/mobile-layout/mobile-layout.tsx
index ef46aee11..6ff622c5e 100644
--- a/src/renderer/layouts/mobile-layout/mobile-layout.tsx
+++ b/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
-                className={clsx(styles.fullScreenPlayerOverlay, {
-                    [styles.fullScreenPlayerVisible]: isFullScreenPlayerExpanded,
-                })}
-            >
-                <MobileFullscreenPlayer />
-            </div>
+            <AnimatePresence initial={false}>
+                {isFullScreenPlayerExpanded && (
+                    <div className={styles.fullScreenPlayerOverlay}>
+                        <MobileFullscreenPlayer />
+                    </div>
+                )}
+            </AnimatePresence>
             <CommandPalette modalProps={{ handlers, opened }} />
             <ContextMenuController.Root />
         </>