fixing

components/audio-player.tsx

@@ -1,9 +1,13 @@
 import React, { useRef, useState, useEffect } from "react";
 
-const AudioPlayer = (props: {urlAudio: string}) => {
+interface AudioPlayerProps {
+  urlAudio: string;
+  fileName: string; // ✅ Tambahkan props ini
+}
+
+const AudioPlayer: React.FC<AudioPlayerProps> = ({ urlAudio, fileName }) => {
   const audioRef = useRef<HTMLAudioElement>(null);
   const [currentTime, setCurrentTime] = useState(0);
-  const {urlAudio} = props
 
   const playAudio = () => {
     audioRef.current?.play();
@@ -29,7 +33,6 @@ const AudioPlayer = (props: {urlAudio: string}) => {
     };
 
     audio.addEventListener("timeupdate", updateTime);
-
     return () => {
       audio.removeEventListener("timeupdate", updateTime);
     };
@@ -37,24 +40,20 @@ const AudioPlayer = (props: {urlAudio: string}) => {
 
   const formatTime = (time: number) => {
     const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60)
+    const seconds = Math.floor(time % 60).toString().padStart(2, "0");
-      .toString()
-      .padStart(2, "0");
     return `${minutes}:${seconds}`;
   };
 
   return (
-    <div style={{ textAlign: "center", marginTop: "50px" }}>
+    <div className="mt-2">
-      <h2>Pemutar Audio</h2>
+      <h2 className="text-lg font-semibold">{fileName}</h2>
-      <audio ref={audioRef} src={urlAudio} />
+      <audio ref={audioRef} src={urlAudio} controls className="mt-1 w-full" />
-      <div style={{ marginTop: "10px" }}>
+      {/* <div className="mt-2 space-x-2">
         <button onClick={playAudio}>▶️ Play</button>
         <button onClick={pauseAudio}>⏸️ Pause</button>
         <button onClick={stopAudio}>⏹️ Stop</button>
       </div>
-      <div style={{ marginTop: "10px" }}>
+      <div className="mt-1 text-sm text-gray-500">{formatTime(currentTime)}</div> */}
-        <span>{formatTime(currentTime)}</span>
-      </div>
     </div>
   );
 };

components/form/content/audio-detail-form.tsx

@@ -303,12 +303,15 @@ export default function FormAudioDetail() {
         const filesData = details?.files || [];
         const audioFiles = filesData.filter(
           (file: any) =>
-            file.contentType && file.contentType.startsWith("video/webm")
+            file.contentType &&
+            (file.contentType.startsWith("audio/") ||
+              file.contentType.includes("webm"))
         );
 
         const fileUrls = audioFiles.map((file: { secondaryUrl: string }) =>
           file.secondaryUrl ? file.secondaryUrl : "default-audio.mp3"
         );
+        console.log("Audio file URLs:", fileUrls);
 
         setDetailThumb(fileUrls);
 
@@ -560,16 +563,13 @@ export default function FormAudioDetail() {
                   <div className="w-full">
                     {detailThumb.map((url, index) => (
                       <div key={index}>
-                        {/* <WavesurferPlayer
+                        {files.map((file, index) => (
-                          url={url}
+                          <AudioPlayer
-                          waveColor="red"
+                            key={index}
-                          height={80}
+                            urlAudio={file.url}
-                          onReady={(ws: any) => onReady(ws, index)}
+                            fileName={file.fileName}
                           />
-                        <Button onClick={() => onPlayPause(index)}>
+                        ))}
-                          {isPlayingIndex === index ? "Pause" : "Play"}
-                        </Button> */}
-                        <AudioPlayer urlAudio={url} />
                       </div>
                     ))}
                   </div>