diff --git a/app/[locale]/(protected)/shared/curated-content/page.tsx b/app/[locale]/(protected)/shared/curated-content/page.tsx index fceac0cd..8f6e1514 100644 --- a/app/[locale]/(protected)/shared/curated-content/page.tsx +++ b/app/[locale]/(protected)/shared/curated-content/page.tsx @@ -15,7 +15,6 @@ import { import { Link } from "@/components/navigation"; import { formatDateToIndonesian, generateLocalizedPath } from "@/utils/globals"; import { Icon } from "@iconify/react/dist/iconify.js"; -import newContent from "@/components/landing-page/new-content"; import { locale } from "dayjs"; import { useEffect, useState } from "react"; import { getListContent } from "@/service/landing/landing"; diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx new file mode 100644 index 00000000..fffbae98 --- /dev/null +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx @@ -0,0 +1,334 @@ +"use client"; + +import { useParams, usePathname } from "next/navigation"; +import React, { useEffect, useState } from "react"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import NewContent from "@/components/landing-page/new-content"; +import { Link, useRouter } from "@/i18n/routing"; +import { Textarea } from "@/components/ui/textarea"; +import { BarWave } from "react-cssfx-loading"; +import { useToast } from "@/components/ui/use-toast"; +import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing"; +import { getCookiesDecrypt } from "@/lib/utils"; +import { close, error, loading } from "@/config/swal"; + +const DetailAudio = () => { + const [selectedSize, setSelectedSize] = useState("L"); + const [selectedTab, setSelectedTab] = useState("video"); + const router = useRouter(); + const pathname = usePathname(); + const params = useParams(); + const slug = String(params?.slug); + const [detailDataAudio, setDetailDataAudio] = useState(); + const [isSaved, setIsSaved] = useState(false); + const [wishlistId, setWishlistId] = useState(); + const { toast } = useToast(); + const [isDownloadAll, setIsDownloadAll] = useState(false); + const [downloadProgress, setDownloadProgress] = useState(0); + const [isFromSPIT, setIsFromSPIT] = useState(false); + const [main, setMain] = useState(); + const [resolutionSelected, setResolutionSelected] = useState("720"); + const [imageSizeSelected, setImageSizeSelected] = useState("l"); + + const userId = getCookiesDecrypt("uie"); + + useEffect(() => { + initFetch(); + checkWishlist(); + }, []); + + const initFetch = async () => { + const response = await getDetail(String(slug)); + console.log("detailAudio", response); + setIsFromSPIT(response?.data?.data?.isFromSPIT); + setMain({ + id: response?.data?.data?.files[0]?.id, + type: response?.data?.data?.fileType.name, + url: + Number(response?.data?.data?.fileType?.id) == 4 + ? response?.data?.data?.files[0]?.secondaryUrl + : Number(response?.data?.data?.fileType?.id) == 2 + ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video` + : response?.data?.data?.files[0]?.url, + thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl, + names: response?.data?.data?.files[0]?.fileName, + format: response?.data?.data?.files[0]?.format, + widthPixel: response?.data?.data?.files[0]?.widthPixel, + heightPixel: response?.data?.data?.files[0]?.heightPixel, + size: response?.data?.data?.files[0]?.size, + caption: response?.data?.data?.files[0]?.caption, + }); + setDetailDataAudio(response?.data?.data); + }; + + const doBookmark = async () => { + if (userId) { + const data = { + mediaUploadId: slug?.split("-")?.[0], + }; + + loading(); + const res = await saveWishlist(data); + if (res?.error) { + error(res.message); + return false; + } + close(); + toast({ + title: "Konten berhasil disimpan", + }); + checkWishlist(); + } else { + router.push("/auth"); + } + }; + async function checkWishlist() { + if (userId) { + const res = await checkWishlistStatus(slug.split("-")?.[0]); + console.log(res?.data?.data); + const isAlreadyOnWishlist = res?.data?.data !== "-1"; + setWishlistId(res?.data?.data); + setIsSaved(isAlreadyOnWishlist); + } + } + + const handleDeleteWishlist = async () => { + if (userId) { + loading(); + const res = await deleteWishlist(wishlistId); + + if (res?.error) { + error(res.message); + return false; + } + + toast({ + title: "Konten berhasil dihapus", + }); + close(); + checkWishlist(); + } else { + router.push("/auth"); + } + }; + + async function sendActivityLog(activityTypeId: number) { + const data = { + activityTypeId, + mediaId: slug.split("-")?.[0], + url: window.location.href, + }; + // set activity + // const response = await postActivityLog(data, token); + // console.log(response); + } + + const handleDownload = () => { + if (downloadProgress === 0) { + if (!userId) { + router.push("/auth/login"); + } 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 { + downloadFile(`${main?.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 downloadFile = (fileUrl: string, name: string) => { + const xhr = new XMLHttpRequest(); + + xhr.open("GET", fileUrl, true); + xhr.responseType = "blob"; + + xhr.addEventListener("progress", (event) => { + if (event.lengthComputable) { + const percentCompleted = Math.round((event.loaded / event.total) * 100); + setDownloadProgress(percentCompleted); + } + }); + + xhr.addEventListener("readystatechange", () => { + if (xhr.readyState === 4 && xhr.status === 200) { + const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream"; + const extension = contentType.split("/")[1]; + const filename = `${name}.${extension}`; + + const blob = new Blob([xhr.response], { + type: contentType, + }); + const downloadUrl = URL.createObjectURL(blob); + const a = document.createElement("a"); + + a.href = downloadUrl; + a.download = filename; + document.body.append(a); + a.click(); + a.remove(); + } + }); + + xhr.onloadend = () => { + setDownloadProgress(0); + }; + + xhr.send(); + }; + + const sizes = [ + { label: "XL", value: "3198 x 1798 px" }, + { label: "L", value: "2399 x 1349 px" }, + { label: "M", value: "1599 x 899 px" }, + { label: "S", value: "1066 x 599 px" }, + { label: "XS", value: "800 x 450 px" }, + ]; + + return ( + <> +
+ {/* Container Utama */} +
+ {/* Bagian Kiri */} +
+
+ + +
+
+ {/* Footer Informasi */} +
+

+ oleh {detailDataAudio?.uploadedBy?.userLevel?.name} | Diupdate pada {detailDataAudio?.updatedAt} WIB |  + +   + {detailDataAudio?.clickCount} +

+

Kreator: {detailDataAudio?.creatorName}

+
+ {/* Keterangan */} +
+

{detailDataAudio?.title}

+
+
+
+ + {/* Bagian Kanan */} +
+ {isSaved ? ( + handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> + +

Hapus

+ + ) : ( + doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer"> + +

Simpan

+ + )} + + {/* garis */} +
+ + + {detailDataAudio?.category?.name} + + + + +
+ + {/* Opsi Ukuran Foto */} +

Opsi Ukuran Audio

+ +
+ +
+ {sizes.map((size: any) => ( +
+
+ setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" /> +
{size.label}
+
+
+
{size.value}
+
+
+ ))} +
+ + {/* Download Semua */} +
+ +
+ + {/* Tombol Download */} + +
+
+
+ +
+ {/* Comment */} +
+

Berikan Komentar

+