add conditional render to queue/lyric state on mobile player (#1797)

This commit is contained in:
jeffvli
2026-03-08 21:06:12 -07:00
parent 27ab9f89c9
commit 7dbf8dd9fe
@@ -495,12 +495,14 @@ export const MobileFullscreenPlayer = () => {
/>
</motion.div>
<AnimatePresence>
{isQueueState && (
<motion.div
animate={{
opacity: isQueueState ? 1 : 0,
zIndex: isQueueState ? 2 : 1,
}}
animate={{ opacity: 1 }}
className={styles.queueState}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
style={{ zIndex: 2 }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
<div className={styles.queueHeader}>
@@ -522,13 +524,17 @@ export const MobileFullscreenPlayer = () => {
<PlayQueue listKey={ItemListKey.FULL_SCREEN} searchTerm={undefined} />
</div>
</motion.div>
)}
</AnimatePresence>
<AnimatePresence>
{isLyricsState && (
<motion.div
animate={{
opacity: isLyricsState ? 1 : 0,
zIndex: isLyricsState ? 2 : 1,
}}
animate={{ opacity: 1 }}
className={styles.lyricsState}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
style={{ zIndex: 2 }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
<div className={styles.lyricsHeader}>
@@ -549,8 +555,12 @@ export const MobileFullscreenPlayer = () => {
variant={isPageHovered ? 'default' : 'subtle'}
/>
</div>
<div className={styles.lyricsContent}>{isLyricsState && <Lyrics />}</div>
<div className={styles.lyricsContent}>
<Lyrics />
</div>
</motion.div>
)}
</AnimatePresence>
</MobilePlayerContainer>
);
};