From d80e64ca667a567d29e007622f1ff54122194946 Mon Sep 17 00:00:00 2001
From: stary <834207172@qq.COM>
Date: Sat, 25 Apr 2026 13:06:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=A0=E4=BD=8D=E8=83=8C=E6=99=AF=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 WebApp/client/public/onebyone/renderer.js | 27 +++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/WebApp/client/public/onebyone/renderer.js b/WebApp/client/public/onebyone/renderer.js
index 53a6827..b962d4c 100644
--- a/WebApp/client/public/onebyone/renderer.js
+++ b/WebApp/client/public/onebyone/renderer.js
@@ -303,6 +303,20 @@ 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);
@@ -422,6 +436,19 @@ class UIRenderer {
             video.id = `participantVideo_${connectionId}`;
             tile.appendChild(video);
 
+            // 参与者视频关闭时的占位背景（复用 remoteVideoPlaceholder 样式）
+            const placeholder = document.createElement('div');
+            placeholder.className = 'participant-video-placeholder absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900/80 to-purple-900/80 hidden';
+            placeholder.innerHTML = `
+                <div class="text-center">
+                    <div class="w-20 h-20 rounded-full bg-indigo-700/50 flex items-center justify-center mx-auto mb-3">
+                        <i class="fas fa-video-slash text-2xl text-white/70"></i>
+                    </div>
+                    <p class="text-white text-sm font-medium">摄像头已关闭</p>
+                </div>
+            `;
+            tile.appendChild(placeholder);
+
             // 参与者名称标签
             const label = document.createElement('div');
             label.className = 'absolute bottom-3 left-3 glass px-3 py-1 rounded-full text-xs flex items-center gap-2';