highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-04-13 22:29:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

add banner size when editing community

Browse Source
This commit is contained in:
hzrd149 2023-10-24 11:37:19 -05:00
parent 1d51b9490e
commit e99d9e40f5
5 changed files with 49 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/photo-gallery.tsx
View File

@ -1,32 +1,14 @@
import { useEffect, useMemo, useState } from "react";
import { Photo, PhotoAlbum, PhotoAlbumProps } from "react-photo-album";
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);
});
}
import { ImageSize, getImageSize } from "../helpers/image";
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[] }) {
const [loadedSizes, setLoadedSizes] = useState<Record<string, Size>>({});
}: Omit<PhotoAlbumProps<T & ImageSize>, "photos"> & { photos: PhotoWithoutSize[] }) {
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} />;
}

19
src/helpers/image.ts Normal file
View File

@ -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"));
});
}

10
src/views/communities/index.tsx
View File

@ -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);

4
src/views/community/community-home.tsx
View File

@ -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} />
)}
</>
);
}

12
src/views/community/components/community-edit-modal.tsx
View File

@ -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" });
}
};