girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-18 06:07:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 缓存歌单封面颜色

Browse source
This commit is contained in:
qier222 2022-04-12 01:48:14 +08:00
parent 766e866497
commit 1591586735
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
10 changed files with 506 additions and 396 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/renderer/components/FMCard.tsx
View file

@ -1,7 +1,7 @@
import { average } from 'color.js'
import { colord } from 'colord'
import { player } from '@/renderer/store'
import { resizeImage } from '@/renderer/utils/common'
import { resizeImage, getCoverColor } from '@/renderer/utils/common'
import SvgIcon from './SvgIcon'
import ArtistInline from './ArtistsInline'
import {
@ -59,7 +59,7 @@ const MediaControls = () => {
const FMCard = () => {
const navigate = useNavigate()
const [background, setBackground] = useState('')
const [bgColor, setBgColor] = useState({ from: '#222', to: '#222' })
const playerSnapshot = useSnapshot(player)
const track = useMemo(() => playerSnapshot.fmTrack, [playerSnapshot.fmTrack])
@ -69,24 +69,19 @@ const FMCard = () => {
)
useEffect(() => {
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)
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, ${c.toHex()}, ${to})`)
})
}
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
className='relative flex h-[198px] overflow-hidden rounded-2xl bg-gray-100 p-4 dark:bg-gray-800'
style={{ background }}
style={{
background: `linear-gradient(to bottom, ${bgColor.from}, ${bgColor.to})`,
}}
>
{coverUrl ? (
<img