reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix image fallback bug

Browse Source
This commit is contained in:
Ren Amamiya
2023-06-22 17:36:12 +07:00
parent a71e2991c2
commit 36888221ff
28 changed files with 151 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/shared/accounts/active.tsx
View File

@@ -67,7 +67,8 @@ export function ActiveAccount({ data }: { data: any }) {
return (
<button type="button" className="relative inline-block h-9 w-9">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={data.npub}
className="h-9 w-9 rounded object-cover"
/>

3
src/shared/accounts/inactive.tsx
View File

@@ -8,7 +8,8 @@ export function InactiveAccount({ data }: { data: any }) {
return (
<div className="relative h-9 w-9 shrink-0">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={data.npub}
className="h-9 w-9 rounded object-cover"
/>

4
src/shared/composer/user.tsx
View File

@@ -9,10 +9,10 @@ export function User({ pubkey }: { pubkey: string }) {
<div className="flex items-center gap-2">
<div className="h-8 w-8 shrink-0 overflow-hidden rounded bg-zinc-900">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-8 w-8 object-cover"
loading="auto"
/>
</div>
<h5 className="text-base font-semibold leading-none text-zinc-100">

1
src/shared/icons/index.tsx
View File

@@ -36,4 +36,5 @@ export * from "./loader";
export * from "./trending";
export * from "./empty";
export * from "./cmd";
export * from "./verticalDots";
// @endindex

28
src/shared/icons/verticalDots.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { SVGProps } from "react";
export function VerticalDotsIcon(
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
viewBox="0 0 24 24"
{...props}
>
<path
fill="currentColor"
d="M12 4.75a1 1 0 100-2 1 1 0 000 2zM12 13a1 1 0 100-2 1 1 0 000 2zM12 21.25a1 1 0 100-2 1 1 0 000 2z"
/>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="M12 4.75a1 1 0 100-2 1 1 0 000 2zM12 13a1 1 0 100-2 1 1 0 000 2zM12 21.25a1 1 0 100-2 1 1 0 000 2z"
/>
</svg>
);
}

16
src/shared/image.tsx
View File

@@ -1,15 +1,19 @@
import { DEFAULT_AVATAR } from "@stores/constants";
import { ImgHTMLAttributes } from "react";
export function Image(props, fallback?) {
const addImageFallback = (event: { currentTarget: { src: string } }) => {
event.currentTarget.src = fallback || DEFAULT_AVATAR;
};
interface Props extends ImgHTMLAttributes<any> {
fallback: string;
}
export function Image({ src, fallback, ...props }: Props) {
return (
<img
{...props}
src={src || fallback}
onError={({ currentTarget }) => {
currentTarget.onerror = null;
currentTarget.src = fallback;
}}
decoding="async"
onError={addImageFallback}
alt="lume default img"
style={{ contentVisibility: "auto" }}
/>

89
src/shared/multiAccounts.tsx
View File

@@ -1,7 +1,10 @@
import { Transition } from "@headlessui/react";
import { getAccounts, getActiveAccount } from "@libs/storage";
import { ActiveAccount } from "@shared/accounts/active";
import { InactiveAccount } from "@shared/accounts/inactive";
import { BellIcon, PlusIcon } from "@shared/icons";
import { PlusIcon, VerticalDotsIcon } from "@shared/icons";
import { Link } from "@shared/link";
import { useState } from "react";
import useSWR from "swr";
const allFetcher = () => getAccounts();
@@ -11,30 +14,70 @@ export function MultiAccounts() {
const { data: accounts }: any = useSWR("allAccounts", allFetcher);
const { data: activeAccount }: any = useSWR("activeAccount", fetcher);
const [open, setOpen] = useState(false);
const toggleMenu = () => {
setOpen((isOpen) => !isOpen);
};
return (
<div className="flex items-center gap-2 rounded-xl p-2 border-t border-zinc-800/50 bg-zinc-900/80 backdrop-blur-md">
{!activeAccount ? (
<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900" />
) : (
<ActiveAccount data={activeAccount} />
)}
{!accounts ? (
<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900" />
) : (
accounts.map((account: { is_active: number; pubkey: string }) => (
<InactiveAccount key={account.pubkey} data={account} />
))
)}
<button
type="button"
className="group relative flex h-9 w-9 shrink items-center justify-center rounded border border-dashed border-zinc-600 hover:border-zinc-400"
<div className="flex flex-col gap-2 rounded-xl p-2 border-t border-zinc-800/50 bg-zinc-900/80 backdrop-blur-md">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
{!activeAccount ? (
<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900" />
) : (
<ActiveAccount data={activeAccount} />
)}
{!accounts ? (
<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900" />
) : (
accounts.map((account: { is_active: number; pubkey: string }) => (
<InactiveAccount key={account.pubkey} data={account} />
))
)}
<button
type="button"
className="group relative flex h-9 w-9 shrink items-center justify-center rounded border border-dashed border-zinc-600 hover:border-zinc-400"
>
<PlusIcon
width={16}
height={16}
className="text-zinc-400 group-hover:text-zinc-100"
/>
</button>
</div>
<button
type="button"
onClick={() => toggleMenu()}
className="inline-flex items-center justify-center w-5 h-5 rounded hover:bg-zinc-800"
>
<VerticalDotsIcon className="w-4 h-4 text-zinc-100" />
</button>
</div>
<Transition
show={open}
enter="transition-transform ease-in-out duration-75"
enterFrom="translate-y-16"
enterTo="translate-y-0"
leave="transition-transform ease-in-out duration-150"
leaveFrom="translate-y-0"
leaveTo="translate-y-16"
className="flex flex-col items-start justify-start gap-1 pt-1.5 border-t border-zinc-800 transform"
>
<PlusIcon
width={16}
height={16}
className="text-zinc-400 group-hover:text-zinc-100"
/>
</button>
<Link
href="/app/settings"
className="w-full py-2 px-2 rounded hover:bg-zinc-800 text-zinc-100 text-start text-sm"
>
Settings
</Link>
<Link
href="/app/logout"
className="w-full py-2 px-2 rounded hover:bg-zinc-800 text-zinc-100 text-start text-sm"
>
Logout
</Link>
</Transition>
</div>
);
}

1
src/shared/notes/contents/kind1063.tsx
View File

@@ -13,6 +13,7 @@ export function Kind1063({ metadata }: { metadata: NDKTag[] }) {
{isImage(url) && (
<Image
src={url}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt="image"
className="h-auto w-full rounded-lg object-cover"
/>

1
src/shared/notes/preview/image.tsx
View File

@@ -8,6 +8,7 @@ export function ImagePreview({ urls }: { urls: string[] }) {
<div key={url} className="min-w-0 grow-0 shrink-0 basis-full">
<Image
src={url}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt="image"
className="h-auto w-full rounded-lg object-cover"
/>

2
src/shared/notes/preview/link.tsx
View File

@@ -27,9 +27,9 @@ export function LinkPreview({ urls }: { urls: string[] }) {
{data["og:image"] && (
<Image
src={data["og:image"]}
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
alt={urls[0]}
className="w-full h-44 object-cover rounded-t-lg bg-white"
fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
/>
)}
<div className="flex flex-col gap-2 px-3 py-3">

3
src/shared/notes/replies/form.tsx
View File

@@ -50,7 +50,8 @@ export function NoteReplyForm({ id }: { id: string }) {
<div className="inline-flex items-center gap-2">
<div className="relative h-9 w-9 shrink-0 rounded">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={account.npub}
className="h-9 w-9 rounded-md bg-white object-cover"
/>

2
src/shared/notes/repost.tsx
View File

@@ -19,7 +19,7 @@ export function Repost({
const kind1063 = data?.kind === 1063 ? data.tags : null;
return (
<div className="relative overflow-hidden flex flex-col mt-12 pb-6">
<div className="relative overflow-hidden flex flex-col mt-12">
{data ? (
<>
<User pubkey={data.pubkey} time={data.created_at} />

7
src/shared/user.tsx
View File

@@ -31,7 +31,8 @@ export function User({
className={`${avatarWidth} ${avatarHeight} shrink-0 overflow-hidden`}
>
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className={`${avatarWidth} ${avatarHeight} ${
size === "small" ? "rounded" : "rounded-md"
@@ -70,10 +71,10 @@ export function User({
<div className="w-full max-w-xs overflow-hidden rounded-md border border-zinc-800/50 bg-zinc-900/90 backdrop-blur-lg">
<div className="flex gap-2.5 border-b border-zinc-800 px-3 py-3">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 shrink-0 rounded-lg object-cover"
fallback={DEFAULT_AVATAR}
/>
<div className="flex-1 flex flex-col gap-2">
<div className="inline-flex flex-col gap-1">