mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-09 20:29:36 +02:00
fix mobile playerbar layout to prevent overflow
This commit is contained in:
jeffvli
@@ -1,5 +1,6 @@
|
|||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
gap: var(--theme-spacing-sm);
|
gap: var(--theme-spacing-sm);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -8,6 +9,14 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--theme-spacing-sm);
|
||||||
|
align-items: center;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.image-wrapper {
|
.image-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -41,6 +50,7 @@
|
|||||||
gap: 0;
|
gap: 0;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
max-width: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -59,7 +69,6 @@
|
|||||||
|
|
||||||
.controls-wrapper {
|
.controls-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-shrink: 0;
|
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -65,131 +65,136 @@ export const MobilePlayerbar = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={clsx(styles.container, PlaybackSelectors.mediaPlayer)}>
|
<div className={clsx(styles.container, PlaybackSelectors.mediaPlayer)}>
|
||||||
<LayoutGroup>
|
<div className={styles.contentWrapper}>
|
||||||
<AnimatePresence initial={false} mode="popLayout">
|
<LayoutGroup>
|
||||||
{currentSong?.imageUrl && (
|
<AnimatePresence initial={false} mode="popLayout">
|
||||||
<div className={styles.imageWrapper}>
|
{currentSong?.imageUrl && (
|
||||||
<motion.div
|
<div className={styles.imageWrapper}>
|
||||||
animate={{ opacity: 1, scale: 1 }}
|
<motion.div
|
||||||
className={styles.image}
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
exit={{ opacity: 0 }}
|
className={styles.image}
|
||||||
initial={{ opacity: 0 }}
|
exit={{ opacity: 0 }}
|
||||||
key="mobile-playerbar-image"
|
initial={{ opacity: 0 }}
|
||||||
onClick={handleToggleFullScreenPlayer}
|
key="mobile-playerbar-image"
|
||||||
onContextMenu={handleToggleContextMenu}
|
onClick={handleToggleFullScreenPlayer}
|
||||||
role="button"
|
onContextMenu={handleToggleContextMenu}
|
||||||
transition={{ duration: 0.2, ease: 'easeIn' }}
|
role="button"
|
||||||
>
|
transition={{ duration: 0.2, ease: 'easeIn' }}
|
||||||
<Tooltip
|
|
||||||
label={t('player.toggleFullscreenPlayer', {
|
|
||||||
postProcess: 'sentenceCase',
|
|
||||||
})}
|
|
||||||
openDelay={500}
|
|
||||||
>
|
>
|
||||||
<Image
|
<Tooltip
|
||||||
className={clsx(
|
label={t('player.toggleFullscreenPlayer', {
|
||||||
styles.playerbarImage,
|
postProcess: 'sentenceCase',
|
||||||
PlaybackSelectors.playerCoverArt,
|
})}
|
||||||
)}
|
openDelay={500}
|
||||||
loading="eager"
|
>
|
||||||
src={currentSong.imageUrl}
|
<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>
|
</div>
|
||||||
)}
|
<div
|
||||||
</AnimatePresence>
|
className={clsx(
|
||||||
<motion.div className={styles.metadataStack} layout="position">
|
styles.lineItem,
|
||||||
<div className={styles.lineItem} onClick={stopPropagation}>
|
styles.secondary,
|
||||||
<Group align="center" gap="xs" wrap="nowrap">
|
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
|
<Text
|
||||||
className={PlaybackSelectors.songTitle}
|
|
||||||
component={Link}
|
component={Link}
|
||||||
fw={500}
|
fw={500}
|
||||||
isLink
|
isLink
|
||||||
onClick={handleToggleFullScreenPlayer}
|
onClick={handleToggleFullScreenPlayer}
|
||||||
onContextMenu={handleToggleContextMenu}
|
|
||||||
overflow="hidden"
|
overflow="hidden"
|
||||||
size="sm"
|
size="xs"
|
||||||
to={AppRoute.NOW_PLAYING}
|
to={
|
||||||
truncate
|
currentSong?.albumId
|
||||||
|
? generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
|
||||||
|
albumId: currentSong.albumId,
|
||||||
|
})
|
||||||
|
: ''
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{title || '—'}
|
{currentSong?.album || '—'}
|
||||||
</Text>
|
</Text>
|
||||||
{isSongDefined && (
|
</div>
|
||||||
<ActionIcon
|
</motion.div>
|
||||||
icon="ellipsisVertical"
|
</LayoutGroup>
|
||||||
onClick={handleToggleContextMenu}
|
</div>
|
||||||
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 className={styles.controlsWrapper}>
|
<div className={styles.controlsWrapper}>
|
||||||
<PlayerButton
|
<PlayerButton
|
||||||
icon={<Icon fill="default" icon="mediaPrevious" size="md" />}
|
icon={<Icon fill="default" icon="mediaPrevious" size="md" />}
|
||||||
|
|||||||
Reference in New Issue
Block a user