mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: download selected image in detail

This commit is contained in:
Sabda Yagra 2025-08-04 12:22:06 +07:00
parent 16c469f72c
commit 035f33250e
1 changed files with 104 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
components/main/image-detail.tsx
View File

@ -219,8 +219,62 @@ const DetailImage = (data: any) => {
await postActivityLog(data); 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 = () => { const handleDownload = () => {
if (downloadProgress === 0) { if (downloadProgress !== 0) return;
if (!imageSizeSelected) { if (!imageSizeSelected) {
alert("Please select an image size before downloading."); alert("Please select an image size before downloading.");
return; return;
@ -228,46 +282,32 @@ const DetailImage = (data: any) => {
if (!userId) { if (!userId) {
router.push("/auth"); router.push("/auth");
} else { return;
}
sendActivityLog(2); sendActivityLog(2);
sendActivityLog(3); sendActivityLog(3);
if (isDownloadAll) { if (isDownloadAll) {
let url: string;
const baseId = slug.split("-")?.[0]; const baseId = slug.split("-")?.[0];
const url = `${process.env.NEXT_PUBLIC_API}/media/file/download-zip?id=${baseId}&resolution=${imageSizeSelected}`;
// 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"); downloadFile(url, "FileDownload.zip");
} else { } else {
if (isFromSPIT && main?.url?.includes("spit.humas")) { const selectedFile = detailDataImage?.files?.[selectedImage];
downloadFile(`${main?.url}`, `${main.names}`);
if (!selectedFile) {
toast({
description: "Gambar tidak ditemukan.",
variant: "destructive",
});
return;
}
if (isFromSPIT && selectedFile?.url?.includes("spit.humas")) {
downloadFile(selectedFile.url, selectedFile.names || "image.jpg");
} else { } else {
// const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${main?.id}&operation=file&type=video&resolution=${resolutionSelected}p`; const url = `${process.env.NEXT_PUBLIC_API}/media/view?id=${selectedFile.id}&operation=file&type=image&resolution=${imageSizeSelected}`;
// downloadFile(url, `${main.names}`); downloadFile(url, selectedFile.names || "image.jpg");
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}`);
// }
} }
} }
}; };
@ -552,7 +592,23 @@ const DetailImage = (data: any) => {
<Skeleton className="rounded-lg w-[120px] h-[90px]" /> <Skeleton className="rounded-lg w-[120px] h-[90px]" />
</div> </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) => ( {detailDataImage?.files?.map((file: any, index: number) => (
<a onClick={() => setSelectedImage(index)} key={file?.id}> <a onClick={() => setSelectedImage(index)} key={file?.id}>
<Image <Image
@ -563,7 +619,9 @@ const DetailImage = (data: any) => {
height={1080} height={1080}
alt="image-small" alt="image-small"
src={file?.url} 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> </a>
))} ))}