From f7cef69b5bc906da214a716fc6a3ddfeafbf74e2 Mon Sep 17 00:00:00 2001
From: Damien Ostler <damienostler1@outlook.com>
Date: Mon, 27 May 2024 08:19:53 -0400
Subject: [PATCH] fix: tiles no longer get cut off

---
 app/api/galleries/[id]/images/route.ts    |  1 -
 app/api/galleries/[id]/thumbnail/route.ts |  5 ++++-
 app/gallery/page.tsx                      |  3 ++-
 components/ui/gallery.tsx                 |  2 --
 components/ui/gallery_thumbnail.tsx       | 21 +++++++++++++++------
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/app/api/galleries/[id]/images/route.ts b/app/api/galleries/[id]/images/route.ts
index 941a19f..1e6bf93 100644
--- a/app/api/galleries/[id]/images/route.ts
+++ b/app/api/galleries/[id]/images/route.ts
@@ -71,7 +71,6 @@ export async function GET(
         }
         break;
       default:
-        blobBuffer = await blurImage(blobBuffer)
         break;
     }
     const contentType = file.name.endsWith('.png') ? 'image/png' : 'image/jpeg';
diff --git a/app/api/galleries/[id]/thumbnail/route.ts b/app/api/galleries/[id]/thumbnail/route.ts
index 47042b3..e6e9d63 100644
--- a/app/api/galleries/[id]/thumbnail/route.ts
+++ b/app/api/galleries/[id]/thumbnail/route.ts
@@ -62,7 +62,10 @@ const galleryId= params.id  // 312
         }
         break;
       default:
-        
+        if(gallery.nsfw){
+          blobBuffer = await blurImage(blobBuffer);
+  
+        }
         break;
     }
     const dataUrl = `data:${contentType};base64,${blobBuffer.toString('base64')}`;
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
index b8e8387..767b4c2 100644
--- a/app/gallery/page.tsx
+++ b/app/gallery/page.tsx
@@ -118,7 +118,7 @@ function PageComponent() {
             </div>
 
             <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) => (
                   <GalleryThumbnail
                     key={gallery.id}
@@ -127,6 +127,7 @@ function PageComponent() {
                     columns={gallery.columns}
                     subscription={gallery.tier as string}
                     onSelect={selectGallery}
+                    nsfw={gallery.nsfw}
                   ></GalleryThumbnail>
                 ))}
                 <div className="pt-10"></div>
diff --git a/components/ui/gallery.tsx b/components/ui/gallery.tsx
index 15c898d..6a3a739 100644
--- a/components/ui/gallery.tsx
+++ b/components/ui/gallery.tsx
@@ -141,10 +141,8 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
     const panZoomRef = useRef<any>(null);
   
     const resetPanZoom = (event: any) => {
-        console.log(event.target.id)
         if (panZoomRef.current &&  event.target.id != "image-container") {
           panZoomRef.current.autoCenter();
-          console.log("POGER")
         }   
       };
 
diff --git a/components/ui/gallery_thumbnail.tsx b/components/ui/gallery_thumbnail.tsx
index 1cf459d..663e7ad 100644
--- a/components/ui/gallery_thumbnail.tsx
+++ b/components/ui/gallery_thumbnail.tsx
@@ -6,15 +6,16 @@ interface GalleryThumbnailProps {
     onSelect: (id: string, columns: number) => void;
     title: 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 [thumbnailUrl, setThumbnailUrl] = useState<string>('');
     const [isLoading, setIsLoading] = useState<boolean>(true);
     const [galleryCollumns, setColumns] = useState<number>(columns);
     const [imageCount, setImageCount] = useState<number>(0);
-
+    const [nsfwState, setNsfw] = useState<boolean>(nsfw);
     const openGallery = () => {
         onSelect(galleryId, galleryCollumns);
     };
@@ -36,7 +37,7 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: Galler
 
     return (
         <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 && (
                     <>
                         <img
@@ -47,13 +48,15 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: Galler
                             key={galleryId}
                             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>
                                     <div className="flex">
                                         <h3 className="pr-4 text-lg font-bold break-words" style={{ lineHeight: '2rem', textShadow: '0 0 2px black' }}>{title}</h3>
                                     </div>
                                 </div>
+                            </div>
+                            <div className="text-white flex justify-between">
                                 <div className="flex items-center">
                                     <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">
@@ -69,9 +72,15 @@ const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: Galler
                                             <div className="text-center">{imageCount} pictures in this gallery.</div>
                                         </div>
                                     </div>
+                                    {(nsfwState) && (
+                                    <div className="relative group">
+                                        <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="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="text-center">This is free for everyone.</div>
                                             </div>