auto-connect online

Signed-off-by: ale <ale@manalejandro.com>

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}
               />
             </div>

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) => {