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 index 85118303..9d714a3f 100644 --- 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 @@ -1,827 +1,48 @@ -"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, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, + getDetailMetaData, getPublicSuggestionList, saveWishlist, } from "@/service/landing/landing"; -import { getCookiesDecrypt } from "@/lib/utils"; -import { close, error, loading, warning } from "@/config/swal"; -import { useTranslations } from "next-intl"; -import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals"; -import withReactContent from "sweetalert2-react-content"; -import Swal from "sweetalert2"; -import parse from "html-react-parser"; -import { postActivityLog } from "@/service/content/content"; +import { Metadata } from "next"; +import DetailImage from "@/components/main/image-detail"; +import DetailAudio from "@/components/main/audio-detail"; -const DetailAudio = () => { - const [selectedSize, setSelectedSize] = useState("L"); - const [selectedTab, setSelectedTab] = useState("video"); - const t = useTranslations("LandingPage"); - 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 [message, setMessage] = useState(""); - const userRoleId = getCookiesDecrypt("urie"); - const [listSuggestion, setListSuggestion] = useState(); - const [visibleInput, setVisibleInput] = useState(null); - const MySwal = withReactContent(Swal); +interface Size { + label: string; + value: string; +} - const userId = getCookiesDecrypt("uie"); - - useEffect(() => { - initFetch(); - checkWishlist(); - sendActivityLog(2); - }, []); - - 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); +type Props = { + params: { + title: string; + slug: string; + description: string; + thumbnailLink: string; }; - - 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 - await postActivityLog(data); - } - - 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" }, - ]; - async function sendSuggestionParent() { - if (message?.length > 3) { - loading(); - const data = { - mediaUploadId: slug?.split("-")?.[0], - message, - parentId: null, - }; - - const response = await createPublicSuggestion(data); - - console.log(response); - setMessage(""); - - const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]); - console.log(responseGet?.data?.data); - setListSuggestion(responseGet?.data?.data); - - // Hapus nilai semua input secara manual jika perlu - const inputs = document.querySelectorAll("input"); - inputs.forEach((input) => { - input.value = ""; - }); - - close(); - } - } - const getInputValue = (e: any) => { - const message = e.target.value; - console.log(message); - setMessage(message); - }; - const postData = () => { - const checkMessage = checkMaliciousText(message); - if (checkMessage == "") { - if (Number(userRoleId) < 1 || userRoleId == undefined) { - router.push("/auth"); - } else { - sendSuggestionParent(); - } - } else { - warning(checkMessage); - } - }; - function addDefaultProfile(ev: any) { - ev.target.src = "/assets/avatar-profile.png"; - } - const showInput = (e: any) => { - console.log(document.querySelector(`#${e}`)?.classList); - document.querySelector(`#${e}`)?.classList.toggle("none"); - setVisibleInput(visibleInput === e ? null : e); - }; - async function sendSuggestionChild(parentId: any) { - const inputElement = document.querySelector( - `#input-comment-${parentId}` - ) as HTMLInputElement; - - if (inputElement && inputElement.value.length > 3) { - loading(); - const data = { - mediaUploadId: slug?.split("-")?.[0], - message: inputElement.value, - parentId, - }; - - console.log(data); - const response = await createPublicSuggestion(data); - console.log(response); - const responseGet: any = await getPublicSuggestionList( - slug?.split("-")?.[0] - ); - console.log(responseGet?.data?.data); - setListSuggestion(responseGet?.data?.data); - - // Reset input field - inputElement.value = ""; - - // document.querySelector("#comment-id-" + parentId)?.style.display = "none"; - - close(); - } - } - async function deleteDataSuggestion(dataId: any) { - loading(); - const response = await deletePublicSuggestion(dataId); - console.log(response); - const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]); - console.log(responseGet?.data?.data); - setListSuggestion(responseGet?.data?.data); - close(); - } - const deleteData = (dataId: any) => { - MySwal.fire({ - title: "Delete Comment", - icon: "warning", - showCancelButton: true, - cancelButtonColor: "#3085d6", - confirmButtonColor: "#d33", - confirmButtonText: "Delete", - }).then((result: any) => { - if (result.isConfirmed) { - deleteDataSuggestion(dataId); - console.log(dataId); - } - }); - }; - const postDataChild = (id: any) => { - const checkMessage = checkMaliciousText(message); - if (checkMessage == "") { - if (Number(userRoleId) < 1 || userRoleId == undefined) { - router.push("/auth"); - } else { - sendSuggestionChild(id); - } - } else { - warning(checkMessage); - } - }; - 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

-