fix(player): make PlayerBarGlass 100% responsive
- GlobalPlayer: responsive margins (left-2/right-2 on mobile, left-4/right-4 on sm+), bottom-4 on mobile, max-w-full min-w-0 to prevent overflow - Inner flex: smaller gaps (gap-1.5 sm:gap-2 md:gap-3), reduced padding (px-2 sm:px-3 md:px-4), overflow-hidden to contain content - PlayerBarTrackInfo: min-w-0 for shrink, smaller cover (w-9 on mobile, w-10 sm, w-11 md) - PlayerBarRight: min-w-0, smaller gaps, hide PiP on <md, hide Like on <sm, hide volume divider on <sm, responsive volume slider width - Hide PlaybackSpeedControl and time display on <sm to save space
This commit is contained in:
senke
parent
706837be97
commit
7243f96314
3 changed files with 21 additions and 17 deletions
|
|
@ -97,8 +97,9 @@ export function GlobalPlayer() {
|
|||
role="region"
|
||||
aria-label="Global player"
|
||||
className={cn(
|
||||
'fixed bottom-6 left-4 right-4 z-player transition-all duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-out)]',
|
||||
'lg:right-4 w-player-bar',
|
||||
'fixed bottom-4 sm:bottom-6 left-2 right-2 sm:left-4 sm:right-4 z-player transition-all duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-out)]',
|
||||
'max-w-full min-w-0',
|
||||
'lg:right-4 lg:w-player-bar',
|
||||
sidebarOpen ? 'lg:left-main-expanded lg:w-player-bar-expanded' : 'lg:left-main-collapsed lg:w-player-bar-collapsed',
|
||||
isExpanded && 'translate-y-full opacity-0 pointer-events-none',
|
||||
)}
|
||||
|
|
@ -106,7 +107,7 @@ export function GlobalPlayer() {
|
|||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<PlayerBarGlass isHovered={isHovered}>
|
||||
<div className="flex items-center justify-between gap-2 sm:gap-3 h-14 sm:h-16 px-3 sm:px-4 relative z-10 min-w-0 flex-nowrap">
|
||||
<div className="flex items-center justify-between gap-1.5 sm:gap-2 md:gap-3 h-14 sm:h-16 px-2 sm:px-3 md:px-4 relative z-10 min-w-0 overflow-hidden flex-nowrap">
|
||||
<PlayerBarTrackInfo
|
||||
title={displayTrack.title}
|
||||
artist={displayTrack.artist || 'Unknown Artist'}
|
||||
|
|
@ -117,7 +118,7 @@ export function GlobalPlayer() {
|
|||
/>
|
||||
|
||||
<section
|
||||
className="flex flex-col items-center justify-center gap-0.5 flex-shrink-0"
|
||||
className="flex flex-col items-center justify-center gap-0.5 flex-shrink-0 min-w-0"
|
||||
aria-label="Playback controls"
|
||||
>
|
||||
<PlayerControls
|
||||
|
|
@ -139,14 +140,16 @@ export function GlobalPlayer() {
|
|||
shuffle={player.shuffle}
|
||||
repeat={player.repeat}
|
||||
/>
|
||||
<PlaybackSpeedControl
|
||||
speed={player.playbackSpeed}
|
||||
onSpeedChange={player.setPlaybackSpeed}
|
||||
disabled={isIdle}
|
||||
/>
|
||||
<div className="hidden sm:block">
|
||||
<PlaybackSpeedControl
|
||||
speed={player.playbackSpeed}
|
||||
onSpeedChange={player.setPlaybackSpeed}
|
||||
disabled={isIdle}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 text-xs font-mono text-muted-foreground whitespace-nowrap',
|
||||
'hidden sm:flex items-center gap-1.5 text-xs font-mono text-muted-foreground whitespace-nowrap shrink-0',
|
||||
isIdle ? 'opacity-50' : 'opacity-90',
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export function PlayerBarRight({
|
|||
}: PlayerBarRightProps) {
|
||||
return (
|
||||
<section
|
||||
className="flex items-center justify-end gap-1 sm:gap-2 flex-shrink-0 min-w-32 shrink-0"
|
||||
className="flex items-center justify-end gap-0.5 sm:gap-1 md:gap-2 flex-shrink-0 min-w-0 shrink-0"
|
||||
aria-label="Volume and queue"
|
||||
>
|
||||
<div className="hidden xl:block shrink-0">
|
||||
|
|
@ -55,21 +55,22 @@ export function PlayerBarRight({
|
|||
>
|
||||
{muted || volume === 0 ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
|
||||
</Button>
|
||||
<div className="w-0 group-hover/volume:w-14 overflow-hidden transition-all duration-150 ease-out">
|
||||
<div className="w-0 group-hover/volume:w-12 sm:group-hover/volume:w-14 overflow-hidden transition-all duration-150 ease-out">
|
||||
<Slider
|
||||
value={[muted ? 0 : volume]}
|
||||
onValueChange={(val) => onVolumeChange(val[0] ?? 0)}
|
||||
max={100}
|
||||
className="w-14 min-w-0"
|
||||
className="w-12 sm:w-14 min-w-0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-px h-5 bg-[var(--sumi-border-faint)] flex-shrink-0" />
|
||||
<div className="hidden sm:block w-px h-5 bg-[var(--sumi-border-faint)] flex-shrink-0" />
|
||||
{pipSupported && onTogglePiP && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn(
|
||||
'hidden md:flex',
|
||||
btnClass,
|
||||
pipActive ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
|
|
@ -93,7 +94,7 @@ export function PlayerBarRight({
|
|||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn(btnClass, 'text-muted-foreground hover:text-[var(--chart-2)] hover:bg-[var(--chart-2)]/10')}
|
||||
className={cn('hidden sm:flex', btnClass, 'text-muted-foreground hover:text-[var(--chart-2)] hover:bg-[var(--chart-2)]/10')}
|
||||
>
|
||||
<Heart className="w-4 h-4" />
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -25,12 +25,12 @@ export function PlayerBarTrackInfo({
|
|||
}: PlayerBarTrackInfoProps) {
|
||||
return (
|
||||
<section
|
||||
className="flex items-center gap-2 min-w-24 flex-1 overflow-hidden"
|
||||
className="flex items-center gap-1.5 sm:gap-2 min-w-0 flex-1 overflow-hidden"
|
||||
aria-label="Track info"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'relative w-10 h-10 sm:w-11 sm:h-11 rounded-lg overflow-hidden flex-shrink-0',
|
||||
'relative w-9 h-9 sm:w-10 sm:h-10 md:w-11 md:h-11 rounded-lg overflow-hidden flex-shrink-0',
|
||||
'transition-transform duration-300 ease-out',
|
||||
'hover:scale-105 active:scale-95',
|
||||
!isIdle && 'cursor-pointer group/art',
|
||||
|
|
|
|||
Loading…
Reference in a new issue