LaniakeaSupercluster/webrtc
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

传递正确的指针给元素, 以便其能够调取正确的头像

Browse Source
This commit is contained in:
觉 2023-10-07 23:54:41 +08:00
parent 022f167da6
commit 06e3d31883
1 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
public/client.js
View File

@ -127,12 +127,13 @@ export default class ClientList {
await webrtc.setLocalDescription(offer)
this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
websocket.send(JSON.stringify({ type: 'offer', id: data.id, offer }))
this.push(data)
// 传递正确的指针给元素, 以便其能够调取正确的头像
this.push(this.clientlist.find(client => client.id === data.id))
return
}
if (data.type === 'push') {
console.debug('新上线客户端:', data)
return this.push(data)
return
}
if (data.type === 'pull') {
console.debug('移除客户端:', data)
@ -142,6 +143,8 @@ export default class ClientList {
console.debug('收到对方 offer', data)
const { webrtc, channels } = await webrtc_init()
this.clientlist.push({ id: data.id, name: data.name, webrtc, channels })
// 传递正确的指针给元素, 以便其能够调取正确的头像
this.push(this.clientlist.find(client => client.id === data.id))
console.debug('发送给对方 answer')
await webrtc.setRemoteDescription(data.offer)
const answer = await webrtc.createAnswer()
@ -182,7 +185,10 @@ export default class ClientList {
setAvatar(user) {
console.info('更新avatar', user)
document.getElementById(user.id).querySelector('img').src = user.avatar
this.clientlist.find(client => client.id === user.id).avatar = user.avatar
const u = this.clientlist.find(client => client.id === user.id)
u.avatar = user.avatar
console.log(u, user)
//.avatar = user.avatar
}
exit(item) {
const client = this.clientlist.find(client => client.id === item.id)
@ -195,7 +201,7 @@ export default class ClientList {
this.channels[name] = option
}
// 新上线客户端
push(item, self=false) {
push(item, self = false) {
this.element.appendChild(ListItem({
id: item.id,
style: {
@ -207,10 +213,24 @@ export default class ClientList {
fontSize: '12px',
borderRadius: '8px',
},
children: [
Avatar({
src: item.avatar || '/favicon.ico',
style: {
width: '32px',
height: '32px',
borderRadius: '50%',
cursor: 'pointer',
},
}),
Span({
textContent: item.name ?? item.id
})
],
onclick: event => document.body.appendChild(Dialog({
children: [
Avatar({
src: item.avatar ?? '/favicon.ico',
src: item.avatar || '/favicon.ico',
style: {
width: '240px',
height: '240px',
@ -220,6 +240,7 @@ export default class ClientList {
cursor: 'pointer',
},
onclick: event => {
console.log('点击头像', item)
if (!self) return console.log('只能修改自己的头像')
const input = document.createElement('input')
input.type = 'file'
@ -258,21 +279,7 @@ export default class ClientList {
}
})
]
})),
children: [
Avatar({
src: item.avatar ?? '/favicon.ico',
style: {
width: '32px',
height: '32px',
borderRadius: '50%',
cursor: 'pointer',
},
}),
Span({
textContent: item.name ?? item.id
})
]
}))
}))
}
// 添加回调函数