fix fullscreen player transition

2026-06-15 16:04:19 +02:00 · 2025-12-07 03:08:19 -08:00
parent 9c81487f98
commit 56098c6617
5 changed files with 36 additions and 24 deletions
@@ -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();