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); 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); } catch (error) { console.error('Error fetching player:', error); } finally { setLoading(false); } }; const handlePlay = async () => { if (!searchQuery.trim()) return; try { await api.post(`/api/player/${guildId}/play`, { query: searchQuery }); setSearchQuery(''); 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 }); 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)} onKeyPress={(e) => e.key === 'Enter' && handlePlay()} className="search-input" />

{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 {player.volume}%

🔁 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

)}