diff --git a/packages/app/src/Element/ProxyImg.tsx b/packages/app/src/Element/ProxyImg.tsx index bae0588e..bf58c489 100644 --- a/packages/app/src/Element/ProxyImg.tsx +++ b/packages/app/src/Element/ProxyImg.tsx @@ -1,22 +1,21 @@ import useImgProxy from "@/Hooks/useImgProxy"; -import React, { useState } from "react"; +import React, { HTMLProps, ReactNode, useState } from "react"; import { FormattedMessage } from "react-intl"; import { getUrlHostname } from "@/SnortUtils"; -interface ProxyImgProps extends React.DetailedHTMLProps, HTMLImageElement> { +type ProxyImgProps = HTMLProps & { size?: number; className?: string; + promptToLoadDirectly?: boolean; + missingImageElement?: ReactNode; } -export const ProxyImg = (props: ProxyImgProps) => { +export const ProxyImg = ({ size, className, promptToLoadDirectly, missingImageElement, ...props }: ProxyImgProps) => { const { proxy } = useImgProxy(); const [loadFailed, setLoadFailed] = useState(false); const [bypass, setBypass] = useState(CONFIG.bypassImgProxyError); - if (loadFailed) { - if (bypass) { - return ; - } + if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) { return (
{
); } + const src = bypass ? props.src : proxy(props.src ?? "", size); + if (!src || (loadFailed && !bypass)) return missingImageElement; return ( { if (props.onError) { props.onError(e); } else { + console.error("Failed to proxy image ", props.src); setLoadFailed(true); } }} diff --git a/packages/app/src/Element/User/Avatar.tsx b/packages/app/src/Element/User/Avatar.tsx index 4ca04065..41aec240 100644 --- a/packages/app/src/Element/User/Avatar.tsx +++ b/packages/app/src/Element/User/Avatar.tsx @@ -6,6 +6,7 @@ import classNames from "classnames"; import { defaultAvatar, getDisplayName } from "@/SnortUtils"; import { ProxyImg } from "@/Element/ProxyImg"; +import Icon from "@/Icons/Icon"; interface AvatarProps { pubkey: string; @@ -37,10 +38,17 @@ const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons, class
- + } + /> {icons &&
{icons}
} {imageOverlay &&
{imageOverlay}
}
diff --git a/packages/app/src/Hooks/useImgProxy.ts b/packages/app/src/Hooks/useImgProxy.ts index 726a9153..7bdf94ca 100644 --- a/packages/app/src/Hooks/useImgProxy.ts +++ b/packages/app/src/Hooks/useImgProxy.ts @@ -32,7 +32,7 @@ export function proxyImg(url: string, settings?: ImgProxySettings, resize?: numb return urlSafe(base64.encode(result)); } if (!settings) return url; - if (url.startsWith("data:") || url.startsWith("blob:")) return url; + if (url.startsWith("data:") || url.startsWith("blob:") || url.length == 0) return url; const opt = resize ? `rs:fit:${resize}:${resize}/dpr:${window.devicePixelRatio}` : ""; const urlBytes = te.encode(url); const urlEncoded = urlSafe(base64.encode(urlBytes));