From a3c0c5bfe1da9ba0dffc615db8dca68f79ee26bc Mon Sep 17 00:00:00 2001
From: OFF0 <offbyn@protonmail.com>
Date: Tue, 13 Dec 2022 20:48:44 +0100
Subject: [PATCH] profile: update profile images

Textnotes often miss profile pictures of authors because they
are rendered when received even without knowing the pic yet.

Update profile pic of already rendered textnotes with the picture
of the first kind 0 event that has a valid picture, should now
render missing profile pics.
---
 src/main.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/main.js b/src/main.js
index 5d5baf9..a751453 100644
--- a/src/main.js
+++ b/src/main.js
@@ -244,7 +244,7 @@ function createTextNote(evt, relay) {
       ${evt.content}`
     }, [
       elem('small', {}, [
-        elem('strong', {className: name ? 'mbox-kind0-name' : 'mbox-username'}, name || userName),
+        elem('strong', {className: name ? 'mbox-kind0-name' : 'mbox-username', data: {pubkey: evt.pubkey.slice(0, 12)}}, name || userName),
         ' ',
         elem('time', {dateTime: time.toISOString()}, formatTime(time)),
       ]),
@@ -400,23 +400,31 @@ function handleMetadata(evt, relay) {
 }
 
 function setMetadata(evt, relay, content) {
-  const user = userList.find(u => u.pubkey === evt.pubkey);
+  let user = userList.find(u => u.pubkey === evt.pubkey);
   const picture = getNoxyUrl('data', content.picture, evt.id, relay).href;
   if (!user) {
-    userList.push({
+    user = {
       metadata: {[relay]: content},
       ...(content.picture && {picture}),
       pubkey: evt.pubkey,
-    });
+    };
+    userList.push(user);
   } else {
     user.metadata[relay] = {
       ...user.metadata[relay],
       timestamp: evt.created_at,
       ...content,
     };
+    // use only the first profile pic (for now), different pics on each releay are not supported yet
     if (!user.picture) {
       user.picture = picture;
-    } // no support (yet) for other picture from same pubkey on different relays
+    }
+  }
+  // update profile images
+  if (user.picture) {
+    feedContainer
+      .querySelectorAll(`canvas[data-pubkey="${evt.pubkey.slice(0, 12)}"]`)
+      .forEach(canvas => (canvas.parentNode.replaceChild(elem('img', {src: user.picture}), canvas)));
   }
   // if (tempContactList[relay]) {
   //   const updates = tempContactList[relay].filter(update => update.pubkey === evt.pubkey);
@@ -443,7 +451,7 @@ const getHost = (url) => {
 }
 
 const elemCanvas = (text) => {
-  const canvas = elem('canvas', {height: 80, width: 80});
+  const canvas = elem('canvas', {height: 80, width: 80, data: {pubkey: text.slice(0, 12)}});
   const context = canvas.getContext('2d');
   const color = `#${text.slice(0, 6)}`;
   context.fillStyle = color;