feat: improvement of audio playback interface opening animation

package.json

@@ -2,7 +2,7 @@
   "name": "omp",
   "description": "OneDrive Media Player",
   "private": true,
-  "version": "1.5.3",
+  "version": "1.5.4",
   "scripts": {
     "dev": "webpack serve",
     "build": "webpack --mode=production --node-env=production",

src/pages/Player/Audio/Audio.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@mui/material'
 import useUiStore from '@/store/useUiStore'
 import { useMemo, useRef } from 'react'
 import Classic from './Classic'
@@ -8,8 +7,6 @@ import { useDrag } from '@use-gesture/react'
 
 const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
 
-  const theme = useTheme()
-
   const [
     audioViewIsShow,
     audioViewTheme,
@@ -23,10 +20,11 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
   )
 
   const topRef = useRef(0)
-  const [{ top, borderRadius }, api] = useSpring(() => ({
+  const [{ top, leftRightbottom, borderRadius }, api] = useSpring(() => ({
     from: {
       top: audioViewIsShow ? '0' : '100dvh',
-      borderRadius: audioViewIsShow ? '0' : '0.5rem',
+      leftRightbottom: audioViewIsShow ? '0' : '0.5rem',
+      borderRadius: '0.5rem',
     },
     // config: {
     //   mass: 1,
@@ -36,14 +34,14 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
   }))
 
   const show = () => api.start({
-    to: { top: '0', borderRadius: '0' },
+    to: { top: '0', leftRightbottom: '0', borderRadius: '0' },
     // config: { clamp: false },
   })
 
   const hide = () => {
     api.start({
       from: { top: `${topRef.current}` },
-      to: { top: '100dvh' },
+      to: { top: '100dvh', leftRightbottom: '0.5rem', borderRadius: '0.5rem' },
       // config: { clamp: true },
     })
     topRef.current = 0
@@ -77,12 +75,13 @@ const Audio = ({ player }: { player: HTMLVideoElement | null }) => {
     <animated.div
       {...bind()}
       style={{
-        width: '100%',
+        maxWidth: '100%',
         maxHeight: '100dvh',
         position: 'fixed',
-        backgroundColor: theme.palette.background.paper,
         top: top,
-        bottom: 0,
+        left: leftRightbottom,
+        right: leftRightbottom,
+        bottom: leftRightbottom,
         touchAction: 'pan-x',
       }}
     >

src/pages/Player/Audio/Classic.tsx

@@ -15,6 +15,7 @@ const Classic = ({ player, styles }: { player: HTMLVideoElement | null, styles:
   const [playQueue] = usePlayQueueStore((state) => [state.playQueue])
 
   const [
+    audioViewIsShow,
     fullscreen,
     backgroundIsShow,
     shuffle,
@@ -25,6 +26,7 @@ const Classic = ({ player, styles }: { player: HTMLVideoElement | null, styles:
     updateBackgroundIsShow,
   ] = useUiStore(
     (state) => [
+      state.audioViewIsShow,
       state.fullscreen,
       state.backgroundIsShow,
       state.shuffle,
@@ -108,7 +110,7 @@ const Classic = ({ player, styles }: { player: HTMLVideoElement | null, styles:
             <Grid xs={6} pl={{ xs: 1, sm: 0 }} >
               <IconButton
                 aria-label="close"
-                onClick={() => updateAudioViewIsShow(false)}
+                onClick={() => updateAudioViewIsShow(!audioViewIsShow)}
                 className='app-region-no-drag'
               >
                 <KeyboardArrowDownOutlined />

src/pages/Player/Audio/Modern.tsx

@@ -30,6 +30,7 @@ const Modern = ({ player, styles }: { player: HTMLVideoElement | null, styles: {
   const [playQueue] = usePlayQueueStore((state) => [state.playQueue])
 
   const [
+    audioViewIsShow,
     fullscreen,
     shuffle,
     repeat,
@@ -38,6 +39,7 @@ const Modern = ({ player, styles }: { player: HTMLVideoElement | null, styles: {
     updatePlayQueueIsShow,
   ] = useUiStore(
     (state) => [
+      state.audioViewIsShow,
       state.fullscreen,
       state.shuffle,
       state.repeat,
@@ -131,7 +133,7 @@ const Modern = ({ player, styles }: { player: HTMLVideoElement | null, styles: {
               width: '100%',
               height: 'auto',
             }}>
-            <IconButton aria-label="close" onClick={() => updateAudioViewIsShow(false)}>
+            <IconButton aria-label="close" onClick={() => updateAudioViewIsShow(!audioViewIsShow)}>
               <KeyboardArrowDownRoundedIcon />
             </IconButton>
             <Grid