成员列表

2026-04-25 17:43:53 +08:00
parent b92f433613
commit 261acf8bc1
3 changed files with 142 additions and 23 deletions
--- a/WebApp/client/public/onebyone/renderer.js
+++ b/WebApp/client/public/onebyone/renderer.js
@@ -663,12 +663,13 @@ class UIRenderer {

        const participantsMap = participants || {};
        const participantCount = Object.keys(participantsMap).length;
-        // Host端使用participants计数，Participant端使用remoteUser状态
-        const isHost = participantCount > 0;
-        const userCount = isHost ? (1 + participantCount) : (remoteUser.status !== 'offline' ? 2 : 1);
+
+        // 通话成员总数 = 本地用户(1) + participants中的条目数
+        // Host端participants只含其他participant；Participant端participants含host+其他participant
+        const userCount = 1 + participantCount;

        // 更新通话成员总数显示
-        const userCountElement = this.elements.userList.closest('div').querySelector('h3.text-sm.font-medium.text-gray-400');
+        const userCountElement = this.elements.userCountDisplay;
        if (userCountElement) {
            userCountElement.textContent = `通话成员 (${userCount})`;
        }
@@ -676,20 +677,27 @@ class UIRenderer {
        // 清空列表并重新渲染
        this.elements.userList.innerHTML = '';

-        // 1. 渲染本地用户（主持人）
+        // 1. 渲染本地用户
+        // 判断当前用户角色：Host端localUser是主持人；Participant端localUser是参与者
        this.elements.userList.appendChild(this.createLocalUserEntry(localUser));

-        // 2. Host端：渲染所有participants；Participant端：渲染单一remoteUser
-        if (isHost) {
+        // 2. 渲染远端成员
+        if (participantCount > 0) {
+            // 有participants数据（Host端或Participant端收到participants-sync后）
            for (const [pid, p] of Object.entries(participantsMap)) {
-                this.elements.userList.appendChild(this.createParticipantEntry(pid, p));
+                if (p.role === 'host') {
+                    this.elements.userList.appendChild(this.createHostEntry(pid, p));
+                } else {
+                    this.elements.userList.appendChild(this.createParticipantEntry(pid, p));
+                }
            }
        } else if (remoteUser.status !== 'offline') {
+            // 兼容：Participant端未收到participants-sync时，使用remoteUser显示Host
            this.elements.userList.appendChild(this.createRemoteUserEntry(remoteUser));
        }
    }

-    // 创建本地用户条目（主持人）
+    // 创建本地用户条目
    createLocalUserEntry(localUser) {
        const div = document.createElement('div');
        div.className = 'flex items-center gap-3 p-2 rounded-lg hover:bg-white/5';
@@ -701,12 +709,18 @@ class UIRenderer {
            ? '<i class="fas fa-microphone-slash text-gray-500 text-xs"></i>'
            : '';

+        // 根据是否为Host显示不同角色标签
+        const isHost = localUser.isHost;
+        const roleTag = isHost
+            ? '<span class="text-xs bg-indigo-500 px-1.5 rounded ml-1">主持人</span>'
+            : '<span class="text-xs bg-purple-500 px-1.5 rounded ml-1">参与者</span>';
+
        div.innerHTML = `
            <img src="${localUser.avatar}" class="w-10 h-10 rounded-full object-cover">
            <div class="flex-1">
                <div class="text-sm font-medium">
                    ${localUser.name}
-                    <span class="text-xs bg-indigo-500 px-1.5 rounded ml-1">主持人</span>
+                    ${roleTag}
                </div>
                <div class="${mediaStatusClass}" data-field="localUser.mediaStatus">${mediaStatusText}</div>
            </div>
@@ -715,7 +729,36 @@ class UIRenderer {
        return div;
    }

-    // 创建远程用户条目（Participant端显示Host用）
+    // 创建Host条目（Participant端显示Host用）
+    createHostEntry(hostId, hostInfo) {
+        const div = document.createElement('div');
+        div.className = 'flex items-center gap-3 p-2 rounded-lg bg-white/5';
+        div.dataset.userId = `host_${hostId}`;
+
+        const mediaStatusText = !hostInfo.mediaState.audio ? '静音中' : (!hostInfo.mediaState.video ? '视频关闭' : '在线');
+        const mediaStatusClass = (!hostInfo.mediaState.audio || !hostInfo.mediaState.video) ? 'text-xs text-gray-500' : 'text-xs text-green-400';
+        const muteIconHtml = !hostInfo.mediaState.audio
+            ? '<i class="fas fa-microphone-slash text-gray-500 text-xs"></i>'
+            : '';
+
+        div.innerHTML = `
+            <div class="relative">
+                <img src="${hostInfo.avatar}" class="w-10 h-10 rounded-full object-cover">
+                <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900"></div>
+            </div>
+            <div class="flex-1">
+                <div class="text-sm font-medium">
+                    ${hostInfo.name}
+                    <span class="text-xs bg-indigo-500 px-1.5 rounded ml-1">主持人</span>
+                </div>
+                <div class="${mediaStatusClass}">${mediaStatusText}</div>
+            </div>
+            ${muteIconHtml}
+        `;
+        return div;
+    }
+
+    // 创建远程用户条目（兼容回退：Participant端未收到participants-sync时显示Host）
    createRemoteUserEntry(remoteUser) {
        const div = document.createElement('div');
        div.className = 'flex items-center gap-3 p-2 rounded-lg bg-white/5';
@@ -726,9 +769,6 @@ class UIRenderer {
        const muteIconHtml = !remoteUser.mediaState.audio
            ? '<i class="fas fa-microphone-slash text-gray-500 text-xs"></i>'
            : '';
-        const speakingHtml = (remoteUser.mediaState.isSpeaking && remoteUser.mediaState.audio)
-            ? '<div class="audio-wave w-6"><span></span><span></span><span></span><span></span><span></span></div>'
-            : '';

        div.innerHTML = `
            <div class="relative">
@@ -736,13 +776,13 @@ class UIRenderer {
                <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900"></div>
            </div>
            <div class="flex-1">
-                <div class="text-sm font-medium">${remoteUser.name}</div>
+                <div class="text-sm font-medium">
+                    ${remoteUser.name}
+                    <span class="text-xs bg-indigo-500 px-1.5 rounded ml-1">主持人</span>
+                </div>
                <div class="${mediaStatusClass}">${mediaStatusText}</div>
            </div>
-            <div class="flex items-center gap-2">
-                ${muteIconHtml}
-                ${speakingHtml}
-            </div>
+            ${muteIconHtml}
        `;
        return div;
    }
--- a/WebApp/client/public/onebyone/store.js
+++ b/WebApp/client/public/onebyone/store.js
@@ -341,7 +341,13 @@ class CallStateManager {
            // 保存角色信息（host/participant）
            if (data && data.role) {
                this.role = data.role;
-                console.log(`Connected as ${this.role}`);
+                // 更新localUser的isHost标志
+                this.state.session.localUser.isHost = (this.role === 'host');
+                // 保存自身的participantId，用于从participants-sync中过滤自身
+                if (data.participantId) {
+                    this.selfParticipantId = data.participantId;
+                }
+                console.log(`Connected as ${this.role}, participantId: ${this.selfParticipantId}`);
            }
            // 连接建立后，更新状态为ongoing
            this.state.session.status = 'ongoing';
@@ -401,6 +407,7 @@ class CallStateManager {
                };
            }
            this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+            this.broadcastParticipantsList();
        };

        // participant离开回调（host收到，房间仍然存在）
@@ -423,6 +430,7 @@ class CallStateManager {
            // 通知UI更新，用participantId作为connectionId传给renderer
            this.notify({ type: 'PARTICIPANT_LEFT', connectionId: participantId });
            this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+            this.broadcastParticipantsList();
        };

        // 轨道事件回调
@@ -468,6 +476,7 @@ class CallStateManager {
                        status: 'online'
                    };
                    this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+                    this.broadcastParticipantsList();
                }

                // 通知UI远程流已更新
@@ -523,10 +532,21 @@ class CallStateManager {
                        this.state.participants[data.participantId].avatar = data.message.senderAvatar;
                    }
                    this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+                    this.broadcastParticipantsList();
                }
-                // Participant端：从消息中提取Host用户信息并更新remoteUser
+                // Participant端：根据消息来源更新对应用户信息
                if (!this.role || this.role !== 'host') {
-                    if (data.message && data.message.senderId !== this.state.session.localUser.id) {
+                    if (data.participantId && this.state.participants[data.participantId]) {
+                        // 来自其他Participant的消息：更新participants中对应条目
+                        if (data.message.senderName) {
+                            this.state.participants[data.participantId].name = data.message.senderName;
+                        }
+                        if (data.message.senderAvatar) {
+                            this.state.participants[data.participantId].avatar = data.message.senderAvatar;
+                        }
+                        this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+                    } else if (data.message && data.message.senderId !== this.state.session.localUser.id) {
+                        // 来自Host的消息：更新remoteUser
                        this.state.session.remoteUser = {
                            ...this.state.session.remoteUser,
                            id: data.message.senderId,
@@ -550,6 +570,8 @@ class CallStateManager {
                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);
@@ -569,6 +591,7 @@ class CallStateManager {
                        this.state.participants[data.participantId].name = data.data.name || '参与者';
                        this.state.participants[data.participantId].avatar = data.data.avatar || '/images/p2.png';
                        this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+                        this.broadcastParticipantsList();
                    } else {
                        // Participant端：更新单一remoteUser（Host的信息）
                        this.state.session.remoteUser = {
@@ -580,6 +603,20 @@ class CallStateManager {
                        this.notify({ type: 'REMOTE_MEDIA_CHANGE', mediaState: this.state.session.remoteUser.mediaState });
                    }
                }
+            } else if (data.type === 'participants-sync') {
+                // Participant端：接收Host广播的完整成员列表
+                if (this.role !== 'host' && data.data) {
+                    console.log('收到成员列表同步:', data.data);
+                    // 过滤掉自身条目，避免在列表中重复显示（自身已作为localUser显示）
+                    const filtered = {};
+                    for (const [pid, pInfo] of Object.entries(data.data)) {
+                        if (pid !== this.selfParticipantId) {
+                            filtered[pid] = pInfo;
+                        }
+                    }
+                    this.state.participants = filtered;
+                    this.notify({ type: 'PARTICIPANTS_UPDATE', participants: this.state.participants });
+                }
            }

        };
@@ -640,6 +677,7 @@ class CallStateManager {
        this.updateRemoteUserNetworkQuality('no_signal');
        // 清理participants
        this.state.participants = {};
+        this.selfParticipantId = null;
        this.connectionId = null;
        this.role = null;
        this.state.session.status = 'ended';
@@ -660,6 +698,41 @@ class CallStateManager {
        }
    }

+    /**
+     * Host端广播完整成员列表给所有Participant
+     * 包含Host自身信息 + 所有Participant信息
+     * Participant收到后可展示完整通话成员列表
+     */
+    broadcastParticipantsList() {
+        if (this.role !== 'host' || !this.renderstreaming) return;
+
+        const memberList = {};
+
+        // 添加Host自身信息
+        memberList['host'] = {
+            id: this.state.session.localUser.id,
+            name: this.state.session.localUser.name,
+            avatar: this.state.session.localUser.avatar,
+            mediaState: { ...this.state.session.localUser.mediaState },
+            status: 'online',
+            role: 'host'
+        };
+
+        // 添加所有Participant信息
+        for (const [pid, pInfo] of Object.entries(this.state.participants)) {
+            memberList[pid] = {
+                ...pInfo,
+                role: 'participant'
+            };
+        }
+
+        this.renderstreaming.sendMessage({
+            type: 'participants-sync',
+            data: memberList
+        });
+        console.log('Broadcast participants list:', Object.keys(memberList));
+    }
+
    /**
     * 设置编解码器偏好
     */