diff --git a/extension/popup.html b/extension/popup.html index c991287..1aacfb8 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -286,7 +286,7 @@
-
+
No peers connected
diff --git a/extension/popup.js b/extension/popup.js index c10b953..ad4d494 100644 --- a/extension/popup.js +++ b/extension/popup.js @@ -41,6 +41,8 @@ const elements = { sectionActive: document.getElementById('section-active'), activeRoomId: document.getElementById('activeRoomId'), activeServer: document.getElementById('activeServer'), + peerList: document.getElementById('peerList'), + peerListSync: document.getElementById('peerListSync'), playBtn: document.getElementById('playBtn'), pauseBtn: document.getElementById('pauseBtn') }; @@ -110,14 +112,14 @@ function updateUI(roomId, password, useCustomServer = false, serverUrl = '') { } function updatePeerList(peers) { - if (!peers || !elements.peerList) return; + if (!peers) return; // UI Throttle: Only re-render if the peer state actually changed const currentPeersJson = JSON.stringify(peers); if (currentPeersJson === lastPeersJson) return; lastPeersJson = currentPeersJson; - elements.peerList.innerHTML = peers.map(p => { + const html = peers.map(p => { const id = escapeHtml(typeof p === 'object' ? p.peerId : p); const titleText = (typeof p === 'object' && p.tabTitle) ? escapeHtml(p.tabTitle) : ''; const title = titleText ? `
${titleText}
` : ''; @@ -131,6 +133,12 @@ function updatePeerList(peers) {
`; }).join(''); + + const emptyHtml = '
No peers connected
'; + + if (elements.peerList) elements.peerList.innerHTML = html || emptyHtml; + if (elements.peerListSync) elements.peerListSync.innerHTML = html || emptyHtml; + // Re-populate tabs to update Star Matching when peers change populateTabs(peers); } diff --git a/server/index.js b/server/index.js index fb02e78..99d012f 100644 --- a/server/index.js +++ b/server/index.js @@ -228,6 +228,7 @@ io.on('connection', (socket) => { room.peers.delete(sid); room.peerIds.delete(sid); room.peerData.delete(sid); + socket.to(roomId).emit(EVENTS.PEER_STATUS, { peerId: data.peerId, status: 'left' }); log('ROOM', `Deduplicated peer ${peerId} from room ${roomId}`); } }