diff --git a/src/app/page.js b/src/app/page.js index d1d9d14..5aab380 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -12,6 +12,7 @@ export default function Home() { const [username, setUsername] = useState(''); const [socket, setSocket] = useState(null); const [peers, setPeers] = useState([]); + const [connectedUsers, setConnectedUsers] = useState([]); const [videoUrl, setVideoUrl] = useState(''); const [customUrl, setCustomUrl] = useState(''); const [localStream, setLocalStream] = useState(null); @@ -162,6 +163,11 @@ export default function Home() { setSocket(socketInstance); }, []); + const handleUsersUpdate = useCallback((users) => { + console.log('👥 Usuarios conectados actualizados:', users); + setConnectedUsers(users); + }, []); + const handlePeersUpdate = useCallback((peersList) => { setPeers(peersList); // Si no hay peers, resetear las estadísticas de velocidad @@ -270,19 +276,26 @@ export default function Home() { // Auto-conectar cuando el usuario ingresa al chat (después de registrarse) useEffect(() => { if (autoConnectUser && username && socket && socket.connected) { - console.log('🚀 Iniciando auto-conexión con:', autoConnectUser); + console.log('🚀 Validando auto-conexión con:', autoConnectUser); setShowAutoConnectBanner(true); - // Esperar 1.5 segundos para que el usuario vea el banner y el socket esté completamente listo + // Esperar 1.5 segundos para dar tiempo a recibir la lista de usuarios const timer = setTimeout(() => { - handleWatchUser(autoConnectUser); + // Verificar si el usuario objetivo está conectado + if (connectedUsers.includes(autoConnectUser)) { + console.log('✅ Usuario encontrado, conectando...'); + handleWatchUser(autoConnectUser); + } else { + console.log('❌ Usuario no conectado:', autoConnectUser); + alert(`⚠️ El usuario "${autoConnectUser}" no está conectado en este momento.\n\nPor favor, pídele que se conecte o intenta más tarde.`); + } setShowAutoConnectBanner(false); setAutoConnectUser(null); // Limpiar para no reconectar }, 1500); return () => clearTimeout(timer); } - }, [autoConnectUser, username, socket, handleWatchUser]); + }, [autoConnectUser, username, socket, connectedUsers, handleWatchUser]); const handleStopWatching = useCallback(() => { console.log('🛑 Dejando de ver stream remoto'); @@ -582,6 +595,7 @@ export default function Home() { onUsernameChange={setUsername} onSocketReady={handleSocketReady} onWatchUser={handleWatchUser} + onUsersUpdate={handleUsersUpdate} peers={peers} /> diff --git a/src/components/Chat.js b/src/components/Chat.js index 09bb6ad..db57d7e 100644 --- a/src/components/Chat.js +++ b/src/components/Chat.js @@ -6,7 +6,7 @@ import { io } from 'socket.io-client'; /** * Componente de Chat en tiempo real con Socket.IO y thumbnails de video */ -export default function Chat({ username, onUsernameChange, onSocketReady, onWatchUser, peers = [] }) { +export default function Chat({ username, onUsernameChange, onSocketReady, onWatchUser, onUsersUpdate, peers = [] }) { const [socket, setSocket] = useState(null); const [messages, setMessages] = useState([]); const [users, setUsers] = useState([]); @@ -51,11 +51,21 @@ export default function Chat({ username, onUsernameChange, onSocketReady, onWatc }); newSocket.on('users', (data) => { - setUsers(data.users || []); + const userList = data.users || []; + setUsers(userList); + if (onUsersUpdate) { + onUsersUpdate(userList); + } }); newSocket.on('adduser', (data) => { - setUsers(prevUsers => [...prevUsers, data.user]); + setUsers(prevUsers => { + const newUsers = [...prevUsers, data.user]; + if (onUsersUpdate) { + onUsersUpdate(newUsers); + } + return newUsers; + }); }); newSocket.on('user-thumbnail', (data) => {