damien/neroshitron
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/neroshitron.git synced 2025-03-14 10:05:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: ability to go back using escape

Browse Source
This commit is contained in:
Damien Ostler 2024-05-26 16:45:17 -04:00
parent d8e30415cb
commit b14c9d54ad
1 changed files with 95 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
components/ui/gallery.tsx
View File

@ -16,150 +16,138 @@ const Gallery = ({ id, closeMenu }: GalleryProps) => {
const [images, setImages] = useState<string[]>([]); const [images, setImages] = useState<string[]>([]);
const [galleryId, setGalleryId] = useState(id as string); const [galleryId, setGalleryId] = useState(id as string);
const [currentIndex, setCurrentIndex] = useState(0); const [currentIndex, setCurrentIndex] = useState(0);
const goToNext = () => {
setCurrentIndex(prevIndex => (prevIndex + 1) % images.length);
}
const goToPrevious = () => {
setCurrentIndex(prevIndex => (prevIndex - 1 + images.length) % images.length);
}
console.log(id)
const getData = async () => { const getData = async () => {
const thumbnailResponse = await fetch('/api/galleries/'+String(galleryId)+'/images'); const thumbnailResponse = await fetch('/api/galleries/' + String(galleryId) + '/images');
const thumbnailUrl = await thumbnailResponse.json() as string[]; const thumbnailUrl = await thumbnailResponse.json() as string[];
setImages(thumbnailUrl); setImages(thumbnailUrl);
} }
const generateRandomString = function (length:number) {
let result = '';
let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let charactersLength = characters.length;
for ( let i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
const next = () => { const next = () => {
if (currentIndex < images.length - 1) { if (currentIndex < images.length - 1) {
setCurrentIndex(currentIndex + 1); setCurrentIndex(currentIndex + 1);
} else { } else {
setCurrentIndex(0); setCurrentIndex(0);
}
} }
}
const previous = () => { const previous = () => {
if (currentIndex > 0) { if (currentIndex > 0) {
setCurrentIndex(currentIndex - 1); setCurrentIndex(currentIndex - 1);
} else { } else {
setCurrentIndex(images.length - 1); setCurrentIndex(images.length - 1);
}
} }
}
const renderButtons = () => { const renderButtons = () => {
return ( return (
<> <>
<div className="z-20 fixed left-6 bottom-4 w-100 h-20 bg-purple-900 bg-opacity-40 animate-in rounded-3xl" style={{ backdropFilter: 'blur(10px)' }}> <div className="z-20 fixed left-6 bottom-4 w-100 h-20 bg-purple-900 bg-opacity-40 animate-in rounded-3xl" style={{ backdropFilter: 'blur(10px)' }}>
<div className='grid grid-cols-4 gap-4 pl-32 pr-4 pt-4 m-1 '> <div className='grid grid-cols-4 gap-4 pl-32 pr-4 pt-4 m-1 '>
<button <button
className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-pink-700 hover:bg-pink-600'}`} className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-pink-700 hover:bg-pink-600'}`}
onClick={() => previous()} onClick={() => previous()}
disabled={!selectedImage} disabled={!selectedImage}
> >
Previous Previous
</button> </button>
<button <button
className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-pink-700 hover:bg-pink-600'}`} className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-pink-700 hover:bg-pink-600'}`}
onClick={() => next()} onClick={() => next()}
disabled={!selectedImage} disabled={!selectedImage}
> >
Next Next
</button> </button>
<button <button
className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-purple-700 hover:bg-purple-600'}`} className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-purple-700 hover:bg-purple-600'}`}
onClick={() => selectedImage && handleDownload(selectedImage)} onClick={() => selectedImage && handleDownload(selectedImage)}
disabled={!selectedImage} disabled={!selectedImage}
> >
Download Download
</button> </button>
<button <button
className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-purple-700 hover:bg-purple-600'}`} className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 ${!selectedImage ? 'opacity-50 cursor-not-allowed bg-gray-800' : 'bg-purple-700 hover:bg-purple-600'}`}
onClick={() => selectedImage && open()} onClick={() => selectedImage && open()}
disabled={!selectedImage} disabled={!selectedImage}
> >
Open Open
</button> </button>
</div> </div>
</div> </div>
</> </>
); );
}; };
const handleDownload = (image: string) => { const handleDownload = (image: string) => {
const link = document.createElement('a'); const link = document.createElement('a');
link.href = image; link.href = image;
link.download = 'image.jpg'; // or any other filename link.download = 'image.jpg'; // or any other filename
link.style.display = 'none'; link.style.display = 'none';
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
}; };
useEffect(() => { useEffect(() => {
getData(); getData();
const handleKeyDown = (event: KeyboardEvent) => { const handleKeyDown = (event: KeyboardEvent) => {
switch (event.key) { switch (event.key) {
case 'ArrowLeft': case 'ArrowLeft':
case 'a': case 'a':
case 'A': case 'A':
previous(); previous();
break; break;
case 'ArrowRight': case 'ArrowRight':
case 'd': case 'd':
case 'D': case 'D':
next(); next();
break; break;
default: case 'Escape':
break; close();
} break;
}; default:
break;
setSelectedImage(images[currentIndex]); }
window.addEventListener('keydown', handleKeyDown); };
// Clean up the event listener when the component is unmounted
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [currentIndex]); setSelectedImage(images[currentIndex]);
window.addEventListener('keydown', handleKeyDown);
// Clean up the event listener when the component is unmounted
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [selectedImage,currentIndex]);
const handleClick = (image: string) => { const handleClick = (image: string) => {
setSelectedImage(image); setSelectedImage(image);
setCurrentIndex(images.indexOf(image)); setCurrentIndex(images.indexOf(image));
}; };
const open = () => { const open = () => {
if(selectedImage === null) return; if (selectedImage === null) return;
console.log(selectedImage) console.log(selectedImage)
let base64Image = selectedImage.split(';base64,').pop(); let base64Image = selectedImage.split(';base64,').pop();
if(!base64Image) return; if (!base64Image) return;
let blob = new Blob([Uint8Array.from(atob(base64Image), c => c.charCodeAt(0))], {type: 'image/jpeg'}); // adjust the type as needed let blob = new Blob([Uint8Array.from(atob(base64Image), c => c.charCodeAt(0))], { type: 'image/jpeg' }); // adjust the type as needed
let url = URL.createObjectURL(blob); let url = URL.createObjectURL(blob);
window.open(url, '_blank'); window.open(url, '_blank');
} }
const close = () => { const close = () => {
if(selectedImage != null){ if (selectedImage != null) {
setSelectedImage(null); setSelectedImage(null);
setImages([]);
} }
else{ else {
closeMenu(); closeMenu();
} }
} }
const breakpointColumnsObj = { const breakpointColumnsObj = {
default: 3 default: 3
}; };
return ( return (
<div className="z-20"> <div className="z-20">