add banner size when editing community

src/components/photo-gallery.tsx

@@ -1,32 +1,14 @@
 import { useEffect, useMemo, useState } from "react";
 import { Photo, PhotoAlbum, PhotoAlbumProps } from "react-photo-album";
-
+import { ImageSize, getImageSize } from "../helpers/image";
-type Size = { width: number; height: number };
-const imageSizeCache = new Map<string, Size>();
-function getImageSize(src: string): Promise<{ width: number; height: number }> {
-  const cached = imageSizeCache.get(src);
-  if (cached) return Promise.resolve(cached);
-
-  return new Promise((res, rej) => {
-    const image = new Image();
-    image.src = src;
-
-    image.onload = () => {
-      const size = { width: image.width, height: image.height };
-      imageSizeCache.set(src, size);
-      res(size);
-    };
-    image.onerror = (err) => rej(err);
-  });
-}
 
 export type PhotoWithoutSize = Omit<Photo, "width" | "height"> & { width?: number; height?: number };
 
 export default function PhotoGallery<T extends PhotoWithoutSize>({
   photos,
   ...props
-}: Omit<PhotoAlbumProps<T & Size>, "photos"> & { photos: PhotoWithoutSize[] }) {
+}: Omit<PhotoAlbumProps<T & ImageSize>, "photos"> & { photos: PhotoWithoutSize[] }) {
-  const [loadedSizes, setLoadedSizes] = useState<Record<string, Size>>({});
+  const [loadedSizes, setLoadedSizes] = useState<Record<string, ImageSize>>({});
 
   useEffect(() => {
     for (const photo of photos) {
@@ -40,17 +22,17 @@ export default function PhotoGallery<T extends PhotoWithoutSize>({
   }, [photos]);
 
   const loadedPhotos = useMemo(() => {
-    const loaded: (T & Size)[] = [];
+    const loaded: (T & ImageSize)[] = [];
 
     for (const photo of photos) {
       if (photo.width && photo.height) {
-        loaded.push(photo as T & Size);
+        loaded.push(photo as T & ImageSize);
         continue;
       }
 
       const loadedImage = loadedSizes[photo.src];
       if (loadedImage) {
-        loaded.push({ ...photo, width: loadedImage.width, height: loadedImage.height } as T & Size);
+        loaded.push({ ...photo, width: loadedImage.width, height: loadedImage.height } as T & ImageSize);
         continue;
       }
     }
@@ -58,5 +40,5 @@ export default function PhotoGallery<T extends PhotoWithoutSize>({
     return loaded;
   }, [loadedSizes, photos]);
 
-  return <PhotoAlbum<T & Size> photos={loadedPhotos} {...props} />;
+  return <PhotoAlbum<T & ImageSize> photos={loadedPhotos} {...props} />;
 }

src/helpers/image.ts

@@ -0,0 +1,19 @@
+export type ImageSize = { width: number; height: number };
+const imageSizeCache = new Map<string, ImageSize>();
+
+export function getImageSize(src: string): Promise<{ width: number; height: number }> {
+  const cached = imageSizeCache.get(src);
+  if (cached) return Promise.resolve(cached);
+
+  return new Promise((res, rej) => {
+    const image = new Image();
+    image.src = src;
+
+    image.onload = () => {
+      const size = { width: image.width, height: image.height };
+      imageSizeCache.set(src, size);
+      res(size);
+    };
+    image.onerror = () => rej(new Error("Failed to get image size"));
+  });
+}

src/views/communities/index.tsx

@@ -16,6 +16,7 @@ import NostrPublishAction from "../../classes/nostr-publish-action";
 import { unique } from "../../helpers/array";
 import clientRelaysService from "../../services/client-relays";
 import replaceableEventLoaderService from "../../services/replaceable-event-requester";
+import { getImageSize } from "../../helpers/image";
 
 function CommunitiesHomePage() {
   const toast = useToast();
@@ -42,7 +43,14 @@ function CommunitiesHomePage() {
       }
 
       if (values.description) draft.tags.push(["description", values.description]);
-      if (values.banner) draft.tags.push(["image", values.banner]);
+      if (values.banner) {
+        try {
+          const size = await getImageSize(values.banner);
+          draft.tags.push(["image", values.banner, `${size.width}x${size.height}`]);
+        } catch (e) {
+          draft.tags.push(["image", values.banner]);
+        }
+      }
       if (values.ranking) draft.tags.push(["rank_mode", values.ranking]);
 
       const signed = await requestSignature(draft);

src/views/community/community-home.tsx

@@ -135,7 +135,9 @@ export default function CommunityHomePage({ community }: { community: NostrEvent
           </Flex>
         </VerticalPageLayout>
       </AdditionalRelayProvider>
-      {editModal && <CommunityEditModal isOpen={editModal.isOpen} onClose={editModal.onClose} community={community} />}
+      {editModal.isOpen && (
+        <CommunityEditModal isOpen={editModal.isOpen} onClose={editModal.onClose} community={community} />
+      )}
     </>
   );
 }

src/views/community/components/community-edit-modal.tsx

@@ -19,6 +19,7 @@ import NostrPublishAction from "../../../classes/nostr-publish-action";
 import clientRelaysService from "../../../services/client-relays";
 import { unique } from "../../../helpers/array";
 import replaceableEventLoaderService from "../../../services/replaceable-event-requester";
+import { getImageSize } from "../../../helpers/image";
 
 export default function CommunityEditModal({
   isOpen,
@@ -59,7 +60,14 @@ export default function CommunityEditModal({
       }
 
       if (values.description) draft.tags.push(["description", values.description]);
-      if (values.banner) draft.tags.push(["image", values.banner]);
+      if (values.banner) {
+        try {
+          const size = await getImageSize(values.banner);
+          draft.tags.push(["image", values.banner, `${size.width}x${size.height}`]);
+        } catch (e) {
+          draft.tags.push(["image", values.banner]);
+        }
+      }
       if (values.ranking) draft.tags.push(["rank_mode", values.ranking]);
 
       const signed = await requestSignature(draft);
@@ -73,6 +81,8 @@ export default function CommunityEditModal({
 
       onClose();
     } catch (e) {
+      console.log(e);
+
       if (e instanceof Error) toast({ description: e.message, status: "error" });
     }
   };