vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 20:40:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
jeffvli
2026-03-08 21:06:12 -07:00
parent 27ab9f89c9
commit 7dbf8dd9fe
1 changed files with 65 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/player/components/mobile-fullscreen-player.tsx
+65 -55
View File
@@ -495,62 +495,72 @@ export const MobileFullscreenPlayer = () => {
/>
</motion.div>
<motion.div
animate={{
opacity: isQueueState ? 1 : 0,
zIndex: isQueueState ? 2 : 1,
}}
className={styles.queueState}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
<div className={styles.queueHeader}>
<ActionIcon
icon="arrowDownS"
onClick={handleToggleFullScreenPlayer}
size="sm"
variant={isPageHovered ? 'default' : 'subtle'}
/>
<ActionIcon
icon="x"
iconProps={{ size: 'xl' }}
onClick={handleToggleQueue}
size="sm"
variant={isPageHovered ? 'default' : 'subtle'}
/>
</div>
<div className={styles.queueContent}>
<PlayQueue listKey={ItemListKey.FULL_SCREEN} searchTerm={undefined} />
</div>
</motion.div>
<AnimatePresence>
{isQueueState && (
<motion.div
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}>
<ActionIcon
icon="arrowDownS"
onClick={handleToggleFullScreenPlayer}
size="sm"
variant={isPageHovered ? 'default' : 'subtle'}
/>
<ActionIcon
icon="x"
iconProps={{ size: 'xl' }}
onClick={handleToggleQueue}
size="sm"
variant={isPageHovered ? 'default' : 'subtle'}
/>
</div>
<div className={styles.queueContent}>
<PlayQueue listKey={ItemListKey.FULL_SCREEN} searchTerm={undefined} />
</div>
</motion.div>
)}
</AnimatePresence>
<motion.div
animate={{
opacity: isLyricsState ? 1 : 0,
zIndex: isLyricsState ? 2 : 1,
}}
className={styles.lyricsState}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
<div className={styles.lyricsHeader}>
<ActionIcon
icon="arrowDownS"
onClick={handleToggleFullScreenPlayer}
size="sm"
variant={isPageHovered ? 'default' : 'subtle'}
/>
<Text fw={600} size="lg">
{t('page.fullscreenPlayer.lyrics', { postProcess: 'sentenceCase' })}
</Text>
<ActionIcon
icon="x"
iconProps={{ size: 'xl' }}
onClick={handleToggleLyrics}
size="sm"
variant={isPageHovered ? 'default' : 'subtle'}
/>
</div>
<div className={styles.lyricsContent}>{isLyricsState && <Lyrics />}</div>
</motion.div>
<AnimatePresence>
{isLyricsState && (
<motion.div
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}>
<ActionIcon
icon="arrowDownS"
onClick={handleToggleFullScreenPlayer}
size="sm"
variant={isPageHovered ? 'default' : 'subtle'}
/>
<Text fw={600} size="lg">
{t('page.fullscreenPlayer.lyrics', { postProcess: 'sentenceCase' })}
</Text>
<ActionIcon
icon="x"
iconProps={{ size: 'xl' }}
onClick={handleToggleLyrics}
size="sm"
variant={isPageHovered ? 'default' : 'subtle'}
/>
</div>
<div className={styles.lyricsContent}>
<Lyrics />
</div>
</motion.div>
)}
</AnimatePresence>
</MobilePlayerContainer>
);
};