vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-15 16:04:19 +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>
<motion.div <AnimatePresence>
animate={{ {isQueueState && (
opacity: isQueueState ? 1 : 0, <motion.div
zIndex: isQueueState ? 2 : 1, animate={{ opacity: 1 }}
}} className={styles.queueState}
className={styles.queueState} exit={{ opacity: 0 }}
transition={{ duration: 0.3, ease: 'easeInOut' }} initial={{ opacity: 0 }}
> style={{ zIndex: 2 }}
<div className={styles.queueHeader}> transition={{ duration: 0.3, ease: 'easeInOut' }}
<ActionIcon >
icon="arrowDownS" <div className={styles.queueHeader}>
onClick={handleToggleFullScreenPlayer} <ActionIcon
size="sm" icon="arrowDownS"
variant={isPageHovered ? 'default' : 'subtle'} onClick={handleToggleFullScreenPlayer}
/> size="sm"
<ActionIcon variant={isPageHovered ? 'default' : 'subtle'}
icon="x" />
iconProps={{ size: 'xl' }} <ActionIcon
onClick={handleToggleQueue} icon="x"
size="sm" iconProps={{ size: 'xl' }}
variant={isPageHovered ? 'default' : 'subtle'} onClick={handleToggleQueue}
/> size="sm"
</div> variant={isPageHovered ? 'default' : 'subtle'}
<div className={styles.queueContent}> />
<PlayQueue listKey={ItemListKey.FULL_SCREEN} searchTerm={undefined} /> </div>
</div> <div className={styles.queueContent}>
</motion.div> <PlayQueue listKey={ItemListKey.FULL_SCREEN} searchTerm={undefined} />
</div>
</motion.div>
)}
</AnimatePresence>
<motion.div <AnimatePresence>
animate={{ {isLyricsState && (
opacity: isLyricsState ? 1 : 0, <motion.div
zIndex: isLyricsState ? 2 : 1, animate={{ opacity: 1 }}
}} className={styles.lyricsState}
className={styles.lyricsState} exit={{ opacity: 0 }}
transition={{ duration: 0.3, ease: 'easeInOut' }} initial={{ opacity: 0 }}
> style={{ zIndex: 2 }}
<div className={styles.lyricsHeader}> transition={{ duration: 0.3, ease: 'easeInOut' }}
<ActionIcon >
icon="arrowDownS" <div className={styles.lyricsHeader}>
onClick={handleToggleFullScreenPlayer} <ActionIcon
size="sm" icon="arrowDownS"
variant={isPageHovered ? 'default' : 'subtle'} onClick={handleToggleFullScreenPlayer}
/> size="sm"
<Text fw={600} size="lg"> variant={isPageHovered ? 'default' : 'subtle'}
{t('page.fullscreenPlayer.lyrics', { postProcess: 'sentenceCase' })} />
</Text> <Text fw={600} size="lg">
<ActionIcon {t('page.fullscreenPlayer.lyrics', { postProcess: 'sentenceCase' })}
icon="x" </Text>
iconProps={{ size: 'xl' }} <ActionIcon
onClick={handleToggleLyrics} icon="x"
size="sm" iconProps={{ size: 'xl' }}
variant={isPageHovered ? 'default' : 'subtle'} onClick={handleToggleLyrics}
/> size="sm"
</div> variant={isPageHovered ? 'default' : 'subtle'}
<div className={styles.lyricsContent}>{isLyricsState && <Lyrics />}</div> />
</motion.div> </div>
<div className={styles.lyricsContent}>
<Lyrics />
</div>
</motion.div>
)}
</AnimatePresence>
</MobilePlayerContainer> </MobilePlayerContainer>
); );
}; };