From 035f33250e183a3c38ff53d7e05abedc731330d4 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Mon, 4 Aug 2025 12:22:06 +0700
Subject: [PATCH 1/2] fix: download selected image in detail

---
 components/main/image-detail.tsx | 150 +++++++++++++++++++++----------
 1 file changed, 104 insertions(+), 46 deletions(-)

diff --git a/components/main/image-detail.tsx b/components/main/image-detail.tsx
index a42ddc01..5f5b0eee 100644
--- a/components/main/image-detail.tsx
+++ b/components/main/image-detail.tsx
@@ -219,55 +219,95 @@ const DetailImage = (data: any) => {
     await postActivityLog(data);
   }
 
+  // const handleDownload = () => {
+  //   if (downloadProgress === 0) {
+  //     if (!imageSizeSelected) {
+  //       alert("Please select an image size before downloading.");
+  //       return;
+  //     }
+
+  //     if (!userId) {
+  //       router.push("/auth");
+  //     } else {
+  //       sendActivityLog(2);
+  //       sendActivityLog(3);
+
+  //       if (isDownloadAll) {
+  //         let url: string;
+  //         const baseId = slug.split("-")?.[0];
+
+  //         // if (type === "1") {
+  //         // url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${resolutionSelected}`;
+  //         // } else if (type === "2") {
+  //         url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`;
+  //         // } else {
+  //         //   url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}`;
+  //         // }
+
+  //         downloadFile(url, "FileDownload.zip");
+  //       } else {
+  //         if (isFromSPIT && main?.url?.includes("spit.humas")) {
+  //           downloadFile(`${main?.url}`, `${main.names}`);
+  //         } else {
+  //           // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
+  //           // downloadFile(url, `${main.names}`);
+  //           const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
+  //           downloadFile(url, `${main.names}`);
+  //         }
+  //       }
+  //       // } else if (type === "1" && resolutionSelected?.length > 0) {
+  //       //   if (isFromSPIT && main?.url?.includes("spit.humas")) {
+  //       //     downloadFile(`${main?.url}`, `${main.names}`);
+  //       //   } else {
+  //       //     const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
+  //       //     downloadFile(url, `${main.names}`);
+  //       //   }
+  //       // } else if (type === "2" && imageSizeSelected?.length > 0) {
+  //       // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
+  //       // downloadFile(url, `${main.names}`);
+  //       // } else if (type === "3" || type === "4") {
+  //       //   downloadFile(`${main?.url}`, `${main.names}`);
+  //       // }
+  //     }
+  //   }
+  // };
+
   const handleDownload = () => {
-    if (downloadProgress === 0) {
-      if (!imageSizeSelected) {
-        alert("Please select an image size before downloading.");
+    if (downloadProgress !== 0) return;
+
+    if (!imageSizeSelected) {
+      alert("Please select an image size before downloading.");
+      return;
+    }
+
+    if (!userId) {
+      router.push("/auth");
+      return;
+    }
+
+    sendActivityLog(2);
+    sendActivityLog(3);
+
+    if (isDownloadAll) {
+      const baseId = slug.split("-")?.[0];
+      const url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`;
+      downloadFile(url, "FileDownload.zip");
+    } else {
+      const selectedFile = detailDataImage?.files?.[selectedImage];
+
+      if (!selectedFile) {
+        toast({
+          description: "Gambar tidak ditemukan.",
+          variant: "destructive",
+        });
         return;
       }
 
-      if (!userId) {
-        router.push("/auth");
+      if (isFromSPIT && selectedFile?.url?.includes("spit.humas")) {
+        downloadFile(selectedFile.url, selectedFile.names || "image.jpg");
       } else {
-        sendActivityLog(2);
-        sendActivityLog(3);
-
-        if (isDownloadAll) {
-          let url: string;
-          const baseId = slug.split("-")?.[0];
-
-          // if (type === "1") {
-          // url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${resolutionSelected}`;
-          // } else if (type === "2") {
-          url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`;
-          // } else {
-          //   url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}`;
-          // }
-
-          downloadFile(url, "FileDownload.zip");
-        } else {
-          if (isFromSPIT && main?.url?.includes("spit.humas")) {
-            downloadFile(`${main?.url}`, `${main.names}`);
-          } else {
-            // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
-            // downloadFile(url, `${main.names}`);
-            const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
-            downloadFile(url, `${main.names}`);
-          }
-        }
-        // } else if (type === "1" && resolutionSelected?.length > 0) {
-        //   if (isFromSPIT && main?.url?.includes("spit.humas")) {
-        //     downloadFile(`${main?.url}`, `${main.names}`);
-        //   } else {
-        //     const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`;
-        //     downloadFile(url, `${main.names}`);
-        //   }
-        // } else if (type === "2" && imageSizeSelected?.length > 0) {
-        // const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
-        // downloadFile(url, `${main.names}`);
-        // } else if (type === "3" || type === "4") {
-        //   downloadFile(`${main?.url}`, `${main.names}`);
-        // }
+        const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${selectedFile.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
+        downloadFile(url, selectedFile.names || "image.jpg");
       }
     }
   };
@@ -552,7 +592,23 @@ const DetailImage = (data: any) => {
                 <Skeleton className="rounded-lg w-[120px] h-[90px]" />
               </div>
             ) : (
-              <div className="py-4 flex flex-row gap-3">
+              // <div className="py-4 flex flex-row gap-3">
+              //   {detailDataImage?.files?.map((file: any, index: number) => (
+              //     <a onClick={() => setSelectedImage(index)} key={file?.id}>
+              //       <Image
+              //         placeholder={`data:image/svg+xml;base64,${toBase64(
+              //           shimmer(700, 475)
+              //         )}`}
+              //         width={1920}
+              //         height={1080}
+              //         alt="image-small"
+              //         src={file?.url}
+              //         className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
+              //       />
+              //     </a>
+              //   ))}
+              // </div>
+              <div className="py-4 px-1 flex flex-row gap-3 flex-wrap">
                 {detailDataImage?.files?.map((file: any, index: number) => (
                   <a onClick={() => setSelectedImage(index)} key={file?.id}>
                     <Image
@@ -563,7 +619,9 @@ const DetailImage = (data: any) => {
                       height={1080}
                       alt="image-small"
                       src={file?.url}
-                      className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
+                      className={`w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 ${
+                        selectedImage === index ? "ring-2 ring-red-600" : ""
+                      }`}
                     />
                   </a>
                 ))}

From ac6f100047f573834193be3d2643477313004f32 Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Mon, 4 Aug 2025 13:16:32 +0700
Subject: [PATCH 2/2] fix: card in filter video and foto

---
 app/[locale]/(public)/image/filter/page.tsx | 26 +++++++++++----------
 app/[locale]/(public)/video/filter/page.tsx | 13 ++++++++++-
 components/ui/image-blurry.tsx              |  2 +-
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx
index ef7777f5..ba3e4917 100644
--- a/app/[locale]/(public)/image/filter/page.tsx
+++ b/app/[locale]/(public)/image/filter/page.tsx
@@ -822,7 +822,7 @@ const FilterPage = () => {
                           <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                             <Link href={`/image/detail/${image?.slug}`}>
                               {/* <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" /> */}
-                              <div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
+                              <div className="img-container h-60 bg-[#e9e9e9] cursor-pointer">
                                 <ImageBlurry
                                   src={
                                     image?.smallThumbnailLink ||
@@ -835,18 +835,8 @@ const FilterPage = () => {
                                     height: "100%",
                                   }}
                                 />
-                                {/* <Image
-                                  width={2560}
-                                  height={1440}
-                                  src={
-                                    image?.smallThumbnailLink ||
-                                    image?.thumbnailLink
-                                  }
-                                  alt={image?.title}
-                                  className="w-full h-full object-contain rounded-t-lg"
-                                /> */}
                               </div>
-                              <div className="flex flex-row items-center gap-2 text-[10px] mx-1 mt-2">
+                              {/* <div className="flex flex-row items-center gap-2 text-[10px] mx-1 mt-2">
                                 {formatDateToIndonesian(
                                   new Date(image?.createdAt)
                                 )}{" "}
@@ -861,6 +851,18 @@ const FilterPage = () => {
                               </div>
                               <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
                                 {image?.title}
+                              </div> */}
+
+                              <div className="p-4 h-full flex flex-col justify-between">
+                                <div className="flex flex-col gap-1 flex-grow">
+                                  <p className="text-[10px] font-bold text-[#bb3523] uppercase">
+                                    {image?.categoryName?.toUpperCase() ??
+                                      "Giat Pimpinan"}
+                                  </p>
+                                  <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
+                                    {image?.title}
+                                  </p>
+                                </div>
                               </div>
                             </Link>
                           </CardContent>
diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx
index a2b03dcb..05365bb6 100644
--- a/app/[locale]/(public)/video/filter/page.tsx
+++ b/app/[locale]/(public)/video/filter/page.tsx
@@ -856,7 +856,7 @@ const FilterPage = () => {
                                   className="w-full h-full object-cover rounded-t-lg"
                                 /> */}
                               </div>
-                              <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
+                              {/* <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
                                 {formatDateToIndonesian(
                                   new Date(video?.createdAt)
                                 )}{" "}
@@ -870,6 +870,17 @@ const FilterPage = () => {
                               </div>
                               <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
                                 {video?.title}
+                              </div> */}
+                               <div className="p-4 h-full flex flex-col justify-between">
+                                <div className="flex flex-col gap-1 flex-grow">
+                                  <p className="text-[10px] font-bold text-[#bb3523] uppercase">
+                                    {video?.categoryName?.toUpperCase() ??
+                                      "Giat Pimpinan"}
+                                  </p>
+                                  <p className="text-sm lg:text-base font-semibold text-black dark:text-white line-clamp-4">
+                                    {video?.title}
+                                  </p>
+                                </div>
                               </div>
                             </Link>
                           </CardContent>
diff --git a/components/ui/image-blurry.tsx b/components/ui/image-blurry.tsx
index 16ed8b1a..c03d4617 100644
--- a/components/ui/image-blurry.tsx
+++ b/components/ui/image-blurry.tsx
@@ -53,7 +53,7 @@ const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
     //     <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
     // </div>
     <div
-      className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg"
+      className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-t-lg"
       key={key}
       style={style}
     >