"use client" import { useState, useRef, useEffect } from 'react' import { Button } from '@/components/ui/button' import { Play, Pause, Volume2 } from 'lucide-react' interface VoicePlayerProps { audioUrl: string duration?: number isCurrentUser?: boolean } export function VoicePlayer({ audioUrl, duration = 0, isCurrentUser = false }: VoicePlayerProps) { const [isPlaying, setIsPlaying] = useState(false) const [currentTime, setCurrentTime] = useState(0) const [audioDuration, setAudioDuration] = useState(duration > 0 ? duration : 0) const [isLoading, setIsLoading] = useState(false) const audioRef = useRef(null) // Обновляем длительность при изменении props useEffect(() => { if (duration > 0 && (!audioDuration || audioDuration === 0)) { setAudioDuration(duration) } }, [duration, audioDuration]) useEffect(() => { // Создаем аудио элемент audioRef.current = new Audio(audioUrl) const audio = audioRef.current const handleLoadedMetadata = () => { if (audio.duration && isFinite(audio.duration) && !isNaN(audio.duration)) { setAudioDuration(audio.duration) } else { setAudioDuration(duration || 0) } setIsLoading(false) } const handleTimeUpdate = () => { if (audio.currentTime && isFinite(audio.currentTime) && !isNaN(audio.currentTime)) { setCurrentTime(audio.currentTime) } } const handleEnded = () => { setIsPlaying(false) setCurrentTime(0) } const handleCanPlay = () => { setIsLoading(false) } const handleLoadStart = () => { setIsLoading(true) } const handleError = () => { console.error('Audio loading error') setIsLoading(false) setIsPlaying(false) } audio.addEventListener('loadedmetadata', handleLoadedMetadata) audio.addEventListener('timeupdate', handleTimeUpdate) audio.addEventListener('ended', handleEnded) audio.addEventListener('canplay', handleCanPlay) audio.addEventListener('loadstart', handleLoadStart) audio.addEventListener('error', handleError) return () => { if (audio) { audio.removeEventListener('loadedmetadata', handleLoadedMetadata) audio.removeEventListener('timeupdate', handleTimeUpdate) audio.removeEventListener('ended', handleEnded) audio.removeEventListener('canplay', handleCanPlay) audio.removeEventListener('loadstart', handleLoadStart) audio.removeEventListener('error', handleError) audio.pause() } } }, [audioUrl, duration]) const togglePlayPause = () => { const audio = audioRef.current if (!audio) return if (isPlaying) { audio.pause() setIsPlaying(false) } else { audio.play().then(() => { setIsPlaying(true) }).catch((error) => { console.error('Error playing audio:', error) setIsPlaying(false) }) } } const formatTime = (time: number) => { if (isNaN(time) || !isFinite(time) || time < 0) return '0:00' const minutes = Math.floor(time / 60) const seconds = Math.floor(time % 60) return `${minutes}:${seconds.toString().padStart(2, '0')}` } const getProgress = () => { if (!audioDuration || audioDuration === 0 || isNaN(audioDuration) || !isFinite(audioDuration)) return 0 if (!currentTime || isNaN(currentTime) || !isFinite(currentTime)) return 0 return Math.min((currentTime / audioDuration) * 100, 100) } return (
{/* Кнопка воспроизведения */} {/* Визуализация волны / прогресс бар */}
{/* Время */}
{formatTime(currentTime)} {formatTime(audioDuration)}
) }