69 lines
1.9 KiB
React
69 lines
1.9 KiB
React
|
import { Play, Pause, SkipForward, Music } from 'lucide-react'
|
||
|
|
import { useMusicPlayer } from '../contexts/MusicPlayerContext'
|
||
|
|
import { hapticFeedback } from '../utils/telegram'
|
||
|
|
import './MiniPlayer.css'
|
||
|
|
|
||
|
|
export default function MiniPlayer() {
|
||
|
|
const {
|
||
|
|
currentTrack,
|
||
|
|
isPlaying,
|
||
|
|
progress,
|
||
|
|
duration,
|
||
|
|
togglePlay,
|
||
|
|
playNext,
|
||
|
|
toggleExpanded
|
||
|
|
} = useMusicPlayer()
|
||
|
|
|
||
|
|
if (!currentTrack) return null
|
||
|
|
|
||
|
|
const progressPercent = duration > 0 ? (progress / duration) * 100 : 0
|
||
|
|
|
||
|
|
const handleTogglePlay = (e) => {
|
||
|
|
e.stopPropagation()
|
||
|
|
hapticFeedback('light')
|
||
|
|
togglePlay()
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleNext = (e) => {
|
||
|
|
e.stopPropagation()
|
||
|
|
hapticFeedback('light')
|
||
|
|
playNext()
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleExpand = () => {
|
||
|
|
hapticFeedback('light')
|
||
|
|
toggleExpanded()
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="mini-player" onClick={handleExpand}>
|
||
|
|
<div className="mini-player-progress" style={{ width: `${progressPercent}%` }} />
|
||
|
|
|
||
|
|
<div className="mini-player-content">
|
||
|
|
<div className="mini-player-cover">
|
||
|
|
{currentTrack.coverImage ? (
|
||
|
|
<img src={currentTrack.coverImage} alt={currentTrack.title} />
|
||
|
|
) : (
|
||
|
|
<Music size={20} />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mini-player-info">
|
||
|
|
<div className="mini-player-title">{currentTrack.title}</div>
|
||
|
|
<div className="mini-player-artist">{currentTrack.artist?.name || 'Unknown'}</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mini-player-controls">
|
||
|
|
<button className="mini-player-btn" onClick={handleTogglePlay}>
|
||
|
|
{isPlaying ? <Pause size={24} fill="currentColor" /> : <Play size={24} fill="currentColor" />}
|
||
|
|
</button>
|
||
|
|
<button className="mini-player-btn" onClick={handleNext}>
|
||
|
|
<SkipForward size={24} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|