fix: image meta

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 (
     <div

packages/app/src/Components/ProxyImg.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, HTMLProps, ReactNode, useEffect, useMemo, useState } from "react";
+import { forwardRef, HTMLProps, ReactNode, useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
 import useImgProxy from "@/Hooks/useImgProxy";
@@ -13,19 +13,20 @@ type ProxyImgProps = HTMLProps<HTMLImageElement> & {
 };
 
 export const ProxyImg = forwardRef<HTMLImageElement, ProxyImgProps>(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<string>();
 
   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<HTMLImageElement, ProxyImgProps>(function Pro
           defaultMessage="Failed to proxy image from {host}, click here to load directly"
           id="65BmHb"
           values={{
-            host: getUrlHostname(props.src),
+            host: getUrlHostname(src),
           }}
         />
       </div>
     );
   }
 
-  const handleImageError = e => {
+  const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    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 ?? <div>Image not available</div>;
+  if (!imgSrc || loadFailed) return missingImageElement ?? <div>
+    <FormattedMessage defaultMessage="Image not available" id="Y7FG5M" />
+  </div>;
 
   return (
-    <img {...props} ref={ref} src={src} width={size} height={size} className={className} onError={handleImageError} />
+    <img {...props} ref={ref} src={imgSrc} width={size} height={size} className={className} onError={handleImageError} />
   );
 });

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 (
       <RevealMedia
         key={content}
@@ -196,7 +196,7 @@ export default function Text({
             }
           }
           if (galleryImages.length === 1) {
-            chunks.push(<RevealMediaInstance content={galleryImages[0].content} data={galleryImages[0]} />);
+            chunks.push(<RevealMediaInstance content={galleryImages[0].content} data={galleryImages[0].data} />);
           } 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(<DisableMedia content={element.content} />);
         } else {
-          chunks.push(<RevealMediaInstance content={element.content} />);
+          chunks.push(<RevealMediaInstance content={element.content} data={element.data} />);
         }
       }
       if (element.type === "invoice") {

packages/app/src/Utils/index.ts

@@ -462,7 +462,8 @@ export function kvToObject<T>(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 {