feat: imgproxy

src/Element/Avatar.tsx

@@ -1,19 +1,24 @@
 import "./Avatar.css";
 import Nostrich from "nostrich.webp";
-import { CSSProperties } from "react";
+import { CSSProperties, useEffect, useState } from "react";
 import type { UserMetadata } from "Nostr";
-import { useSelector } from "react-redux";
-import { RootState } from "State/Store";
-import { ApiHost } from "Const";
+import useImgProxy from "Feed/ImgProxy";
 
 const Avatar = ({ user, ...rest }: { user?: UserMetadata, onClick?: () => void }) => {
-  const useImageProxy = useSelector((s: RootState) => s.login.preferences.useImageProxy);
+  const [url, setUrl] = useState<string>(Nostrich);
+  const { proxy } = useImgProxy();
 
-  const avatarUrl = (user?.picture?.length ?? 0) === 0 ? Nostrich : 
-    (useImageProxy ? `${ApiHost}/api/v1/imgproxy/${window.btoa(user!.picture!)}` : user?.picture)
-  const backgroundImage = `url(${avatarUrl})`
-  const domain = user?.nip05 && user.nip05.split('@')[1]
+  useEffect(() => {
+    if (user?.picture) {
+      proxy(user.picture)
+        .then(a => setUrl(a))
+        .catch(console.warn);
+    }
+  }, [user]);
+
+  const backgroundImage = `url(${url})`
   const style = { '--img-url': backgroundImage } as CSSProperties
+  const domain = user?.nip05 && user.nip05.split('@')[1]
   return (
     <div
       {...rest}

src/Element/ProxyImg.tsx

@@ -0,0 +1,17 @@
+import useImgProxy from "Feed/ImgProxy";
+import { useEffect, useState } from "react";
+
+export const ProxyImg = ({ src, ...rest }: { src?: string }) => {
+    const [url, setUrl] = useState<string>();
+    const { proxy } = useImgProxy();
+
+    useEffect(() => {
+        if (src) {
+            proxy(src)
+                .then(a => setUrl(a))
+                .catch(console.warn);
+        }
+    }, [src]);
+
+    return <img src={url} {...rest} />
+}

src/Element/Text.tsx

@@ -17,8 +17,9 @@ import TidalEmbed from "Element/TidalEmbed";
 import { useSelector } from 'react-redux';
 import { RootState } from 'State/Store';
 import { UserPreferences } from 'State/Login';
-import  SoundCloudEmbed from 'Element/SoundCloudEmded'
-import MixCloudEmbed from './MixCloudEmbed';
+import SoundCloudEmbed from 'Element/SoundCloudEmded'
+import MixCloudEmbed from 'Element/MixCloudEmbed';
+import { ProxyImg } from 'Element/ProxyImg';
 
 function transformHttpLink(a: string, pref: UserPreferences) {
     try {
@@ -40,7 +41,7 @@ function transformHttpLink(a: string, pref: UserPreferences) {
                 case "png":
                 case "bmp":
                 case "webp": {
-                    return <img key={url.toString()} src={url.toString()} />;
+                    return <ProxyImg key={url.toString()} src={url.toString()} />;
                 }
                 case "wav":
                 case "mp3":
@@ -81,9 +82,9 @@ function transformHttpLink(a: string, pref: UserPreferences) {
             )
         } else if (tidalId) {
             return <TidalEmbed link={a} />
-        } else if (soundcloundId){
+        } else if (soundcloundId) {
             return <SoundCloudEmbed link={a} />
-        } else if (mixcloudId){
+        } else if (mixcloudId) {
             return <MixCloudEmbed link={a} />
         } else {
             return <a href={a} onClick={(e) => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">{a}</a>
@@ -223,14 +224,14 @@ export default function Text({ content, tags, users }: TextProps) {
                 parent &&
                 typeof index === 'number' &&
                 (node.type === 'link' ||
-                  node.type === 'linkReference' ||
-                  node.type === 'image' ||
-                  node.type === 'imageReference' ||
-                  node.type === 'definition')
+                    node.type === 'linkReference' ||
+                    node.type === 'image' ||
+                    node.type === 'imageReference' ||
+                    node.type === 'definition')
             ) {
-                  node.type = 'text';
-                  node.value = content.slice(node.position.start.offset, node.position.end.offset).replace(/\)$/, ' )');
-                  return SKIP;
+                node.type = 'text';
+                node.value = content.slice(node.position.start.offset, node.position.end.offset).replace(/\)$/, ' )');
+                return SKIP;
             }
         })
     }, [content]);