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

Fix fullscreen image url

Browse Source
This commit is contained in:
Janis
2025-10-09 17:54:17 +02:00
parent 62bffebcc8
commit af90528cfc
3 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/api/images/route.ts
View File

@@ -20,7 +20,7 @@ export async function GET(request: NextRequest) {
const images: ImageMeta[] = await getImageData(); const images: ImageMeta[] = await getImageData();
let responseImages = images; let responseImages = images;
if (tag) { if (tag && tag.toLowerCase() !== 'all') {
responseImages = responseImages.filter((image: ImageMeta) => image.tags.includes(tag)); responseImages = responseImages.filter((image: ImageMeta) => image.tags.includes(tag));
} }

34
src/components/Gallery.tsx
View File

@@ -19,7 +19,7 @@ export default function Gallery({ initialImages }: GalleryProps) {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const [images, setImages] = useState<ImageMeta[]>([]); const [images, setImages] = useState<ImageMeta[]>([]);
const [columnCount, setColumnCount] = useState(0); const [columnCount, setColumnCount] = useState(0);
const [fullScreenImage, setFullScreenImage] = useState<string | null>(null); const [fullScreenImageId, setFullScreenImageId] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
const updateColumns = () => { const updateColumns = () => {
@@ -81,18 +81,14 @@ export default function Gallery({ initialImages }: GalleryProps) {
}, [columnCount, initialImages]); }, [columnCount, initialImages]);
useEffect(() => { useEffect(() => {
const imagePath = searchParams.get('image'); const imageId = searchParams.get('image');
setFullScreenImageId(imageId);
if (imagePath) {
setFullScreenImage(`/images/${imagePath}`);
}
}, [searchParams]); }, [searchParams]);
useEffect(() => { useEffect(() => {
if (fullScreenImage) { if (fullScreenImageId) {
const params = new URLSearchParams(searchParams.toString()); const params = new URLSearchParams(searchParams.toString());
const relativePath = fullScreenImage.replace('/images/', ''); params.set('image', fullScreenImageId);
params.set('image', relativePath);
navigationRouter.replace(`?${params.toString()}`, { scroll: false }); navigationRouter.replace(`?${params.toString()}`, { scroll: false });
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
@@ -107,7 +103,7 @@ export default function Gallery({ initialImages }: GalleryProps) {
return () => { return () => {
document.body.style.overflow = ''; document.body.style.overflow = '';
}; };
}, [fullScreenImage, searchParams, navigationRouter]); }, [fullScreenImageId, searchParams, navigationRouter]);
useEffect(() => { useEffect(() => {
const params = new URLSearchParams(searchParams.toString()); const params = new URLSearchParams(searchParams.toString());
@@ -133,16 +129,16 @@ export default function Gallery({ initialImages }: GalleryProps) {
loading="lazy" loading="lazy"
src={`/api/images/${image.id}`} src={`/api/images/${image.id}`}
alt={image.aspect_ratio?.toString()} alt={image.aspect_ratio?.toString()}
onClick={() => setFullScreenImage(`/images/${image.relative_path}`)} onClick={() => setFullScreenImageId(image.id)}
/> />
</div> </div>
))} ))}
</div> </div>
{fullScreenImage && ( {fullScreenImageId && (
<div className={styles.fullscreenModal} onClick={() => setFullScreenImage(null)}> <div className={styles.fullscreenModal} onClick={() => setFullScreenImageId(null)}>
<Image <Image
src={fullScreenImage} src={`/api/images/${fullScreenImageId}`}
alt="Full Screen" alt="Full Screen"
width={1920} width={1920}
height={1080} height={1080}
@@ -153,7 +149,7 @@ export default function Gallery({ initialImages }: GalleryProps) {
className={styles.closeButton} className={styles.closeButton}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setFullScreenImage(null); setFullScreenImageId(null);
}}> }}>
&times; &times;
</button> </button>
@@ -162,9 +158,9 @@ export default function Gallery({ initialImages }: GalleryProps) {
className={`${styles.arrowButton} ${styles.arrowButtonLeft}`} className={`${styles.arrowButton} ${styles.arrowButtonLeft}`}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
const currentIndex = images.findIndex((image) => `/images/${image.relative_path}` === fullScreenImage); const currentIndex = images.findIndex((image) => image.id === fullScreenImageId);
if (currentIndex > 0) { if (currentIndex > 0) {
setFullScreenImage(`/images/${images[currentIndex - 1].relative_path}`); setFullScreenImageId(images[currentIndex - 1].id);
} }
}}> }}>
&#8249; &#8249;
@@ -174,9 +170,9 @@ export default function Gallery({ initialImages }: GalleryProps) {
className={`${styles.arrowButton} ${styles.arrowButtonRight}`} className={`${styles.arrowButton} ${styles.arrowButtonRight}`}
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
const currentIndex = images.findIndex((image) => `/images/${image.relative_path}` === fullScreenImage); const currentIndex = images.findIndex((image) => image.id === fullScreenImageId);
if (currentIndex < images.length - 1) { if (currentIndex < images.length - 1) {
setFullScreenImage(`/images/${images[currentIndex + 1].relative_path}`); setFullScreenImageId(images[currentIndex + 1].id);
} }
}}> }}>
&#8250; &#8250;

14
src/components/ImageManager.tsx
View File

@@ -31,6 +31,18 @@ export default function ImageManager({ images: initialImages, tags: initialTags
}); });
}; };
const fetchImages = () => {
fetch(`/api/images?imagesPerPage=-1&tag=${activeTag}`, {
method: 'GET',
})
.then((response) => response.json())
.then((newImages) => {
if (newImages && newImages.images) {
setImages(newImages.images);
}
});
};
const onDelete = (id: string) => { const onDelete = (id: string) => {
fetch(`/api/images/${id}`, { fetch(`/api/images/${id}`, {
method: 'DELETE', method: 'DELETE',
@@ -41,8 +53,8 @@ export default function ImageManager({ images: initialImages, tags: initialTags
if (response.error) { if (response.error) {
setError(response.error); setError(response.error);
} else { } else {
setImages(images.filter((image) => image.id !== id));
fetchTags(); fetchTags();
fetchImages();
} }
}); });
}; };