feat: use thumbnail url in reaction and user list

This commit is contained in:
Shusui MOYATANI
2024-01-07 17:19:54 +09:00
parent a1ee72f662
commit 88ae5176cc
2 changed files with 14 additions and 8 deletions

View File

@@ -2,6 +2,7 @@ import { Component, Show } from 'solid-js';
import useProfile from '@/nostr/useProfile'; import useProfile from '@/nostr/useProfile';
import npubEncodeFallback from '@/utils/npubEncodeFallback'; import npubEncodeFallback from '@/utils/npubEncodeFallback';
import { thumbnailUrl } from '@/utils/url';
export type ProfileListItemProps = { export type ProfileListItemProps = {
pubkey: string; pubkey: string;
@@ -24,7 +25,9 @@ const ProfileListItem: Component<ProfileListItemProps> = (props) => {
}} }}
> >
<Show when={profile()?.picture} keyed> <Show when={profile()?.picture} keyed>
{(url) => <img src={url} alt="icon" class="h-full w-full rounded object-cover" />} {(url) => (
<img src={thumbnailUrl(url)} alt="icon" class="h-full w-full rounded object-cover" />
)}
</Show> </Show>
</button> </button>
<div class="min-w-0 flex-auto"> <div class="min-w-0 flex-auto">

View File

@@ -13,6 +13,7 @@ import { reaction } from '@/nostr/event';
import useEvent from '@/nostr/useEvent'; import useEvent from '@/nostr/useEvent';
import useProfile from '@/nostr/useProfile'; import useProfile from '@/nostr/useProfile';
import ensureNonNull from '@/utils/ensureNonNull'; import ensureNonNull from '@/utils/ensureNonNull';
import { thumbnailUrl } from '@/utils/url';
type ReactionDisplayProps = { type ReactionDisplayProps = {
event: NostrEvent; event: NostrEvent;
@@ -47,13 +48,15 @@ const ReactionDisplay: Component<ReactionDisplayProps> = (props) => {
</div> </div>
<div class="notification-user flex flex-1 gap-1 overflow-hidden"> <div class="notification-user flex flex-1 gap-1 overflow-hidden">
<div class="author-icon h-5 w-5 shrink-0 overflow-hidden rounded"> <div class="author-icon h-5 w-5 shrink-0 overflow-hidden rounded">
<Show when={profile()?.picture != null}> <Show when={profile()?.picture} keyed>
<img {(url) => (
src={profile()?.picture} <img
alt="icon" src={thumbnailUrl(url)}
// TODO autofit alt="icon"
class="h-full w-full object-cover" // TODO autofit
/> class="h-full w-full object-cover"
/>
)}
</Show> </Show>
</div> </div>
<div class="flex min-w-0 flex-1 overflow-hidden"> <div class="flex min-w-0 flex-1 overflow-hidden">