From bd3698d508008d4445b648e850f48347009fb440 Mon Sep 17 00:00:00 2001
From: stary <834207172@qq.COM>
Date: Sat, 25 Apr 2026 18:34:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=A7=86=E9=A2=91=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 WebApp/client/public/onebyone/renderer.js |  8 +++-
 WebApp/client/public/onebyone/store.js    | 48 +++++++++++++++++------
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/WebApp/client/public/onebyone/renderer.js b/WebApp/client/public/onebyone/renderer.js
index afb9e73..67a0fc0 100644
--- a/WebApp/client/public/onebyone/renderer.js
+++ b/WebApp/client/public/onebyone/renderer.js
@@ -159,8 +159,12 @@ class UIRenderer {
                 this.renderRemoteVideo(state.session.remoteUser); // 渲染远程视频
                 this.renderUserList(state.session.localUser, state.session.remoteUser, state.participants); // 渲染用户列表
                 // Host端：精准更新发送者participant tile的占位背景
-                if (changes.participantId) {
-                    this.renderParticipantVideoPlaceholder(changes.participantId, !state.session.remoteUser.mediaState.video);
+                // 只有Host端需要处理participantId对应的tile占位符（Participant端没有其他Participant的视频流）
+                if (changes.participantId && state.session.localUser.isHost) {
+                    // 从participants Map中读取该participant的video状态，而非remoteUser（多Participant场景remoteUser不精确）
+                    const pInfo = state.participants[changes.participantId];
+                    const showPlaceholder = pInfo ? !pInfo.mediaState.video : true;
+                    this.renderParticipantVideoPlaceholder(changes.participantId, showPlaceholder);
                 }
                 break;
             case 'USER_LIST_UPDATE':
diff --git a/WebApp/client/public/onebyone/store.js b/WebApp/client/public/onebyone/store.js
index 8aabe88..b84dd3b 100644
--- a/WebApp/client/public/onebyone/store.js
+++ b/WebApp/client/public/onebyone/store.js
@@ -559,19 +559,43 @@ class CallStateManager {
             } else if (data.type === 'media-state-changed') {
                 // 处理媒体状态变化
                 console.log('收到媒体状态变化:', data.data, 'from participant:', data.participantId);
-                // Host端：同步更新participants中对应participant的mediaState
-                if (data.participantId && this.role === 'host' && this.state.participants[data.participantId]) {
-                    this.state.participants[data.participantId].mediaState = {
-                        ...this.state.participants[data.participantId].mediaState,
-                        ...data.data
-                    };
+                if (this.role === 'host') {
+                    // Host端：按participantId同步更新participants中对应participant的mediaState
+                    if (data.participantId && this.state.participants[data.participantId]) {
+                        this.state.participants[data.participantId].mediaState = {
+                            ...this.state.participants[data.participantId].mediaState,
+                            ...data.data
+                        };
+                    }
+                    // 更新远端媒体状态
+                    this.updateRemoteMedia(data.data, data.participantId);
+                    // 通知UI更新participants
+                    this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+                    // Host端广播最新成员列表（含媒体状态）给所有Participant
+                    this.broadcastParticipantsList();
+                } else {
+                    // Participant端：根据消息来源更新对应条目
+                    if (data.participantId && this.state.participants[data.participantId]) {
+                        // 来自其他Participant的媒体状态变化：仅更新participants中对应条目
+                        // 不调用updateRemoteMedia，因为Participant端没有其他Participant的视频流
+                        this.state.participants[data.participantId].mediaState = {
+                            ...this.state.participants[data.participantId].mediaState,
+                            ...data.data
+                        };
+                        this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+                    } else if (!data.participantId) {
+                        // 来自Host的媒体状态变化（无participantId）：
+                        // 更新participants中Host条目 + 更新remoteUser（Host的视频流是本端远端画面）
+                        if (this.state.participants['host']) {
+                            this.state.participants['host'].mediaState = {
+                                ...this.state.participants['host'].mediaState,
+                                ...data.data
+                            };
+                        }
+                        this.updateRemoteMedia(data.data, data.participantId);
+                        this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+                    }
                 }
-                // 更新远端媒体状态（兼容Participant端）
-                this.updateRemoteMedia(data.data, data.participantId);
-                // 通知UI更新participants
-                this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
-                // Host端广播最新成员列表（含媒体状态）给所有Participant
-                this.broadcastParticipantsList();
             } else if (data.type === 'user-info') {
                 // 处理用户信息更新
                 console.log('收到用户信息:', data.data, 'from participant:', data.participantId);