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

fix mobile playerbar layout to prevent overflow

Browse Source
This commit is contained in:
jeffvli
2025-11-29 17:05:02 -08:00
parent b097d67d71
commit 7f95c520b2
2 changed files with 130 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/player/components/mobile-playerbar.module.css
+11 -2
View File
@@ -1,5 +1,6 @@
.container {
display: flex;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--theme-spacing-sm);
align-items: center;
width: 100%;
@@ -8,6 +9,14 @@
overflow: hidden;
}
.content-wrapper {
display: flex;
gap: var(--theme-spacing-sm);
align-items: center;
min-width: 0;
overflow: hidden;
}
.image-wrapper {
position: relative;
display: flex;
@@ -41,6 +50,7 @@
gap: 0;
justify-content: center;
min-width: 0;
max-width: 50%;
overflow: hidden;
}
@@ -59,7 +69,6 @@
.controls-wrapper {
display: flex;
flex-shrink: 0;
gap: 0.5rem;
align-items: center;
justify-content: center;
src/renderer/features/player/components/mobile-playerbar.tsx
+119 -114
View File
@@ -65,131 +65,136 @@ export const MobilePlayerbar = () => {
return (
<div className={clsx(styles.container, PlaybackSelectors.mediaPlayer)}>
<LayoutGroup>
<AnimatePresence initial={false} mode="popLayout">
{currentSong?.imageUrl && (
<div className={styles.imageWrapper}>
<motion.div
animate={{ opacity: 1, scale: 1 }}
className={styles.image}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
key="mobile-playerbar-image"
onClick={handleToggleFullScreenPlayer}
onContextMenu={handleToggleContextMenu}
role="button"
transition={{ duration: 0.2, ease: 'easeIn' }}
>
<Tooltip
label={t('player.toggleFullscreenPlayer', {
postProcess: 'sentenceCase',
})}
openDelay={500}
<div className={styles.contentWrapper}>
<LayoutGroup>
<AnimatePresence initial={false} mode="popLayout">
{currentSong?.imageUrl && (
<div className={styles.imageWrapper}>
<motion.div
animate={{ opacity: 1, scale: 1 }}
className={styles.image}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
key="mobile-playerbar-image"
onClick={handleToggleFullScreenPlayer}
onContextMenu={handleToggleContextMenu}
role="button"
transition={{ duration: 0.2, ease: 'easeIn' }}
>
<Image
className={clsx(
styles.playerbarImage,
PlaybackSelectors.playerCoverArt,
)}
loading="eager"
src={currentSong.imageUrl}
<Tooltip
label={t('player.toggleFullscreenPlayer', {
postProcess: 'sentenceCase',
})}
openDelay={500}
>
<Image
className={clsx(
styles.playerbarImage,
PlaybackSelectors.playerCoverArt,
)}
loading="eager"
src={currentSong.imageUrl}
/>
</Tooltip>
</motion.div>
</div>
)}
</AnimatePresence>
<motion.div className={styles.metadataStack} layout="position">
<div className={styles.lineItem} onClick={stopPropagation}>
<Group align="center" gap="xs" wrap="nowrap">
<Text
className={PlaybackSelectors.songTitle}
component={Link}
fw={500}
isLink
onClick={handleToggleFullScreenPlayer}
onContextMenu={handleToggleContextMenu}
overflow="hidden"
size="sm"
to={AppRoute.NOW_PLAYING}
truncate
>
{title || '—'}
</Text>
{isSongDefined && (
<ActionIcon
icon="ellipsisVertical"
onClick={handleToggleContextMenu}
size="xs"
styles={{
root: {
'--ai-size-xs': '1.15rem',
},
}}
variant="subtle"
/>
</Tooltip>
</motion.div>
)}
</Group>
</div>
)}
</AnimatePresence>
<motion.div className={styles.metadataStack} layout="position">
<div className={styles.lineItem} onClick={stopPropagation}>
<Group align="center" gap="xs" wrap="nowrap">
<div
className={clsx(
styles.lineItem,
styles.secondary,
PlaybackSelectors.songArtist,
)}
onClick={stopPropagation}
>
{artists?.map((artist, index) => (
<React.Fragment key={`bar-${artist.id}`}>
{index > 0 && <Separator />}
<Text
component={artist.id ? Link : undefined}
fw={500}
isLink={artist.id !== ''}
onClick={handleToggleFullScreenPlayer}
overflow="hidden"
size="xs"
to={
artist.id
? generatePath(
AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
{
albumArtistId: artist.id,
},
)
: undefined
}
>
{artist.name || '—'}
</Text>
</React.Fragment>
))}
</div>
<div
className={clsx(
styles.lineItem,
styles.secondary,
PlaybackSelectors.songAlbum,
)}
onClick={stopPropagation}
>
<Text
className={PlaybackSelectors.songTitle}
component={Link}
fw={500}
isLink
onClick={handleToggleFullScreenPlayer}
onContextMenu={handleToggleContextMenu}
overflow="hidden"
size="sm"
to={AppRoute.NOW_PLAYING}
truncate
size="xs"
to={
currentSong?.albumId
? generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
albumId: currentSong.albumId,
})
: ''
}
>
{title || '—'}
{currentSong?.album || '—'}
</Text>
{isSongDefined && (
<ActionIcon
icon="ellipsisVertical"
onClick={handleToggleContextMenu}
size="xs"
styles={{
root: {
'--ai-size-xs': '1.15rem',
},
}}
variant="subtle"
/>
)}
</Group>
</div>
<div
className={clsx(
styles.lineItem,
styles.secondary,
PlaybackSelectors.songArtist,
)}
onClick={stopPropagation}
>
{artists?.map((artist, index) => (
<React.Fragment key={`bar-${artist.id}`}>
{index > 0 && <Separator />}
<Text
component={artist.id ? Link : undefined}
fw={500}
isLink={artist.id !== ''}
onClick={handleToggleFullScreenPlayer}
overflow="hidden"
size="xs"
to={
artist.id
? generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})
: undefined
}
>
{artist.name || '—'}
</Text>
</React.Fragment>
))}
</div>
<div
className={clsx(
styles.lineItem,
styles.secondary,
PlaybackSelectors.songAlbum,
)}
onClick={stopPropagation}
>
<Text
component={Link}
fw={500}
isLink
onClick={handleToggleFullScreenPlayer}
overflow="hidden"
size="xs"
to={
currentSong?.albumId
? generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
albumId: currentSong.albumId,
})
: ''
}
>
{currentSong?.album || '—'}
</Text>
</div>
</motion.div>
</LayoutGroup>
</div>
</motion.div>
</LayoutGroup>
</div>
<div className={styles.controlsWrapper}>
<PlayerButton
icon={<Icon fill="default" icon="mediaPrevious" size="md" />}