From cd9a8501305a3f8d3298b170aa87c4020c6c7625 Mon Sep 17 00:00:00 2001 From: hanif salafi Date: Tue, 7 Jan 2025 20:54:20 +0700 Subject: [PATCH 1/8] feat: update fixing navbar --- components/landing-page/navbar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx index e6d84a41..c1ada334 100644 --- a/components/landing-page/navbar.tsx +++ b/components/landing-page/navbar.tsx @@ -335,8 +335,8 @@ const Navbar = () => {
{"Image"}
-
{detail?.fullname}
-

({detail?.fullname})

+
{detail?.fullname}
+

({detail?.fullname})

@@ -389,8 +389,8 @@ const Navbar = () => {
{"Image"}
-
{detail?.fullname}
-

({detail?.fullname})

+
{detail?.fullname}
+

({detail?.fullname})

From 1a7aa27262aa04afb9453b89aa310ae6699369af Mon Sep 17 00:00:00 2001 From: hanif salafi Date: Tue, 7 Jan 2025 21:46:16 +0700 Subject: [PATCH 2/8] feat: update navbar --- components/landing-page/navbar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx index c1ada334..981ecfee 100644 --- a/components/landing-page/navbar.tsx +++ b/components/landing-page/navbar.tsx @@ -438,12 +438,12 @@ const Navbar = () => { ) : ( // Masuk and Daftar buttons for roleId === null
- + {t("logIn")} - +
From 83e419b5f2b29e5a42be92097be81e3b23b5b05a Mon Sep 17 00:00:00 2001 From: hanif salafi Date: Tue, 7 Jan 2025 21:49:59 +0700 Subject: [PATCH 3/8] feat: update fixing error --- components/form/content/audio-update-form.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/content/audio-update-form.tsx b/components/form/content/audio-update-form.tsx index 8df8e277..f104309e 100644 --- a/components/form/content/audio-update-form.tsx +++ b/components/form/content/audio-update-form.tsx @@ -145,7 +145,7 @@ export default function FormAudioUpdate() { const getCategories = async () => { try { const category = await listEnableCategory(fileTypeId); - const resCategory: Category[] = category.data.data.content; + const resCategory: Category[] = category?.data.data.content; setCategories(resCategory); console.log("data category", resCategory); @@ -171,7 +171,7 @@ export default function FormAudioUpdate() { async function initState() { if (id) { const response = await detailMedia(id); - const details = response.data?.data; + const details = response?.data?.data; setDetail(details); From e00c1f3326f1395469daa5c4667861cea5cd86ed Mon Sep 17 00:00:00 2001 From: hanif salafi Date: Tue, 7 Jan 2025 23:53:22 +0700 Subject: [PATCH 4/8] feat: move satker and polda, update detail video and image on contributor --- .../{ => (polda)}/polda/[polda_name]/page.tsx | 0 .../(public)/{ => (polda)}/polda/layout.tsx | 0 .../satker/[satker_name]/page.tsx | 0 .../(public)/{ => (satker)}/satker/layout.tsx | 0 components/form/content/image-detail-form.tsx | 166 +++++++-------- components/form/content/video-detail-form.tsx | 193 +++++++++++++----- components/landing-page/division.tsx | 4 +- components/landing-page/new-content.tsx | 5 + service/landing/landing.ts | 4 +- 9 files changed, 240 insertions(+), 132 deletions(-) rename app/[locale]/(public)/{ => (polda)}/polda/[polda_name]/page.tsx (100%) rename app/[locale]/(public)/{ => (polda)}/polda/layout.tsx (100%) rename app/[locale]/(public)/{ => (satker)}/satker/[satker_name]/page.tsx (100%) rename app/[locale]/(public)/{ => (satker)}/satker/layout.tsx (100%) diff --git a/app/[locale]/(public)/polda/[polda_name]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx similarity index 100% rename from app/[locale]/(public)/polda/[polda_name]/page.tsx rename to app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx diff --git a/app/[locale]/(public)/polda/layout.tsx b/app/[locale]/(public)/(polda)/polda/layout.tsx similarity index 100% rename from app/[locale]/(public)/polda/layout.tsx rename to app/[locale]/(public)/(polda)/polda/layout.tsx diff --git a/app/[locale]/(public)/satker/[satker_name]/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/page.tsx similarity index 100% rename from app/[locale]/(public)/satker/[satker_name]/page.tsx rename to app/[locale]/(public)/(satker)/satker/[satker_name]/page.tsx diff --git a/app/[locale]/(public)/satker/layout.tsx b/app/[locale]/(public)/(satker)/satker/layout.tsx similarity index 100% rename from app/[locale]/(public)/satker/layout.tsx rename to app/[locale]/(public)/(satker)/satker/layout.tsx diff --git a/components/form/content/image-detail-form.tsx b/components/form/content/image-detail-form.tsx index f2bb4025..b88f67dc 100644 --- a/components/form/content/image-detail-form.tsx +++ b/components/form/content/image-detail-form.tsx @@ -133,11 +133,11 @@ export default function FormImageDetail() { const [filePlacements, setFilePlacements] = useState([]); const [detailThumb, setDetailThumb] = useState([]); const [thumbsSwiper, setThumbsSwiper] = useState(null); + const [isUserMabesApprover, setIsUserMabesApprover] = useState(false); const [selectedTarget, setSelectedTarget] = useState(""); const [files, setFiles] = useState([]); const [rejectedFiles, setRejectedFiles] = useState([]); - const [isMabesApprover, setIsMabesApprover] = useState(false); let fileTypeId = "1"; @@ -157,7 +157,7 @@ export default function FormImageDetail() { userLevelId == "216" && roleId == "3" ) { - setIsMabesApprover(true); + setIsUserMabesApprover(true); } }, [userLevelId, roleId]); @@ -306,7 +306,7 @@ export default function FormImageDetail() { mediaUploadId: id, statusId: status, message: description, - files: isMabesApprover ? getPlacement() : [], + files: isUserMabesApprover ? getPlacement() : [], }; loading(); const response = await submitApproval(data); @@ -330,9 +330,11 @@ export default function FormImageDetail() { } close(); + submitApprovalSuccesss(); return false; } + const setupPlacement = ( index: number, placement: string, @@ -396,8 +398,10 @@ export default function FormImageDetail() { icon: "success", confirmButtonColor: "#3085d6", confirmButtonText: "OK", - }).then(() => { - router.push("/in/contributor/content/image"); + }).then((result) => { + if (result.isConfirmed) { + router.push("/contributor/content/image"); + } }); }; @@ -516,7 +520,7 @@ export default function FormImageDetail() {
- +
@@ -675,82 +679,84 @@ export default function FormImageDetail() {
-
-
- - setupPlacement(index, "all", Boolean(e)) - } - /> - -
-
- - setupPlacement(index, "mabes", Boolean(e)) - } - /> - -
-
- - setupPlacement(index, "polda", Boolean(e)) - } - /> - -
+ {isUserMabesApprover && +
+
+ + setupPlacement(index, "all", Boolean(e)) + } + /> + +
+
+ + setupPlacement(index, "mabes", Boolean(e)) + } + /> + +
+
+ + setupPlacement(index, "polda", Boolean(e)) + } + /> + +
-
- - setupPlacement( - index, - "international", - Boolean(e) - ) - } - /> - +
+ + setupPlacement( + index, + "international", + Boolean(e) + ) + } + /> + +
-
+ }
)) diff --git a/components/form/content/video-detail-form.tsx b/components/form/content/video-detail-form.tsx index c703bfc5..c6331988 100644 --- a/components/form/content/video-detail-form.tsx +++ b/components/form/content/video-detail-form.tsx @@ -134,10 +134,11 @@ export default function FormVideoDetail() { const [detailVideo, setDetailVideo] = useState([]); const [thumbsSwiper, setThumbsSwiper] = useState(null); + const [filePlacements, setFilePlacements] = useState([]); const [selectedTarget, setSelectedTarget] = useState(""); const [files, setFiles] = useState([]); const [rejectedFiles, setRejectedFiles] = useState([]); - const [isMabesApprover, setIsMabesApprover] = useState(false); + const [isUserMabesApprover, setIsUserMabesApprover] = useState(false); let fileTypeId = "2"; @@ -168,7 +169,7 @@ export default function FormVideoDetail() { userLevelId == "216" && roleId == "3" ) { - setIsMabesApprover(true); + setIsUserMabesApprover(true); } }, [userLevelId, roleId]); @@ -254,9 +255,16 @@ export default function FormVideoDetail() { }, [refresh, setValue]); const actionApproval = (e: string) => { + const temp = []; + for (const element of detail.files) { + temp.push([]); + } + setFilePlacements(temp); setStatus(e); - setModalOpen(true); + setFiles(detail.files); + setDescription(""); + setModalOpen(true); }; const submit = async () => { @@ -286,8 +294,7 @@ export default function FormVideoDetail() { mediaUploadId: id, statusId: status, message: description, - files: [], - // files: isMabesApprover ? getPlacement() : [], + files: isUserMabesApprover ? getPlacement() : [], }; loading(); @@ -310,10 +317,57 @@ export default function FormVideoDetail() { } close(); + submitApprovalSuccesss(); return false; } + const getPlacement = () => { + console.log("getPlaa", filePlacements); + const temp = []; + for (let i = 0; i < filePlacements?.length; i++) { + if (filePlacements[i].length !== 0) { + const now = filePlacements[i].filter((a) => a !== "all"); + const data = { mediaFileId: files[i].id, placement: now.join(",") }; + temp.push(data); + } + } + return temp; + }; + + const setupPlacement = ( + index: number, + placement: string, + checked: boolean + ) => { + let temp = [...filePlacements]; + if (checked) { + if (placement === "all") { + temp[index] = ["all", "mabes", "polda", "international"]; + } else { + const now = temp[index]; + now.push(placement); + if (now.length === 3 && !now.includes("all")) { + now.push("all"); + } + temp[index] = now; + } + } else { + if (placement === "all") { + temp[index] = []; + } else { + const now = temp[index].filter((a) => a !== placement); + console.log("now", now); + temp[index] = now; + if (now.length === 3 && now.includes("all")) { + const newData = now.filter((b) => b !== "all"); + temp[index] = newData; + } + } + } + setFilePlacements(temp); + }; + function handleDeleteFileApproval(id: number) { const selectedFiles = files.filter((file) => file.id != id); setFiles(selectedFiles); @@ -344,8 +398,10 @@ export default function FormVideoDetail() { icon: "success", confirmButtonColor: "#3085d6", confirmButtonText: "OK", - }).then(() => { - router.push("/in/contributor/content/video"); + }).then((result) => { + if (result.isConfirmed) { + router.push("/contributor/content/video"); + } }); }; @@ -610,7 +666,7 @@ export default function FormVideoDetail() { Berikan Komentar {status == "2" - ? files?.map((file) => ( + ? files?.map((file, index) => (
-
-
- - -
-
- - -
-
- - -
+ {isUserMabesApprover && +
+
+ + setupPlacement(index, "all", Boolean(e)) + } + /> + +
+
+ + setupPlacement(index, "mabes", Boolean(e)) + } + /> + +
+
+ + setupPlacement(index, "polda", Boolean(e)) + } + /> + +
-
- - +
+ + setupPlacement( + index, + "international", + Boolean(e) + ) + } + /> + +
-
+ }
)) @@ -744,7 +843,7 @@ export default function FormVideoDetail() { diff --git a/components/landing-page/division.tsx b/components/landing-page/division.tsx index eab1ded1..39608ce1 100644 --- a/components/landing-page/division.tsx +++ b/components/landing-page/division.tsx @@ -94,7 +94,7 @@ const Division = () => { filteredList.map((region, index) => !seeAllValue ? ( index < 7 ? ( - +
{region.name}
@@ -104,7 +104,7 @@ const Division = () => { "" ) ) : ( - +
{region.name}
diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx index bdc42672..c92a95e3 100644 --- a/components/landing-page/new-content.tsx +++ b/components/landing-page/new-content.tsx @@ -18,17 +18,22 @@ const NewContent = (props: { type: string }) => { const pathname = usePathname(); const params = useParams(); const locale = params?.locale; + const poldaName = params?.polda_name; + const satkerName = params?.satker_name; const t = useTranslations("LandingPage"); useEffect(() => { initFetch(); }, [selectedTab]); const initFetch = async () => { + console.log("Satker Name : ", satkerName); const request = { + title: "", page: 0, size: 5, sortBy: props.type == "popular" ? "clickCount" : "createdAt", contentTypeId: selectedTab == "image" ? "1" : selectedTab == "video" ? "2" : selectedTab == "text" ? "3" : selectedTab == "audio" ? "4" : "", + group: poldaName && String(poldaName)?.length > 1 ? poldaName : "", }; const response = await getListContent(request); console.log("category", response); diff --git a/service/landing/landing.ts b/service/landing/landing.ts index 822a395a..0e8c4afc 100644 --- a/service/landing/landing.ts +++ b/service/landing/landing.ts @@ -10,9 +10,7 @@ export async function getCategoryData() { export async function getListContent(props: any) { return await httpGetInterceptor( - `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${ - props.title ? props.title : "" - }&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=` + `media/public/list?enablePage=1&sort=desc&sortBy=${props.sortBy}&size=${props.size}&page=${props.page}&typeId=${props.contentTypeId}&title=${props.title}&group=${props.group}&categoryId=&fileFormats=&tags=&startDate=&endDate=&month=&year=` ); } From 415537536237273b4107af0311bb133f83b8f5b1 Mon Sep 17 00:00:00 2001 From: hanif salafi Date: Wed, 8 Jan 2025 00:44:23 +0700 Subject: [PATCH 5/8] feat: update all features on polda and satker --- .../shared/curated-content/page.tsx | 1 - .../[polda_name]/audio/detail/[slug]/page.tsx | 334 ++++++++ .../polda/[polda_name]/audio/filter/page.tsx | 520 ++++++++++++ .../polda/[polda_name]/audio/layout.tsx | 20 + .../document/detail/[slug]/page.tsx | 333 ++++++++ .../[polda_name]/document/filter/page.tsx | 549 +++++++++++++ .../polda/[polda_name]/document/layout.tsx | 20 + .../[polda_name]/image/detail/[slug]/page.tsx | 347 ++++++++ .../polda/[polda_name]/image/filter/page.tsx | 515 ++++++++++++ .../polda/[polda_name]/image/layout.tsx | 12 + .../indeks/detail/[slug]/page.tsx | 96 +++ .../polda/[polda_name]/indeks/layout.tsx | 20 + .../polda/[polda_name]/indeks/page.tsx | 116 +++ .../(polda)/polda/[polda_name]/page.tsx | 4 +- .../polda/[polda_name]/schedule/layout.tsx | 20 + .../polda/[polda_name]/schedule/page.tsx | 741 ++++++++++++++++++ .../[polda_name]/video/detail/[slug]/page.tsx | 343 ++++++++ .../polda/[polda_name]/video/filter/page.tsx | 545 +++++++++++++ .../polda/[polda_name]/video/layout.tsx | 20 + .../audio/detail/[slug]/page.tsx | 334 ++++++++ .../[satker_name]/audio/filter/page.tsx | 520 ++++++++++++ .../satker/[satker_name]/audio/layout.tsx | 20 + .../document/detail/[slug]/page.tsx | 333 ++++++++ .../[satker_name]/document/filter/page.tsx | 549 +++++++++++++ .../satker/[satker_name]/document/layout.tsx | 20 + .../image/detail/[slug]/page.tsx | 347 ++++++++ .../[satker_name]/image/filter/page.tsx | 515 ++++++++++++ .../satker/[satker_name]/image/layout.tsx | 12 + .../indeks/detail/[slug]/page.tsx | 96 +++ .../satker/[satker_name]/indeks/layout.tsx | 20 + .../satker/[satker_name]/indeks/page.tsx | 116 +++ .../(satker)/satker/[satker_name]/page.tsx | 4 +- .../satker/[satker_name]/schedule/layout.tsx | 20 + .../satker/[satker_name]/schedule/page.tsx | 741 ++++++++++++++++++ .../video/detail/[slug]/page.tsx | 343 ++++++++ .../[satker_name]/video/filter/page.tsx | 545 +++++++++++++ .../satker/[satker_name]/video/layout.tsx | 20 + .../(public)/audio/detail/[slug]/page.tsx | 2 +- .../(public)/document/detail/[slug]/page.tsx | 2 +- .../(public)/image/detail/[slug]/page.tsx | 2 +- .../(public)/video/detail/[slug]/page.tsx | 2 +- app/[locale]/page.tsx | 4 +- .../landing-page/header-banner-satker.tsx | 2 +- components/landing-page/navbar.tsx | 21 +- components/landing-page/new-content.tsx | 6 +- 45 files changed, 9131 insertions(+), 21 deletions(-) create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/document/detail/[slug]/page.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/document/layout.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/layout.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/page.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/layout.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/page.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/video/detail/[slug]/page.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx create mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/video/layout.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/audio/detail/[slug]/page.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/audio/layout.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/document/detail/[slug]/page.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/document/layout.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/image/detail/[slug]/page.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/image/layout.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/detail/[slug]/page.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/layout.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/page.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/layout.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/page.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/video/detail/[slug]/page.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx create mode 100644 app/[locale]/(public)/(satker)/satker/[satker_name]/video/layout.tsx 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

+