From b1fd51233a2455e6464419d09fd143edca3336cf Mon Sep 17 00:00:00 2001
From: qier222 <qier222@outlook.com>
Date: Sun, 17 Apr 2022 12:46:20 +0800
Subject: [PATCH] fix: bugs

---
 package.json                                 |  1 +
 src/renderer/components/FMCard.tsx           | 10 ++--------
 src/renderer/components/Lyric/LyricPanel.tsx | 10 ++--------
 src/renderer/hooks/useCoverColor.ts          | 16 ++++++++++++++++
 src/renderer/pages/Library.tsx               |  2 +-
 5 files changed, 22 insertions(+), 17 deletions(-)
 create mode 100644 src/renderer/hooks/useCoverColor.ts

diff --git a/package.json b/package.json
index c6d23c6..0e08fa5 100644
--- a/package.json
+++ b/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}'"
   },
diff --git a/src/renderer/components/FMCard.tsx b/src/renderer/components/FMCard.tsx
index e1ad056..77be999 100644
--- a/src/renderer/components/FMCard.tsx
+++ b/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(() => {
-    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])
+  const bgColor = useCoverColor(track?.al?.picUrl ?? '')
 
   return (
     <div
diff --git a/src/renderer/components/Lyric/LyricPanel.tsx b/src/renderer/components/Lyric/LyricPanel.tsx
index 901d49d..08c3538 100644
--- a/src/renderer/components/Lyric/LyricPanel.tsx
+++ b/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' })
-  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])
+  const bgColor = useCoverColor(track?.al?.picUrl ?? '')
 
   return (
     <AnimatePresence>
diff --git a/src/renderer/hooks/useCoverColor.ts b/src/renderer/hooks/useCoverColor.ts
new file mode 100644
index 0000000..0c61132
--- /dev/null
+++ b/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
+}
diff --git a/src/renderer/pages/Library.tsx b/src/renderer/pages/Library.tsx
index 06d1be6..6633a86 100644
--- a/src/renderer/pages/Library.tsx
+++ b/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
       )}
     >