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