diff --git a/app/[locale]/(public)/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/audio/detail/[slug]/page.tsx index 78e4b112..100f0a2f 100644 --- a/app/[locale]/(public)/audio/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/audio/detail/[slug]/page.tsx @@ -1,24 +1,41 @@ "use client"; import { useParams, usePathname, useSearchParams } from "next/navigation"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { Icon } from "@iconify/react/dist/iconify.js"; import NewContent from "@/components/landing-page/new-content"; import { Link, useRouter } from "@/i18n/routing"; import { Textarea } from "@/components/ui/textarea"; import { BarWave } from "react-cssfx-loading"; import { useToast } from "@/components/ui/use-toast"; -import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/service/landing/landing"; +import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/service/landing/landing"; import { getCookiesDecrypt } from "@/lib/utils"; -import { close, error, loading, successCallback } from "@/config/swal"; +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, getPublicLocaleTimestamp } from "@/utils/globals"; +import parse from "html-react-parser"; +import $ from "jquery"; + +const formWaveSurferOptions = (ref: any) => ({ + container: ref, + waveColor: "#eee", + progressColor: "OrangeRed", + cursorColor: "OrangeRed", + barWidth: 3, + 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 = () => { const [selectedSize, setSelectedSize] = useState("L"); - const [selectedTab, setSelectedTab] = useState("video"); const router = useRouter(); const pathname = usePathname(); const params = useParams(); @@ -42,8 +59,16 @@ const DetailAudio = () => { const [width, setWidth] = useState(); const [content, setContent] = useState([]); const userRoleId = getCookiesDecrypt("urie"); + const [playing, setPlaying] = useState(false); + const wavesurfer = useRef(null); + const waveformRef = useRef(null); + const [audioLoaded, setAudioLoaded] = useState(false); + const [volume, setVolume] = useState(0.5); + const [message, setMessage] = useState(""); + const [listSuggestion, setListSuggestion] = useState(); + const MySwal = withReactContent(Swal); - let typeString = "video"; + let typeString = "audio"; useEffect(() => { initFetch(); @@ -53,9 +78,12 @@ const DetailAudio = () => { 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); + setContent(response?.data?.data); + setListSuggestion(responseGet.data?.data); setMain({ id: response?.data?.data?.files[0]?.id, type: response?.data?.data?.fileType.name, @@ -268,6 +296,11 @@ const DetailAudio = () => { } } + const handlePlayPause = () => { + setPlaying(!playing); + wavesurfer?.current?.playPause(); + }; + const handleEmailList = (e: any) => { const arrayEmail: any = []; for (let i = 0; i < emailShareList?.length; i += 1) { @@ -284,6 +317,190 @@ const DetailAudio = () => { 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]); + + const onVolumeChange = (e: any) => { + const { target } = e; + const newVolume = +target?.value; + + if (newVolume) { + setVolume(newVolume); + wavesurfer?.current?.setVolume(newVolume || 1); + } + }; + + async function sendSuggestionChild(parentId: any) { + const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement; + + if (inputElement && inputElement.value.length > 3) { + loading(); + const data = { + mediaUploadId: slug?.split("-")?.[0], + message: inputElement.value, + parentId, + }; + + console.log(data); + const response = await createPublicSuggestion(data); + console.log(response); + const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]); + console.log(responseGet.data?.data); + setListSuggestion(responseGet.data?.data); + + // Reset input field + inputElement.value = ""; + + // document.querySelector("#comment-id-" + parentId)?.style.display = "none"; + + close(); + } + } + async function deleteDataSuggestion(dataId: any) { + loading(); + const response = await deletePublicSuggestion(dataId); + console.log(response); + const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]); + console.log(responseGet.data?.data); + setListSuggestion(responseGet.data?.data); + close(); + } + const deleteData = (dataId: any) => { + MySwal.fire({ + title: "Delete Comment", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#3085d6", + confirmButtonColor: "#d33", + confirmButtonText: "Delete", + }).then((result: any) => { + if (result.isConfirmed) { + deleteDataSuggestion(dataId); + console.log(dataId); + } + }); + }; + const showInput = (e: any) => { + console.log(document.querySelector(`#${e}`)?.classList); + document.querySelector(`#${e}`)?.classList.toggle("hidden"); + }; + 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 ( <>
@@ -291,11 +508,48 @@ const DetailAudio = () => {
{/* Bagian Kiri */}
-
- - -
+
+ +
+ +
+
+
+ + {/* */} + +
+ {/* Footer Informasi */}

@@ -307,7 +561,7 @@ const DetailAudio = () => {

Kreator: {detailDataAudio?.creatorName}

{/* Keterangan */} -
+

{detailDataAudio?.title}

@@ -417,10 +671,175 @@ const DetailAudio = () => {
{/* Comment */} -
-

Berikan Komentar

-