forked from nostr/nostrweb
feed: refactor profile image placeholder
Move canvas placeholder image to getMetadata so that the logic is in one place. Also added an exception for pubkeys starting with at least 6 zeros to invert the color.
parent
d8c087bb71
commit
9711ca2ecf
39
src/main.js
39
src/main.js
|
@ -153,19 +153,6 @@ setInterval(() => {
|
|||
});
|
||||
}, 10000);
|
||||
|
||||
|
||||
const elemCanvas = (text) => {
|
||||
const canvas = elem('canvas', {height: 80, width: 80});
|
||||
const context = canvas.getContext('2d');
|
||||
context.fillStyle = `#${text.slice(0, 6)}`;
|
||||
context.fillRect(0, 0, 80, 80);
|
||||
context.fillStyle = '#111';
|
||||
context.fillRect(0, 50, 80, 32);
|
||||
context.font = 'bold 18px monospace';
|
||||
context.fillText(text, 2, 46);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
function createTextNote(evt, relay) {
|
||||
const {host, img, isReply, name, replies, time, userName} = getMetadata(evt, relay);
|
||||
const isLongContent = evt.content.trimRight().length > 280;
|
||||
|
@ -210,7 +197,7 @@ function createTextNote(evt, relay) {
|
|||
requestAnimationFrame(() => updateElemHeight(writeInput));
|
||||
}
|
||||
return rendernArticle([
|
||||
elem('div', {className: 'mbox-img'}, [(name && img) ? img : elemCanvas(userName)]), body,
|
||||
elem('div', {className: 'mbox-img'}, [img]), body,
|
||||
replies[0] ? elem('div', {className: 'mobx-replies'}, replyFeed.reverse()) : '',
|
||||
]);
|
||||
}
|
||||
|
@ -310,8 +297,8 @@ function renderRecommendServer(evt, relay) {
|
|||
]),
|
||||
` recommends server: ${evt.content}`,
|
||||
]);
|
||||
return rendernArticle([elem('div', {className: 'mbox-img'}, [
|
||||
(name && img) ? img : elemCanvas(userName)]), body
|
||||
return rendernArticle([
|
||||
elem('div', {className: 'mbox-img'}, [img]), body
|
||||
], {className: 'mbox-recommend-server', data: {relay: evt.content}});
|
||||
}
|
||||
|
||||
|
@ -387,6 +374,22 @@ const getHost = (url) => {
|
|||
}
|
||||
}
|
||||
|
||||
const elemCanvas = (text) => {
|
||||
const canvas = elem('canvas', {height: 80, width: 80});
|
||||
const context = canvas.getContext('2d');
|
||||
const color = `#${text.slice(0, 6)}`;
|
||||
context.fillStyle = color;
|
||||
context.fillRect(0, 0, 80, 80);
|
||||
context.fillStyle = '#111';
|
||||
context.fillRect(0, 50, 80, 32);
|
||||
context.font = 'bold 18px monospace';
|
||||
if (color === '#000000') {
|
||||
context.fillStyle = '#fff';
|
||||
}
|
||||
context.fillText(text, 2, 46);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
function getMetadata(evt, relay) {
|
||||
const host = getHost(relay);
|
||||
const user = userList.find(user => user.pubkey === evt.pubkey);
|
||||
|
@ -394,11 +397,11 @@ function getMetadata(evt, relay) {
|
|||
const name = user?.metadata[relay]?.name;
|
||||
const userName = name || evt.pubkey.slice(0, 8);
|
||||
const userAbout = user?.metadata[relay]?.about || '';
|
||||
const img = elem('img', {
|
||||
const img = userImg ? elem('img', {
|
||||
src: userImg,
|
||||
alt: `${userName} ${host}`,
|
||||
title: `${userName} on ${host} ${userAbout}`,
|
||||
}, '');
|
||||
}) : elemCanvas(evt.pubkey);
|
||||
const isReply = evt.tags.some(hasEventTag);
|
||||
const replies = replyList.filter((reply) => reply.tags[0][1] === evt.id);
|
||||
const time = new Date(evt.created_at * 1000);
|
||||
|
|
Loading…
Reference in New Issue