From 25ada744b89a9ad2e4b4de92237ee35a4515b64f Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Wed, 1 Oct 2025 14:38:29 +0700
Subject: [PATCH] fix: eror wavesurfer

---
 .../giat-routine/audio/detail/[id]/page.tsx   | 28 +++----
 .../form/content/audio/audio-detail-form.tsx  | 34 ++++-----
 components/form/task/task-detail-form.tsx     | 28 +++----
 components/form/task/task-edit-form.tsx       |  1 -
 components/wavesurfer.tsx                     | 73 +++++++++----------
 5 files changed, 81 insertions(+), 83 deletions(-)

diff --git a/app/[locale]/(admin)/admin/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx b/app/[locale]/(admin)/admin/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx
index d85ec45..c9450ed 100644
--- a/app/[locale]/(admin)/admin/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx
+++ b/app/[locale]/(admin)/admin/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx
@@ -44,8 +44,8 @@ import "swiper/css";
 import "swiper/css/navigation";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import WavesurferPlayer from "@wavesurfer/react";
-import WaveSurfer from "wavesurfer.js";
+// import WavesurferPlayer from "@wavesurfer/react";
+// import WaveSurfer from "wavesurfer.js";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Badge } from "@/components/ui/badge";
@@ -171,7 +171,7 @@ export default function DetailAudio() {
   const [listData, setListData] = useState([]);
   const [message, setMessage] = useState("");
 
-  const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
+  // const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
   const [isPlaying, setIsPlaying] = useState(false);
 
   const handleReply = (commentId: number) => {
@@ -182,14 +182,14 @@ export default function DetailAudio() {
     setMessage(e.target.value);
   };
 
-  const onReady = (ws: any) => {
-    setWavesurfer(ws);
-    setIsPlaying(false);
-  };
+  // const onReady = (ws: any) => {
+  //   setWavesurfer(ws);
+  //   setIsPlaying(false);
+  // };
 
-  const onPlayPause = () => {
-    wavesurfer && wavesurfer.playPause();
-  };
+  // const onPlayPause = () => {
+  //   wavesurfer && wavesurfer.playPause();
+  // };
 
   const addReply = (commentId: number) => {
     if (replyText.trim()) {
@@ -498,7 +498,7 @@ export default function DetailAudio() {
                               key={data.id}
                               onClick={() => handleFileClick(data.id)}
                             >
-                              <WavesurferPlayer
+                              {/* <WavesurferPlayer
                                 height={500}
                                 waveColor="red"
                                 url={data.secondaryUrl}
@@ -506,11 +506,11 @@ export default function DetailAudio() {
                                 key={`File ID: ${data.id}`}
                                 onPlay={() => setIsPlaying(true)}
                                 onPause={() => setIsPlaying(false)}
-                              />
+                              /> */}
                             </SwiperSlide>
                           ))}
                         </Swiper>
-                        <Button
+                        {/* <Button
                           size="sm"
                           type="button"
                           onClick={onPlayPause}
@@ -530,7 +530,7 @@ export default function DetailAudio() {
                             }
                             className="h-5 w-5"
                           />
-                        </Button>
+                        </Button> */}
                         <div className=" mt-2 ">
                           <Swiper
                             onSwiper={setThumbsSwiper}
diff --git a/components/form/content/audio/audio-detail-form.tsx b/components/form/content/audio/audio-detail-form.tsx
index 3e07baf..c8847b7 100644
--- a/components/form/content/audio/audio-detail-form.tsx
+++ b/components/form/content/audio/audio-detail-form.tsx
@@ -58,7 +58,7 @@ import { getCookiesDecrypt } from "@/lib/utils";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { error } from "@/lib/swal";
 import dynamic from "next/dynamic";
-import WaveSurfer from "wavesurfer.js";
+// import WaveSurfer from "wavesurfer.js";
 import SuggestionModal from "@/components/modal/suggestions-modal";
 import { formatDateToIndonesian } from "@/utils/globals";
 import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
@@ -146,10 +146,10 @@ export default function FormAudioDetail() {
   const [files, setFiles] = useState<FileType[]>([]);
   const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
   const [detailThumb, setDetailThumb] = useState<string[]>([]);
-  const waveSurferRef = useRef<any>(null);
-  const waveSurfersRef = useRef<WaveSurfer[]>([]);
+  // const waveSurferRef = useRef<any>(null);
+  // const waveSurfersRef = useRef<WaveSurfer[]>([]);
   const [isPlayingIndex, setIsPlayingIndex] = useState<number | null>(null);
-  const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
+  // const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
   const [isPlaying, setIsPlaying] = useState(false);
   const [approval, setApproval] = useState<any>();
 
@@ -159,20 +159,20 @@ export default function FormAudioDetail() {
     setDetailThumb(blobUrls);
   };
 
-  const onReady = (ws: WaveSurfer, index: number) => {
-    waveSurfersRef.current[index] = ws;
-  };
+  // const onReady = (ws: WaveSurfer, index: number) => {
+  //   waveSurfersRef.current[index] = ws;
+  // };
 
-  const onPlayPause = (index: number) => {
-    waveSurfersRef.current.forEach((ws, i) => {
-      if (i === index) {
-        ws.isPlaying() ? ws.pause() : ws.play();
-        setIsPlayingIndex(ws.isPlaying() ? index : null);
-      } else {
-        ws.pause();
-      }
-    });
-  };
+  // const onPlayPause = (index: number) => {
+  //   waveSurfersRef.current.forEach((ws, i) => {
+  //     if (i === index) {
+  //       ws.isPlaying() ? ws.pause() : ws.play();
+  //       setIsPlayingIndex(ws.isPlaying() ? index : null);
+  //     } else {
+  //       ws.pause();
+  //     }
+  //   });
+  // };
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop,
diff --git a/components/form/task/task-detail-form.tsx b/components/form/task/task-detail-form.tsx
index 99b53db..35d6422 100644
--- a/components/form/task/task-detail-form.tsx
+++ b/components/form/task/task-detail-form.tsx
@@ -63,8 +63,8 @@ import FileUploader from "../shared/file-uploader";
 import { AudioRecorder } from "react-audio-voice-recorder";
 import Image from "next/image";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import WavesurferPlayer from "@wavesurfer/react";
-import WaveSurfer from "wavesurfer.js";
+// import WavesurferPlayer from "@wavesurfer/react";
+// import WaveSurfer from "wavesurfer.js";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { useTranslations } from "next-intl";
 
@@ -256,7 +256,7 @@ export default function FormTaskDetail() {
   const [timer, setTimer] = useState<number>(120);
   const [search, setSearch] = React.useState<string>("");
 
-  const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
+  // const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
   const [isPlaying, setIsPlaying] = useState(false);
 
   const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>(
@@ -795,14 +795,14 @@ export default function FormTaskDetail() {
     );
   };
 
-  const onReady = (ws: any) => {
-    setWavesurfer(ws);
-    setIsPlaying(false);
-  };
+  // const onReady = (ws: any) => {
+  //   setWavesurfer(ws);
+  //   setIsPlaying(false);
+  // };
 
-  const onPlayPause = () => {
-    wavesurfer && wavesurfer.playPause();
-  };
+  // const onPlayPause = () => {
+  //   wavesurfer && wavesurfer.playPause();
+  // };
 
   const handleRemoveFile = (id: number) => {};
 
@@ -1266,16 +1266,16 @@ export default function FormTaskDetail() {
                       {selectedAudio && (
                         <Card className="mt-2">
                           <div key={selectedAudio}>
-                            <WavesurferPlayer
+                            {/* <WavesurferPlayer
                               height={500}
                               waveColor="red"
                               url={selectedAudio}
                               onReady={onReady}
                               onPlay={() => setIsPlaying(true)}
                               onPause={() => setIsPlaying(false)}
-                            />
+                            /> */}
                           </div>
-                          <Button
+                          {/* <Button
                             size="sm"
                             type="button"
                             onClick={onPlayPause}
@@ -1295,7 +1295,7 @@ export default function FormTaskDetail() {
                               }
                               className="h-5 w-5"
                             />
-                          </Button>
+                          </Button> */}
                         </Card>
                       )}
 
diff --git a/components/form/task/task-edit-form.tsx b/components/form/task/task-edit-form.tsx
index 4d86403..b4a511a 100644
--- a/components/form/task/task-edit-form.tsx
+++ b/components/form/task/task-edit-form.tsx
@@ -44,7 +44,6 @@ import FileUploader from "../shared/file-uploader";
 import { AudioRecorder } from "react-audio-voice-recorder";
 import Image from "next/image";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import WavesurferPlayer from "@wavesurfer/react";
 import { getCsrfToken } from "@/service/auth";
 import { Upload } from "tus-js-client";
 import { error, loading } from "@/lib/swal";
diff --git a/components/wavesurfer.tsx b/components/wavesurfer.tsx
index 5759309..e7a6456 100644
--- a/components/wavesurfer.tsx
+++ b/components/wavesurfer.tsx
@@ -1,45 +1,44 @@
-// components/WavesurferPlayer.tsx
-import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import WaveSurfer from "wavesurfer.js";
+// import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+// import WaveSurfer from "wavesurfer.js";
 
-type Props = {
-  url: string;
-  height?: number;
-  waveColor?: string;
-};
+// type Props = {
+//   url: string;
+//   height?: number;
+//   waveColor?: string;
+// };
 
-export type WavesurferPlayerHandle = {
-  play: () => void;
-  pause: () => void;
-  isPlaying: () => boolean;
-};
+// export type WavesurferPlayerHandle = {
+//   play: () => void;
+//   pause: () => void;
+//   isPlaying: () => boolean;
+// };
 
-const WavesurferPlayer = forwardRef<WavesurferPlayerHandle, Props>(({ url, height = 100, waveColor = "red" }, ref) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const waveSurferRef = useRef<WaveSurfer | null>(null);
+// const WavesurferPlayer = forwardRef<WavesurferPlayerHandle, Props>(({ url, height = 100, waveColor = "red" }, ref) => {
+//   const containerRef = useRef<HTMLDivElement>(null);
+//   const waveSurferRef = useRef<WaveSurfer | null>(null);
 
-  useEffect(() => {
-    if (containerRef.current) {
-      waveSurferRef.current = WaveSurfer.create({
-        container: containerRef.current,
-        waveColor,
-        height,
-      });
-      waveSurferRef.current.load(url);
-    }
+//   useEffect(() => {
+//     if (containerRef.current) {
+//       waveSurferRef.current = WaveSurfer.create({
+//         container: containerRef.current,
+//         waveColor,
+//         height,
+//       });
+//       waveSurferRef.current.load(url);
+//     }
 
-    return () => {
-      waveSurferRef.current?.destroy();
-    };
-  }, [url, waveColor, height]);
+//     return () => {
+//       waveSurferRef.current?.destroy();
+//     };
+//   }, [url, waveColor, height]);
 
-  useImperativeHandle(ref, () => ({
-    play: () => { waveSurferRef.current?.play(); },
-    pause: () => { waveSurferRef.current?.pause(); },
-    isPlaying: () => !!waveSurferRef.current?.isPlaying(),
-  }));
+//   useImperativeHandle(ref, () => ({
+//     play: () => { waveSurferRef.current?.play(); },
+//     pause: () => { waveSurferRef.current?.pause(); },
+//     isPlaying: () => !!waveSurferRef.current?.isPlaying(),
+//   }));
 
-  return <div ref={containerRef} className="w-full rounded-md overflow-hidden" />;
-});
+//   return <div ref={containerRef} className="w-full rounded-md overflow-hidden" />;
+// });
 
-export default WavesurferPlayer;
+// export default WavesurferPlayer;