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