import React, { useState, useEffect } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import io from 'socket.io-client'; import api from '../services/api'; import './MusicPanel.css'; function MusicPanel({ user }) { const { guildId } = useParams(); const navigate = useNavigate(); const [player, setPlayer] = useState(null); const [socket, setSocket] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [loading, setLoading] = useState(true); const [searchSuggestions, setSuggestions] = useState([]); const [showSuggestions, setShowSuggestions] = useState(false); const [volumeSliderValue, setVolumeSliderValue] = useState(50); useEffect(() => { const newSocket = io('http://localhost:3001', { withCredentials: true }); newSocket.on('connect', () => { console.log('Connected to WebSocket'); newSocket.emit('subscribe', guildId); }); newSocket.on('playerUpdate', (data) => { if (data.guildId === guildId) { setPlayer(data); } }); setSocket(newSocket); fetchPlayer(); return () => { newSocket.emit('unsubscribe', guildId); newSocket.disconnect(); }; }, [guildId]); const fetchPlayer = async () => { try { const response = await api.get(`/api/player/${guildId}`); setPlayer(response.data); if (response.data.volume) { setVolumeSliderValue(response.data.volume); } } catch (error) { console.error('Error fetching player:', error); } finally { setLoading(false); } }; const searchSongs = async (query) => { if (!query || query.trim().length < 2) { setSuggestions([]); setShowSuggestions(false); return; } try { const response = await api.get('/api/search', { params: { query } }); setSuggestions(response.data); setShowSuggestions(true); } catch (error) { console.error('Error searching songs:', error); setSuggestions([]); } }; const handlePlay = async (songUrl = null) => { const query = songUrl || searchQuery; if (!query.trim()) return; try { await api.post(`/api/player/${guildId}/play`, { query }); setSearchQuery(''); setSuggestions([]); setShowSuggestions(false); fetchPlayer(); } catch (error) { console.error('Error playing track:', error); } }; const handlePause = async () => { try { if (player.isPaused) { await api.post(`/api/player/${guildId}/resume`); } else { await api.post(`/api/player/${guildId}/pause`); } fetchPlayer(); } catch (error) { console.error('Error pausing:', error); } }; const handleSkip = async () => { try { await api.post(`/api/player/${guildId}/skip`); fetchPlayer(); } catch (error) { console.error('Error skipping:', error); } }; const handleStop = async () => { try { await api.post(`/api/player/${guildId}/stop`); fetchPlayer(); } catch (error) { console.error('Error stopping:', error); } }; const handleShuffle = async () => { try { await api.post(`/api/player/${guildId}/shuffle`); fetchPlayer(); } catch (error) { console.error('Error shuffling:', error); } }; const handleLoop = async () => { try { await api.post(`/api/player/${guildId}/loop`); fetchPlayer(); } catch (error) { console.error('Error toggling loop:', error); } }; const handleVolumeChange = async (change) => { try { const newVolume = Math.max(0, Math.min(100, player.volume + change)); await api.post(`/api/player/${guildId}/volume`, { volume: newVolume }); setVolumeSliderValue(newVolume); fetchPlayer(); } catch (error) { console.error('Error changing volume:', error); } }; const handleVolumeSliderChange = async (e) => { const newVolume = parseInt(e.target.value); setVolumeSliderValue(newVolume); }; const handleVolumeSliderRelease = async () => { try { await api.post(`/api/player/${guildId}/volume`, { volume: volumeSliderValue }); fetchPlayer(); } catch (error) { console.error('Error changing volume:', error); } }; const handleAutoplay = async () => { try { await api.post(`/api/player/${guildId}/autoplay`); fetchPlayer(); } catch (error) { console.error('Error toggling autoplay:', error); } }; const formatDuration = (seconds) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins}:${secs.toString().padStart(2, '0')}`; }; if (loading) { return (

Loading player...

); } return (

{ setSearchQuery(e.target.value); searchSongs(e.target.value); }} onKeyPress={(e) => e.key === 'Enter' && handlePlay()} onFocus={() => searchQuery.length >= 2 && setShowSuggestions(true)} onBlur={() => setTimeout(() => setShowSuggestions(false), 200)} className="search-input" /> {showSuggestions && searchSuggestions.length > 0 && (

{searchSuggestions.map((song, index) => (

handlePlay(song.url)} >

{song.title}

{song.author} · {formatDuration(song.duration)}

))}

)}

{player?.active && player.currentTrack ? (

🎵 MUSIC PANEL

{player.currentTrack.thumbnail && (

)}

{player.currentTrack.title}

👤 Requested By User {player.currentTrack.requestedBy.substring(0, 4)}

⏱️ Music Duration {formatDuration(player.currentTrack.duration)}

✍️ Music Author {player.currentTrack.author}

📊 Queue {player.queue.length} tracks

🔊 Volume

{volumeSliderValue}%

🔁 Loop {player.loop}

{player.queue.length > 0 && (

📋 Queue ({player.queue.length})

{player.queue.slice(0, 10).map((track, index) => (

{index + 1} {track.thumbnail && (

)}

{track.title}

{track.author}

{formatDuration(track.duration)}

))}

)}

) : (

🎵

No Active Music Session

Start playing music by searching for a song above or use the !play command in Discord

)}