1333 lines
50 KiB
TypeScript
1333 lines
50 KiB
TypeScript
"use client";
|
|
|
|
import { useParams, usePathname, useSearchParams } from "next/navigation";
|
|
import React, { useEffect, useRef, 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,
|
|
getPublicSuggestionList,
|
|
saveWishlist,
|
|
} from "@/service/landing/landing";
|
|
import { getCookiesDecrypt } from "@/lib/utils";
|
|
import { close, error, loading, successCallback, warning } from "@/config/swal";
|
|
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
import Swal from "sweetalert2";
|
|
import {
|
|
checkMaliciousText,
|
|
formatDateToIndonesian,
|
|
getPublicLocaleTimestamp,
|
|
} from "@/utils/globals";
|
|
import parse from "html-react-parser";
|
|
import $ from "jquery";
|
|
import { useTranslations } from "next-intl";
|
|
import { postActivityLog } from "@/service/content/content";
|
|
|
|
const formWaveSurferOptions = (container: HTMLElement | null) => {
|
|
if (!container) throw new Error("Waveform container is null");
|
|
return {
|
|
container,
|
|
waveColor: "#E0E0E0",
|
|
progressColor: "#FFC831",
|
|
cursorColor: "#000",
|
|
barWidth: 2,
|
|
barRadius: 2,
|
|
responsive: true,
|
|
height: 80,
|
|
normalize: true,
|
|
partialRender: true,
|
|
};
|
|
};
|
|
|
|
const DetailAudio = () => {
|
|
const [selectedSize, setSelectedSize] = useState<string>("L");
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
const params = useParams();
|
|
const slug = String(params?.slug);
|
|
const [detailDataAudio, setDetailDataAudio] = useState<any>();
|
|
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<any>();
|
|
const userId = getCookiesDecrypt("uie");
|
|
const [emailShareList, setEmailShareList] = useState<any>();
|
|
const [emailShareInput, setEmailShareInput] = useState<any>();
|
|
const [emailMessageInput, setEmailMessageInput] = useState();
|
|
const searchParams = useSearchParams();
|
|
const id = searchParams?.get("id");
|
|
const [width, setWidth] = useState<any>();
|
|
const [content, setContent] = useState<any>([]);
|
|
const userRoleId = getCookiesDecrypt("urie");
|
|
const [playing, setPlaying] = useState(false);
|
|
const wavesurfer = useRef<any>(null);
|
|
const waveformRef = useRef(null);
|
|
const [audioLoaded, setAudioLoaded] = useState(false);
|
|
const [volume, setVolume] = useState<any>(0.5);
|
|
const [message, setMessage] = useState("");
|
|
const [listSuggestion, setListSuggestion] = useState<any>();
|
|
const MySwal = withReactContent(Swal);
|
|
const [visibleInput, setVisibleInput] = useState<string | null>(null);
|
|
const t = useTranslations("LandingPage");
|
|
|
|
let typeString = "audio";
|
|
|
|
useEffect(() => {
|
|
initFetch();
|
|
checkWishlist();
|
|
sendActivityLog(2);
|
|
}, []);
|
|
|
|
const initFetch = async () => {
|
|
const response = await getDetail(String(slug));
|
|
const responseGet = await getPublicSuggestionList(slug?.split("-")?.[0]);
|
|
setIsFromSPIT(response?.data?.data?.isFromSPIT);
|
|
setWidth(window.innerWidth);
|
|
setContent(response?.data?.data);
|
|
setListSuggestion(responseGet?.data?.data);
|
|
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
|
|
await postActivityLog(data);
|
|
}
|
|
|
|
const handleDownload = () => {
|
|
if (downloadProgress === 0) {
|
|
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 {
|
|
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";
|
|
let extension = contentType.split("/")[1];
|
|
|
|
if (selectedSize === "MP3") {
|
|
extension = "mp3";
|
|
}
|
|
|
|
if (selectedSize === "WAV") {
|
|
extension = "wav";
|
|
}
|
|
|
|
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: "MP3", value: "100 MB" },
|
|
{ label: "WAV", value: "100 MB" },
|
|
];
|
|
|
|
const handleShare = (type: any, url: any) => {
|
|
if (Number(userRoleId) < 1 || userRoleId == undefined) {
|
|
router.push("/auth");
|
|
} else {
|
|
sendActivityLog(2);
|
|
sendActivityLog(4);
|
|
if (type == "wa" && width <= 768) {
|
|
window.open(`whatsapp://send?${url}`, "_blank");
|
|
} else if (type == "wa" && width > 768) {
|
|
window.open(
|
|
`https://web.whatsapp.com/send?${url}`,
|
|
"_blank",
|
|
"noreferrer"
|
|
);
|
|
} else {
|
|
window.open(url);
|
|
}
|
|
}
|
|
};
|
|
|
|
async function shareToEmail() {
|
|
if (Number(userRoleId) < 1 || userRoleId == undefined) {
|
|
router.push("/auth");
|
|
} else {
|
|
const data = {
|
|
mediaUploadId: id?.split("-")?.[0],
|
|
email: emailShareList || [emailShareInput],
|
|
message: emailMessageInput,
|
|
url: window.location.href,
|
|
};
|
|
loading();
|
|
const res = await sendMediaUploadToEmail(data);
|
|
if (res?.error) {
|
|
error(res.message);
|
|
return false;
|
|
}
|
|
close();
|
|
successCallback("Konten Telah Dikirim");
|
|
}
|
|
}
|
|
|
|
const handlePlayPause = () => {
|
|
setPlaying(!playing);
|
|
wavesurfer?.current?.playPause();
|
|
};
|
|
|
|
const handleEmailList = (e: any) => {
|
|
const arrayEmail: any = [];
|
|
for (let i = 0; i < emailShareList?.length; i += 1) {
|
|
arrayEmail.push(emailShareList[i]);
|
|
}
|
|
if (e.which == 13) {
|
|
if (e.target.value) {
|
|
arrayEmail.push(e.target.value);
|
|
setEmailShareList(arrayEmail);
|
|
setEmailShareInput("");
|
|
}
|
|
e.preventDefault();
|
|
}
|
|
return false;
|
|
};
|
|
|
|
// useEffect(() => {
|
|
// function initState() {
|
|
// if (typeString == "audio" && main?.url != undefined) {
|
|
// const init = async () => {
|
|
// const { default: WaveSurfer } = await import("wavesurfer.js");
|
|
|
|
// setPlaying(false);
|
|
|
|
// const formatTime = function (time: any) {
|
|
// return [
|
|
// Math.floor((time % 3600) / 60),
|
|
// // minutes
|
|
// `00${Math.floor(time % 60)}`.slice(-2), // seconds
|
|
// ].join(":");
|
|
// };
|
|
// console.log("AUDIO", main?.url);
|
|
|
|
// const options = formWaveSurferOptions(waveformRef.current);
|
|
|
|
// wavesurfer.current = WaveSurfer.create(options);
|
|
|
|
// wavesurfer.current.load(main?.url);
|
|
|
|
// wavesurfer.current.on("ready", () => {
|
|
// // https://wavesurfer-js.org/docs/methods.html
|
|
// // wavesurfer.current.playPause();
|
|
// // setPlaying(true);
|
|
// setAudioLoaded(true);
|
|
// // make sure object stillavailable when file loaded
|
|
// if (wavesurfer.current) {
|
|
// wavesurfer.current.setVolume(volume);
|
|
// let volumeNow = volume;
|
|
// setVolume(volumeNow);
|
|
// }
|
|
|
|
// $(".waveform__duration").text(formatTime(wavesurfer.current.getDuration()));
|
|
// });
|
|
|
|
// // Show current time
|
|
// wavesurfer.current.on("audioprocess", () => {
|
|
// $(".waveform__counter").text(formatTime(wavesurfer.current.getCurrentTime()));
|
|
// });
|
|
|
|
// wavesurfer.current.on("finish", () => {
|
|
// setPlaying(false);
|
|
// });
|
|
// };
|
|
|
|
// init();
|
|
// // Removes events, elements and disconnects Web Audio nodes.
|
|
// // when component unmount
|
|
|
|
// return () => wavesurfer?.current?.destroy();
|
|
// }
|
|
// }
|
|
|
|
// initState();
|
|
// }, [main?.url]);
|
|
|
|
useEffect(() => {
|
|
if (typeString === "audio" && main?.url) {
|
|
const init = async () => {
|
|
const { default: WaveSurfer } = await import("wavesurfer.js");
|
|
|
|
if (wavesurfer.current) {
|
|
wavesurfer.current.destroy();
|
|
}
|
|
|
|
setPlaying(false);
|
|
|
|
const formatTime = function (time: any) {
|
|
return [
|
|
Math.floor((time % 3600) / 60),
|
|
// minutes
|
|
`00${Math.floor(time % 60)}`.slice(-2),
|
|
].join(":");
|
|
};
|
|
|
|
const options = formWaveSurferOptions(waveformRef.current);
|
|
wavesurfer.current = WaveSurfer.create(options);
|
|
wavesurfer.current.load(main?.url);
|
|
|
|
wavesurfer.current.on("ready", () => {
|
|
setAudioLoaded(true);
|
|
wavesurfer.current.setVolume(volume);
|
|
$(".waveform__duration").text(
|
|
formatTime(wavesurfer.current.getDuration())
|
|
);
|
|
});
|
|
|
|
wavesurfer.current.on("audioprocess", () => {
|
|
$(".waveform__counter").text(
|
|
formatTime(wavesurfer.current.getCurrentTime())
|
|
);
|
|
});
|
|
|
|
wavesurfer.current.on("finish", () => {
|
|
setPlaying(false);
|
|
});
|
|
};
|
|
|
|
init();
|
|
|
|
return () => {
|
|
if (wavesurfer.current) {
|
|
wavesurfer.current.destroy();
|
|
}
|
|
};
|
|
}
|
|
}, [main?.url]);
|
|
|
|
const onVolumeChange = (e: any) => {
|
|
const { target } = e;
|
|
const newVolume = +target?.value;
|
|
|
|
if (newVolume) {
|
|
setVolume(newVolume);
|
|
wavesurfer?.current?.setVolume(newVolume || 1);
|
|
}
|
|
};
|
|
|
|
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 showInput = (e: any) => {
|
|
console.log(document.querySelector(`#${e}`)?.classList);
|
|
document.querySelector(`#${e}`)?.classList.toggle("none");
|
|
setVisibleInput(visibleInput === e ? null : e);
|
|
};
|
|
|
|
function addDefaultProfile(ev: any) {
|
|
ev.target.src = "/assets/avatar-profile.png";
|
|
}
|
|
|
|
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);
|
|
}
|
|
};
|
|
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 (
|
|
<>
|
|
<div className="min-h-screen px-4 md:px-24 py-4">
|
|
{/* Container Utama */}
|
|
<div className="rounded-md overflow-hidden md:flex">
|
|
{/* Bagian Kiri */}
|
|
<div className="md:w-3/4">
|
|
<div className="relative flex flex-row">
|
|
<button onClick={handlePlayPause}>
|
|
<img
|
|
src={`/assets/${playing ? "stop-icon.png" : "play-icon.png"}`}
|
|
/>
|
|
</button>
|
|
<div
|
|
style={
|
|
audioLoaded
|
|
? {
|
|
display: "none",
|
|
}
|
|
: {}
|
|
}
|
|
>
|
|
<BarWave
|
|
color="#ffc831"
|
|
width="60px"
|
|
height="25px"
|
|
duration="2s"
|
|
className="flex ml-5 mt-[50px] lg:ml-[200px]"
|
|
/>
|
|
</div>
|
|
<div
|
|
id="waveform"
|
|
ref={waveformRef}
|
|
className="w-[350px] lg:w-[700px] ml-6 lg:ml-12"
|
|
></div>
|
|
</div>
|
|
<div
|
|
className="flex flex-row mt-2"
|
|
style={
|
|
audioLoaded
|
|
? {}
|
|
: {
|
|
display: "none !important",
|
|
}
|
|
}
|
|
>
|
|
<Icon icon="fa:volume-up" />
|
|
{/* <Slider onChange={onVolumeChange} defaultValue={volume} /> */}
|
|
<input
|
|
type="range"
|
|
id="volume"
|
|
name="volume"
|
|
min="0.01"
|
|
max="1"
|
|
step=".025"
|
|
onChange={onVolumeChange}
|
|
defaultValue={volume}
|
|
/>
|
|
</div>
|
|
{/* audio kedua bawah */}
|
|
<div className="py-4 flex flex-row gap-3">
|
|
<div className="flex flex-col gap-2">
|
|
{detailDataAudio?.files?.map((file: any, index: number) => (
|
|
<a
|
|
onClick={() =>
|
|
setMain({
|
|
id: detailDataAudio.files[index]?.id,
|
|
type: detailDataAudio.fileType.name,
|
|
url:
|
|
Number(detailDataAudio.fileType?.id) == 4
|
|
? detailDataAudio.files[index]?.secondaryUrl
|
|
: Number(detailDataAudio.fileType?.id) == 2
|
|
? `${process.env.NEXT_PUBLIC_API}/media/view?id=${detailDataAudio.files[0]?.id}&operation=file&type=video`
|
|
: detailDataAudio.files[index]?.url,
|
|
thumbnailFileUrl:
|
|
detailDataAudio.files[index]?.thumbnailFileUrl,
|
|
names: detailDataAudio.files[index]?.fileName,
|
|
format: detailDataAudio.files[index]?.format,
|
|
widthPixel: detailDataAudio.files[index]?.widthPixel,
|
|
heightPixel: detailDataAudio.files[index]?.heightPixel,
|
|
size: detailDataAudio.files[index]?.size,
|
|
caption: detailDataAudio.files[index]?.caption,
|
|
})
|
|
}
|
|
key={file?.id}
|
|
>
|
|
<p className="cursor-pointer">
|
|
{file.fileName} | {index + 1}
|
|
</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Informasi */}
|
|
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
|
|
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
|
|
<p className="text-xs lg:text-sm">
|
|
{t("by", { defaultValue: "By" })}
|
|
<span className="font-semibold text-black dark:text-white">
|
|
{detailDataAudio?.uploadedBy?.userLevel?.name}
|
|
</span>
|
|
</p>
|
|
{/* <p className="text-xs lg:text-sm">
|
|
| {t("updatedOn", { defaultValue: "Updated On" })} {detailDataAudio?.updatedAt} WIB |
|
|
</p> */}
|
|
<p className="text-xs lg:text-sm">
|
|
| {t("updatedOn", { defaultValue: "Updated On" })}
|
|
|
|
{formatDateToIndonesian(
|
|
new Date(detailDataAudio?.updatedAt)
|
|
)}{" "}
|
|
{"WIB"}
|
|
</p>
|
|
<p className="text-xs lg:text-sm flex justify-center items-center">
|
|
|
|
|
<Icon icon="formkit:eye" width="15" height="15" />
|
|
{detailDataAudio?.clickCount}
|
|
</p>
|
|
</div>
|
|
<div className="mt-3">
|
|
<p className="flex text-end text-xs lg:text-sm font-semibold">
|
|
{t("creator", { defaultValue: "Creator" })}{" "}
|
|
{detailDataAudio?.creatorName}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/* Keterangan */}
|
|
<div className="w-full">
|
|
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">
|
|
{detailDataAudio?.title}
|
|
</h1>
|
|
<div
|
|
className="font-light text-justify mb-5 lg:mb-0 space-y-4"
|
|
dangerouslySetInnerHTML={{
|
|
__html: detailDataAudio?.htmlDescription,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bagian Kanan */}
|
|
<div className="md:w-1/4 p-4 h-fit bg-[#f7f7f7] dark:bg-slate-600 rounded-lg mx-4">
|
|
{isSaved ? (
|
|
<a
|
|
onClick={() => handleDeleteWishlist()}
|
|
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
|
|
>
|
|
<Icon icon="material-symbols:bookmark" width={40} />
|
|
<p className="text-base lg:text-lg">
|
|
{t("delete", { defaultValue: "Delete" })}
|
|
</p>
|
|
</a>
|
|
) : (
|
|
<a
|
|
onClick={() => doBookmark()}
|
|
className="flex flex-col mb-3 items-center justify-center cursor-pointer"
|
|
>
|
|
<Icon icon="material-symbols:bookmark-outline" width={40} />
|
|
<p className="text-base lg:text-lg">
|
|
{t("save", { defaultValue: "Save" })}
|
|
</p>
|
|
</a>
|
|
)}
|
|
|
|
{/* garis */}
|
|
<div className="border-t border-black my-4"></div>
|
|
|
|
<Link
|
|
href={`/all/filter?title=polda&category=${detailDataAudio?.category.id}`}
|
|
className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
|
|
>
|
|
{detailDataAudio?.category?.name}
|
|
</Link>
|
|
|
|
<div className="flex justify-center flex-wrap gap-2 mb-4">
|
|
{detailDataAudio?.tags?.split(",").map((tag: string) => (
|
|
<a
|
|
onClick={() => router.push(`/all/filter?tag=${tag}`)}
|
|
key={tag}
|
|
className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
|
|
>
|
|
{tag}
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<div className="border-t border-black my-4"></div>
|
|
|
|
{/* Opsi Ukuran Foto */}
|
|
<h4 className="flex text-lg justify-center items-center font-semibold my-3">
|
|
{t("audioSize", { defaultValue: "Audio Size" })}
|
|
</h4>
|
|
|
|
<div className="border-t border-black my-4"></div>
|
|
|
|
<div className="space-y-2">
|
|
{sizes.map((size: any) => (
|
|
<div className="flex flex-row justify-between">
|
|
<div
|
|
key={size.label}
|
|
className="items-center flex flex-row gap-2 cursor-pointer"
|
|
>
|
|
<Input
|
|
type="radio"
|
|
name="size"
|
|
value={size.label}
|
|
checked={selectedSize === size.label}
|
|
onChange={() => setSelectedSize(size.label)}
|
|
className="text-red-600 focus:ring-red-600"
|
|
/>
|
|
<div className="text-sm">{size.label}</div>
|
|
</div>
|
|
<div className="">
|
|
<div className="text-sm">{size.value}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Download Semua */}
|
|
<div className="mt-4">
|
|
<label className="flex items-center space-x-2 text-sm">
|
|
<input
|
|
type="checkbox"
|
|
className="text-red-600 focus:ring-red-600"
|
|
onChange={() => setIsDownloadAll(!isDownloadAll)}
|
|
/>
|
|
<span>
|
|
{t("downloadAll", { defaultValue: "Download All" })}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
{/* Tombol Download */}
|
|
<button
|
|
onClick={handleDownload}
|
|
className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
fill="white"
|
|
d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
|
|
/>
|
|
</svg>
|
|
{t("download", { defaultValue: "Download" })}
|
|
</button>
|
|
|
|
{/* Tombol Bagikan */}
|
|
<div className="flex flex-row py-3">
|
|
<div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<button className="w-full flex items-center gap-2">
|
|
{/* <Icon icon="oi:share" fontSize={20} /> */}
|
|
<p className="text-base font-semibold mb-2">
|
|
{t("share", { defaultValue: "Share" })}
|
|
</p>
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent>
|
|
<div className="flex flex-col">
|
|
<h1 className="mb-2">
|
|
{t("shareTo", { defaultValue: "Share To" })}
|
|
</h1>
|
|
<div className="flex flex-col mb-2">
|
|
<p className="text-base font-semibold mb-1">
|
|
{t("destinationEmail", {
|
|
defaultValue: "Destination Email",
|
|
})}
|
|
</p>
|
|
<Input
|
|
value={emailShareInput}
|
|
onChange={(event) =>
|
|
setEmailShareInput(event.target.value)
|
|
}
|
|
onKeyPress={handleEmailList}
|
|
type="email"
|
|
placeholder={t("pressEnter", {
|
|
defaultValue: "Press Enter",
|
|
})}
|
|
/>
|
|
</div>
|
|
<Button
|
|
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
|
|
onClick={() => shareToEmail()}
|
|
>
|
|
{t("send", { defaultValue: "Send" })}
|
|
</Button>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>{" "}
|
|
<a
|
|
className="ml-8 cursor-pointer"
|
|
onClick={() =>
|
|
handleShare(
|
|
"fb",
|
|
`https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}"e=${content?.title}`
|
|
)
|
|
}
|
|
>
|
|
<Icon
|
|
icon="brandico:facebook"
|
|
height="20"
|
|
className="px-auto text-red-600 text-center"
|
|
/>
|
|
</a>
|
|
<a
|
|
className="ml-5 cursor-pointer"
|
|
onClick={() =>
|
|
handleShare(
|
|
"tw",
|
|
`https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
|
|
)
|
|
}
|
|
>
|
|
<Icon
|
|
icon="mdi:twitter"
|
|
width="23"
|
|
className="text-red-600 text-center"
|
|
/>
|
|
</a>
|
|
<a
|
|
className="ml-5 cursor-pointer"
|
|
onClick={() =>
|
|
handleShare(
|
|
"wa",
|
|
`text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`
|
|
)
|
|
}
|
|
>
|
|
<Icon
|
|
icon="ri:whatsapp-fill"
|
|
width="23"
|
|
className="text-red-600 text-center"
|
|
/>
|
|
</a>
|
|
<Popover>
|
|
<PopoverTrigger
|
|
className="flex justify-end gap-1 cursor-pointer"
|
|
asChild
|
|
>
|
|
<a
|
|
className="ml-5 cursor-pointer"
|
|
data-toggle="dropdown"
|
|
href="#"
|
|
aria-expanded="false"
|
|
>
|
|
<Icon
|
|
icon="material-symbols-light:mail"
|
|
width="23"
|
|
className="text-red-600 text-center"
|
|
/>
|
|
</a>
|
|
</PopoverTrigger>
|
|
<PopoverContent>
|
|
<div className="flex flex-col">
|
|
<h1 className="mb-2">
|
|
{t("shareTo", { defaultValue: "Share To" })}
|
|
</h1>
|
|
<div className="flex flex-col mb-2">
|
|
<p className="text-base font-semibold mb-1">
|
|
{t("destinationEmail", {
|
|
defaultValue: "Destination Email",
|
|
})}
|
|
</p>
|
|
<Input
|
|
value={emailShareInput}
|
|
onChange={(event) =>
|
|
setEmailShareInput(event.target.value)
|
|
}
|
|
onKeyPress={handleEmailList}
|
|
type="email"
|
|
placeholder={t("pressEnter", {
|
|
defaultValue: "Press Enter",
|
|
})}
|
|
/>
|
|
</div>
|
|
<Button
|
|
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
|
|
onClick={() => shareToEmail()}
|
|
>
|
|
{t("send", { defaultValue: "Send" })}
|
|
</Button>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full mb-8">
|
|
{/* Comment */}
|
|
<div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
|
|
<div className="gap-5 flex flex-col px-4 lg:px-14">
|
|
<div className="flex flex-col">
|
|
<h1 className="mb-2">
|
|
{t("shareTo", { defaultValue: "Share To" })}
|
|
</h1>
|
|
<div className="flex flex-col mb-2">
|
|
<p className="text-base font-semibold mb-1">
|
|
{t("destinationEmail", { defaultValue: "Destination Email" })}
|
|
</p>
|
|
<Input
|
|
value={emailShareInput}
|
|
onChange={(event) => setEmailShareInput(event.target.value)}
|
|
onKeyPress={handleEmailList}
|
|
type="email"
|
|
placeholder={t("pressEnter", { defaultValue: "Press Enter" })}
|
|
/>
|
|
</div>
|
|
<Button
|
|
className="bg-blue-500 text-white p-2 w-fit rounded-lg"
|
|
onClick={() => shareToEmail()}
|
|
>
|
|
{t("send", { defaultValue: "Send" })}
|
|
</Button>
|
|
</div>{" "}
|
|
<Textarea
|
|
placeholder="Type your comments here."
|
|
className="flex w-full pb-12"
|
|
onChange={getInputValue}
|
|
/>
|
|
<button
|
|
onClick={() => postData()}
|
|
className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
|
|
>
|
|
{t("send", { defaultValue: "Send" })}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
|
|
|
|
<div>
|
|
{listSuggestion?.map((data: any) => (
|
|
<div className="flex flex-col">
|
|
<div className="flex flex-row mt-2 px-4 lg:px-14">
|
|
<img
|
|
src={data?.suggestionFrom?.profilePictureUrl}
|
|
className="h-12 lg:h-16 w-12 lg:w-16 mr-2"
|
|
onError={addDefaultProfile}
|
|
alt=""
|
|
/>
|
|
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
|
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
|
{Number(data.suggestionFrom?.roleId) == 2 ||
|
|
Number(data.suggestionFrom?.roleId) == 3 ||
|
|
Number(data.suggestionFrom?.roleId) == 4
|
|
? "HUMAS POLRI"
|
|
: data.suggestionFrom?.fullname}
|
|
{getPublicLocaleTimestamp(new Date(data.createdAt))}
|
|
</p>
|
|
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">
|
|
{data?.message}
|
|
</p>
|
|
<div>
|
|
<a
|
|
style={
|
|
Number(data.suggestionFrom?.id) == Number(userId)
|
|
? {
|
|
display: "none",
|
|
}
|
|
: {}
|
|
}
|
|
onClick={() => showInput(`comment-id-${data.id}`)}
|
|
className="mr-2"
|
|
>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
|
|
{t("reply", { defaultValue: "Reply" })}
|
|
</small>
|
|
</a>
|
|
{Number(data.suggestionFrom?.id) == Number(userId) ||
|
|
Number(userRoleId) == 2 ? (
|
|
<a onClick={() => deleteData(data.id)}>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
|
|
{t("delete", { defaultValue: "Delete" })}
|
|
</small>
|
|
</a>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{visibleInput === `comment-id-${data.id}` && (
|
|
<div
|
|
id={`comment-id-${data.id}`}
|
|
className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
|
|
>
|
|
<Textarea
|
|
id={`input-comment-${data.id}`}
|
|
className="p-4 focus:outline-none focus:border-sky-500"
|
|
placeholder={t("enterReply", {
|
|
defaultValue: "Enter Reply",
|
|
})}
|
|
/>
|
|
<div className="flex flex-row gap-3">
|
|
<a onClick={() => postDataChild(data.id)}>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
|
|
{t("send", { defaultValue: "Send" })}
|
|
</small>
|
|
</a>
|
|
<a onClick={() => showInput(`comment-id-${data.id}`)}>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
|
|
{t("cancel", { defaultValue: "Cancel" })}
|
|
</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{data.children.length > 0
|
|
? data.children?.map((child1: any) => (
|
|
<div className="flex flex-col">
|
|
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
|
|
<img
|
|
src={child1.suggestionFrom?.profilePictureUrl}
|
|
onError={addDefaultProfile}
|
|
alt=""
|
|
className="h-10 lg:h-16 w-10 lg:w-16 mr-2"
|
|
/>
|
|
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
|
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
|
{" "}
|
|
<b>
|
|
{Number(child1.suggestionFrom?.roleId) == 2 ||
|
|
Number(child1.suggestionFrom?.roleId) == 3 ||
|
|
Number(child1.suggestionFrom?.roleId) == 4
|
|
? "HUMAS POLRI"
|
|
: child1.suggestionFrom?.fullname}
|
|
</b>{" "}
|
|
{getPublicLocaleTimestamp(
|
|
new Date(child1.createdAt)
|
|
)}
|
|
</p>
|
|
<p className="text-slate-500 text-[13px] lg:text-sm mb-4">
|
|
{parse(String(child1?.message))}
|
|
</p>
|
|
<div>
|
|
<a
|
|
style={
|
|
Number(child1.suggestionFrom?.id) ==
|
|
Number(userId)
|
|
? {
|
|
display: "none",
|
|
}
|
|
: {}
|
|
}
|
|
onClick={() =>
|
|
showInput(`comment-id-${child1.id}`)
|
|
}
|
|
>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
|
|
{t("reply", { defaultValue: "Reply" })}
|
|
</small>
|
|
</a>
|
|
<a
|
|
style={
|
|
Number(child1.suggestionFrom?.id) ==
|
|
Number(userId)
|
|
? {}
|
|
: {
|
|
display: "none",
|
|
}
|
|
}
|
|
onClick={() => deleteData(child1.id)}
|
|
>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
|
|
{t("delete", { defaultValue: "Delete" })}
|
|
</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{visibleInput === `comment-id-${child1.id}` && (
|
|
<div
|
|
id={`comment-id-${child1.id}`}
|
|
className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
|
|
>
|
|
<Textarea
|
|
name=""
|
|
className="mt-2 "
|
|
id={`input-comment-${child1.id}`}
|
|
placeholder={t("enterReply", {
|
|
defaultValue: "Enter Reply",
|
|
})}
|
|
/>
|
|
<div className="flex flex-row mt-2 gap-3">
|
|
<a onClick={() => postDataChild(child1.id)}>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
|
|
{t("send", { defaultValue: "Send" })}
|
|
</small>
|
|
</a>
|
|
<a
|
|
onClick={() =>
|
|
showInput(`comment-id-${child1.id}`)
|
|
}
|
|
>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
|
|
{t("cancel", { defaultValue: "Cancel" })}
|
|
</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{child1.children.length > 0
|
|
? child1.children?.map((child2: any) => (
|
|
<div className="">
|
|
<div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
|
|
<img
|
|
src={
|
|
child2.suggestionFrom?.profilePictureUrl
|
|
}
|
|
className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
|
|
onError={addDefaultProfile}
|
|
alt=""
|
|
/>
|
|
<div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
|
|
<p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
|
|
{" "}
|
|
<b>
|
|
{Number(
|
|
child2.suggestionFrom?.roleId
|
|
) == 2 ||
|
|
Number(child2.suggestionFrom?.roleId) ==
|
|
3 ||
|
|
Number(child2.suggestionFrom?.roleId) ==
|
|
4
|
|
? "HUMAS POLRI"
|
|
: child2.suggestionFrom?.fullname}
|
|
</b>{" "}
|
|
{getPublicLocaleTimestamp(
|
|
new Date(child2.createdAt)
|
|
)}
|
|
</p>
|
|
<p className="text-slate-500 text-sm mb-4">
|
|
{parse(String(child2?.message))}
|
|
</p>
|
|
<div>
|
|
<a
|
|
style={
|
|
Number(child2.suggestionFrom?.id) ==
|
|
Number(userId)
|
|
? {
|
|
display: "none",
|
|
}
|
|
: {}
|
|
}
|
|
onClick={() =>
|
|
showInput(`comment-id-${child2.id}`)
|
|
}
|
|
>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
|
|
{t("reply", {
|
|
defaultValue: "Reply",
|
|
})}
|
|
</small>
|
|
</a>
|
|
<a
|
|
style={
|
|
Number(child2.suggestionFrom?.id) ==
|
|
Number(userId)
|
|
? {}
|
|
: {
|
|
display: "none",
|
|
}
|
|
}
|
|
onClick={() => deleteData(child2.id)}
|
|
>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
|
|
{t("delete", {
|
|
defaultValue: "Delete",
|
|
})}
|
|
</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{visibleInput === `comment-id-${child2.id}` && (
|
|
<div
|
|
id={`comment-id-${child2.id}`}
|
|
className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
|
|
>
|
|
<Textarea
|
|
name=""
|
|
id={`input-comment-${child2.id}`}
|
|
className="my-2"
|
|
placeholder="Masukkan balasan anda"
|
|
/>
|
|
<div className="flex flex-row gap-3">
|
|
<a
|
|
onClick={() => postDataChild(child2.id)}
|
|
>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
|
|
{t("send", { defaultValue: "Send" })}
|
|
</small>
|
|
</a>
|
|
<a
|
|
onClick={() =>
|
|
showInput(`comment-id-${child2.id}`)
|
|
}
|
|
>
|
|
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
|
|
{t("cancel", {
|
|
defaultValue: "Cancel",
|
|
})}
|
|
</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))
|
|
: ""}
|
|
</div>
|
|
))
|
|
: ""}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Konten Serupa */}
|
|
<div className="px-4 lg:px-20">
|
|
<NewContent group="mabes" type={"similar"} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DetailAudio;
|