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 {