kontenhumas
/
kontenhumas-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: eror wavesurfer

This commit is contained in:
Sabda Yagra 2025-10-01 14:38:29 +07:00
parent 9338c84523
commit 25ada744b8
5 changed files with 81 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
app/[locale]/(admin)/admin/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx
View File

@ -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}

34
components/form/content/audio/audio-detail-form.tsx
View File

@ -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,

28
components/form/task/task-detail-form.tsx
View File

@ -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>
)}

1
components/form/task/task-edit-form.tsx
View File

@ -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";

73
components/wavesurfer.tsx
View File

@ -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;