From 1022c542e4c682066a9817bf818aef069240af50 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Tue, 22 Aug 2023 14:58:03 +0300
Subject: [PATCH] SafeImg -> ProxyImg

---
 src/js/components/{SafeImg.tsx => ProxyImg.tsx} | 8 ++++----
 src/js/components/embed/Image.tsx               | 6 +++---
 src/js/components/feed/ImageGridItem.tsx        | 4 ++--
 src/js/components/feed/ImageModal.tsx           | 4 ++--
 src/js/components/modal/Image.tsx               | 4 ++--
 src/js/components/searchbox/SearchResult.tsx    | 4 ++--
 src/js/components/user/Avatar.tsx               | 4 ++--
 src/js/components/user/ProfilePicture.tsx       | 6 +++---
 src/js/views/profile/EditProfile.tsx            | 4 ++--
 src/js/views/profile/Profile.tsx                | 4 ++--
 10 files changed, 24 insertions(+), 24 deletions(-)
 rename src/js/components/{SafeImg.tsx => ProxyImg.tsx} (91%)

diff --git a/src/js/components/SafeImg.tsx b/src/js/components/ProxyImg.tsx
similarity index 91%
rename from src/js/components/SafeImg.tsx
rename to src/js/components/ProxyImg.tsx
index a3ed25047..fb5c30f69 100644
--- a/src/js/components/SafeImg.tsx
+++ b/src/js/components/ProxyImg.tsx
@@ -18,11 +18,11 @@ const safeOrigins = [
   'https://imgproxy.iris.to/',
 ];
 
