diff --git a/packages/app/src/Components/Embed/MediaElement.tsx b/packages/app/src/Components/Embed/MediaElement.tsx index da5673d6..51e0ef97 100644 --- a/packages/app/src/Components/Embed/MediaElement.tsx +++ b/packages/app/src/Components/Embed/MediaElement.tsx @@ -41,7 +41,7 @@ const ImageElement = ({ url, meta, onMediaClick }: ImageElementProps) => { style.height = `${Math.min(document.body.clientHeight * 0.8, meta.height * scale)}px`; } return style; - }, [imageRef.current, meta]); + }, [imageRef?.current, meta]); return (
& { }; export const ProxyImg = forwardRef(function ProxyImg( - { size, className, promptToLoadDirectly, missingImageElement, sha256, ...props }: ProxyImgProps, + { src, size, className, promptToLoadDirectly, missingImageElement, sha256, ...props }: ProxyImgProps, ref, ) { const { proxy } = useImgProxy(); const [loadFailed, setLoadFailed] = useState(false); const [bypass, setBypass] = useState(CONFIG.media.bypassImgProxyError); - const proxiedSrc = useMemo(() => proxy(props.src ?? "", size, sha256), [props.src, size, sha256]); - const [src, setSrc] = useState(proxiedSrc); + const [imgSrc, setImgSrc] = useState(); useEffect(() => { setLoadFailed(false); - setSrc(proxy(props.src, size, sha256)); - }, [props.src, size, sha256]); + if (src) { + setImgSrc(proxy(src, size, sha256)); + } + }, [src, size, sha256]); if (loadFailed && !bypass && (promptToLoadDirectly ?? true)) { return ( @@ -39,29 +40,31 @@ export const ProxyImg = forwardRef(function Pro defaultMessage="Failed to proxy image from {host}, click here to load directly" id="65BmHb" values={{ - host: getUrlHostname(props.src), + host: getUrlHostname(src), }} />
); } - const handleImageError = e => { + const handleImageError = (e: React.SyntheticEvent) => { + console.warn("ImgLoadOnError", src, e); if (props.onError) { props.onError(e); } else { - console.error("Failed to load image: ", props.src, e); - if (bypass && src === proxiedSrc) { - setSrc(props.src ?? ""); + if (bypass) { + setImgSrc(src ?? ""); } else { setLoadFailed(true); } } }; - if (!src || loadFailed) return missingImageElement ??
Image not available
; + if (!imgSrc || loadFailed) return missingImageElement ??
+ +
; return ( - + ); }); diff --git a/packages/app/src/Components/Text/Text.tsx b/packages/app/src/Components/Text/Text.tsx index c4cfc2fe..a99716b3 100644 --- a/packages/app/src/Components/Text/Text.tsx +++ b/packages/app/src/Components/Text/Text.tsx @@ -138,7 +138,7 @@ export default function Text({ ); const RevealMediaInstance = ({ content, data }: { content: string; data?: object }) => { - const imeta = data as IMeta; + const imeta = data as IMeta | undefined; return ( ); + chunks.push(); } else { // We build a grid layout to render the grouped images const imagesWithGridConfig = galleryImages.map((gi, index) => { @@ -243,7 +243,7 @@ export default function Text({ if (disableMedia ?? false) { chunks.push(); } else { - chunks.push(); + chunks.push(); } } if (element.type === "invoice") { diff --git a/packages/app/src/Utils/index.ts b/packages/app/src/Utils/index.ts index b5b61265..3db6487d 100644 --- a/packages/app/src/Utils/index.ts +++ b/packages/app/src/Utils/index.ts @@ -462,7 +462,8 @@ export function kvToObject(o: string, sep?: string) { export function defaultAvatar(input?: string) { if (isOffline()) return Nostrich; - return `https://robohash.v0l.io/${input ?? "missing"}.png${isHalloween() ? "?set=set2" : ""}`; + const key = (input?.length ?? 0) === 0 ? "missing" : input; + return `https://robohash.v0l.io/${key}.png${isHalloween() ? "?set=set2" : ""}`; } export function isFormElement(target: HTMLElement): boolean {