diff --git a/app/[locale]/(public)/audio/detail/[slug]/page.tsx b/app/[locale]/(public)/audio/detail/[slug]/page.tsx index 100f0a2f..9e2a89f8 100644 --- a/app/[locale]/(public)/audio/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/audio/detail/[slug]/page.tsx @@ -48,8 +48,6 @@ const DetailAudio = () => { const [downloadProgress, setDownloadProgress] = useState(0); const [isFromSPIT, setIsFromSPIT] = useState(false); const [main, setMain] = useState(); - const [resolutionSelected, setResolutionSelected] = useState("720"); - const [imageSizeSelected, setImageSizeSelected] = useState("l"); const userId = getCookiesDecrypt("uie"); const [emailShareList, setEmailShareList] = useState(); const [emailShareInput, setEmailShareInput] = useState(); @@ -67,7 +65,7 @@ const DetailAudio = () => { const [message, setMessage] = useState(""); const [listSuggestion, setListSuggestion] = useState(); const MySwal = withReactContent(Swal); - + const [visibleInput, setVisibleInput] = useState(null); let typeString = "audio"; useEffect(() => { @@ -317,63 +315,111 @@ 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]); + useEffect(() => { - function initState() { - if (typeString == "audio" && main?.url != undefined) { - const init = async () => { - const { default: WaveSurfer } = await import("wavesurfer.js"); + if (typeString === "audio" && main?.url) { + const init = async () => { + const { default: WaveSurfer } = await import("wavesurfer.js"); - setPlaying(false); + if (wavesurfer.current) { + wavesurfer.current.destroy(); // 🔥 Hapus instance lama sebelum membuat yang baru + } - 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); + setPlaying(false); - 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); - }); + const formatTime = function (time: any) { + return [ + Math.floor((time % 3600) / 60), + // minutes + `00${Math.floor(time % 60)}`.slice(-2), // seconds + ].join(":"); }; - init(); - // Removes events, elements and disconnects Web Audio nodes. - // when component unmount + const options = formWaveSurferOptions(waveformRef.current); + wavesurfer.current = WaveSurfer.create(options); + wavesurfer.current.load(main?.url); - return () => wavesurfer?.current?.destroy(); - } + 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 + } + }; } - - initState(); }, [main?.url]); const onVolumeChange = (e: any) => { @@ -438,8 +484,10 @@ const DetailAudio = () => { }; const showInput = (e: any) => { console.log(document.querySelector(`#${e}`)?.classList); - document.querySelector(`#${e}`)?.classList.toggle("hidden"); + document.querySelector(`#${e}`)?.classList.toggle("none"); + setVisibleInput(visibleInput === e ? null : e); }; + function addDefaultProfile(ev: any) { ev.target.src = "/assets/avatar-profile.png"; } @@ -513,7 +561,6 @@ const DetailAudio = () => {
{ : {} } > - +
-
+
{ > {/* */} - +
{/* Footer Informasi */} -
-

- oleh {detailDataAudio?.uploadedBy?.userLevel?.name} | Diupdate pada {detailDataAudio?.updatedAt} WIB |  - -   - {detailDataAudio?.clickCount} -

-

Kreator: {detailDataAudio?.creatorName}

+
+
+

+ oleh {detailDataAudio?.uploadedBy?.userLevel?.name} +

+

 | Diupdate pada {detailDataAudio?.updatedAt} WIB  | 

+

+ +   {detailDataAudio?.clickCount}   +

+
+
+

Kreator: {detailDataAudio?.creatorName}

+
{/* Keterangan */}
-

{detailDataAudio?.title}

-
+

{detailDataAudio?.title}

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

Berikan Komentar

-