[QUDO-27] feat:update meta data
This commit is contained in:
parent
4007a57ba3
commit
1cd3019c6b
|
|
@ -159,18 +159,22 @@ const useTableColumns = () => {
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent className="p-0" align="end">
|
<DropdownMenuContent className="p-0" align="end">
|
||||||
|
{roleId == 11 && (
|
||||||
<Link href={`/contributor/task-ta/detail/${row.original.id}`}>
|
<Link href={`/contributor/task-ta/detail/${row.original.id}`}>
|
||||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||||
<Eye className="w-4 h-4 me-1.5" />
|
<Eye className="w-4 h-4 me-1.5" />
|
||||||
View
|
View
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</Link>
|
</Link>
|
||||||
|
)}
|
||||||
|
{roleId == 11 && (
|
||||||
<Link href={`/contributor/task-ta/update/${row.original.id}`}>
|
<Link href={`/contributor/task-ta/update/${row.original.id}`}>
|
||||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||||
<SquarePen className="w-4 h-4 me-1.5" />
|
<SquarePen className="w-4 h-4 me-1.5" />
|
||||||
Edit
|
Edit
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</Link>
|
</Link>
|
||||||
|
)}
|
||||||
{roleId == 12 && (
|
{roleId == 12 && (
|
||||||
<Link
|
<Link
|
||||||
href={`/contributor/task-ta/upload-task/${row.original.id}`}
|
href={`/contributor/task-ta/upload-task/${row.original.id}`}
|
||||||
|
|
|
||||||
|
|
@ -1,916 +1,48 @@
|
||||||
"use client";
|
import React, { useEffect, useState } from "react";
|
||||||
|
import {
|
||||||
|
checkWishlistStatus,
|
||||||
|
createPublicSuggestion,
|
||||||
|
deletePublicSuggestion,
|
||||||
|
deleteWishlist,
|
||||||
|
getDetail,
|
||||||
|
getDetailMetaData,
|
||||||
|
getPublicSuggestionList,
|
||||||
|
saveWishlist,
|
||||||
|
} from "@/service/landing/landing";
|
||||||
|
import { Metadata } from "next";
|
||||||
|
import DetailImage from "@/components/main/image-detail";
|
||||||
|
import DetailAudio from "@/components/main/audio-detail";
|
||||||
|
|
||||||
import { useParams, usePathname, useSearchParams } from "next/navigation";
|
interface Size {
|
||||||
import React, { useEffect, useRef, useState } from "react";
|
label: string;
|
||||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
value: string;
|
||||||
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 = (ref: any) => ({
|
type Props = {
|
||||||
container: ref,
|
params: {
|
||||||
waveColor: "#eee",
|
title: string;
|
||||||
progressColor: "OrangeRed",
|
slug: string;
|
||||||
cursorColor: "OrangeRed",
|
description: string;
|
||||||
barWidth: 3,
|
thumbnailLink: string;
|
||||||
barRadius: 3,
|
};
|
||||||
responsive: true,
|
};
|
||||||
height: 150, // If true, normalize by the maximum peak instead of 1.0.
|
|
||||||
normalize: true, // Use the PeakCache to improve rendering speed of large waveforms.
|
|
||||||
partialRender: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const DetailAudio = () => {
|
export async function generateMetadata({ params }: any): Promise<Metadata> {
|
||||||
const [selectedSize, setSelectedSize] = useState<string>("L");
|
|
||||||
const router = useRouter();
|
|
||||||
const pathname = usePathname();
|
|
||||||
const params = useParams();
|
|
||||||
const slug = String(params?.slug);
|
const slug = String(params?.slug);
|
||||||
const [detailDataAudio, setDetailDataAudio] = useState<any>();
|
const res = await getDetailMetaData(String(slug));
|
||||||
const [isSaved, setIsSaved] = useState(false);
|
const audio = res?.data?.data;
|
||||||
const [wishlistId, setWishlistId] = useState();
|
// console.log("image", image);
|
||||||
const { toast } = useToast();
|
return {
|
||||||
const [isDownloadAll, setIsDownloadAll] = useState(false);
|
title: audio.title,
|
||||||
const [downloadProgress, setDownloadProgress] = useState(0);
|
description: audio.description,
|
||||||
const [isFromSPIT, setIsFromSPIT] = useState(false);
|
openGraph: {
|
||||||
const [main, setMain] = useState<any>();
|
title: audio?.title,
|
||||||
const userId = getCookiesDecrypt("uie");
|
description: audio?.description,
|
||||||
const [emailShareList, setEmailShareList] = useState<any>();
|
audio: [`${audio?.thumbnailLink}`],
|
||||||
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));
|
|
||||||
console.log("detailAudio", response);
|
|
||||||
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/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: "MP3", value: "... MB" },
|
|
||||||
{ label: "WAV", value: "... MB" },
|
|
||||||
];
|
|
||||||
|
|
||||||
const handleShare = (type: any, url: any) => {
|
|
||||||
if (Number(userRoleId) < 1 || userRoleId == undefined) {
|
|
||||||
router.push("/auth/login");
|
|
||||||
} 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/login");
|
|
||||||
} 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(); // 🔥 Hapus instance lama sebelum membuat yang baru
|
|
||||||
}
|
|
||||||
|
|
||||||
setPlaying(false);
|
|
||||||
|
|
||||||
const formatTime = function (time: any) {
|
|
||||||
return [
|
|
||||||
Math.floor((time % 3600) / 60),
|
|
||||||
// minutes
|
|
||||||
`00${Math.floor(time % 60)}`.slice(-2), // seconds
|
|
||||||
].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(); // 🔥 Hapus saat unmount
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}, [main?.url]);
|
|
||||||
|
|
||||||
const onVolumeChange = (e: any) => {
|
export default async function DetailInfo({ params }: Props) {
|
||||||
const { target } = e;
|
return <DetailAudio />;
|
||||||
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>
|
|
||||||
|
|
||||||
{/* 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")} <span className="font-semibold text-black dark:text-white">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>
|
|
||||||
</p>
|
|
||||||
{/* <p className="text-xs lg:text-sm">
|
|
||||||
| {t("updatedOn")} {detailDataAudio?.updatedAt} WIB |
|
|
||||||
</p> */}
|
|
||||||
<p className="text-xs lg:text-sm">
|
|
||||||
| {t("updatedOn")}
|
|
||||||
{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")} {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")}</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")}</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")}</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")}</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")}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Tombol Bagikan */}
|
|
||||||
<div className="flex flex-row py-3">
|
|
||||||
<p className="text-base font-semibold">{t("share")}</p>
|
|
||||||
<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")}</h1>
|
|
||||||
<div className="flex flex-col mb-2">
|
|
||||||
<p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
|
|
||||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
|
|
||||||
</div>
|
|
||||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
|
||||||
{t("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">
|
|
||||||
<p className="flex items-start text-lg">{t("comment")}</p>
|
|
||||||
<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")}
|
|
||||||
</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")}</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")}</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")} />
|
|
||||||
<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")}</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")}</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")}</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")}</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")} />
|
|
||||||
<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")}</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")}</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")}</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")}</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")}</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")}</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
: ""}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
: ""}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Konten Serupa */}
|
|
||||||
<div className="px-4">
|
|
||||||
<NewContent group="mabes" type={"similar"} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DetailAudio;
|
|
||||||
|
|
|
||||||
|
|
@ -1,766 +1,49 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useParams, usePathname, useSearchParams } from "next/navigation";
|
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
import {
|
||||||
import NewContent from "@/components/landing-page/new-content";
|
checkWishlistStatus,
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
createPublicSuggestion,
|
||||||
import { getCookiesDecrypt } from "@/lib/utils";
|
deletePublicSuggestion,
|
||||||
import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
|
deleteWishlist,
|
||||||
import { close, error, loading, successCallback, warning } from "@/config/swal";
|
getDetail,
|
||||||
import { useToast } from "@/components/ui/use-toast";
|
getDetailMetaData,
|
||||||
import { Link, useRouter } from "@/i18n/routing";
|
getPublicSuggestionList,
|
||||||
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
|
saveWishlist,
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
} from "@/service/landing/landing";
|
||||||
import { Input } from "@/components/ui/input";
|
import { Metadata } from "next";
|
||||||
import { Button } from "@/components/ui/button";
|
import DetailImage from "@/components/main/image-detail";
|
||||||
import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
|
import DetailVideo from "@/components/main/video-detail";
|
||||||
import withReactContent from "sweetalert2-react-content";
|
import DetailDocument from "@/components/main/document-detail";
|
||||||
import Swal from "sweetalert2";
|
|
||||||
import parse from "html-react-parser";
|
|
||||||
import { useTranslations } from "next-intl";
|
|
||||||
import { postActivityLog } from "@/service/content/content";
|
|
||||||
|
|
||||||
const DetailDocument = () => {
|
interface Size {
|
||||||
const [selectedSize, setSelectedSize] = useState<string>("L");
|
label: string;
|
||||||
const [selectedTab, setSelectedTab] = useState("video");
|
value: string;
|
||||||
const router = useRouter();
|
}
|
||||||
const pathname = usePathname();
|
|
||||||
const params = useParams();
|
type Props = {
|
||||||
|
params: {
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
description: string;
|
||||||
|
thumbnailLink: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function generateMetadata({ params }: any): Promise<Metadata> {
|
||||||
const slug = String(params?.slug);
|
const slug = String(params?.slug);
|
||||||
const [detailDataDocument, setDetailDataDocument] = useState<any>();
|
const res = await getDetailMetaData(String(slug));
|
||||||
const [selectedDocument, setSelectedDocument] = useState(0);
|
const document = res?.data?.data;
|
||||||
const [isSaved, setIsSaved] = useState(false);
|
// console.log("image", image);
|
||||||
const [wishlistId, setWishlistId] = useState();
|
return {
|
||||||
const { toast } = useToast();
|
title: document.title,
|
||||||
const [isDownloadAll, setIsDownloadAll] = useState(false);
|
description: document.description,
|
||||||
const [downloadProgress, setDownloadProgress] = useState(0);
|
openGraph: {
|
||||||
const [isFromSPIT, setIsFromSPIT] = useState(false);
|
title: document?.title,
|
||||||
const [main, setMain] = useState<any>();
|
description: document?.description,
|
||||||
const [resolutionSelected, setResolutionSelected] = useState("720");
|
images: [`${document?.thumbnailLink}`],
|
||||||
const [imageSizeSelected, setImageSizeSelected] = useState("l");
|
},
|
||||||
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 [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 = "document";
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
initFetch();
|
|
||||||
checkWishlist();
|
|
||||||
sendActivityLog(2);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const initFetch = async () => {
|
|
||||||
const response = await getDetail(String(slug));
|
|
||||||
console.log("detailDocument", response);
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
setDetailDataDocument(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 () => {
|
export default async function DetailInfo({ params }: Props) {
|
||||||
if (userId) {
|
return <DetailDocument />;
|
||||||
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");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const size = [{ label: "DOC" }, { label: "PPT" }, { label: "PDF" }];
|
|
||||||
|
|
||||||
function formatBytes(kb: any, decimals = 2) {
|
|
||||||
if (kb == 0 || kb == null) return "0 KB";
|
|
||||||
|
|
||||||
const k = 1024;
|
|
||||||
const dm = decimals < 0 ? 0 : decimals;
|
|
||||||
const sizes = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
|
||||||
|
|
||||||
const i = Math.floor(Math.log(kb) / Math.log(k));
|
|
||||||
|
|
||||||
return `${parseFloat((kb / k ** i).toFixed(dm))} ${sizes[i]}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 handleShare = (type: any, url: any) => {
|
|
||||||
if (Number(userRoleId) < 1 || userRoleId == undefined) {
|
|
||||||
router.push("/auth/login");
|
|
||||||
} 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/login");
|
|
||||||
} 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 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;
|
|
||||||
};
|
|
||||||
|
|
||||||
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="px-4 md:px-24 py-4">
|
|
||||||
<div className="rounded-md overflow-hidden md:flex">
|
|
||||||
{/* Bagian Kiri */}
|
|
||||||
<div className="md:w-3/4">
|
|
||||||
<div className="relative">
|
|
||||||
<img src={detailDataDocument?.files[selectedDocument]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
|
|
||||||
<div className="absolute top-4 left-4"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer Informasi */}
|
|
||||||
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
|
|
||||||
{/* <p className="flex flex-row items-center mt-3">
|
|
||||||
oleh <span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span> | Diupdate pada {detailDataDocument?.updatedAt} WIB |
|
|
||||||
<Icon icon="formkit:eye" width="15" height="15" />
|
|
||||||
|
|
||||||
{detailDataDocument?.clickCount}
|
|
||||||
</p>
|
|
||||||
<p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p> */}
|
|
||||||
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
|
|
||||||
<p className="text-xs lg:text-sm">
|
|
||||||
{t("by")} <span className="font-semibold text-black dark:text-white">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
|
|
||||||
</p>
|
|
||||||
{/* <p className="text-xs lg:text-sm">
|
|
||||||
| {t("updatedOn")} {detailDataDocument?.updatedAt} WIB |
|
|
||||||
</p> */}
|
|
||||||
<p className="text-xs lg:text-sm">
|
|
||||||
| {t("updatedOn")}
|
|
||||||
{formatDateToIndonesian(new Date(detailDataDocument?.updatedAt))} {"WIB"}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs lg:text-sm flex justify-center items-center">
|
|
||||||
|
|
|
||||||
<Icon icon="formkit:eye" width="15" height="15" />
|
|
||||||
{detailDataDocument?.clickCount}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="mt-3">
|
|
||||||
<p className="flex text-end text-xs lg:text-sm font-semibold">
|
|
||||||
{t("creator")}
|
|
||||||
{detailDataDocument?.creatorName}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Keterangan */}
|
|
||||||
<div className="">
|
|
||||||
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify">{detailDataDocument?.title}</h1>
|
|
||||||
<div className="font-light text-justify mb-5 space-y-4 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bagian Kanan */}
|
|
||||||
<div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit 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")}</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")}</p>
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* garis */}
|
|
||||||
<div className="border-t border-black my-4"></div>
|
|
||||||
|
|
||||||
<Link href={`/all/filter?title=polda&category=${detailDataDocument?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
|
|
||||||
{detailDataDocument?.category?.name}
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div className="flex justify-center flex-wrap gap-2 mb-4">
|
|
||||||
{detailDataDocument?.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("docSize")}</h4>
|
|
||||||
<div className="border-t border-black my-4"></div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
{size.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">{formatBytes(size?.size)}</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")}</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")}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Tombol Bagikan */}
|
|
||||||
<div className="flex flex-row py-3">
|
|
||||||
<p className="text-base font-semibold">{t("share")}</p>
|
|
||||||
<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")}</h1>
|
|
||||||
<div className="flex flex-col mb-2">
|
|
||||||
<p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
|
|
||||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
|
|
||||||
</div>
|
|
||||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
|
||||||
{t("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">
|
|
||||||
<p className="flex items-start text-lg">{t("comment")}</p>
|
|
||||||
<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")}
|
|
||||||
</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")}</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")}</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")} />
|
|
||||||
<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")}</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")}</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")}</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")}</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")} />
|
|
||||||
<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")}</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")}</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")}</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")}</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={t("enterReply")} />
|
|
||||||
<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")}</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")}</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
: ""}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
: ""}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Konten Serupa */}
|
|
||||||
<div className="">
|
|
||||||
<NewContent group="mabes" type={"similar"} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DetailDocument;
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,788 +1,48 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { useParams, usePathname, useSearchParams } from "next/navigation";
|
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
import {
|
||||||
import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing";
|
checkWishlistStatus,
|
||||||
import VideoPlayer from "@/utils/video-player";
|
createPublicSuggestion,
|
||||||
import NewContent from "@/components/landing-page/new-content";
|
deletePublicSuggestion,
|
||||||
import { Link, useRouter } from "@/i18n/routing";
|
deleteWishlist,
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
getDetail,
|
||||||
import { getCookiesDecrypt } from "@/lib/utils";
|
getDetailMetaData,
|
||||||
import { close, error, loading, successCallback, warning } from "@/config/swal";
|
getPublicSuggestionList,
|
||||||
import { useToast } from "@/components/ui/use-toast";
|
saveWishlist,
|
||||||
import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
|
} from "@/service/landing/landing";
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
import { Metadata } from "next";
|
||||||
import { Input } from "@/components/ui/input";
|
import DetailImage from "@/components/main/image-detail";
|
||||||
import { Button } from "@/components/ui/button";
|
import DetailVideo from "@/components/main/video-detail";
|
||||||
import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
|
|
||||||
import withReactContent from "sweetalert2-react-content";
|
|
||||||
import Swal from "sweetalert2";
|
|
||||||
import parse from "html-react-parser";
|
|
||||||
import { useTranslations } from "next-intl";
|
|
||||||
import Image from "next/image";
|
|
||||||
import { postActivityLog } from "@/service/content/content";
|
|
||||||
|
|
||||||
interface Size {
|
interface Size {
|
||||||
label: string;
|
label: string;
|
||||||
value: string;
|
value: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const DetailVideo = () => {
|
type Props = {
|
||||||
const [selectedSize, setSelectedSize] = useState<string>("L");
|
params: {
|
||||||
const [selectedTab, setSelectedTab] = useState("video");
|
title: string;
|
||||||
const router = useRouter();
|
slug: string;
|
||||||
const pathname = usePathname();
|
description: string;
|
||||||
const params = useParams();
|
thumbnailLink: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function generateMetadata({ params }: any): Promise<Metadata> {
|
||||||
const slug = String(params?.slug);
|
const slug = String(params?.slug);
|
||||||
const [detailDataVideo, setDetailDataVideo] = useState<any>();
|
const res = await getDetailMetaData(String(slug));
|
||||||
const [isSaved, setIsSaved] = useState(false);
|
const video = res?.data?.data;
|
||||||
const [wishlistId, setWishlistId] = useState();
|
// console.log("video", video);
|
||||||
const { toast } = useToast();
|
return {
|
||||||
const [isDownloadAll, setIsDownloadAll] = useState(false);
|
title: video.title,
|
||||||
const [downloadProgress, setDownloadProgress] = useState(0);
|
description: video.description,
|
||||||
const [isFromSPIT, setIsFromSPIT] = useState(false);
|
openGraph: {
|
||||||
const [main, setMain] = useState<any>();
|
title: video?.title,
|
||||||
const [resolutionSelected, setResolutionSelected] = useState("720");
|
description: video?.description,
|
||||||
const userId = getCookiesDecrypt("uie");
|
videos: [`${video?.thumbnailLink}`],
|
||||||
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 [message, setMessage] = useState("");
|
|
||||||
const [listSuggestion, setListSuggestion] = useState<any>();
|
|
||||||
const [visibleInput, setVisibleInput] = useState(null);
|
|
||||||
const MySwal = withReactContent(Swal);
|
|
||||||
const t = useTranslations("LandingPage");
|
|
||||||
let typeString = "video";
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
initFetch();
|
|
||||||
checkWishlist();
|
|
||||||
sendActivityLog(2);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const initFetch = async () => {
|
|
||||||
const response = await getDetail(String(slug));
|
|
||||||
console.log("detailVideo", response);
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
setDetailDataVideo(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 () => {
|
export default async function DetailInfo({ params }: Props) {
|
||||||
if (userId) {
|
return <DetailVideo />;
|
||||||
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");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const sizes = [
|
|
||||||
{ label: "FULL HD", value: "1920 x 1080 px" },
|
|
||||||
{ label: "HD", value: "1280 x 720 px" },
|
|
||||||
{ label: "SD", value: "720 x 480 px" },
|
|
||||||
{ label: "WEB", value: "640 x 360 px" },
|
|
||||||
];
|
|
||||||
|
|
||||||
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 {
|
|
||||||
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 === "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 handleShare = (type: any, url: any) => {
|
|
||||||
if (Number(userRoleId) < 1 || userRoleId == undefined) {
|
|
||||||
router.push("/auth/login");
|
|
||||||
} 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/login");
|
|
||||||
} 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 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;
|
|
||||||
};
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const shimmer = (w: number, h: number) => `
|
|
||||||
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="g">
|
|
||||||
<stop stop-color="#bcbcbd" offset="20%" />
|
|
||||||
<stop stop-color="#f9fafb" offset="50%" />
|
|
||||||
<stop stop-color="#bcbcbd" offset="70%" />
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<rect width="${w}" height="${h}" fill="#bcbcbd" />
|
|
||||||
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
|
|
||||||
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
|
|
||||||
</svg>`;
|
|
||||||
|
|
||||||
const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="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">
|
|
||||||
<VideoPlayer url={detailDataVideo?.files[0]?.url} />
|
|
||||||
<div className="absolute top-4 left-4"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Footer Informasi */}
|
|
||||||
<div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
|
|
||||||
{/* <p className="flex flex-row items-center mt-3">
|
|
||||||
oleh
|
|
||||||
<span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
|
|
||||||
| Diupdate pada {detailDataVideo?.updatedAt} WIB |
|
|
||||||
<Icon icon="formkit:eye" width="15" height="15" />
|
|
||||||
|
|
||||||
{detailDataVideo?.clickCount}
|
|
||||||
</p>
|
|
||||||
<p className="mt-3">Kreator: {detailDataVideo?.creatorName}</p> */}
|
|
||||||
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
|
|
||||||
<p className="text-xs lg:text-sm">
|
|
||||||
{t("by")} <span className="font-semibold text-black dark:text-white">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
|
|
||||||
</p>
|
|
||||||
{/* <p className="text-xs lg:text-sm">
|
|
||||||
| {t("updatedOn")}
|
|
||||||
{detailDataVideo?.updatedAt} WIB |
|
|
||||||
</p> */}
|
|
||||||
<p className="text-xs lg:text-sm">
|
|
||||||
| {t("updatedOn")}
|
|
||||||
{formatDateToIndonesian(new Date(detailDataVideo?.updatedAt))} {"WIB"}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs lg:text-sm flex justify-center items-center">
|
|
||||||
|
|
|
||||||
<Icon icon="formkit:eye" width="15" height="15" />
|
|
||||||
{detailDataVideo?.clickCount}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="mt-3">
|
|
||||||
<p className="flex text-end text-xs lg:text-sm font-semibold">
|
|
||||||
{t("creator")}
|
|
||||||
{detailDataVideo?.creatorName}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Keterangan */}
|
|
||||||
<div className="w-full">
|
|
||||||
<h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{detailDataVideo?.title}</h1>
|
|
||||||
<div
|
|
||||||
className="font-light text-justify mb-5 space-y-4 lg:mb-0"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: detailDataVideo?.htmlDescription,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bagian Kanan */}
|
|
||||||
<div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 rounded-lg mx-4 h-fit">
|
|
||||||
{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")}</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")}</p>
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* garis */}
|
|
||||||
<div className="border-t border-black my-4"></div>
|
|
||||||
|
|
||||||
<Link href={`/all/filter?title=polda&category=${detailDataVideo?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
|
|
||||||
{detailDataVideo?.categoryName}
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div className="flex justify-center flex-wrap gap-2 mb-4">
|
|
||||||
{detailDataVideo?.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 hover:text-white">
|
|
||||||
{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("videoSize")}</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")}</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")}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Tombol Bagikan */}
|
|
||||||
<div className="flex flex-row justify-center py-3">
|
|
||||||
<p className="text-base font-semibold">{t("share")}</p>
|
|
||||||
<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")}</h1>
|
|
||||||
<div className="flex flex-col mb-2">
|
|
||||||
<p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
|
|
||||||
<Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
|
|
||||||
</div>
|
|
||||||
<Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
|
|
||||||
{t("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">
|
|
||||||
<p className="flex items-start text-lg">{t("comment")}</p>
|
|
||||||
<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")}
|
|
||||||
</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">
|
|
||||||
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} 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")}</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")}</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")} />
|
|
||||||
<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")}</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")}</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">
|
|
||||||
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} 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")}</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")}</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")} />
|
|
||||||
<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")}</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")}</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">
|
|
||||||
<Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1080} height={1080} 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")}</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")}</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={t("enterReply")} />
|
|
||||||
<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")}</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")}</small>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
: ""}
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
: ""}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Konten Serupa */}
|
|
||||||
<div className="">
|
|
||||||
<NewContent group="mabes" type={"similar"} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DetailVideo;
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -26,7 +26,7 @@ export default function PerformancePolresViz() {
|
||||||
levelName == "MABES POLRI"
|
levelName == "MABES POLRI"
|
||||||
? isInternational[0]
|
? isInternational[0]
|
||||||
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-top10?"
|
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-top10?"
|
||||||
: "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-top10?"
|
: "views/2023_09_db-ranking-polda_rev100/db-ranking-13-polda?"
|
||||||
: `/views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${poldaState}&`;
|
: `/views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${poldaState}&`;
|
||||||
|
|
||||||
const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
|
const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,32 @@ import { getCsrfToken } from "../auth";
|
||||||
import axiosBaseInstance from "./axios-base-instance";
|
import axiosBaseInstance from "./axios-base-instance";
|
||||||
import axiosInstanceJson from "./axiosInstanceJson";
|
import axiosInstanceJson from "./axiosInstanceJson";
|
||||||
|
|
||||||
|
export async function httpGetInterceptorForMetadata(pathUrl: any) {
|
||||||
|
const response = await axiosInterceptorInstance
|
||||||
|
.get(pathUrl)
|
||||||
|
.catch((error) => error.response);
|
||||||
|
console.log("Response interceptor : ", response);
|
||||||
|
if (response?.status == 200 || response?.status == 201) {
|
||||||
|
return {
|
||||||
|
error: false,
|
||||||
|
message: "success",
|
||||||
|
data: response?.data,
|
||||||
|
};
|
||||||
|
} else if (response?.status == 401) {
|
||||||
|
Object.keys(Cookies.get()).forEach((cookieName) => {
|
||||||
|
Cookies.remove(cookieName);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
error: true,
|
||||||
|
message: response?.data?.message || response?.data || null,
|
||||||
|
data: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export async function httpGetInterceptor(pathUrl: any) {
|
export async function httpGetInterceptor(pathUrl: any) {
|
||||||
const pathname = window.location.pathname;
|
const pathname = window?.location.pathname;
|
||||||
const response = await axiosInterceptorInstance
|
const response = await axiosInterceptorInstance
|
||||||
.get(pathUrl)
|
.get(pathUrl)
|
||||||
.catch((error) => error.response);
|
.catch((error) => error.response);
|
||||||
|
|
@ -177,7 +201,7 @@ export async function httpGetInterceptorWithToken(pathUrl: any, headers?: any) {
|
||||||
|
|
||||||
export async function httpGetArrayBuffer(pathUrl: any, headers: any) {
|
export async function httpGetArrayBuffer(pathUrl: any, headers: any) {
|
||||||
const response = await axiosInterceptorInstance
|
const response = await axiosInterceptorInstance
|
||||||
.get(pathUrl, { headers, responseType: 'arraybuffer' })
|
.get(pathUrl, { headers, responseType: "arraybuffer" })
|
||||||
.catch((error) => error.response);
|
.catch((error) => error.response);
|
||||||
console.log("Response base svc : ", response);
|
console.log("Response base svc : ", response);
|
||||||
if (response?.status == "200") {
|
if (response?.status == "200") {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,10 @@
|
||||||
import { httpGet, httpPost } from "../http-config/http-base-service";
|
import { httpGet, httpPost } from "../http-config/http-base-service";
|
||||||
import { httpDeleteInterceptor, httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
|
import {
|
||||||
|
httpDeleteInterceptor,
|
||||||
|
httpGetInterceptor,
|
||||||
|
httpGetInterceptorForMetadata,
|
||||||
|
httpPostInterceptor,
|
||||||
|
} from "../http-config/http-interceptor-service";
|
||||||
|
|
||||||
export async function getCsrfToken() {
|
export async function getCsrfToken() {
|
||||||
const pathUrl = "csrf";
|
const pathUrl = "csrf";
|
||||||
|
|
@ -27,15 +32,25 @@ export async function getCsrfToken() {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getHeroData() {
|
export async function getHeroData() {
|
||||||
return await httpGetInterceptor(`media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=5&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`);
|
return await httpGetInterceptor(
|
||||||
|
`media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=5&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getPublicCategoryData(group: any = "", type: string = "", isInt: Boolean = false) {
|
export async function getPublicCategoryData(
|
||||||
return await httpGetInterceptor(`media/categories/list/publish?enablePage=0&group=${group}&type=${type}&isInt=${isInt}`);
|
group: any = "",
|
||||||
|
type: string = "",
|
||||||
|
isInt: Boolean = false
|
||||||
|
) {
|
||||||
|
return await httpGetInterceptor(
|
||||||
|
`media/categories/list/publish?enablePage=0&group=${group}&type=${type}&isInt=${isInt}`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getCategoryData() {
|
export async function getCategoryData() {
|
||||||
return await httpGetInterceptor(`media/categories/list/publish?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=`);
|
return await httpGetInterceptor(
|
||||||
|
`media/categories/list/publish?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getListContent(props: any) {
|
export async function getListContent(props: any) {
|
||||||
|
|
@ -49,15 +64,25 @@ export async function getPrivacy() {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getIndeksData() {
|
export async function getIndeksData() {
|
||||||
return await httpGetInterceptor(`blog/public/pagination?enablePage=1&page=0&size=20`);
|
return await httpGetInterceptor(
|
||||||
|
`blog/public/pagination?enablePage=1&page=0&size=20`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getDetail(slug: string) {
|
export async function getDetail(slug: string) {
|
||||||
return await httpGetInterceptor(`media/public?slug=${slug}&state=mabes`);
|
return await httpGetInterceptor(`media/public?slug=${slug}&state=mabes`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function getDetailMetaData(slug: string) {
|
||||||
|
return await httpGetInterceptorForMetadata(
|
||||||
|
`media/public?slug=${slug}&state=mabes`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export async function getDetailIndeks() {
|
export async function getDetailIndeks() {
|
||||||
return await httpGetInterceptor(`blog/public/pagination?enablePage=1&page=0&size=6`);
|
return await httpGetInterceptor(
|
||||||
|
`blog/public/pagination?enablePage=1&page=0&size=6`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getFeedback() {
|
export async function getFeedback() {
|
||||||
|
|
@ -69,20 +94,50 @@ export async function postUserFeedback() {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function listCategory(type = "") {
|
export async function listCategory(type = "") {
|
||||||
return await httpGetInterceptor(`media/categories/list/enable?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=${type}`);
|
return await httpGetInterceptor(
|
||||||
|
`media/categories/list/enable?enablePage=1&sort=desc&sortBy=updatedAt&size=12&type=${type}`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function publicDetailBlog(slug: any) {
|
export async function publicDetailBlog(slug: any) {
|
||||||
return await httpGetInterceptor(`blog/public/read/${slug}`);
|
return await httpGetInterceptor(`blog/public/read/${slug}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function listData(type: string, search: string, category: string, size = 10, page = 0, sortBy = "createdAt", format = "", tag = "", group = "", startDate = "", endDate = "", month = "", year = "", isInt = false) {
|
export async function listData(
|
||||||
|
type: string,
|
||||||
|
search: string,
|
||||||
|
category: string,
|
||||||
|
size = 10,
|
||||||
|
page = 0,
|
||||||
|
sortBy = "createdAt",
|
||||||
|
format = "",
|
||||||
|
tag = "",
|
||||||
|
group = "",
|
||||||
|
startDate = "",
|
||||||
|
endDate = "",
|
||||||
|
month = "",
|
||||||
|
year = "",
|
||||||
|
isInt = false
|
||||||
|
) {
|
||||||
return await httpGetInterceptor(
|
return await httpGetInterceptor(
|
||||||
`media/public/list?enablePage=1&sort=desc&sortBy=${sortBy}&size=${size}&page=${page}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&group=${group}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}&isInt=${isInt}`
|
`media/public/list?enablePage=1&sort=desc&sortBy=${sortBy}&size=${size}&page=${page}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&group=${group}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}&isInt=${isInt}`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function listDataRegional(type: string, search: string, category: string, format = "", tag = "", startDate = "", endDate = "", month = "", year = "", size = 10, page = 0, sortBy = "createdAt") {
|
export async function listDataRegional(
|
||||||
|
type: string,
|
||||||
|
search: string,
|
||||||
|
category: string,
|
||||||
|
format = "",
|
||||||
|
tag = "",
|
||||||
|
startDate = "",
|
||||||
|
endDate = "",
|
||||||
|
month = "",
|
||||||
|
year = "",
|
||||||
|
size = 10,
|
||||||
|
page = 0,
|
||||||
|
sortBy = "createdAt"
|
||||||
|
) {
|
||||||
return await httpGetInterceptor(
|
return await httpGetInterceptor(
|
||||||
`media/public/regional-list?enablePage=1&size=${size}&page=${page}&sort=desc&sortBy=${sortBy}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}`
|
`media/public/regional-list?enablePage=1&size=${size}&page=${page}&sort=desc&sortBy=${sortBy}&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}`
|
||||||
);
|
);
|
||||||
|
|
@ -103,8 +158,19 @@ export async function getListPorvinces() {
|
||||||
export async function getUsersTeams(id: any) {
|
export async function getUsersTeams(id: any) {
|
||||||
return await httpGetInterceptor(`users?instituteId=${id}`);
|
return await httpGetInterceptor(`users?instituteId=${id}`);
|
||||||
}
|
}
|
||||||
export async function mediaWishlist(type: any, instituteId: any, search: any, category: any, size: string, page: number, sortBy: undefined, format: string) {
|
export async function mediaWishlist(
|
||||||
return await httpGetInterceptor(`/media/wishlist/list?enablePage=1&size=${size}&page=${page}&typeId=${type}&instituteId=${instituteId}`);
|
type: any,
|
||||||
|
instituteId: any,
|
||||||
|
search: any,
|
||||||
|
category: any,
|
||||||
|
size: string,
|
||||||
|
page: number,
|
||||||
|
sortBy: undefined,
|
||||||
|
format: string
|
||||||
|
) {
|
||||||
|
return await httpGetInterceptor(
|
||||||
|
`/media/wishlist/list?enablePage=1&size=${size}&page=${page}&typeId=${type}&instituteId=${instituteId}`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function checkWishlistStatus(mediaId: any) {
|
export async function checkWishlistStatus(mediaId: any) {
|
||||||
|
|
@ -121,14 +187,27 @@ export async function deleteWishlist(id: any) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getContentRewritePagination(page = 0, size = 10) {
|
export async function getContentRewritePagination(page = 0, size = 10) {
|
||||||
return await httpGetInterceptor(`media/rewrite/pagination?size=${size}&page=${page}`);
|
return await httpGetInterceptor(
|
||||||
|
`media/rewrite/pagination?size=${size}&page=${page}`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getContentRewrite(id: any) {
|
export async function getContentRewrite(id: any) {
|
||||||
return await httpGetInterceptor(`media/rewrite?id=${id}`);
|
return await httpGetInterceptor(`media/rewrite?id=${id}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function listDataAll(type: any, search: any, category: any, format = "", tag = "", group = "", startDate = "", endDate = "", month = "", year = "") {
|
export async function listDataAll(
|
||||||
|
type: any,
|
||||||
|
search: any,
|
||||||
|
category: any,
|
||||||
|
format = "",
|
||||||
|
tag = "",
|
||||||
|
group = "",
|
||||||
|
startDate = "",
|
||||||
|
endDate = "",
|
||||||
|
month = "",
|
||||||
|
year = ""
|
||||||
|
) {
|
||||||
return await httpGetInterceptor(
|
return await httpGetInterceptor(
|
||||||
`media/public/list?enablePage=1&size=20&sort=desc&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&group=${group}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}`
|
`media/public/list?enablePage=1&size=20&sort=desc&typeId=${type}&title=${search}&categoryId=${category}&fileFormats=${format}&tags=${tag}&group=${group}&startDate=${startDate}&endDate=${endDate}&month=${month}&year=${year}`
|
||||||
);
|
);
|
||||||
|
|
@ -202,6 +281,6 @@ export async function deleteBlogComments(slug: any) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function sendMessage(data: any) {
|
export async function sendMessage(data: any) {
|
||||||
const url = 'inbox';
|
const url = "inbox";
|
||||||
return httpPostInterceptor(url, data);
|
return httpPostInterceptor(url, data);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue