【m】占位重构完成

WebApp/client/public/onebyone/renderer.js

@@ -158,6 +158,10 @@ class UIRenderer {
                 // 远程媒体状态变化 - 更新远程视频和用户列表
                 this.renderRemoteVideo(state.session.remoteUser); // 渲染远程视频
                 this.renderUserList(state.session.localUser, state.session.remoteUser); // 渲染用户列表
+                // Host端：精准更新发送者participant tile的占位背景
+                if (changes.participantId) {
+                    this.renderParticipantVideoPlaceholder(changes.participantId, !state.session.remoteUser.mediaState.video);
+                }
                 break;
             case 'USER_LIST_UPDATE':
                 // 用户列表更新 - 重新渲染用户列表
@@ -303,20 +307,6 @@ class UIRenderer {
             }
         }
 
-        // Host端：同步更新participant grid中tile的占位背景
-        // 通过 media-state-changed 信令驱动（比视频轨道事件更可靠）
-        const participantGrid = this.elements.participantGrid;
-        if (participantGrid && !participantGrid.classList.contains('hidden')) {
-            const shouldShowParticipantPlaceholder = !remoteUser.mediaState.video;
-            const tiles = participantGrid.querySelectorAll('[data-participant-id]');
-            tiles.forEach(tile => {
-                const placeholder = tile.querySelector('.participant-video-placeholder');
-                if (placeholder) {
-                    toggleElement(placeholder, shouldShowParticipantPlaceholder);
-                }
-            });
-        }
-
         // 渲染说话状态
         if (this.elements.remoteSpeakingIndicator) {
             toggleElement(this.elements.remoteSpeakingIndicator, remoteUser.mediaState.isSpeaking);
@@ -501,6 +491,21 @@ class UIRenderer {
         }
     }
 
+    // 精准更新指定participant tile的占位背景
+    // participantId: 发送media-state-changed的participant的连接ID
+    // showPlaceholder: 是否显示占位背景（视频关闭时为true）
+    renderParticipantVideoPlaceholder(participantId, showPlaceholder) {
+        const grid = this.elements.participantGrid;
+        if (!grid) return;
+        const tile = grid.querySelector(`[data-participant-id="${participantId}"]`);
+        if (!tile) return;
+        const placeholder = tile.querySelector('.participant-video-placeholder');
+        if (placeholder) {
+            toggleElement(placeholder, showPlaceholder);
+            console.log(`Updated placeholder for participant ${participantId}: ${showPlaceholder ? 'shown' : 'hidden'}`);
+        }
+    }
+
     // 渲染Participant端的单一远端视频（Host画面）
     renderSingleRemoteStream(stream) {
         if (this.elements.remoteVideo && stream) {