add profile images for users

Note: users can configure different images on each relay, added
userList with a metadata to keep a map of of different settings
of each releay.
pull/1/head
OFF0 2 years ago
parent 8d60bf871c
commit 7a705cd4ab
Signed by: offbyn
GPG Key ID: 94A2F643C51F37FA

@ -1,20 +1,29 @@
/* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */ /* https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Media_objects */
.mbox { .mbox {
display: flex;
align-items: flex-start; align-items: flex-start;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 1rem;
} }
.mbox .mbox-img { .mbox .mbox-img {
width: 64px; flex-basis: 64px;
height: 64px; height: 64px;
margin-right: 1rem; margin-right: 1rem;
width: 64px;
} }
.mbox .mbox-body { .mbox .mbox-header {
flex: 1; flex-basis: calc(100% - 64px - 1rem);
color: var(--fgcolor-accent); flex-grow: 0;
flex-shrink: 1;
margin-top: 0;
} }
.mbox-body > .header { .mbox .mbox-body {
margin-top: 0; color: var(--fgcolor-accent);
flex-basis: calc(100% - 64px - 1rem);
flex-grow: 0;
flex-shrink: 1;
} }

@ -4,15 +4,50 @@ import {elem} from './domutil.js';
const pool = relayPool(); const pool = relayPool();
pool.addRelay('wss://nostr.x1ddos.ch', {read: true, write: true}); pool.addRelay('wss://nostr.x1ddos.ch', {read: true, write: true});
pool.addRelay('wss://nostr.bitcoiner.social/', {read: true, write: true}); pool.addRelay('wss://nostr.bitcoiner.social/', {read: true, write: true});
pool.addRelay('wss://relay.nostr.info', {read: true, write: true});
const feedlist = document.querySelector('#feedlist'); const feedlist = document.querySelector('#feedlist');
const dateTime = new Intl.DateTimeFormat(navigator.language, {
dateStyle: 'full',
timeStyle: 'long',
});
const userList = [];
function onEvent(evt, relay) { function onEvent(evt, relay) {
console.log(`event from ${relay}`, evt); if (evt.kind === 0) {
console.log(`event.kind=0 from ${relay}`, evt);
try {
const content = JSON.parse(evt.content);
setMetadata(userList, relay, evt, content);
return;
} catch(err) {
console.error(err);
}
}
if (evt.kind !== 1) {
console.log(`add support for ${evt.kind}`, evt)
return;
}
const user = userList.find(user => user.pubkey === evt.pubkey);
const userImg = user?.metadata[relay]?.picture || 'bubble.svg';
const userName = user?.metadata[relay]?.name || evt.pubkey.slice(0, 8);
const userAbout = user?.metadata[relay]?.about || '';
const time = new Date(evt.created_at * 1000); const time = new Date(evt.created_at * 1000);
const text = `${evt.content} - ${time.toISOString()}`; // TODO: Intl.DateTimeFormat const img = elem('img', {
const img = elem('img', {className: 'mbox-img', src: 'bubble.svg'}, ''); className: 'mbox-img',
const body = elem('div', {className: 'mbox-body'}, [text]); src: userImg,
alt: `${userName}@${relay}`,
title: userAbout},
'');
const body = elem('div', {className: 'mbox-body', title: dateTime.format(time)}, [
elem('header', {className: 'mbox-header'}, [
elem('strong', {}, userName),
` wrote:`
]),
evt.content // text
]);
const art = elem('article', {className: 'mbox'}, [img, body]); const art = elem('article', {className: 'mbox'}, [img, body]);
feedlist.append(art); feedlist.append(art);
} }
@ -23,6 +58,26 @@ pool.sub({
'52155da703585f25053830ac39863c80ea6adc57b360472c16c566a412d2bc38', // quark '52155da703585f25053830ac39863c80ea6adc57b360472c16c566a412d2bc38', // quark
'a6057742e73ff93b89587c27a74edf2cdab86904291416e90dc98af1c5f70cfa', // mosc 'a6057742e73ff93b89587c27a74edf2cdab86904291416e90dc98af1c5f70cfa', // mosc
'3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d', // fiatjaf '3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d', // fiatjaf
'32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245' // jb55 // '32e1827635450ebb3c5a7d12c1f8e7b2b514439ac10a67eef3d9fd9c5c68e245' // jb55
]} ]}
}); });
function setMetadata(userList, relay, evt, content) {
const user = userList.find(u => u.pubkey === evt.pubkey);
if (!user) {
userList.push({
metadata: {
[relay]: content
},
pubkey: evt.pubkey,
});
} else {
user.metadata[relay] = {
...user.metadata[relay],
timestamp: evt.created_at,
...content,
};
console.log('update existing user', user);
}
}

Loading…
Cancel
Save