quick hacky image proxy url

src/components/embed-types/common.tsx

@@ -18,7 +18,8 @@ export function embedImages(content: EmbedableContent, trusted = false) {
       /https?:\/\/([\dA-z\.-]+\.[A-z\.]{2,6})((?:\/[\+~%\/\.\w\-_]*)?\.(?:svg|gif|png|jpg|jpeg|webp|avif))(\??(?:[\?#\-\+=&;%@\.\w_]*)#?(?:[\-\.\!\/\\\w]*))?/i,
     render: (match) => {
       const ImageComponent = trusted || !appSettings.value.blurImages ? Image : BlurredImage;
-      return <ImageComponent src={match[0]} width="100%" maxWidth="30rem" />;
+      const src = appSettings.value.imageProxy ? `${appSettings.value.imageProxy}${match[0]}` : match[0];
+      return <ImageComponent src={src} width="100%" maxWidth="30rem" />;
     },
     name: "Image",
   });

src/services/user-app-settings.ts

@@ -25,6 +25,7 @@ export type AppSettings = {
   lightningPayMode: LightningPayMode;
   zapAmounts: number[];
   primaryColor: string;
+  imageProxy: string;
 };
 
 export const defaultSettings: AppSettings = {
@@ -37,6 +38,7 @@ export const defaultSettings: AppSettings = {
   lightningPayMode: LightningPayMode.Prompt,
   zapAmounts: [50, 200, 500, 1000],
   primaryColor: "#8DB600",
+  imageProxy: "",
 };
 
 function parseAppSettings(event: NostrEvent): AppSettings {

src/views/settings/performance-settings.tsx

@@ -9,13 +9,20 @@ import {
   Box,
   AccordionIcon,
   FormHelperText,
+  Input,
+  Link,
 } from "@chakra-ui/react";
 import appSettings, { replaceSettings } from "../../services/app-settings";
 import useSubject from "../../hooks/use-subject";
 import useAppSettings from "../../hooks/use-app-settings";
+import { useEffect, useState } from "react";
 
 export default function PerformanceSettings() {
-  const { autoShowMedia, proxyUserMedia, showReactions, showSignatureVerification, updateSettings } = useAppSettings();
+  const { autoShowMedia, proxyUserMedia, showReactions, showSignatureVerification, updateSettings, imageProxy } =
+    useAppSettings();
+
+  const [proxyInput, setProxyInput] = useState(imageProxy);
+  useEffect(() => setProxyInput(imageProxy), [imageProxy]);
 
   return (
     <AccordionItem>
@@ -46,6 +53,34 @@ export default function PerformanceSettings() {
               <span>Side Effect: Some user pictures may not load or may be outdated</span>
             </FormHelperText>
           </FormControl>
+          <FormControl>
+            <FormLabel htmlFor="image-proxy" mb="0">
+              Image proxy service
+            </FormLabel>
+            <Input
+              id="image-proxy"
+              type="url"
+              value={proxyInput}
+              onChange={(e) => setProxyInput(e.target.value)}
+              onBlur={() => {
+                try {
+                  const url = proxyInput ? new URL(proxyInput).toString() : "";
+                  if (url !== imageProxy) {
+                    updateSettings({ imageProxy: url });
+                    setProxyInput(url);
+                  }
+                } catch (e) {}
+              }}
+            />
+            <FormHelperText>
+              <span>
+                A URL to an instance of{" "}
+                <Link href="https://github.com/willnorris/imageproxy" isExternal target="_blank">
+                  willnorris/imageproxy
+                </Link>
+              </span>
+            </FormHelperText>
+          </FormControl>
           <FormControl>
             <Flex alignItems="center">
               <FormLabel htmlFor="auto-show-embeds" mb="0">