fix: bugs

package.json

@@ -29,6 +29,7 @@
     "test:types-renderer": "tsc --noEmit --project src/renderer/tsconfig.json",
     "test:types-main": "tsc --noEmit --project src/main/tsconfig.json",
     "test:types-shared": "tsc --noEmit --project src/shared/tsconfig.json",
+    "netease": "npx NeteaseCloudMusicApi",
     "eslint": "eslint --ext .ts,.js ./",
     "prettier": "prettier --write './**/*.{ts,js,tsx,jsx}'"
   },

src/renderer/components/FMCard.tsx

@@ -8,6 +8,7 @@ import {
   State as PlayerState,
   Mode as PlayerMode,
 } from '@/renderer/utils/player'
+import useCoverColor from '../hooks/useCoverColor'
 
 const MediaControls = () => {
   const classes =
@@ -59,7 +60,6 @@ const MediaControls = () => {
 
 const FMCard = () => {
   const navigate = useNavigate()
-  const [bgColor, setBgColor] = useState({ from: '#222', to: '#222' })
 
   const playerSnapshot = useSnapshot(player)
   const track = useMemo(() => playerSnapshot.fmTrack, [playerSnapshot.fmTrack])
@@ -68,13 +68,7 @@ const FMCard = () => {
     [track?.al?.picUrl]
   )
 
-  useEffect(() => {
+  const bgColor = useCoverColor(track?.al?.picUrl ?? '')
-    getCoverColor(track?.al?.picUrl || '').then(color => {
-      if (!color) return
-      const to = colord(color).darken(0.15).rotate(-5).toHex()
-      setBgColor({ from: color, to })
-    })
-  }, [track?.al?.picUrl])
 
   return (
     <div

src/renderer/components/Lyric/LyricPanel.tsx

@@ -7,20 +7,14 @@ import SvgIcon from '../SvgIcon'
 import Lyric from './Lyric'
 import { motion, AnimatePresence } from 'framer-motion'
 import Lyric2 from './Lyric2'
+import useCoverColor from '@/renderer/hooks/useCoverColor'
 
 const LyricPanel = () => {
   const stateSnapshot = useSnapshot(state)
   const playerSnapshot = useSnapshot(player)
   const track = useMemo(() => playerSnapshot.track, [playerSnapshot.track])
 
-  const [bgColor, setBgColor] = useState({ from: '#222', to: '#222' })
+  const bgColor = useCoverColor(track?.al?.picUrl ?? '')
-  useEffect(() => {
-    getCoverColor(track?.al?.picUrl || '').then(color => {
-      if (!color) return
-      const to = colord(color).darken(0.15).rotate(-5).toHex()
-      setBgColor({ from: color, to })
-    })
-  }, [track?.al?.picUrl])
 
   return (
     <AnimatePresence>

src/renderer/hooks/useCoverColor.ts

@@ -0,0 +1,16 @@
+import { colord } from 'colord'
+import { getCoverColor } from '../utils/common'
+
+export default function useCoverColor(url: string) {
+  const [color, setColor] = useState({ from: '#fff', to: '#fff' })
+
+  useEffect(() => {
+    getCoverColor(url || '').then(color => {
+      if (!color) return
+      const to = colord(color).darken(0.15).rotate(-5).toHex()
+      setColor({ from: color, to })
+    })
+  }, [url])
+
+  return color
+}

src/renderer/pages/Library.tsx

@@ -73,7 +73,7 @@ const LikedTracksCard = ({ className }: { className?: string }) => {
         navigate(`/playlist/${likedSongsPlaylist.playlist.id}`)
       }
       className={classNames(
-        'relative flex h-full w-full flex-col justify-between rounded-2xl bg-brand-50 py-5 px-6 text-brand-600 dark:bg-brand-800 dark:text-brand-50',
+        'relative flex h-full w-full flex-col justify-between rounded-2xl bg-brand-50 py-5 px-6 text-brand-600 dark:bg-brand-600 dark:text-brand-50',
         className
       )}
     >