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-05 16:39:19 +08:00
parent 7874caa421
commit 703da374b4
2 changed files with 70 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -489,16 +489,79 @@ class UIRenderer {
// 渲染网络状态
renderNetworkStatus(quality) {
if (this.elements.networkStatus && this.elements.networkStatusText) {
const showNetworkStatus = quality !== 'excellent';
toggleElement(this.elements.networkStatus, showNetworkStatus);
// 始终显示网络状态
toggleElement(this.elements.networkStatus, true);
if (showNetworkStatus) {
this.elements.networkStatusText.textContent = this.getNetworkQualityText(quality);
// 根据网络质量设置不同的图标和颜色
const networkStatus = this.elements.networkStatus;
const networkStatusText = this.elements.networkStatusText;
// 清除之前的图标
const existingIcon = networkStatus.querySelector('i');
if (existingIcon) {
existingIcon.remove();
}
// 创建新的图标元素
const icon = document.createElement('i');
// 根据网络质量设置图标和样式
switch (quality) {
case 'excellent':
icon.className = 'fas fa-check-circle text-green-400';
networkStatusText.textContent = this.getNetworkQualityText(quality);
networkStatusText.className = 'text-green-400';
break;
case 'good':
icon.className = 'fas fa-signal text-blue-400';
networkStatusText.textContent = this.getNetworkQualityText(quality);
networkStatusText.className = 'text-blue-400';
break;
case 'fair':
icon.className = 'fas fa-exclamation-circle text-yellow-500';
networkStatusText.textContent = this.getNetworkQualityText(quality);
networkStatusText.className = 'text-yellow-500';
break;
case 'poor':
icon.className = 'fas fa-exclamation-triangle text-red-500';
networkStatusText.textContent = this.getNetworkQualityText(quality);
networkStatusText.className = 'text-red-500';
break;
default:
icon.className = 'fas fa-question-circle text-gray-400';
networkStatusText.textContent = '未知';
networkStatusText.className = 'text-gray-400';
}
// 添加图标到网络状态元素
networkStatus.insertBefore(icon, networkStatusText);
}
if (this.elements.connectionQuality) {
this.elements.connectionQuality.textContent = `连接质量: ${this.getNetworkQualityText(quality)}`;
const qualityText = this.getNetworkQualityText(quality);
let statusClass = '';
// 根据网络质量设置文本颜色
switch (quality) {
case 'excellent':
statusClass = 'text-green-400';
break;
case 'good':
statusClass = 'text-blue-400';
break;
case 'fair':
statusClass = 'text-yellow-500';
break;
case 'poor':
statusClass = 'text-red-500';
break;
default:
statusClass = 'text-gray-400';
}
// 更新连接质量文本和样式
this.elements.connectionQuality.textContent = `连接质量: ${qualityText}`;
this.elements.connectionQuality.className = `text-xs ${statusClass}`;
}
}

4
WebApp/client/public/onebyone/store.js
View File

@@ -386,8 +386,8 @@ class CallStateManager {
const qualities = ['good', 'fair', 'excellent', 'poor'];
setInterval(() => {
if (Math.random() > 0.8) {
const networkQuality = qualities[Math.floor(Math.random() * qualities.length)];
this.state.session.remoteUser.networkQuality = networkQuality;
const quality = qualities[Math.floor(Math.random() * qualities.length)];
this.state.session.remoteUser.networkQuality = quality;
this.notify({ type: 'NETWORK_CHANGE', quality });
}
}, 5000);