From 035f33250e183a3c38ff53d7e05abedc731330d4 Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Mon, 4 Aug 2025 12:22:06 +0700 Subject: [PATCH] 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) => { ) : ( -
+ //
+ // {detailDataImage?.files?.map((file: any, index: number) => ( + // setSelectedImage(index)} key={file?.id}> + // image-small + // + // ))} + //
+
{detailDataImage?.files?.map((file: any, index: number) => ( setSelectedImage(index)} key={file?.id}> { 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" : "" + }`} /> ))}