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

feat: enhance AudioPlayer component with improved layout, control button sizes, and added progress bar functionality

Browse Source
This commit is contained in:
angel
2025-07-02 01:08:27 +00:00
committed by GitHub
parent 8486cd195f
commit 79f4a66a35
1 changed files with 50 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
app/components/AudioPlayer.tsx
View File

@@ -413,39 +413,45 @@ export const AudioPlayer: React.FC = () => {
// Compact floating player (default state) // Compact floating player (default state)
return ( return (
<div className="fixed bottom-4 left-4 right-4 z-50"> <div className="fixed bottom-4 left-4 right-4 z-50">
<div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg p-3 pb-0 cursor-pointer hover:scale-[1.01] transition-transform"> <div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg p-3 cursor-pointer hover:scale-[1.01] transition-transform">
<div className="flex items-center justify-between mb-3"> <div className="flex items-center">
{/* Track info */}
<div className="flex items-center flex-1 min-w-0"> <div className="flex items-center flex-1 min-w-0">
<Image <Image
src={currentTrack.coverArt || '/default-user.jpg'} src={currentTrack.coverArt || '/default-user.jpg'}
alt={currentTrack.name} alt={currentTrack.name}
width={40} width={48}
height={40} height={48}
className="w-10 h-10 rounded-md mr-3 flex-shrink-0" className="w-12 h-12 rounded-md mr-4 flex-shrink-0"
/> />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="font-semibold truncate text-sm">{currentTrack.name}</p> <p className="font-semibold truncate text-base">{currentTrack.name}</p>
<p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p> <p className="text-sm text-muted-foreground truncate">{currentTrack.artist}</p>
</div> </div>
</div> </div>
{/* Control buttons */} {/* Center section with controls and progress */}
<div className="flex items-center justify-center space-x-2 "> <div className="flex flex-col items-center flex-1 justify-center">
<button {/* Control buttons */}
onClick={toggleShuffle} className={`p-1.5 hover:bg-gray-700/50 rounded-full transition-colors ${ shuffle ? 'text-primary bg-primary/20' : '' }`} title={shuffle ? 'Shuffle On - Queue is shuffled' : 'Shuffle Off - Click to shuffle queue'}> <div className="flex items-center justify-center space-x-3 mb-2">
<FaShuffle className="w-3 h-3" /> <button
</button> onClick={toggleShuffle}
<button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}> className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${shuffle ? 'text-primary bg-primary/20' : ''}`}
<FaBackward className="w-3 h-3" /> title={shuffle ? 'Shuffle On - Queue is shuffled' : 'Shuffle Off - Click to shuffle queue'}
</button> >
<button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}> <FaShuffle className="w-4 h-4" />
{isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />} </button>
</button> <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
<button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}> <FaBackward className="w-4 h-4" />
<FaForward className="w-3 h-3" /> </button>
</button> <button className="p-3 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
{isPlaying ? <FaPause className="w-5 h-5" /> : <FaPlay className="w-5 h-5" />}
</button>
<button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
<FaForward className="w-4 h-4" />
</button>
<button <button
className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors flex items-center justify-center" className="p-2 hover:bg-gray-700/50 rounded-full transition-colors flex items-center justify-center"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
toggleCurrentTrackStar(); toggleCurrentTrackStar();
@@ -453,26 +459,38 @@ export const AudioPlayer: React.FC = () => {
title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'} title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
> >
<Heart <Heart
className={`w-4 h-4 ${currentTrack.starred ? 'text-primary fill-primary' : ''}`} className={`w-5 h-5 ${currentTrack.starred ? 'text-primary fill-primary' : ''}`}
/> />
</button> </button>
</div>
{/* Progress bar */}
<div className="flex items-center space-x-2 w-80">
<span className="text-xs text-muted-foreground w-8 text-right">
{formatTime(audioCurrent?.currentTime ?? 0)}
</span>
<Progress value={progress} className="flex-1 cursor-pointer h-1" onClick={handleProgressClick}/>
<span className="text-xs text-muted-foreground w-8">
{formatTime(audioCurrent?.duration ?? 0)}
</span>
</div>
</div>
{/* Right side buttons */}
</div> <div className="flex items-center justify-end space-x-2 flex-1">
<div className="flex items-center space-x-1 ml-2">
<button <button
className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" className="p-2 hover:bg-gray-700/50 rounded-full transition-colors"
onClick={() => setIsFullScreen(true)} onClick={() => setIsFullScreen(true)}
title="Full Screen" title="Full Screen"
> >
<FaExpand className="w-3 h-3" /> <FaExpand className="w-4 h-4" />
</button> </button>
<button <button
className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" className="p-2 hover:bg-gray-700/50 rounded-full transition-colors"
onClick={() => setIsMinimized(true)} onClick={() => setIsMinimized(true)}
title="Minimize" title="Minimize"
> >
<FaCompress className="w-3 h-3" /> <FaCompress className="w-4 h-4" />
</button> </button>
</div> </div>
</div> </div>
@@ -488,16 +506,4 @@ export const AudioPlayer: React.FC = () => {
/> />
</div> </div>
); );
}; };
// {/* Progress bar */}
// <div className="flex items-center space-x-2">
// <span className="text-xs text-muted-foreground w-8 text-right">
// {formatTime(audioCurrent?.currentTime ?? 0)}
// </span>
// <Progress value={progress} className="flex-1 cursor-pointer h-1" onClick={handleProgressClick}/>
// <span className="text-xs text-muted-foreground w-8">
// {formatTime(audioCurrent?.duration ?? 0)}
// </span>
// </div>