-export const isSafeOrigin = (url: string) => {
+export const shouldSkipProxy = (url: string) => {
   return safeOrigins.some((origin) => url.startsWith(origin));
 };
 
-const SafeImg = (props: Props) => {
+const ProxyImg = (props: Props) => {
   const [proxyFailed, setProxyFailed] = useState(false);
   const [src, setSrc] = useState(props.src);
 
@@ -31,7 +31,7 @@ const SafeImg = (props: Props) => {
     if (
       props.src &&
       !props.src.startsWith('data:image') &&
-      (!isSafeOrigin(props.src) || props.width)
+      (!shouldSkipProxy(props.src) || props.width)
     ) {
       const originalSrc = props.src;
       if (props.width) {
@@ -70,4 +70,4 @@ const SafeImg = (props: Props) => {
   );
 };
 
-export default SafeImg;
+export default ProxyImg;
diff --git a/src/js/components/embed/Image.tsx b/src/js/components/embed/Image.tsx
index 30ece5538..a72d2a776 100644
--- a/src/js/components/embed/Image.tsx
+++ b/src/js/components/embed/Image.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import Show from '../helpers/Show';
 import Modal from '../modal/Modal';
-import SafeImg from '../SafeImg';
+import ProxyImg from '../ProxyImg.tsx';
 
 import Embed from './index';
 
@@ -26,7 +26,7 @@ const Image: Embed = {
         key={match + index}
         className="flex justify-center items-center md:justify-start min-h-96 my-2"
       >
-        <SafeImg
+        <ProxyImg
           onError={() => setHasError(true)}
           onClick={onClick}
           className="my-2 rounded md:max-h-96 max-w-full cursor-pointer"
@@ -34,7 +34,7 @@ const Image: Embed = {
         />
         <Show when={showModal}>
           <Modal centerVertically={true} onClose={() => setShowModal(false)}>
-            <SafeImg className="rounded max-h-[90vh] max-w-[90vw]" src={match} />
+            <ProxyImg className="rounded max-h-[90vh] max-w-[90vw]" src={match} />
           </Modal>
         </Show>
       </div>
diff --git a/src/js/components/feed/ImageGridItem.tsx b/src/js/components/feed/ImageGridItem.tsx
index a6946f2c8..a202c5bd5 100644
--- a/src/js/components/feed/ImageGridItem.tsx
+++ b/src/js/components/feed/ImageGridItem.tsx
@@ -1,7 +1,7 @@
 import { route } from 'preact-router';
 
 import { ImageOrVideo } from '@/components/feed/types';
-import SafeImg from '@/components/SafeImg';
+import ProxyImg from '@/components/ProxyImg.tsx';
 import Key from '@/nostr/Key';
 import Icons from '@/utils/Icons';
 
@@ -34,7 +34,7 @@ export const ImageGridItem = ({
       }}
       ref={lastElementRef}
     >
-      <SafeImg square={true} width={319} src={url} alt="" className="w-full h-full object-cover" />
+      <ProxyImg square={true} width={319} src={url} alt="" className="w-full h-full object-cover" />
       {item.type === 'video' && (
         <div className="absolute top-0 right-0 m-2 shadow-md shadow-gray-500 ">{Icons.video}</div>
       )}
diff --git a/src/js/components/feed/ImageModal.tsx b/src/js/components/feed/ImageModal.tsx
index 102b6d37a..70103146d 100644
--- a/src/js/components/feed/ImageModal.tsx
+++ b/src/js/components/feed/ImageModal.tsx
@@ -4,7 +4,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid';
 import EventComponent from '@/components/events/EventComponent';
 import { ImageOrVideo } from '@/components/feed/types';
 import Modal from '@/components/modal/Modal';
-import SafeImg from '@/components/SafeImg';
+import ProxyImg from '@/components/ProxyImg.tsx';
 
 type ImageModalProps = {
   mediaItems: Array<ImageOrVideo>;
@@ -63,7 +63,7 @@ const ImageModal = ({ mediaItems, activeItemIndex, setActiveItemIndex }: ImageMo
               poster={`https://imgproxy.iris.to/thumbnail/638/${activeItem.url}`}
             />
           ) : (
-            <SafeImg
+            <ProxyImg
               key={activeItem.url}
               className="max-h-full max-w-full object-contain"
               src={activeItem.url}
diff --git a/src/js/components/modal/Image.tsx b/src/js/components/modal/Image.tsx
index b68633075..f7acba13a 100644
--- a/src/js/components/modal/Image.tsx
+++ b/src/js/components/modal/Image.tsx
@@ -1,5 +1,5 @@
 import Modal from '@/components/modal/Modal';
-import SafeImg from '@/components/SafeImg';
+import ProxyImg from '@/components/ProxyImg.tsx';
 
 type SimpleImageModalProps = {
   imageUrl: string;
@@ -10,7 +10,7 @@ const SimpleImageModal = ({ imageUrl, onClose }: SimpleImageModalProps) => {
   return (
     <Modal width="100%" height="100%" onClose={onClose}>
       <div className="flex h-full justify-center items-center">
-        <SafeImg className="max-h-full max-w-full object-contain" src={imageUrl} />
+        <ProxyImg className="max-h-full max-w-full object-contain" src={imageUrl} />
       </div>
     </Modal>
   );
diff --git a/src/js/components/searchbox/SearchResult.tsx b/src/js/components/searchbox/SearchResult.tsx
index 156ca75b6..4e3288ff2 100644
--- a/src/js/components/searchbox/SearchResult.tsx
+++ b/src/js/components/searchbox/SearchResult.tsx
@@ -1,4 +1,4 @@
-import SafeImg from '@/components/SafeImg.tsx';
+import ProxyImg from '@/components/ProxyImg.tsx';
 import Avatar from '@/components/user/Avatar.tsx';
 import Name from '@/components/user/Name.tsx';
 import Key from '@/nostr/Key.ts';
@@ -28,7 +28,7 @@ export default function SearchResult({ item, onClick, onFocus, selected }) {
       onClick={(e) => onClick(e, item)}
     >
       {item.picture ? (
-        <SafeImg src={item.picture} className="rounded-full" width={40} />
+        <ProxyImg src={item.picture} className="rounded-full" width={40} />
       ) : (
         <Avatar key={`${npub}ic`} str={npub} width={40} />
       )}
diff --git a/src/js/components/user/Avatar.tsx b/src/js/components/user/Avatar.tsx
index f92bff186..2784d4367 100644
--- a/src/js/components/user/Avatar.tsx
+++ b/src/js/components/user/Avatar.tsx
@@ -7,7 +7,7 @@ import { useProfile } from '@/nostr/hooks/useProfile.ts';
 import Key from '../../nostr/Key';
 import SocialNetwork from '../../nostr/SocialNetwork';
 import Show from '../helpers/Show';
-import SafeImg from '../SafeImg';
+import ProxyImg from '../ProxyImg.tsx';
 
 type Props = {
   str: unknown;
@@ -62,7 +62,7 @@ const MyAvatar: React.FC<Props> = (props) => {
     >
       <div>
         <Show when={hasPic}>
-          <SafeImg
+          <ProxyImg
             className="object-cover rounded-full"
             src={picture || ''}
             width={width}
diff --git a/src/js/components/user/ProfilePicture.tsx b/src/js/components/user/ProfilePicture.tsx
index 29cd71e83..2a787082d 100644
--- a/src/js/components/user/ProfilePicture.tsx
+++ b/src/js/components/user/ProfilePicture.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'preact/hooks';
 
 import Modal from '../modal/Modal';
-import SafeImg from '../SafeImg';
+import ProxyImg from '../ProxyImg.tsx';
 
 type Props = { picture?: string; onError?: () => void };
 
@@ -22,7 +22,7 @@ const ProfilePicture = ({ picture, onError }: Props) => {
 
   return (
     <div className="rounded-full border-4 border-black bg-black">
-      <SafeImg
+      <ProxyImg
         width={128}
         square={true}
         className="rounded-full cursor-pointer"
@@ -32,7 +32,7 @@ const ProfilePicture = ({ picture, onError }: Props) => {
       />
       {showModal && (
         <Modal centerVertically={true} onClose={handleClose}>
-          <SafeImg
+          <ProxyImg
             className="max-w-full max-h-[90vh]"
             square={true}
             src={picture}
diff --git a/src/js/views/profile/EditProfile.tsx b/src/js/views/profile/EditProfile.tsx
index b6f5d7bfa..dd19f7419 100644
--- a/src/js/views/profile/EditProfile.tsx
+++ b/src/js/views/profile/EditProfile.tsx
@@ -7,7 +7,7 @@ import { RouteProps } from '@/views/types.ts';
 
 import Upload from '../../components/buttons/Upload.tsx';
 import Header from '../../components/header/Header.tsx';
-import SafeImg from '../../components/SafeImg.tsx';
+import ProxyImg from '../../components/ProxyImg.tsx';
 import Key from '../../nostr/Key.ts';
 import SocialNetwork from '../../nostr/SocialNetwork.ts';
 import { translate as t } from '../../translations/Translation.mjs';
@@ -115,7 +115,7 @@ const EditProfile: React.FC<RouteProps> = () => {
                       </p>
                       {val && (
                         <p>
-                          <SafeImg key={val} src={val} />
+                          <ProxyImg key={val} src={val} />
                         </p>
                       )}
                     </>
diff --git a/src/js/views/profile/Profile.tsx b/src/js/views/profile/Profile.tsx
index 41c992286..da1cbe811 100644
--- a/src/js/views/profile/Profile.tsx
+++ b/src/js/views/profile/Profile.tsx
@@ -10,7 +10,7 @@ import ProfileHelmet from '@/views/profile/Helmet.tsx';
 
 import Feed from '../../components/feed/Feed.tsx';
 import Show from '../../components/helpers/Show.tsx';
-import { isSafeOrigin } from '../../components/SafeImg.tsx';
+import { shouldSkipProxy } from '../../components/ProxyImg.tsx';
 import ProfileCard from '../../components/user/ProfileCard.tsx';
 import Key from '../../nostr/Key.ts';
 import SocialNetwork from '../../nostr/SocialNetwork.ts';
@@ -50,7 +50,7 @@ function Profile(props) {
         return;
       }
 
-      bannerURL = isSafeOrigin(bannerURL)
+      bannerURL = shouldSkipProxy(bannerURL)
         ? bannerURL
         : `https://imgproxy.iris.to/insecure/rs:fit:948:948/plain/${bannerURL}`;