From 2f8225ded613b7f4ef796753ef27d57ca324ac49 Mon Sep 17 00:00:00 2001 From: sabdayagra Date: Fri, 31 Jan 2025 19:51:04 +0700 Subject: [PATCH] fix: responsive page --- .../(public)/audio/detail/[slug]/page.tsx | 310 ++++++++++-------- .../content-management/download/page.tsx | 6 +- .../content-management/galery/page.tsx | 6 +- .../rewrite/create/[id]/page.tsx | 21 +- .../rewrite/detail/[id]/page.tsx | 16 +- .../content-management/rewrite/page.tsx | 6 +- .../content-management/users/page.tsx | 2 +- .../(public)/document/detail/[slug]/page.tsx | 137 ++++---- app/[locale]/(public)/feedback/page.tsx | 11 +- .../(public)/image/detail/[slug]/page.tsx | 119 +++---- app/[locale]/(public)/image/filter/page.tsx | 17 +- .../(public)/indeks/detail/[slug]/page.tsx | 66 ++-- app/[locale]/(public)/indeks/page.tsx | 16 +- .../(public)/video/detail/[slug]/page.tsx | 83 ++--- app/[locale]/(public)/video/filter/page.tsx | 17 +- app/[locale]/auth/page.tsx | 4 +- app/[locale]/auth/registration/page.tsx | 74 +++-- components/landing-page/content-category.tsx | 6 +- components/landing-page/header-management.tsx | 8 +- components/landing-page/hero.tsx | 8 +- components/landing-page/navbar.tsx | 65 ++-- components/landing-page/new-content.tsx | 4 +- .../landing-page/sidebar-management.tsx | 2 +- 23 files changed, 544 insertions(+), 460 deletions(-) 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

-