From 06e3d3188383ef4c077b4b4c0165a39b5e6c7d9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A7=89?= <huan0016@gmail.com>
Date: Sat, 7 Oct 2023 23:54:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=A0=E9=80=92=E6=AD=A3=E7=A1=AE=E7=9A=84?=
 =?UTF-8?q?=E6=8C=87=E9=92=88=E7=BB=99=E5=85=83=E7=B4=A0,=20=E4=BB=A5?=
 =?UTF-8?q?=E4=BE=BF=E5=85=B6=E8=83=BD=E5=A4=9F=E8=B0=83=E5=8F=96=E6=AD=A3?=
 =?UTF-8?q?=E7=A1=AE=E7=9A=84=E5=A4=B4=E5=83=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/client.js | 47 +++++++++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/public/client.js b/public/client.js
index d6f0e56..20c9ff7 100644
--- a/public/client.js
+++ b/public/client.js
@@ -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
-                })
-            ]
+            }))
         }))
     }
     // 添加回调函数