angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance FullScreenPlayer layout and responsiveness with improved styling for controls and lyrics display

Browse Source
This commit is contained in:
angel
2025-06-20 00:48:10 +00:00
committed by GitHub
parent e02ca64d17
commit 24a37e3368
1 changed files with 31 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/components/FullScreenPlayer.tsx
View File

@@ -311,29 +311,33 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
{/* Main Content */}
<div className="flex-1 flex flex-col lg:flex-row gap-4 lg:gap-8 p-4 lg:p-6 pt-0 overflow-hidden min-h-0">
{/* Left Side - Album Art and Controls */}
<div className="flex-1 flex flex-col items-center justify-center max-w-2xl mx-auto lg:mx-0 min-h-0">
<div className={`flex flex-col items-center min-h-0 ${
showLyrics && lyrics.length > 0
? 'flex-1 justify-center lg:justify-start'
: 'flex-1 justify-center'
}`}>
{/* Album Art */}
<div className="relative mb-4 lg:mb-8 flex-shrink-0">
<div className="relative mb-4 lg:mb-6 flex-shrink-0">
<Image
src={currentTrack.coverArt || '/default-album.png'}
alt={currentTrack.album}
width={320}
height={320}
className="w-64 h-64 lg:w-80 lg:h-80 rounded-lg shadow-2xl object-cover"
className="w-56 h-56 sm:w-64 sm:h-64 lg:w-80 lg:h-80 rounded-lg shadow-2xl object-cover"
priority
/>
</div>
{/* Track Info */}
<div className="text-center mb-4 lg:mb-8 px-4 flex-shrink-0">
<h1 className="text-xl lg:text-3xl font-bold text-foreground mb-2 line-clamp-2">
<div className="text-center mb-4 lg:mb-6 px-4 flex-shrink-0 max-w-full">
<h1 className="text-lg sm:text-xl lg:text-3xl font-bold text-foreground mb-2 line-clamp-2 leading-tight">
{currentTrack.name}
</h1>
<p className="text-lg lg:text-xl text-foreground/80 mb-1 line-clamp-1">{currentTrack.artist}</p>
<p className="text-base sm:text-lg lg:text-xl text-foreground/80 mb-1 line-clamp-1">{currentTrack.artist}</p>
</div>
{/* Progress */}
<div className="w-full max-w-md mb-4 lg:mb-6 px-4 flex-shrink-0">
<div className="w-full max-w-sm lg:max-w-md mb-4 lg:mb-6 px-4 flex-shrink-0">
<div
className="h-2 bg-white/20 rounded-full cursor-pointer relative overflow-hidden"
onClick={handleSeek}
@@ -350,7 +354,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
</div>
{/* Controls */}
<div className="flex items-center gap-4 lg:gap-6 mb-4 lg:mb-6 flex-shrink-0">
<div className="flex items-center gap-3 sm:gap-4 lg:gap-6 mb-4 lg:mb-6 flex-shrink-0">
<button
onClick={toggleShuffle}
className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${
@@ -358,41 +362,41 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
}`}
title={shuffle ? 'Shuffle On - Queue is shuffled' : 'Shuffle Off - Click to shuffle queue'}
>
<FaShuffle className="w-5 h-5" />
<FaShuffle className="w-4 h-4 sm:w-5 sm:h-5" />
</button>
<button
onClick={playPreviousTrack}
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
<FaBackward className="w-5 h-5" />
<FaBackward className="w-4 h-4 sm:w-5 sm:h-5" />
</button>
<button
onClick={togglePlayPause}
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
className="p-3 hover:bg-gray-700/50 rounded-full transition-colors">
{isPlaying ? (
<FaPause className="w-10 h-10" />
<FaPause className="w-8 h-8 sm:w-10 sm:h-10" />
) : (
<FaPlay className="w-10 h-10" />
<FaPlay className="w-8 h-8 sm:w-10 sm:h-10" />
)}
</button>
<button
onClick={playNextTrack}
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
<FaForward className="w-5 h-5" />
<FaForward className="w-4 h-4 sm:w-5 sm:h-5" />
</button>
</div>
{/* Volume and Queue */}
<div className="flex items-center gap-3 flex-shrink-0">
{/* Volume and Lyrics Toggle */}
<div className="flex items-center gap-3 flex-shrink-0 justify-center">
<button
onMouseEnter={() => setShowVolumeSlider(true)}
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors">
{volume === 0 ? (
<FaVolumeXmark className="w-5 h-5" />
<FaVolumeXmark className="w-4 h-4 sm:w-5 sm:h-5" />
) : (
<FaVolumeHigh className="w-5 h-5" />
<FaVolumeHigh className="w-4 h-4 sm:w-5 sm:h-5" />
)}
</button>
@@ -404,13 +408,13 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
}`}
title={showLyrics ? 'Hide Lyrics' : 'Show Lyrics'}
>
<FaQuoteLeft className="w-5 h-5" />
<FaQuoteLeft className="w-4 h-4 sm:w-5 sm:h-5" />
</button>
)}
{showVolumeSlider && (
<div
className="w-20 lg:w-24"
className="w-16 sm:w-20 lg:w-24"
onMouseLeave={() => setShowVolumeSlider(false)}
>
<input
@@ -428,18 +432,18 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
{/* Right Side - Lyrics */}
{showLyrics && lyrics.length > 0 && (
<div className="flex-1 lg:max-w-md min-h-0" ref={lyricsRef}>
<div className="flex-1 lg:max-w-md min-h-0 flex flex-col" ref={lyricsRef}>
<div className="h-full flex flex-col">
<ScrollArea className="flex-1 min-h-0 w-90">
<div className="space-y-4 pr-4 px-2">
<ScrollArea className="flex-1 min-h-0">
<div className="space-y-3 sm:space-y-4 pr-4 px-2 py-4">
{lyrics.map((line, index) => (
<div
key={index}
data-lyric-index={index}
onClick={() => handleLyricClick(line.time)}
className={`text-sm lg:text-base leading-relaxed transition-all duration-300 break-words cursor-pointer hover:text-foreground hover:scale-102 ${
className={`text-sm sm:text-base lg:text-base leading-relaxed transition-all duration-300 break-words cursor-pointer hover:text-foreground hover:scale-102 ${
index === currentLyricIndex
? 'text-foreground font-semibold text-lg lg:text-xl scale-105'
? 'text-foreground font-semibold text-base sm:text-lg lg:text-xl scale-105'
: index < currentLyricIndex
? 'text-foreground/60'
: 'text-foreground/40'
@@ -448,8 +452,8 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
wordWrap: 'break-word',
overflowWrap: 'break-word',
hyphens: 'auto',
paddingBottom: '8px',
paddingLeft: '9px'
paddingBottom: '6px',
paddingLeft: '8px'
}}
title={`Click to jump to ${formatTime(line.time)}`}
>