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

Merge branch 'main' of https://gitlab.com/hanifsalafi/mediahub_redesign into prod

This commit is contained in:
hanif salafi 2025-08-04 13:53:11 +07:00
parent 541f9b6004 ac6f100047
commit 12c904d49a
4 changed files with 131 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/[locale]/(public)/image/filter/page.tsx
View File

@ -822,7 +822,7 @@ const FilterPage = () => {
<CardContent className="flex flex-col text-xs lg:text-sm w-full p-0"> <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
<Link href={`/image/detail/${image?.slug}`}> <Link href={`/image/detail/${image?.slug}`}>
{/* <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" /> */} {/* <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 <ImageBlurry
src={ src={
image?.smallThumbnailLink || image?.smallThumbnailLink ||
@ -835,18 +835,8 @@ const FilterPage = () => {
height: "100%", 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>
<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( {formatDateToIndonesian(
new Date(image?.createdAt) new Date(image?.createdAt)
)}{" "} )}{" "}
@ -861,6 +851,18 @@ const FilterPage = () => {
</div> </div>
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full"> <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
{image?.title} {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> </div>
</Link> </Link>
</CardContent> </CardContent>

13
app/[locale]/(public)/video/filter/page.tsx
View File

@ -856,7 +856,7 @@ const FilterPage = () => {
className="w-full h-full object-cover rounded-t-lg" className="w-full h-full object-cover rounded-t-lg"
/> */} /> */}
</div> </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( {formatDateToIndonesian(
new Date(video?.createdAt) new Date(video?.createdAt)
)}{" "} )}{" "}
@ -870,6 +870,17 @@ const FilterPage = () => {
</div> </div>
<div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full"> <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
{video?.title} {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> </div>
</Link> </Link>
</CardContent> </CardContent>

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>
))} ))}

2
components/ui/image-blurry.tsx
View File

@ -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 className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
// </div> // </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} key={key}
style={style} style={style}
> >