Add transition to greyscale song art on pause
This commit is contained in:
parent
9ec59bf928
commit
00f561f20e
@ -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}>
|
||||||
|
Reference in New Issue
Block a user