feat: updates

packages/web/components/NowPlaying/Cover.tsx

@@ -6,48 +6,41 @@ import { useAnimation, motion } from 'framer-motion'
 import { useState, useRef, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useSnapshot } from 'valtio'
+import { subscribeKey } from 'valtio/utils'
 
 const Cover = () => {
   const { track } = useSnapshot(player)
   const [cover, setCover] = useState(track?.al.picUrl)
-  const animationStartTime = useRef(0)
   const controls = useAnimation()
-  const duration = 150 // ms
   const navigate = useNavigate()
 
   useEffect(() => {
-    const resizedCover = resizeImage(track?.al.picUrl || '', 'lg')
-    const animate = async () => {
-      animationStartTime.current = Date.now()
-      await controls.start({ opacity: 0 })
-      setCover(resizedCover)
-    }
-    animate()
-  }, [controls, track?.al.picUrl])
-
-  // 防止狂点下一首或上一首造成封面与歌曲不匹配的问题
-  useEffect(() => {
-    const realCover = resizeImage(track?.al.picUrl ?? '', 'lg')
-    if (cover !== realCover) setCover(realCover)
-  }, [cover, track?.al.picUrl])
-
-  const onLoad = () => {
-    const passedTime = Date.now() - animationStartTime.current
-    controls.start({
-      opacity: 1,
-      transition: {
-        delay: passedTime > duration ? 0 : (duration - passedTime) / 1000,
-      },
+    const unsubscribe = subscribeKey(player, 'track', async () => {
+      const coverUrl = player.track?.al.picUrl
+      await controls.start({
+        opacity: 0,
+        transition: { duration: 0.2 },
+      })
+      setCover(coverUrl)
+      if (!coverUrl) return
+      const img = new Image()
+      img.onload = () => {
+        controls.start({
+          opacity: 1,
+          transition: { duration: 0.2 },
+        })
+      }
+      img.src = coverUrl
     })
-  }
+    return unsubscribe
+  }, [])
 
   return (
     <motion.img
       animate={controls}
-      transition={{ duration: duration / 1000, ease }}
-      className={cx('absolute inset-0 w-full')}
+      transition={{ ease }}
+      className='absolute inset-0 w-full'
       src={cover}
-      onLoad={onLoad}
       onClick={() => {
         const id = track?.al.id
         if (id) navigate(`/album/${id}`)