Blossom for images

src/components/Avatar/Avatar.tsx

@@ -214,6 +214,7 @@ const Avatar: Component<{
               onError={imgError}
               mediaThumb={imageThumb()}
               ignoreRatio={true}
+              authorPk={props.user?.pubkey}
             />
           </Show>
         </div>

src/components/DirectMessages/DirectMessageContent.tsx

@@ -57,6 +57,7 @@ const DirectMessageConversation: Component<{
         >
           <DirectMessageParsedContent
             content={msg.content}
+            sender={msg.sender}
           />
         </div>
       );
@@ -105,6 +106,7 @@ const DirectMessageConversation: Component<{
             >
               <DirectMessageParsedContent
                 content={section}
+                sender={msg.sender}
               />
             </div>
           }>

src/components/DirectMessages/DirectMessageParsedContent.tsx

@@ -35,6 +35,7 @@ const groupGridLimit = 7;
 const DirectMessageParsedContent: Component<{
   id?: string,
   content: string,
+  sender: string,
   ignoreMedia?: boolean,
   noLinks?: string,
   noPreviews?: boolean,
@@ -412,6 +413,7 @@ const DirectMessageParsedContent: Component<{
         mediaThumb={imageThumb}
         width={514}
         imageGroup={`${imageGroup}`}
+        authorPk={props.sender}
       />
     }
 
@@ -439,6 +441,7 @@ const DirectMessageParsedContent: Component<{
             imageGroup={`${imageGroup}`}
             plainBorder={true}
             forceHeight={500}
+            authorPk={props.sender}
           />
         }}
       </For>

src/components/Note/NoteGallery.tsx

@@ -214,6 +214,7 @@ const NoteGallery: Component<{
                         </A>
                       </div>
                     }
+                    authorPk={props.note.pubkey}
                   />
                 </div>
               </Match>

src/components/NoteImage/NoteImage.tsx

@@ -2,6 +2,7 @@ import { Component, createEffect, createSignal, JSX,  JSXElement,  onMount, Show
 import styles from "./NoteImage.module.scss";
 import { generatePrivateKey } from "../../lib/nTools";
 import { MediaVariant } from "../../types/primal";
+import { useAppContext } from "../../contexts/AppContext";
 
 const NoteImage: Component<{
   class?: string,
@@ -19,7 +20,9 @@ const NoteImage: Component<{
   caption?: JSXElement | string,
   ignoreRatio?: boolean,
   forceHeight?: number;
+  authorPk?: string,
 }> = (props) => {
+  const app = useAppContext();
   const imgId = generatePrivateKey();
 
   let imgVirtual: HTMLImageElement | undefined;
@@ -31,7 +34,7 @@ const NoteImage: Component<{
 
   const isCached = () => !props.isDev || props.media;
 
-  const onError = (event: any) => {
+  const onError = async (event: any) => {
     const image = event.target;
 
     if (image.src === props.altSrc || !props.altSrc || image.src.endsWith(props.altSrc)) {
@@ -40,6 +43,32 @@ const NoteImage: Component<{
       return true;
     }
 
+    const userBlossoms = app?.actions.getUserBlossomUrls(props.authorPk || '');
+
+    if (userBlossoms) {
+      const reqs = userBlossoms.map(url => new Promise<string>((res, rej) => {
+        fetch(url, { method: 'HEAD'}).then((response) => {
+          if (response.headers.get('Content-Type')?.startsWith('image')) {
+            res(url);
+          } else {
+            rej('')
+          }
+        });
+      }));
+
+      const bServer = await Promise.any(reqs);
+
+      if (typeof bServer === 'string' && bServer.length > 0) {
+        const oSrc = src() || '';
+        const bSrc = oSrc.slice(oSrc.lastIndexOf('/'), oSrc.lastIndexOf('.'));
+        setSrc(() => `${bServer}/${bSrc}`);
+
+        image.onerror = "";
+        image.src = src();
+        return true;
+      }
+    }
+
     setSrc(() => props.altSrc || '');
 
     image.onerror = "";