diff --git a/frontend/src/party/view/SubmissionGallery.tsx b/frontend/src/party/view/SubmissionGallery.tsx index f34902f..9125fdf 100644 --- a/frontend/src/party/view/SubmissionGallery.tsx +++ b/frontend/src/party/view/SubmissionGallery.tsx @@ -1,91 +1,93 @@ import 'photoswipe/dist/photoswipe.css'; -import { useEffect, useState } from 'react'; +import {useEffect, useRef, useState} from 'react'; import { FaStar } from 'react-icons/fa'; import { Gallery, Item } from 'react-photoswipe-gallery'; import { PartySubmissionResponse } from '../../api/api-models'; import { getImageUrl, getThumbnailUrl } from '../../api/api'; import PartyPosition from './rewards/PartyPosition'; import { avgRatingTwoDecimals, totalRating } from './util'; +import PhotoSwipe from 'photoswipe'; interface ImageDimensions { width: number; height: number; } -function useImageDimensions(imageUrls: string[], imageIds: string[]): Map { +function SubmissionGallery({ submissions }: { submissions: PartySubmissionResponse[] }) { const [dimensions, setDimensions] = useState>(new Map()); + const pswpRef = useRef(null); + const urlKey = submissions.map((s) => s.imageId).join(','); useEffect(() => { - const newDimensions = new Map(); - let loadedCount = 0; + setDimensions(new Map()); - imageUrls.forEach((url, idx) => { + submissions.forEach((submission, index) => { const img = new Image(); - img.src = url; - img.onload = () => { - newDimensions.set(imageIds[idx], { width: img.naturalWidth, height: img.naturalHeight }); - loadedCount++; - if (loadedCount === imageUrls.length) { - setDimensions(new Map(newDimensions)); - } - }; - img.onerror = () => { - // Fallback dimensions - newDimensions.set(imageIds[idx], { width: 800, height: 600 }); - loadedCount++; - if (loadedCount === imageUrls.length) { - setDimensions(new Map(newDimensions)); + img.src = getImageUrl(submission.imageId); + const applyDimensions = (width: number, height: number) => { + setDimensions((prev) => new Map(prev).set(submission.id, { width, height })); + + // If the gallery is open, adjust the image dimensions and refresh the slide (in case it was opened before completely loaded) + const photoswipe = pswpRef.current; + if (photoswipe) { + const dataSource = photoswipe.options.dataSource as Array>; + if (Array.isArray(dataSource) && dataSource[index]) { + dataSource[index].w = width; + dataSource[index].h = height; + photoswipe.refreshSlideContent(index); + } } }; + img.onload = () => applyDimensions(img.naturalWidth, img.naturalHeight); + img.onerror = () => applyDimensions(800, 600); }); - }, imageUrls); - - return dimensions; -} - -function SubmissionGallery({ submissions }: { submissions: PartySubmissionResponse[] }) { - const originalUrls = submissions.map((s) => getImageUrl(s.imageId)); - const imageIds = submissions.map((s) => s.id); - const dimensions = useImageDimensions(originalUrls, imageIds); + }, [urlKey]); return ( - - {submissions.map((submission, i) => { - const currentDimensions = dimensions.get(submission.id); - return ( -