nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-19 19:46:34 +00:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/auth/components/user.tsx
View File

@ -22,7 +22,8 @@ export function User({ pubkey }: { pubkey: string }) {
<div className="flex items-center gap-2">
<div className="relative h-11 w-11 shrink rounded-md">
<Image
src={user.image || DEFAULT_AVATAR}
src={user.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
decoding="async"

1
src/app/auth/pages/create/step-2/index.page.tsx
View File

@ -66,6 +66,7 @@ export function Page() {
<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
<Image
src={image}
fallback={DEFAULT_AVATAR}
alt="avatar"
className="relative z-10 h-11 w-11 rounded-md"
/>

1
src/app/channel/components/createModal.tsx
View File

@ -158,6 +158,7 @@ export function ChannelCreateModal() {
<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
<Image
src={image}
fallback={DEFAULT_AVATAR}
alt="channel picture"
className="relative z-10 h-11 w-11 rounded-md"
/>

3
src/app/channel/components/member.tsx
View File

@ -12,7 +12,8 @@ export function Member({ pubkey }: { pubkey: string }) {
) : (
<Image
className="inline-block h-7 w-7 rounded"
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
/>
)}

3
src/app/channel/components/messages/userMute.tsx
View File

@ -24,7 +24,8 @@ export function ChannelMessageUserMute({
<>
<div className="relative h-11 w-11 shrink-0 rounded-md">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
/>

3
src/app/channel/components/messages/userReply.tsx
View File

@ -17,7 +17,8 @@ export function UserReply({ pubkey }: { pubkey: string }) {
<>
<div className="relative h-9 w-9 shrink overflow-hidden rounded">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-9 w-9 rounded object-cover"
/>

3
src/app/channel/components/metadata.tsx
View File

@ -19,7 +19,8 @@ export function ChannelMetadata({ id }: { id: string }) {
<div className="flex flex-col gap-2">
<div className="relative shrink-0 rounded-md h-11 w-11">
<Image
src={metadata?.picture || DEFAULT_AVATAR}
src={metadata?.picture}
fallback={DEFAULT_AVATAR}
alt={id}
className="h-11 w-11 rounded-md object-contain bg-zinc-900"
/>

3
src/app/channel/components/mutedItem.tsx
View File

@ -41,7 +41,8 @@ export function MutedItem({ data }: { data: any }) {
<div className="flex items-center gap-1.5">
<div className="relative h-9 w-9 shrink rounded-md">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={data.content}
className="h-9 w-9 rounded-md object-cover"
/>

3
src/app/chat/components/item.tsx
View File

@ -35,7 +35,8 @@ export function ChatsListItem({ data }: { data: any }) {
>
<div className="inline-flex shrink-0 h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={data.sender_pubkey}
className="h-6 w-6 rounded object-cover"
/>

3
src/app/chat/components/self.tsx
View File

@ -32,7 +32,8 @@ export function ChatsListSelfItem({ data }: { data: any }) {
>
<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={data.pubkey}
className="h-6 w-6 rounded bg-white object-cover"
/>

3
src/app/chat/components/sidebar.tsx
View File

@ -18,7 +18,8 @@ export function ChatSidebar({ pubkey }: { pubkey: string }) {
<div className="flex flex-col gap-3">
<div className="relative h-11 w-11 shrink rounded-md">
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="h-11 w-11 rounded-md object-cover"
/>

2
src/app/space/components/addImage.tsx
View File

@ -4,6 +4,7 @@ import { CancelIcon } from "@shared/icons";
import { Image } from "@shared/image";
import { RelayContext } from "@shared/relayProvider";
import { useActiveAccount } from "@stores/accounts";
import { DEFAULT_AVATAR } from "@stores/constants";
import { open } from "@tauri-apps/api/dialog";
import { Body, fetch } from "@tauri-apps/api/http";
import { createBlobFromFile } from "@utils/createBlobFromFile";
@ -206,6 +207,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
<div className="relative inline-flex h-56 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
<Image
src={image}
fallback={DEFAULT_AVATAR}
alt="content"
className="relative z-10 max-h-[156px] h-auto w-[150px] object-cover rounded-md"
/>

3
src/app/space/components/blocks/image.tsx
View File

@ -1,7 +1,7 @@
import { CancelIcon } from "@shared/icons";
import { Image } from "@shared/image";
import { TitleBar } from "@shared/titleBar";
import { useActiveAccount } from "@stores/accounts";
import { DEFAULT_AVATAR } from "@stores/constants";
export function ImageBlock({ params }: { params: any }) {
const removeBlock = useActiveAccount((state: any) => state.removeBlock);
@ -16,6 +16,7 @@ export function ImageBlock({ params }: { params: any }) {
<div className="w-full flex-1 p-3">
<Image
src={params.content}
fallback={DEFAULT_AVATAR}
alt={params.title}
className="w-full h-full object-cover rounded-md"
/>

3
src/app/trending/components/profile.tsx
View File

@ -27,7 +27,8 @@ export function Profile({ data }: { data: any }) {
<div className="flex items-center gap-2">
<div className="w-12 h-12 shrink-0">
<Image
src={profile.picture || DEFAULT_AVATAR}
src={profile.picture}
fallback={DEFAULT_AVATAR}
className="w-12 h-12 object-cover rounded"
/>
</div>

6
src/app/user/pages/index.page.tsx
View File

@ -88,7 +88,8 @@ export function Page() {
/>
<div className="w-full h-56 bg-zinc-100">
<Image
src={user?.banner || "https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"}
src={user?.banner}
fallback="https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"
alt={"banner"}
className="w-full h-full object-cover"
/>
@ -96,7 +97,8 @@ export function Page() {
<div className="w-full px-5 -mt-7">
<div>
<Image
src={user?.image || DEFAULT_AVATAR}
src={user?.image}
fallback={DEFAULT_AVATAR}
alt={pubkey}
className="w-14 h-14 rounded-md ring-2 ring-black"
/>

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" }}
/>

47
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,8 +14,16 @@ 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">
<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" />
) : (
@ -36,5 +47,37 @@ export function MultiAccounts() {
/>
</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"
>
<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">