mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
fix image fallback bug
This commit is contained in:
parent
a71e2991c2
commit
36888221ff
@ -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"
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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">
|
||||
|
@ -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
28
src/shared/icons/verticalDots.tsx
Normal 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>
|
||||
);
|
||||
}
|
@ -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" }}
|
||||
/>
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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">
|
||||
|
@ -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"
|
||||
/>
|
||||
|
@ -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} />
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user