feat: updates

packages/web/components/New/Player.tsx

@@ -1,22 +1,39 @@
 import { css, cx } from '@emotion/css'
+import persistedUiStates from '@/web/states/persistedUiStates'
+import { useSnapshot } from 'valtio'
 import NowPlaying from './NowPlaying'
 import PlayingNext from './PlayingNext'
+import { AnimatePresence, motion, MotionConfig } from 'framer-motion'
+import { ease } from '@/web/utils/const'
 
 const Player = () => {
+  const { minimizePlayer } = useSnapshot(persistedUiStates)
+
   return (
-    <div
-      className={cx(
-        'relative flex w-full flex-col justify-between overflow-hidden pr-6 pl-4',
-        css`
-          grid-area: player;
-        `
-      )}
-    >
-      <PlayingNext className='h-full' />
-      <div className='pb-6'>
+    <MotionConfig transition={{ duration: 0.6 }}>
+      <div
+        className={cx(
+          'fixed right-6 bottom-6 flex w-full flex-col justify-between overflow-hidden',
+          css`
+            width: 318px;
+          `
+        )}
+      >
+        <AnimatePresence>
+          {!minimizePlayer && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <PlayingNext />
+            </motion.div>
+          )}
+        </AnimatePresence>
+
         <NowPlaying />
       </div>
-    </div>
+    </MotionConfig>
   )
 }