feat: image proxy service

src/Element/Avatar.tsx

@@ -2,10 +2,15 @@ import "./Avatar.css";
 import Nostrich from "../nostrich.jpg";
 import { CSSProperties } from "react";
 import type { UserMetadata } from "Nostr";
+import { useSelector } from "react-redux";
+import { RootState } from "State/Store";
+import { ApiHost } from "Const";
 
+const Avatar = ({ user, ...rest }: { user?: UserMetadata, onClick?: () => void }) => {
+  const useImageProxy = useSelector((s: RootState) => s.login.preferences.useImageProxy);
 
-const Avatar = ({ user, ...rest }: { user?: UserMetadata, onClick?: () => void}) => {
+  const avatarUrl = (user?.picture?.length ?? 0) === 0 ? Nostrich : 
-    const avatarUrl = (user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture
+    (useImageProxy ? `${ApiHost}/api/v1/imgproxy/${window.btoa(user!.picture!)}` : user?.picture)
   const backgroundImage = `url(${avatarUrl})`
   const domain = user?.nip05 && user.nip05.split('@')[1]
   const style = { '--img-url': backgroundImage } as CSSProperties

src/Element/NoteReaction.tsx

@@ -39,7 +39,7 @@ export default function NoteReaction(props: NoteReactionProps) {
      * Some clients embed the reposted note in the content
      */
     function extractRoot() {
-        if (ev?.Kind === EventKind.Repost && ev.Content.length > 0) {
+        if (ev?.Kind === EventKind.Repost && ev.Content.length > 0 && ev.Content !== "#[0]") {
             try {
                 let r: RawEvent = JSON.parse(ev.Content);
                 return r as TaggedRawEvent;

src/Pages/settings/Preferences.tsx

@@ -71,6 +71,15 @@ const PreferencesPage = () => {
                     </select>
                 </div>
             </div>
+            <div className="card flex">
+                <div className="flex f-col f-grow">
+                    <div>Image proxy</div>
+                    <small>Use the caching image proxy to load avatars</small>
+                </div>
+                <div>
+                    <input type="checkbox" checked={perf.useImageProxy} onChange={e => dispatch(setPreferences({ ...perf, useImageProxy: e.target.checked }))} />
+                </div>
+            </div>
             <div className="card flex">
                 <div className="flex f-col f-grow">
                     <div>Debug Menus</div>

src/State/Login.ts

@@ -53,7 +53,12 @@ export interface UserPreferences {
     /**
      * File uploading service to upload attachments to
      */
-     fileUploader: "void.cat" | "nostr.build"
+    fileUploader: "void.cat" | "nostr.build",
+
+    /**
+     * Use image proxy service to compress avatars
+     */
+    useImageProxy: boolean,
 }
 
 export interface LoginStore {
@@ -155,7 +160,8 @@ const InitState = {
         confirmReposts: false,
         showDebugMenus: false,
         autoShowLatest: false,
-        fileUploader: "void.cat"
+        fileUploader: "void.cat",
+        useImageProxy: true
     }
 } as LoginStore;
 
@@ -279,7 +285,7 @@ const LoginSlice = createSlice({
 
             window.localStorage.setItem(FollowList, JSON.stringify(state.follows));
         },
-        setMuted(state, action: PayloadAction<{createdAt: number, keys: HexKey[]}>) {
+        setMuted(state, action: PayloadAction<{ createdAt: number, keys: HexKey[] }>) {
             const { createdAt, keys } = action.payload
             if (createdAt >= state.latestMuted) {
                 const muted = new Set([...keys])
@@ -287,7 +293,7 @@ const LoginSlice = createSlice({
                 state.latestMuted = createdAt
             }
         },
-        setBlocked(state, action: PayloadAction<{createdAt: number, keys: HexKey[]}>) {
+        setBlocked(state, action: PayloadAction<{ createdAt: number, keys: HexKey[] }>) {
             const { createdAt, keys } = action.payload
             if (createdAt >= state.latestMuted) {
                 const blocked = new Set([...keys])