【m】状态图标修改
This commit is contained in:
zhangzheng
@@ -288,14 +288,18 @@
|
||||
<div class="flex-1">
|
||||
<!-- [DATA_FIELD: remoteUser.name] -->
|
||||
<div class="text-sm font-medium" data-field="remoteUser.name">Sarah Chen</div>
|
||||
<!-- [DATA_FIELD: remoteUser.status] [TRANSFORM: status => displayText] -->
|
||||
<div class="text-xs text-green-400" data-field="remoteUser.statusText">在线</div>
|
||||
<!-- [DATA_FIELD: remoteUser.mediaState] [TRANSFORM: state => statusText] -->
|
||||
<div class="text-xs text-gray-500" data-field="remoteUser.mediaStatus">在线</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- [CONDITIONAL_RENDER: remoteUser.mediaState.audio === false] -->
|
||||
<i class="fas fa-microphone-slash text-gray-500 text-xs hidden" data-field="remoteUser.muteIcon"></i>
|
||||
<!-- [CONDITIONAL_RENDER: remoteUser.mediaState.isSpeaking === true] -->
|
||||
<div class="audio-wave w-6" data-field="remoteUser.speakingIndicator">
|
||||
<div class="audio-wave w-6 hidden" data-field="remoteUser.speakingIndicator">
|
||||
<span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本地用户项 -->
|
||||
<div class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5" data-user-id="local">
|
||||
|
||||
@@ -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中添加方法
|
||||
|
||||
@@ -233,23 +233,31 @@ class CallStateManager {
|
||||
|
||||
// 如果是关闭视频，释放摄像头资源
|
||||
if (mediaType === 'video' && !value && this.state.localStream) {
|
||||
this.state.session.localUser.mediaState.video = false;
|
||||
this.state.localStream.getTracks().forEach(track => {
|
||||
if (track.kind === 'video') {
|
||||
track.stop();
|
||||
}
|
||||
});
|
||||
// 发送媒体状态到服务器
|
||||
this.emitMediaStateChange();
|
||||
|
||||
}
|
||||
|
||||
// 如果是音频状态变化，控制本地音频轨道
|
||||
if (mediaType === 'audio' && this.state.localStream) {
|
||||
this.state.session.localUser.mediaState.audio = value;
|
||||
this.state.localStream.getTracks().forEach(track => {
|
||||
if (track.kind === 'audio') {
|
||||
track.enabled = value;
|
||||
}
|
||||
});
|
||||
// 发送媒体状态到服务器
|
||||
this.emitMediaStateChange();
|
||||
}
|
||||
|
||||
// 通知UI更新用户列表
|
||||
this.notify({ type: 'USER_LIST_UPDATE', localUser: this.state.session.localUser, remoteUser: this.state.session.remoteUser });
|
||||
|
||||
}
|
||||
|
||||
@@ -362,12 +370,17 @@ class CallStateManager {
|
||||
};
|
||||
// 初始化 RenderStreaming 实例后
|
||||
this.renderstreaming.onMessage = (data) => {
|
||||
console.log('收到聊天:', data);
|
||||
console.log('收到消息:', data);
|
||||
if (data.type === 'chat-message') {
|
||||
// 处理聊天
|
||||
// 添加到列表并更新UI
|
||||
|
||||
chatMessage.handleChatMessage(data.message);
|
||||
} else if (data.type === 'media-state-changed') {
|
||||
// 处理媒体状态变化
|
||||
console.log('收到媒体状态变化:', data.data);
|
||||
// 更新远程用户的媒体状态
|
||||
this.updateRemoteMedia(data.data);
|
||||
} else if (data.type === 'on-message') {
|
||||
}
|
||||
|
||||
@@ -450,23 +463,9 @@ class CallStateManager {
|
||||
...mediaState
|
||||
};
|
||||
this.notify({ type: 'REMOTE_MEDIA_CHANGE', mediaState });
|
||||
// 通知UI更新用户列表
|
||||
this.notify({ type: 'USER_LIST_UPDATE', localUser: this.state.session.localUser, remoteUser: this.state.session.remoteUser });
|
||||
}
|
||||
|
||||
// 添加消息
|
||||
addMessage(message) {
|
||||
chatMessage.addMessage(message);
|
||||
}
|
||||
|
||||
// 发送聊天消息
|
||||
sendChatMessage(message) {
|
||||
chatMessage.sendChatMessage(message, this.renderstreaming);
|
||||
}
|
||||
|
||||
// 切换侧边栏
|
||||
toggleSidebar() {
|
||||
chatMessage.toggleSidebar();
|
||||
}
|
||||
|
||||
// 结束通话
|
||||
endCall() {
|
||||
clearInterval(this.durationInterval);
|
||||
@@ -801,7 +800,13 @@ class CallStateManager {
|
||||
...this.state.session.localUser.mediaState
|
||||
};
|
||||
console.log('[WebSocket Emit] media-state-changed:', payload);
|
||||
// socket.emit('media-state-changed', payload);
|
||||
// 使用WebRTC发送媒体状态变化
|
||||
if (this.renderstreaming) {
|
||||
this.renderstreaming.sendMessage({
|
||||
type: 'media-state-changed',
|
||||
data: payload
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 显示统计信息
|
||||
|
||||
Reference in New Issue
Block a user