From 0d10ad7b975bd6ca5ddaa48b6181d048d0e899ab Mon Sep 17 00:00:00 2001 From: ale Date: Mon, 24 Nov 2025 18:11:41 +0100 Subject: [PATCH] clean no peers Signed-off-by: ale --- src/app/page.js | 105 ++++++++++++++++++++--------------- src/components/P2PManager.js | 25 +++++++++ 2 files changed, 84 insertions(+), 46 deletions(-) diff --git a/src/app/page.js b/src/app/page.js index cf39a10..4f3df70 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -155,6 +155,15 @@ export default function Home() { const handlePeersUpdate = useCallback((peersList) => { setPeers(peersList); + // Si no hay peers, resetear las estadísticas de velocidad + if (peersList.length === 0) { + setStats(prev => ({ + ...prev, + uploadSpeed: 0, + downloadSpeed: 0, + peers: 0 + })); + } }, []); const captureLocalStream = useCallback(() => { @@ -243,9 +252,13 @@ export default function Home() { }, [socket, watchingUser, remoteStream, username]); const handleStopWatching = useCallback(() => { + console.log('🛑 Dejando de ver stream remoto'); + if (watchingUser && p2pManagerRef.current && p2pManagerRef.current.closePeer) { + p2pManagerRef.current.closePeer(watchingUser); + } setWatchingUser(null); setRemoteStream(null); - }, []); + }, [watchingUser]); const loadCustomUrl = () => { if (customUrl.trim()) { @@ -275,7 +288,7 @@ export default function Home() {
{/* Estadísticas P2P */} - {peers > 0 && ( + {stats.peers > 0 && (
👥 @@ -296,8 +309,10 @@ export default function Home() {
)}
-
- WebRTC Activo +
0 ? 'bg-green-400' : 'bg-gray-400'}`}>
+ + {stats.peers > 0 ? 'WebRTC Activo' : 'WebRTC Listo'} +
@@ -405,47 +420,7 @@ export default function Home() { )} - {/* Panel de Estadísticas P2P */} - {stats.peers > 0 && ( -
-

- 📊 - Estadísticas P2P en Tiempo Real -

-
-
-

👥 Peers Conectados

-

{stats.peers}

-
- -
-

⬆️ Subida

-

- {(stats.uploadSpeed / 1024).toFixed(1)} -

-

KB/s

-
- -
-

⬇️ Descarga

-

- {(stats.downloadSpeed / 1024).toFixed(1)} -

-

KB/s

-
- -
-

📦 Total P2P

-

- {(stats.p2p / 1024 / 1024).toFixed(2)} -

-

MB

-
-
-
- )} - - {/* Video Player */} + {/* Video Player */
{watchingUser ? ( // Modo watching: mostrar stream remoto o mensaje de carga @@ -487,7 +462,45 @@ export default function Home() { )}
- + {/* Panel de Estadísticas P2P - Debajo del reproductor */} + {stats.peers > 0 && ( +
+

+ 📊 + Estadísticas P2P en Tiempo Real +

+
+
+

👥 Peers Conectados

+

{stats.peers}

+
+ +
+

⬆️ Subida

+

+ {(stats.uploadSpeed / 1024).toFixed(1)} +

+

KB/s

+
+ +
+

⬇️ Descarga

+

+ {(stats.downloadSpeed / 1024).toFixed(1)} +

+

KB/s

+
+ +
+

📦 Total P2P

+

+ {(stats.p2p / 1024 / 1024).toFixed(2)} +

+

MB

+
+
+
+ )} {/* Columna Lateral - Chat */} diff --git a/src/components/P2PManager.js b/src/components/P2PManager.js index 93e830b..35e12ad 100644 --- a/src/components/P2PManager.js +++ b/src/components/P2PManager.js @@ -77,6 +77,31 @@ const P2PManager = forwardRef(({ useImperativeHandle(ref, () => ({ requestPeer: (targetUser) => { return requestPeer(targetUser); + }, + closePeer: (targetUser) => { + const peer = peersRef.current[targetUser]; + if (peer) { + console.log(`🔌 Cerrando peer con ${targetUser}`); + peer.destroy(); + delete peersRef.current[targetUser]; + delete remoteStreamsRef.current[targetUser]; + setPeers(prev => { + const newPeers = prev.filter(p => p !== targetUser); + if (onPeersUpdateRef.current) onPeersUpdateRef.current(newPeers); + return newPeers; + }); + } + }, + closeAllPeers: () => { + console.log('🔌 Cerrando todos los peers'); + Object.keys(peersRef.current).forEach(targetUser => { + const peer = peersRef.current[targetUser]; + if (peer) peer.destroy(); + }); + peersRef.current = {}; + remoteStreamsRef.current = {}; + setPeers([]); + if (onPeersUpdateRef.current) onPeersUpdateRef.current([]); } }));