diff --git a/src/App.jsx b/src/App.jsx index 00816c3..af30720 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -241,6 +241,17 @@ export default function App() { sdp: answer.sdp }); + // Update host connection status to show answer was received + setHostConnections(prev => { + const updated = { ...prev }; + for (const key in updated) { + if (updated[key].offerId === answer.offerId) { + updated[key] = { ...updated[key], status: 'answered' }; + } + } + return updated; + }); + // Update last answer timestamp setLastAnswerTimestamp(prev => Math.max(prev, answer.answeredAt)); @@ -437,6 +448,33 @@ export default function App() { offerMapping[offer.offerId] = conn.pc; hostConnMap[`host-${idx}`] = { pc: conn.pc, dc: conn.dc, offerId: offer.offerId, status: 'waiting' }; + // Track connection state changes + conn.pc.onconnectionstatechange = () => { + console.log(`[Host] Connection state for offer ${offer.offerId}:`, conn.pc.connectionState); + + if (conn.pc.connectionState === 'connecting') { + setHostConnections(prev => { + const updated = { ...prev }; + for (const key in updated) { + if (updated[key].offerId === offer.offerId) { + updated[key] = { ...updated[key], status: 'connecting' }; + } + } + return updated; + }); + } else if (conn.pc.connectionState === 'connected') { + setHostConnections(prev => { + const updated = { ...prev }; + for (const key in updated) { + if (updated[key].offerId === offer.offerId) { + updated[key] = { ...updated[key], status: 'connected' }; + } + } + return updated; + }); + } + }; + // Send buffered ICE candidates if (conn.candidateBuffer && conn.candidateBuffer.length > 0) { console.log(`[Host] Sending ${conn.candidateBuffer.length} buffered ICE candidates for offer ${offer.offerId}`); @@ -989,6 +1027,40 @@ export default function App() { + {/* Connection Pool Status */} + {myServicePublished && Object.keys(hostConnections).length > 0 && ( +
+
+ Connection Pool ({Object.keys(hostConnections).filter(k => hostConnections[k].status !== 'waiting').length}/{Object.keys(hostConnections).length}) +
+
+ {Object.keys(hostConnections).map(key => { + const conn = hostConnections[key]; + let statusColor = '#999'; + let statusText = 'Waiting'; + + if (conn.status === 'answered') { + statusColor = '#ff9800'; + statusText = 'Answer received'; + } else if (conn.status === 'connecting') { + statusColor = '#2196f3'; + statusText = 'Connecting...'; + } else if (conn.status === 'connected') { + statusColor = '#4caf50'; + statusText = 'Connected'; + } + + return ( +
+
+ {statusText} +
+ ); + })} +
+
+ )} + {/* Incoming Chats (not in contacts) */} {Object.keys(activeChats).filter(username => !contacts.includes(username) && activeChats[username].status === 'connected').length > 0 && (