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 @@
-
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 = '