janis/f1r3wave-website
1
0
Fork 0
mirror of https://github.com/DerTyp7/f1r3wave-website.git synced 2025-10-29 21:17:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Remove duplicates from gallery

Browse Source
This commit is contained in:
Janis
2025-10-09 20:22:51 +02:00
parent 1177408512
commit 1561ddbca9
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Gallery.tsx
View File

@@ -12,8 +12,8 @@ interface GalleryProps {
} }
export default function Gallery({ initialImages }: GalleryProps) { export default function Gallery({ initialImages }: GalleryProps) {
const HORIZONTAL_ASPECT_RATIO = 1.5; const HORIZONTAL_ASPECT_RATIO = 1.7;
const VERTICAL_ASPECT_RATIO = 0.9; const VERTICAL_ASPECT_RATIO = 0.8;
const navigationRouter = useNavigationRouter(); const navigationRouter = useNavigationRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
@@ -23,39 +23,44 @@ export default function Gallery({ initialImages }: GalleryProps) {
useEffect(() => { useEffect(() => {
const updateColumns = () => { const updateColumns = () => {
const newImages = [...initialImages]; const imageStack = [...initialImages];
const newImages: ImageMeta[] = [];
if (newImages.length > 0) { if (imageStack.length > 0) {
let usedColumnsInRow = 0; let usedColumnsInRow = 0;
let usedRowsInColumn = 0; let usedRowsInColumn = 0;
let index = 0; let index = 0;
for (const image of newImages) { for (const image of imageStack) {
console.log('image', image.id);
usedColumnsInRow += image.aspect_ratio > HORIZONTAL_ASPECT_RATIO ? 2 : 1; usedColumnsInRow += image.aspect_ratio > HORIZONTAL_ASPECT_RATIO ? 2 : 1;
usedRowsInColumn += image.aspect_ratio < VERTICAL_ASPECT_RATIO ? 2 : 1; usedRowsInColumn += image.aspect_ratio < VERTICAL_ASPECT_RATIO ? 2 : 1;
if (usedColumnsInRow > columnCount) { if (usedColumnsInRow > columnCount) {
const nextViableImage: ImageMeta | undefined = newImages.slice(index).find((img) => { const nextViableImage: ImageMeta | undefined = imageStack.slice(index).find((img) => {
const imgAspectRatio = img.aspect_ratio; const imgAspectRatio = img.aspect_ratio;
return imgAspectRatio <= HORIZONTAL_ASPECT_RATIO && image.aspect_ratio >= VERTICAL_ASPECT_RATIO; return (
imgAspectRatio <= HORIZONTAL_ASPECT_RATIO &&
image.aspect_ratio >= VERTICAL_ASPECT_RATIO &&
!newImages.find((i) => i.id === img.id)
);
}); });
if (nextViableImage) { if (nextViableImage) {
newImages.splice(index, 1); newImages.push(nextViableImage);
newImages.splice(index - 1, 0, nextViableImage);
usedColumnsInRow -= nextViableImage.aspect_ratio > HORIZONTAL_ASPECT_RATIO ? 2 : 1; usedColumnsInRow -= nextViableImage.aspect_ratio > HORIZONTAL_ASPECT_RATIO ? 2 : 1;
usedRowsInColumn -= nextViableImage.aspect_ratio < VERTICAL_ASPECT_RATIO ? 2 : 1; usedRowsInColumn -= nextViableImage.aspect_ratio < VERTICAL_ASPECT_RATIO ? 2 : 1;
} }
} else if (usedColumnsInRow === columnCount) { } else if (usedColumnsInRow === columnCount) {
newImages.push(image);
usedColumnsInRow = usedRowsInColumn; usedColumnsInRow = usedRowsInColumn;
usedRowsInColumn = 0; usedRowsInColumn = 0;
} }
index++; index++;
} }
console.log('new images', imageStack);
setImages(newImages); setImages(imageStack);
} }
}; };
@@ -73,7 +78,6 @@ export default function Gallery({ initialImages }: GalleryProps) {
} }
}; };
setImages([...initialImages]);
updateColumns(); updateColumns();
updateColumnCount(); updateColumnCount();
window.addEventListener('resize', updateColumnCount); window.addEventListener('resize', updateColumnCount);