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: tiles no longer get cut off

Browse Source
This commit is contained in:
Damien Ostler 2024-05-27 08:19:53 -04:00
parent 090630c507
commit f7cef69b5b
5 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/api/galleries/[id]/images/route.ts
View File

@ -71,7 +71,6 @@ export async function GET(
} }
break; break;
default: default:
blobBuffer = await blurImage(blobBuffer)
break; break;
} }
const contentType = file.name.endsWith('.png') ? 'image/png' : 'image/jpeg'; const contentType = file.name.endsWith('.png') ? 'image/png' : 'image/jpeg';

3
app/api/galleries/[id]/thumbnail/route.ts
View File

@ -62,7 +62,10 @@ const galleryId= params.id // 312
} }
break; break;
default: default:
if(gallery.nsfw){
blobBuffer = await blurImage(blobBuffer);
}
break; break;
} }
const dataUrl = `data:${contentType};base64,${blobBuffer.toString('base64')}`; const dataUrl = `data:${contentType};base64,${blobBuffer.toString('base64')}`;

3
app/gallery/page.tsx
View File

@ -118,7 +118,7 @@ function PageComponent() {
</div> </div>
<div className="absolute items-center w-2/4 h-full ml-10 z-0 overflow-hidden animate-in animate-ease-out"> <div className="absolute items-center w-2/4 h-full ml-10 z-0 overflow-hidden animate-in animate-ease-out">
<div className="grid grid-cols-3 gap-y-36 gap-x-10 h-full overflow-y-auto no-scrollbar pt-20"> <div className="grid grid-cols-3 gap-y-52 gap-x-5 h-full overflow-y-auto no-scrollbar pt-20">
{galleries && galleries.map((gallery, index) => ( {galleries && galleries.map((gallery, index) => (
<GalleryThumbnail <GalleryThumbnail
key={gallery.id} key={gallery.id}
@ -127,6 +127,7 @@ function PageComponent() {
columns={gallery.columns} columns={gallery.columns}
subscription={gallery.tier as string} subscription={gallery.tier as string}
onSelect={selectGallery} onSelect={selectGallery}
nsfw={gallery.nsfw}
></GalleryThumbnail> ></GalleryThumbnail>
))} ))}
<div className="pt-10"></div> <div className="pt-10"></div>

2
components/ui/gallery.tsx
View File

@ -141,10 +141,8 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
const panZoomRef = useRef<any>(null); const panZoomRef = useRef<any>(null);
const resetPanZoom = (event: any) => { const resetPanZoom = (event: any) => {
console.log(event.target.id)
if (panZoomRef.current && event.target.id != "image-container") { if (panZoomRef.current && event.target.id != "image-container") {
panZoomRef.current.autoCenter(); panZoomRef.current.autoCenter();
console.log("POGER")
} }
}; };

21
components/ui/gallery_thumbnail.tsx
View File

@ -6,15 +6,16 @@ interface GalleryThumbnailProps {
onSelect: (id: string, columns: number) => void; onSelect: (id: string, columns: number) => void;
title: string; title: string;
subscription: string; subscription: string;
nsfw: boolean;
} }
const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: GalleryThumbnailProps) => { const GalleryThumbnail = ({ id, columns, onSelect, title,nsfw, subscription }: GalleryThumbnailProps) => {
const [galleryId, setGalleryId] = useState<string>(id); const [galleryId, setGalleryId] = useState<string>(id);
const [thumbnailUrl, setThumbnailUrl] = useState<string>(''); const [thumbnailUrl, setThumbnailUrl] = useState<string>('');
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
const [galleryCollumns, setColumns] = useState<number>(columns); const [galleryCollumns, setColumns] = useState<number>(columns);
const [imageCount, setImageCount] = useState<number>(0); const [imageCount, setImageCount] = useState<number>(0);
const [nsfwState, setNsfw] = useState<boolean>(nsfw);
const openGallery = () => { const openGallery = () => {
onSelect(galleryId, galleryCollumns); onSelect(galleryId, galleryCollumns);
}; };
@ -36,7 +37,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: Galler
return ( return (
<div className="py-3 sm:max-w-xl sm:mx-auto flex-3 animate-in"> <div className="py-3 sm:max-w-xl sm:mx-auto flex-3 animate-in">
<div className="h-48 overflow-visible w-full relative hover:scale-105 shadow-lg bg-gray-400 rounded-3xl"> <div className="h-48 overflow-visible w-full relative hover:scale-95 shadow-lg bg-gray-400 rounded-3xl">
{!isLoading && ( {!isLoading && (
<> <>
<img <img
@ -47,13 +48,15 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: Galler
key={galleryId} key={galleryId}
style={{ width: '20rem', height: '20rem', objectFit: 'cover' }} style={{ width: '20rem', height: '20rem', objectFit: 'cover' }}
/> />
<div className="absolute top-2 left-0 w-full h-10% bg-gray-900 bg-opacity-10 backdrop-blur-sm p-2 rounded-md shadow-lg flex flex-col justify-end"> <div className="bottom-0 left-0 w-full h-10% bg-gray-900 bg-opacity-10 backdrop-blur-sm p-2 rounded-md shadow-lg flex flex-col justify-end">
<div className="text-white flex justify-between"> <div className="text-white flex justify-between">
<div> <div>
<div className="flex"> <div className="flex">
<h3 className="pr-4 text-lg font-bold break-words" style={{ lineHeight: '2rem', textShadow: '0 0 2px black' }}>{title}</h3> <h3 className="pr-4 text-lg font-bold break-words" style={{ lineHeight: '2rem', textShadow: '0 0 2px black' }}>{title}</h3>
</div> </div>
</div> </div>
</div>
<div className="text-white flex justify-between">
<div className="flex items-center"> <div className="flex items-center">
<div className="relative group"> <div className="relative group">
<div className="absolute top-0 right-2 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block"> <div className="absolute top-0 right-2 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block">
@ -69,9 +72,15 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: Galler
<div className="text-center">{imageCount} pictures in this gallery.</div> <div className="text-center">{imageCount} pictures in this gallery.</div>
</div> </div>
</div> </div>
{subscription === "Free" && ( {(nsfwState) && (
<div className="relative group"> <div className="relative group">
<span className="bg-gray-900 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Free</span> <span className="bg-red-900 text-white px-2 py-1 mr-2 rounded-md text-sm h-full flex items-center">NSFW</span>
</div>
)}
{subscription === "Free" && (
<div className="relative group"> <span className="bg-gray-900 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Free</span>
<div className="absolute top-0 right-12 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block"> <div className="absolute top-0 right-12 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block">
<div className="text-center">This is free for everyone.</div> <div className="text-center">This is free for everyone.</div>
</div> </div>