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

Refactor AudioPlayer controls layout for improved usability and accessibility

Browse Source
This commit is contained in:
angel
2025-06-19 19:30:28 +00:00
committed by GitHub
parent 2c31d22e0e
commit 8fe2ee235b
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/components/AudioPlayer.tsx
View File

@@ -180,15 +180,17 @@ export const AudioPlayer: React.FC = () => {
</div> </div>
<p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p> <p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
</div> </div>
<button <div className="flex items-center justify-center space-x-2">
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors flex-shrink-0" <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
onClick={(e) => { <FaBackward className="w-3 h-3" />
e.stopPropagation(); </button>
togglePlayPause(); <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
}} {isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />}
> </button>
{isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />} <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
</button> <FaForward className="w-3 h-3" />
</button>
</div>
</div> </div>
</div> </div>
<audio ref={audioRef} hidden /> <audio ref={audioRef} hidden />
@@ -199,7 +201,7 @@ 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"> <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="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
<div className="flex items-center flex-1 min-w-0"> <div className="flex items-center flex-1 min-w-0">
<Image <Image