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

3 Stage MiniPlayer, Mini Player, Compact, "Full expanded player"

Browse Source
This commit is contained in:
angel
2025-06-19 18:19:03 +00:00
committed by GitHub
parent c2c2e4bfb0
commit 7e89ca8532
2 changed files with 173 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
app/components/AudioPlayer.tsx
View File

@@ -2,7 +2,7 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import Image from 'next/image'; import Image from 'next/image';
import { useAudioPlayer } from '@/app/components/AudioPlayerContext'; import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
import { FaPlay, FaPause, FaVolumeHigh, FaForward, FaBackward } from "react-icons/fa6"; import { FaPlay, FaPause, FaVolumeHigh, FaForward, FaBackward, FaExpand, FaCompress, FaVolumeXmark } from "react-icons/fa6";
import ColorThief from '@neutrixs/colorthief'; import ColorThief from '@neutrixs/colorthief';
import { Progress } from '@/components/ui/progress'; import { Progress } from '@/components/ui/progress';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
@@ -15,6 +15,8 @@ export const AudioPlayer: React.FC = () => {
const [showVolumeSlider, setShowVolumeSlider] = useState(false); const [showVolumeSlider, setShowVolumeSlider] = useState(false);
const [volume, setVolume] = useState(1); const [volume, setVolume] = useState(1);
const [isClient, setIsClient] = useState(false); const [isClient, setIsClient] = useState(false);
const [isExpanded, setIsExpanded] = useState(false);
const [isMinimized, setIsMinimized] = useState(false);
const audioCurrent = audioRef.current; const audioCurrent = audioRef.current;
const { toast } = useToast(); const { toast } = useToast();
@@ -151,65 +153,187 @@ export const AudioPlayer: React.FC = () => {
return `${minutes}:${secs}`; return `${minutes}:${secs}`;
} }
if (!isClient) { if (!isClient || !currentTrack) {
return null; return null;
} }
return ( // Mini player (collapsed state)
<div className="bg-background w-full text-white border-t border-t-1"> if (isMinimized) {
{currentTrack ? ( return (
<div className="flex items-center justify-between px-4 py-4"> <div className="fixed bottom-4 right-4 z-50">
{/* Left side - Album art and track info */} <div
<div className="flex items-center flex-1 min-w-0"> className="bg-background/95 backdrop-blur-sm border rounded-full shadow-lg cursor-pointer hover:scale-105 transition-transform"
onClick={() => setIsMinimized(false)}
>
<div className="flex items-center p-2">
<Image <Image
src={currentTrack.coverArt || '/default-user.jpg'} src={currentTrack.coverArt || '/default-user.jpg'}
alt={currentTrack.name} alt={currentTrack.name}
width={96} width={40}
height={96} height={40}
className="w-12 h-12 mr-3 rounded-md flex-shrink-0" className="w-10 h-10 rounded-full"
/> />
<div className="flex-1 min-w-0"> <button
<p className="font-semibold truncate">{currentTrack.name}</p> className="ml-2 p-2 hover:bg-gray-700/50 rounded-full transition-colors"
<p className='text-sm text-gray-400 truncate'>{currentTrack.artist}</p> onClick={(e) => {
e.stopPropagation();
togglePlayPause();
}}
>
{isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />}
</button>
</div>
</div>
<audio ref={audioRef} hidden />
</div>
);
}
// Compact floating player (default state)
if (!isExpanded) {
return (
<div className="fixed bottom-4 right-4 z-50">
<div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg p-3 w-80">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center flex-1 min-w-0">
<Image
src={currentTrack.coverArt || '/default-user.jpg'}
alt={currentTrack.name}
width={48}
height={48}
className="w-12 h-12 rounded-md mr-3 flex-shrink-0"
/>
<div className="flex-1 min-w-0">
<p className="font-semibold truncate text-sm">{currentTrack.name}</p>
<p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
</div>
</div>
<div className="flex items-center space-x-1 ml-2">
<button
className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors"
onClick={() => setIsMinimized(true)}
title="Minimize"
>
<FaCompress className="w-3 h-3" />
</button>
<button
className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors"
onClick={() => setIsExpanded(true)}
title="Expand"
>
<FaExpand className="w-3 h-3" />
</button>
</div> </div>
</div> </div>
{/* Center - Control buttons and progress bar */} {/* Control buttons */}
<div className="flex flex-col items-center flex-1 max-w-md mx-6"> <div className="flex items-center justify-center space-x-2 mb-2">
{/* Control buttons */} <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
<div className="flex items-center space-x-2 mb-2"> <FaBackward className="w-3 h-3" />
<button className="p-2 hover:bg-gray-700 rounded-full transition-colors" onClick={playPreviousTrack}> </button>
<FaBackward className="w-4 h-4" /> <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
</button> {isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />}
<button className='p-3 hover:bg-gray-700 rounded-full transition-colors' onClick={togglePlayPause}> </button>
{isPlaying ? <FaPause className="w-5 h-5" /> : <FaPlay className="w-5 h-5" />} <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
</button> <FaForward className="w-3 h-3" />
<button className='p-2 hover:bg-gray-700 rounded-full transition-colors' onClick={playNextTrack}> </button>
<FaForward className="w-4 h-4" />
</button>
</div>
{/* Progress bar below buttons - full width of this section */}
<div className="flex items-center space-x-2 w-full">
<span className="text-xs text-gray-400 w-10 text-right">
{formatTime(audioCurrent?.currentTime ?? 0)}
</span>
<Progress value={progress} className="flex-1 cursor-pointer" onClick={handleProgressClick}/>
<span className="text-xs text-gray-400 w-10">
{formatTime(audioCurrent?.duration ?? 0)}
</span>
</div>
</div> </div>
{/* Right side - Extra space for balance */} {/* Progress bar */}
<div className="flex-1"></div> <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>
</div> </div>
) : ( <audio ref={audioRef} hidden />
<div className="p-4"> </div>
<p>No track playing</p> );
}
// Full expanded player
return (
<div className="fixed bottom-4 right-4 z-50">
<div className="bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg p-4 w-96">
<div className="flex items-center justify-between mb-4">
<h3 className="font-semibold">Now Playing</h3>
<div className="flex items-center space-x-1">
<button
className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors"
onClick={() => setIsExpanded(false)}
title="Collapse"
>
<FaCompress className="w-3 h-3" />
</button>
</div>
</div> </div>
)}
<audio ref={audioRef} hidden /> <div className="flex items-center mb-4">
<Image
src={currentTrack.coverArt || '/default-user.jpg'}
alt={currentTrack.name}
width={80}
height={80}
className="w-20 h-20 rounded-lg mr-4 flex-shrink-0"
/>
<div className="flex-1 min-w-0">
<p className="font-semibold text-lg leading-tight">{currentTrack.name}</p>
<p className="text-muted-foreground">{currentTrack.artist}</p>
<p className="text-sm text-muted-foreground">{currentTrack.album}</p>
</div>
</div>
{/* Control buttons */}
<div className="flex items-center justify-center space-x-4 mb-4">
<button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
<FaBackward className="w-4 h-4" />
</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>
</div>
{/* Progress bar */}
<div className="flex items-center space-x-2 mb-4">
<span className="text-xs text-muted-foreground w-10 text-right">
{formatTime(audioCurrent?.currentTime ?? 0)}
</span>
<Progress value={progress} className="flex-1 cursor-pointer" onClick={handleProgressClick}/>
<span className="text-xs text-muted-foreground w-10">
{formatTime(audioCurrent?.duration ?? 0)}
</span>
</div>
{/* Volume control */}
<div className="flex items-center space-x-2">
<button
className="p-2 hover:bg-gray-700/50 rounded-full transition-colors"
onClick={() => setShowVolumeSlider(!showVolumeSlider)}
>
{volume === 0 ? <FaVolumeXmark className="w-4 h-4" /> : <FaVolumeHigh className="w-4 h-4" />}
</button>
{showVolumeSlider && (
<input
type="range"
min="0"
max="1"
step="0.1"
value={volume}
onChange={handleVolumeChange}
className="flex-1 h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer"
/>
)}
</div>
<audio ref={audioRef} hidden />
</div>
</div> </div>
); );
}; };

8
app/components/ihateserverside.tsx
View File

@@ -45,16 +45,14 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
/> />
</div> </div>
)} )}
<div className={`flex-1 overflow-y-auto ${isStatusBarVisible ? 'pb-24' : ''}`}> <div className="flex-1 overflow-y-auto">
<div>{children}</div> <div>{children}</div>
</div> </div>
</div> </div>
{/* Audio Player */} {/* Floating Audio Player */}
{isStatusBarVisible && ( {isStatusBarVisible && (
<div className="fixed bottom-0 left-0 right-0 z-50 bg-background"> <AudioPlayer />
<AudioPlayer />
</div>
)} )}
<Toaster /> <Toaster />
</div> </div>