diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Avatar.svelte | 4 | ||||
| -rw-r--r-- | src/components/Event.svelte | 125 | ||||
| -rw-r--r-- | src/components/Media.svelte | 32 |
3 files changed, 100 insertions, 61 deletions
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte index f37f3e14..09b6c037 100644 --- a/src/components/Avatar.svelte +++ b/src/components/Avatar.svelte @@ -18,7 +18,7 @@ user?.profile ? `${base}/${user.profile}.webp` : user?.picture, ); let fallback = $derived( - `${base}/punks/` + punk(user.pubkey || user?.id || "aa"), + `${base}/punks/` + punk(user?.pubkey || user?.id || "aa"), ); let tmp = $derived($avatar?.id && $avatar.id === user?.id && $avatar.src); let src = $derived(tmp || profile || fallback); @@ -31,7 +31,7 @@ <img {src} class="w-full h-full object-cover object-center overflow-hidden" - alt={user.username} + alt={user?.username} /> </div> {/snippet} diff --git a/src/components/Event.svelte b/src/components/Event.svelte index 6b974915..b94443d2 100644 --- a/src/components/Event.svelte +++ b/src/components/Event.svelte @@ -2,56 +2,77 @@ import Avatar from "$comp/Avatar.svelte"; import Media from "$comp/Media.svelte"; import { goto } from "$app/navigation"; + import { fail, ago, post } from "$lib/utils"; + import { sign } from "$lib/nostr"; + import Pin from "$comp/Pin.svelte"; + import { pin } from "$lib/store"; - let { event, minimal } = $props(); - let { author, parts, zaps, names } = $derived(event); - let go = () => goto(`/thread/${event.id}`); - console.log("AUTHOR", event.author); + let amount = 21; + let { event, minimal, heading = true } = $props(); + let { author, parts, zaps, names, created_at } = $derived(event); + let { id } = event; + + let zapping = $state(); + let zap = async () => { + zapping = true; + try { + const body = new FormData(); + + let request = await post("/post/zapRequest", { amount, id }); + let { pr: payreq } = await post("/post/zap", { + event: await sign(request), + }); + await post("/post/payments", { amount, payreq }); + } catch (e) { + fail(e.message); + } + }; </script> -<div class="space-y-5"> - <div class="flex gap-2 items-center"> - <Avatar user={author} size={16} /> - <a href={`/${author.pubkey}/notes`} class="contents"> - <div> - <div class="font-bold"> - {author.display} — {author.username} - </div> - {#if author.lud16} - <div class="flex items-center"> - <iconify-icon - noobserver - icon="ph:lightning-fill" - class="text-yellow-300" - ></iconify-icon> - {author.lud16} +<div class="space-y-2 border-b-8 dark:border-primary py-8"> + {#if heading} + <div class="flex"> + <a href={`/${author.pubkey}/notes`} class="contents"> + <div class="flex gap-2 items-center"> + <Avatar user={author} size={16} disabled={true} /> + <div> + <div> + <span class="font-bold">{author.display}</span> + <span class="text-secondary">@{author.username}</span> + <span class="text-secondary">• {ago(created_at)}</span> + </div> + {#if author.lud16} + <div class="flex items-center"> + <iconify-icon + noobserver + icon="ph:lightning-fill" + class="text-yellow-300" + ></iconify-icon> + {author.lud16} + </div> + {/if} </div> - {/if} - </div> - </a> - </div> - - <div class="text-2xl space-y-5 break-words" onclick={go}> - {#each parts as { type, value }, i} - {#if type === "text"} - {value} - {:else if type === "link" && !minimal} - <Media {value} /> - {:else if type.match(/^nostr:np(rofile|ub)$/)} - <a href={`/${value.pubkey}`} class="font-bold">@{names[value.pubkey]}</a - > - {/if} - {/each} - </div> -</div> + </div> + </a> + </div> + {/if} -{#if !minimal} - <a href={`/send/zap/${event.pubkey}/${event.id}`} class="btn btn-accent"> - <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300" - ></iconify-icon> - Zap + <a href={`/e/${id}`} class="contents"> + <div class="text-2xl space-y-2 break-words"> + {#each parts as { type, value }, i} + {#if type === "text"} + {value} + {:else if type === "link"} + <Media {value} {minimal} /> + {:else if type.match(/^nostr:np(rofile|ub)$/)} + <a href={`/${value.pubkey}`} class="font-bold" + >@{names[value.pubkey]}</a + > + {/if} + {/each} + </div> </a> -{/if} +</div> {#if zaps?.length} <div class="flex flex-wrap gap-2"> @@ -65,3 +86,19 @@ {/each} </div> {/if} + +{#if !minimal} + <div class="justify-center flex"> + <btn onclick={zap} class="btn btn-accent items-center"> + <div class="flex gap-1 items-center"> + <iconify-icon + noobserver + icon="ph:lightning-fill" + class="text-yellow-300" + width={32} + ></iconify-icon> + <div>Zap</div> + </div> + </btn> + </div> +{/if} diff --git a/src/components/Media.svelte b/src/components/Media.svelte index d24dd12d..aff4cf39 100644 --- a/src/components/Media.svelte +++ b/src/components/Media.svelte @@ -6,20 +6,22 @@ export const isAudio = (url: string) => url?.match(/^.*\.(ogg|mp3|wav)/gi); // eslint-disable-next-line @typescript-eslint/no-explicit-any - export let value: any; + let { value, minimal } = $props(); </script> -{#if !!isImage(value.url)} - <img src={value.url} alt={""} /> -{:else if isVideo(value.url)} - <!-- svelte-ignore a11y-media-has-caption --> - <video src={value.url} controls /> -{:else if isAudio(value.url)} - <audio src={value.url} controls> - <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, "")}</a> - </audio> -{:else} - <a href={value.url}> - {value.url.replace(/https?:\/\/(www\.)?/, "")} - </a> -{/if} +<div class="pt-2"> + {#if !!isImage(value.url)} + <img src={value.url} alt={""} class:w-48={minimal} /> + {:else if isVideo(value.url)} + <!-- svelte-ignore a11y-media-has-caption --> + <video src={value.url} controls /> + {:else if isAudio(value.url)} + <audio src={value.url} controls> + <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, "")}</a> + </audio> + {:else} + <a href={value.url}> + {value.url.replace(/https?:\/\/(www\.)?/, "")} + </a> + {/if} +</div> |