Improved the appearance of the Waveform

src/components/Waveform.tsx

@@ -1,15 +1,17 @@
-import React, {useEffect, useRef} from "react";
+import React, {useEffect, useRef, useState} from "react";
+import {BsPauseFill, BsPlayFill} from "react-icons/bs";
 import WaveSurfer from "wavesurfer.js";
 
 interface Props {
 	audio: string;
-	isPlaying: boolean;
-	onEnd: () => void;
+	waveColor: string;
+	progressColor: string;
 }
 
-const Waveform = ({audio, isPlaying, onEnd}: Props) => {
+const Waveform = ({audio, waveColor, progressColor}: Props) => {
 	const containerRef = useRef(null);
-	const waveSurferRef = useRef<WaveSurfer | null>(null);
+	const waveSurferRef = useRef<WaveSurfer | null>();
+	const [isPlaying, setIsPlaying] = useState(false);
 
 	useEffect(() => {
 		const waveSurfer = WaveSurfer.create({
@@ -17,38 +19,52 @@ const Waveform = ({audio, isPlaying, onEnd}: Props) => {
 			responsive: true,
 			cursorWidth: 0,
 			height: 24,
-			waveColor: "#FCDDEC",
-			progressColor: "#EF5DA8",
-			barGap: 4,
-			barWidth: 4,
-			barRadius: 2,
+			waveColor,
+			progressColor,
+			barGap: 5,
+			barWidth: 8,
+			barRadius: 4,
 			fillParent: true,
 			hideScrollbar: true,
-			normalize: true,
+			normalize: false,
+			autoCenter: true,
+			ignoreSilenceMode: true,
+			barMinHeight: 4,
 		});
 		waveSurfer.load(audio);
+
 		waveSurfer.on("ready", () => {
 			waveSurferRef.current = waveSurfer;
 		});
-		waveSurfer.on("finish", onEnd);
+
+		waveSurfer.on("finish", () => setIsPlaying(false));
 
 		return () => {
 			waveSurfer.destroy();
 		};
-	}, [audio, onEnd]);
-
-	useEffect(() => {
-		if (isPlaying) waveSurferRef.current?.play();
-		if (!isPlaying) waveSurferRef.current?.pause();
-	}, [isPlaying]);
+	}, [audio, progressColor, waveColor]);
 
 	return (
 		<>
-			<button onClick={() => waveSurferRef.current?.playPause()} type="button">
-				{" "}
-				play/pause{" "}
-			</button>
-			<div className="w-full h-fit" ref={containerRef} />
+			{isPlaying && (
+				<BsPauseFill
+					className="text-mti-gray-cool cursor-pointer w-5 h-5"
+					onClick={() => {
+						setIsPlaying((prev) => !prev);
+						waveSurferRef.current?.playPause();
+					}}
+				/>
+			)}
+			{!isPlaying && (
+				<BsPlayFill
+					className="text-mti-gray-cool cursor-pointer w-5 h-5"
+					onClick={() => {
+						setIsPlaying((prev) => !prev);
+						waveSurferRef.current?.playPause();
+					}}
+				/>
+			)}
+			<div className="w-full max-w-4xl h-fit" ref={containerRef} />
 		</>
 	);
 };

src/pages/test.tsx

@@ -39,7 +39,6 @@ export default function Page() {
 	const {user} = useUser({redirectTo: "/login"});
 	const [recordingDuration, setRecordingDuration] = useState(0);
 	const [isRecording, setIsRecording] = useState(false);
-	const [isPlaying, setIsPlaying] = useState(false);
 
 	useEffect(() => {
 		let recordingInterval: NodeJS.Timer | undefined = undefined;
@@ -159,19 +158,7 @@ export default function Page() {
 											)}
 											{status === "stopped" && mediaBlobUrl && (
 												<>
-													{isPlaying && (
-														<BsPauseFill
-															className="text-mti-gray-cool cursor-pointer w-5 h-5"
-															onClick={() => setIsPlaying(false)}
-														/>
-													)}
-													{!isPlaying && (
-														<BsPlayFill
-															className="text-mti-gray-cool cursor-pointer w-5 h-5"
-															onClick={() => setIsPlaying(true)}
-														/>
-													)}
-													<Waveform audio={mediaBlobUrl} isPlaying={isPlaying} onEnd={() => setIsPlaying(false)} />
+													<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
 													<div className="flex gap-4 items-center">
 														<BsTrashFill
 															className="text-mti-gray-cool cursor-pointer w-5 h-5"