Add transition to greyscale song art on pause

This commit is contained in:
Lee 2023-01-08 14:56:01 +00:00
parent 9ec59bf928
commit 00f561f20e
No known key found for this signature in database
GPG Key ID: 6EA25896ECCB3121

@ -57,6 +57,7 @@ export default function SongInfo() {
songDifficulty, songDifficulty,
currentSongTime, currentSongTime,
songLength, songLength,
paused,
] = useSongDataStore((store) => [ ] = useSongDataStore((store) => [
store.isLoading, store.isLoading,
store.bsr, store.bsr,
@ -66,6 +67,7 @@ export default function SongInfo() {
store.songDifficulty, store.songDifficulty,
store.currentSongTime, store.currentSongTime,
store.songLength, store.songLength,
store.paused,
]); ]);
if (!showSongInfo) { if (!showSongInfo) {
@ -97,6 +99,10 @@ export default function SongInfo() {
placeholder="blur" placeholder="blur"
blurDataURL="https://cdn.fascinated.cc/yb4fgdc1.jpg" blurDataURL="https://cdn.fascinated.cc/yb4fgdc1.jpg"
unoptimized unoptimized
style={{
transition: "ease-in-out 100ms",
filter: paused ? "grayscale(1)" : "",
}}
/> />
<div className={styles.songInfo}> <div className={styles.songInfo}>
<p className={styles.songInfoSongName}> <p className={styles.songInfoSongName}>