feat: 初步实现歌词界面

This commit is contained in:
qier222 2022-04-08 01:02:25 +08:00
parent 1eb38937fc
commit 530581ba82
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
15 changed files with 635 additions and 18 deletions

View file

@ -61,22 +61,24 @@ const FMCard = () => {
const playerSnapshot = useSnapshot(player)
const track = useMemo(() => playerSnapshot.fmTrack, [playerSnapshot.fmTrack])
const coverUrl = useMemo(
() => resizeImage(playerSnapshot.fmTrack?.al?.picUrl ?? '', 'md'),
[playerSnapshot.fmTrack]
() => resizeImage(track?.al?.picUrl ?? '', 'md'),
[track?.al?.picUrl]
)
useEffect(() => {
const cover = resizeImage(playerSnapshot.fmTrack?.al?.picUrl ?? '', 'xs')
const cover = resizeImage(track?.al?.picUrl ?? '', 'xs')
if (cover) {
average(cover, { amount: 1, format: 'hex', sample: 1 }).then(color => {
let c = colord(color as string)
if (c.isLight()) c = c.darken(0.15)
else if (c.isDark()) c = c.lighten(0.1)
const hsl = c.toHsl()
if (hsl.s > 50) c = colord({ ...hsl, s: 50 })
if (hsl.l > 50) c = colord({ ...c.toHsl(), l: 50 })
if (hsl.l < 30) c = colord({ ...c.toHsl(), l: 30 })
const to = c.darken(0.15).rotate(-5).toHex()
setBackground(`linear-gradient(to bottom right, ${c.toHex()}, ${to})`)
setBackground(`linear-gradient(to bottom, ${c.toHex()}, ${to})`)
})
}
}, [playerSnapshot.fmTrack?.al?.picUrl])
}, [track?.al?.picUrl])
return (
<div