root/webRtc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【m】状态图标修改

Browse Source
This commit is contained in:
zhangzheng
2026-03-12 15:33:34 +08:00
parent 80ff58ba15
commit 30f16592b4
3 changed files with 102 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
WebApp/client/public/onebyone/renderer.js
View File

@@ -143,6 +143,9 @@ class UIRenderer {
this.renderRemoteVideo(state.session.remoteUser);
this.renderUserList(state.session.localUser, state.session.remoteUser);
break;
case 'USER_LIST_UPDATE':
this.renderUserList(changes.localUser, changes.remoteUser);
break;
case 'NETWORK_CHANGE':
this.renderNetworkStatus(changes.quality);
break;
@@ -374,6 +377,30 @@ class UIRenderer {
if (localName) {
localName.textContent = localUser.name;
}
// 渲染本地用户媒体状态
const localMediaStatus = localUserElement.querySelector('[data-field="localUser.mediaStatus"]');
if (localMediaStatus) {
if (!localUser.mediaState.audio) {
localMediaStatus.textContent = '静音中';
localMediaStatus.className = 'text-xs text-gray-500';
} else if (!localUser.mediaState.video) {
localMediaStatus.textContent = '视频关闭';
localMediaStatus.className = 'text-xs text-gray-500';
} else {
localMediaStatus.textContent = '在线';
localMediaStatus.className = 'text-xs text-green-400';
}
}
// 渲染本地用户静音图标
const localMuteIcon = localUserElement.querySelector('[data-field="localUser.muteIcon"]');
if (localMuteIcon) {
if (!localUser.mediaState.audio) {
localMuteIcon.classList.remove('hidden');
localMuteIcon.className = 'fas fa-microphone-slash text-gray-500 text-xs';
} else {
localMuteIcon.classList.add('hidden');
}
}
}
// 渲染远程用户
@@ -389,6 +416,49 @@ class UIRenderer {
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';
}
}
// 渲染远程用户在线状态指示器
const remoteStatusIndicator = remoteUserElement.querySelector('.absolute.-bottom-1.-right-1.w-3.h-3');
if (remoteStatusIndicator) {
if (remoteUser.status === 'online') {
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 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');
}
}
}
}
// 在renderer.js中添加方法