通话计数和显示隐藏修改完成
This commit is contained in:
@@ -31,6 +31,7 @@ class UIRenderer {
|
||||
remoteStatus: document.getElementById('remoteStatus'),
|
||||
remoteSpeakingIndicator: document.getElementById('remoteSpeakingIndicator'),
|
||||
remoteAudioWave: document.getElementById('remoteAudioWave'),
|
||||
remoteInfoOverlay: document.querySelector('.absolute.top-6.left-6.glass'),
|
||||
networkStatus: document.getElementById('networkStatus'),
|
||||
networkStatusText: document.getElementById('networkStatusText'),
|
||||
connectingOverlay: document.getElementById('connectingOverlay'),
|
||||
@@ -47,6 +48,7 @@ class UIRenderer {
|
||||
userList: document.getElementById('userList'),
|
||||
localMediaStatus: document.getElementById('localMediaStatus'),
|
||||
localMuteIcon: document.querySelector('[data-field="localUser.muteIcon"]'),
|
||||
userCountDisplay: document.getElementById('userCountDisplay'),
|
||||
// 控制按钮
|
||||
micBtn: document.getElementById('micBtn'),
|
||||
videoBtn: document.getElementById('videoBtn'),
|
||||
@@ -174,13 +176,26 @@ class UIRenderer {
|
||||
// 渲染头部
|
||||
renderHeader(session) {
|
||||
if (this.elements.headerTitle) {
|
||||
this.elements.headerTitle.textContent = `与 ${session.remoteUser.name} 的通话`;
|
||||
// 未连接时不显示红框部分
|
||||
if (session.status === 'idle' || session.status === 'connecting') {
|
||||
this.elements.headerTitle.textContent = '通话';
|
||||
} else {
|
||||
this.elements.headerTitle.textContent = `与 ${session.remoteUser.name} 的通话`;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.elements.encryptionBadge) {
|
||||
toggleElement(this.elements.encryptionBadge, session.isEncrypted);
|
||||
}
|
||||
|
||||
// 始终显示网络状态指示器和质量
|
||||
if (this.elements.remoteNetworkIndicator) {
|
||||
this.elements.remoteNetworkIndicator.classList.remove('hidden');
|
||||
}
|
||||
if (this.elements.remoteNetworkQuality) {
|
||||
this.elements.remoteNetworkQuality.classList.remove('hidden');
|
||||
}
|
||||
|
||||
this.renderCallDuration(session.duration);
|
||||
}
|
||||
|
||||
@@ -193,16 +208,34 @@ class UIRenderer {
|
||||
|
||||
// 渲染远端视频
|
||||
renderRemoteVideo(remoteUser) {
|
||||
if (this.elements.remoteName) {
|
||||
this.elements.remoteName.textContent = remoteUser.name;
|
||||
}
|
||||
// 找到远端信息覆盖层元素
|
||||
const remoteInfoOverlay = this.elements.remoteName?.closest('.absolute.top-6.left-6.glass');
|
||||
|
||||
if (this.elements.remoteAvatar) {
|
||||
this.elements.remoteAvatar.src = remoteUser.avatar;
|
||||
}
|
||||
// 未连接时不显示红框部分
|
||||
if (remoteUser.status === 'offline') {
|
||||
// 隐藏整个远端信息覆盖层
|
||||
if (remoteInfoOverlay) {
|
||||
remoteInfoOverlay.classList.add('hidden');
|
||||
}
|
||||
} else {
|
||||
// 显示远端信息覆盖层
|
||||
if (remoteInfoOverlay) {
|
||||
remoteInfoOverlay.classList.remove('hidden');
|
||||
}
|
||||
|
||||
if (this.elements.remoteStatus) {
|
||||
this.elements.remoteStatus.textContent = this.getStatusText(remoteUser.status);
|
||||
// 连接后更新头像和名称数据
|
||||
if (this.elements.remoteName) {
|
||||
this.elements.remoteName.textContent = remoteUser.name;
|
||||
}
|
||||
|
||||
if (this.elements.remoteAvatar) {
|
||||
this.elements.remoteAvatar.src = remoteUser.avatar;
|
||||
this.elements.remoteAvatar.classList.remove('hidden');
|
||||
}
|
||||
|
||||
if (this.elements.remoteStatus) {
|
||||
this.elements.remoteStatus.textContent = this.getStatusText(remoteUser.status);
|
||||
}
|
||||
}
|
||||
|
||||
// 当远程视频关闭时显示占位符
|
||||
@@ -444,6 +477,17 @@ class UIRenderer {
|
||||
renderUserList(localUser, remoteUser) {
|
||||
if (!this.elements.userList) return;
|
||||
|
||||
// 计算通话成员总数
|
||||
let userCount = 1; // 至少有本地用户
|
||||
if (remoteUser.status === 'online' || remoteUser.status === 'connecting') {
|
||||
userCount++; // 只有当远程用户在线或连接中时，增加计数
|
||||
}
|
||||
|
||||
// 更新通话成员总数显示
|
||||
if (this.elements.userCountDisplay) {
|
||||
this.elements.userCountDisplay.textContent = `通话成员 (${userCount})`;
|
||||
}
|
||||
|
||||
// 渲染本地用户
|
||||
const localUserElement = this.elements.userList.querySelector('[data-user-id="local"]');
|
||||
if (localUserElement) {
|
||||
@@ -486,63 +530,71 @@ class UIRenderer {
|
||||
// 渲染远程用户
|
||||
const remoteUserElement = this.elements.userList.querySelector('[data-user-id="remote"]');
|
||||
if (remoteUserElement) {
|
||||
// 渲染远程用户头像
|
||||
const remoteAvatar = remoteUserElement.querySelector('img[data-field="remoteUser.avatar"]');
|
||||
if (remoteAvatar) {
|
||||
remoteAvatar.src = remoteUser.avatar;
|
||||
}
|
||||
// 渲染远程用户名字
|
||||
const remoteName = remoteUserElement.querySelector('[data-field="remoteUser.name"]');
|
||||
if (remoteName) {
|
||||
remoteName.textContent = remoteUser.name;
|
||||
}
|
||||
// 渲染远程用户媒体状态
|
||||
const remoteMediaStatus = remoteUserElement.querySelector('[data-field="remoteUser.mediaStatus"]');
|
||||
if (remoteMediaStatus) {
|
||||
if (!remoteUser.mediaState.audio) {
|
||||
remoteMediaStatus.textContent = '静音中';
|
||||
remoteMediaStatus.className = 'text-xs text-gray-500';
|
||||
} else if (!remoteUser.mediaState.video) {
|
||||
remoteMediaStatus.textContent = '视频关闭';
|
||||
remoteMediaStatus.className = 'text-xs text-gray-500';
|
||||
} else {
|
||||
remoteMediaStatus.textContent = '在线';
|
||||
remoteMediaStatus.className = 'text-xs text-green-400';
|
||||
// 未连接时不显示远程用户信息
|
||||
if (remoteUser.status === 'offline') {
|
||||
remoteUserElement.classList.add('hidden');
|
||||
} else {
|
||||
// 连接后显示远程用户信息并更新数据
|
||||
remoteUserElement.classList.remove('hidden');
|
||||
|
||||
// 渲染远程用户头像
|
||||
const remoteAvatar = remoteUserElement.querySelector('img[data-field="remoteUser.avatar"]');
|
||||
if (remoteAvatar) {
|
||||
remoteAvatar.src = remoteUser.avatar;
|
||||
}
|
||||
}
|
||||
// 渲染远程用户在线状态指示器
|
||||
const remoteStatusIndicator = remoteUserElement.querySelector('.absolute.-bottom-1.-right-1.w-3.h-3');
|
||||
if (remoteStatusIndicator) {
|
||||
if (remoteUser.status === 'online') {
|
||||
// 根据网络质量设置状态指示器颜色
|
||||
if (remoteUser.networkQuality === 'no_signal') {
|
||||
remoteStatusIndicator.classList.remove('hidden');
|
||||
remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-gray-500 rounded-full border-2 border-slate-900';
|
||||
// 渲染远程用户名字
|
||||
const remoteName = remoteUserElement.querySelector('[data-field="remoteUser.name"]');
|
||||
if (remoteName) {
|
||||
remoteName.textContent = remoteUser.name;
|
||||
}
|
||||
// 渲染远程用户媒体状态
|
||||
const remoteMediaStatus = remoteUserElement.querySelector('[data-field="remoteUser.mediaStatus"]');
|
||||
if (remoteMediaStatus) {
|
||||
if (!remoteUser.mediaState.audio) {
|
||||
remoteMediaStatus.textContent = '静音中';
|
||||
remoteMediaStatus.className = 'text-xs text-gray-500';
|
||||
} else if (!remoteUser.mediaState.video) {
|
||||
remoteMediaStatus.textContent = '视频关闭';
|
||||
remoteMediaStatus.className = 'text-xs text-gray-500';
|
||||
} else {
|
||||
remoteStatusIndicator.classList.remove('hidden');
|
||||
remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900';
|
||||
remoteMediaStatus.textContent = '在线';
|
||||
remoteMediaStatus.className = 'text-xs text-green-400';
|
||||
}
|
||||
} else {
|
||||
remoteStatusIndicator.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
// 渲染远程用户静音图标
|
||||
const remoteMuteIcon = remoteUserElement.querySelector('[data-field="remoteUser.muteIcon"]');
|
||||
if (remoteMuteIcon) {
|
||||
if (!remoteUser.mediaState.audio) {
|
||||
remoteMuteIcon.classList.remove('hidden');
|
||||
remoteMuteIcon.className = 'fas fa-microphone-slash text-gray-500 text-xs';
|
||||
} else {
|
||||
remoteMuteIcon.classList.add('hidden');
|
||||
// 渲染远程用户在线状态指示器
|
||||
const remoteStatusIndicator = remoteUserElement.querySelector('.absolute.-bottom-1.-right-1.w-3.h-3');
|
||||
if (remoteStatusIndicator) {
|
||||
if (remoteUser.status === 'online') {
|
||||
// 根据网络质量设置状态指示器颜色
|
||||
if (remoteUser.networkQuality === 'no_signal') {
|
||||
remoteStatusIndicator.classList.remove('hidden');
|
||||
remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-gray-500 rounded-full border-2 border-slate-900';
|
||||
} else {
|
||||
remoteStatusIndicator.classList.remove('hidden');
|
||||
remoteStatusIndicator.className = 'absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-slate-900';
|
||||
}
|
||||
} else {
|
||||
remoteStatusIndicator.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
// 渲染远程用户说话状态指示器
|
||||
const remoteSpeakingIndicator = remoteUserElement.querySelector('[data-field="remoteUser.speakingIndicator"]');
|
||||
if (remoteSpeakingIndicator) {
|
||||
if (remoteUser.mediaState.isSpeaking && remoteUser.mediaState.audio) {
|
||||
remoteSpeakingIndicator.classList.remove('hidden');
|
||||
} else {
|
||||
remoteSpeakingIndicator.classList.add('hidden');
|
||||
// 渲染远程用户静音图标
|
||||
const remoteMuteIcon = remoteUserElement.querySelector('[data-field="remoteUser.muteIcon"]');
|
||||
if (remoteMuteIcon) {
|
||||
if (!remoteUser.mediaState.audio) {
|
||||
remoteMuteIcon.classList.remove('hidden');
|
||||
remoteMuteIcon.className = 'fas fa-microphone-slash text-gray-500 text-xs';
|
||||
} else {
|
||||
remoteMuteIcon.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
// 渲染远程用户说话状态指示器
|
||||
const remoteSpeakingIndicator = remoteUserElement.querySelector('[data-field="remoteUser.speakingIndicator"]');
|
||||
if (remoteSpeakingIndicator) {
|
||||
if (remoteUser.mediaState.isSpeaking && remoteUser.mediaState.audio) {
|
||||
remoteSpeakingIndicator.classList.remove('hidden');
|
||||
} else {
|
||||
remoteSpeakingIndicator.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -786,6 +838,9 @@ class UIRenderer {
|
||||
|
||||
// 同步更新头部网络指示器
|
||||
this.updateHeaderNetworkIndicator(quality);
|
||||
|
||||
// 同步更新头部网络质量文本
|
||||
this.renderHeaderNetworkStatus(quality);
|
||||
}
|
||||
|
||||
// 更新头部网络指示器
|
||||
|
||||
Reference in New Issue
Block a user