视频没有占位符修复

client/public/onebyone/index.html

@@ -169,7 +169,7 @@
 
                 <!-- 远端未连接时的占位背景 -->
                 <div id="remoteVideoPlaceholder"
-                    class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900/80 to-purple-900/80">
+                    class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-indigo-900 to-purple-900 z-10">
                     <div class="text-center">
                         <div
                             class="w-32 h-32 rounded-full bg-indigo-700/50 flex items-center justify-center mx-auto mb-4">

client/public/onebyone/renderer.js

@@ -290,6 +290,15 @@ class UIRenderer {
             const shouldShowPlaceholder = !remoteUser.mediaState.video;
             toggleElement(this.elements.remoteVideoPlaceholder, shouldShowPlaceholder);
 
+            // 当远程视频关闭时，隐藏视频元素本身，避免冻结画面透过占位符
+            if (this.elements.remoteVideo) {
+                if (shouldShowPlaceholder) {
+                    this.elements.remoteVideo.style.opacity = '0';
+                } else {
+                    this.elements.remoteVideo.style.opacity = '1';
+                }
+            }
+
             // 更新占位符文本内容
             if (shouldShowPlaceholder) {
                 const placeholderContent = this.elements.remoteVideoPlaceholder.querySelector('.text-center');

client/public/onebyone/store.js

@@ -653,7 +653,11 @@ class CallStateManager {
                     this.broadcastParticipantsList();
                 } else {
                     // Participant端：根据消息来源更新对应条目
-                    if (data.participantId && this.state.participants[data.participantId]) {
+                    // Host的participantId在participants-sync中也会同步，所以不能仅靠participants中有无该key判断
+                    // 自身发出的消息回声（participantId === selfParticipantId）可以忽略
+                    // 来自其他Participant：participantId存在且在participants中，且不是自身
+                    // 来自Host：participantId存在但不是自身（Host不在selfParticipantId中）
+                    if (data.participantId && data.participantId !== this.selfParticipantId && this.state.participants[data.participantId]) {
                         // 来自其他Participant的媒体状态变化：仅更新participants中对应条目
                         // 不调用updateRemoteMedia，因为Participant端没有其他Participant的视频流
                         this.state.participants[data.participantId].mediaState = {
@@ -661,15 +665,12 @@ class CallStateManager {
                             ...data.data
                         };
                         this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
-                    } else if (!data.participantId) {
+                    } else if (data.participantId === this.selfParticipantId) {
-                        // 来自Host的媒体状态变化（无participantId）：
+                        // 自身消息回声，忽略
-                        // 更新participants中Host条目 + 更新remoteUser（Host的视频流是本端远端画面）
+                    } else {
-                        if (this.state.participants['host']) {
+                        // 来自Host的媒体状态变化（Host的participantId不匹配participants中任何条目，或无participantId）：
-                            this.state.participants['host'].mediaState = {
+                        // 更新remoteUser（Host的视频流是本端远端画面）
-                                ...this.state.participants['host'].mediaState,
+                        console.log('Received media-state-changed from Host, updating remoteUser:', data.data);
-                                ...data.data
-                            };
-                        }
                         this.updateRemoteMedia(data.data, data.participantId);
                         this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
                     }