Implemented the Reading and Listening initial screens according to the new designs, creating new components as needed

src/components/Low/AudioPlayer.tsx

@@ -0,0 +1,87 @@
+import {Module} from "@/interfaces";
+import {formatTimeInMinutes} from "@/utils/string";
+import clsx from "clsx";
+import {useEffect, useRef, useState} from "react";
+import {BsPauseFill, BsPlayFill} from "react-icons/bs";
+import ProgressBar from "./ProgressBar";
+
+interface Props {
+	src: string;
+	color: "blue" | "orange" | "green" | Module;
+	autoPlay?: boolean;
+	disabled?: boolean;
+	onEnd?: () => void;
+}
+
+export default function AudioPlayer({src, color, autoPlay = false, disabled = false, onEnd}: Props) {
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [duration, setDuration] = useState(0);
+	const [currentTime, setCurrentTime] = useState(0);
+
+	const audioPlayerRef = useRef<HTMLAudioElement | null>(null);
+
+	useEffect(() => {
+		if (audioPlayerRef && audioPlayerRef.current) {
+			const seconds = Math.floor(audioPlayerRef.current.duration);
+			setDuration(seconds);
+		}
+	}, [audioPlayerRef?.current?.readyState]);
+
+	useEffect(() => {
+		let playingInterval: NodeJS.Timer | undefined = undefined;
+		if (isPlaying) {
+			playingInterval = setInterval(() => setCurrentTime((prev) => prev + 1), 1000);
+		} else if (playingInterval) {
+			clearInterval(playingInterval);
+		}
+
+		return () => {
+			if (playingInterval) clearInterval(playingInterval);
+		};
+	}, [isPlaying]);
+
+	const togglePlayPause = () => {
+		const prevValue = isPlaying;
+		setIsPlaying(!prevValue);
+		if (!prevValue) {
+			audioPlayerRef?.current?.play();
+		} else {
+			audioPlayerRef?.current?.pause();
+		}
+	};
+
+	return (
+		<div className="w-full h-fit flex gap-4 items-center mt-2">
+			{isPlaying && (
+				<BsPauseFill
+					className={clsx("text-mti-gray-cool cursor-pointer w-5 h-5", disabled && "opacity-60 cursor-not-allowed")}
+					onClick={disabled ? undefined : togglePlayPause}
+				/>
+			)}
+			{!isPlaying && (
+				<BsPlayFill
+					className={clsx("text-mti-gray-cool cursor-pointer w-5 h-5", disabled && "opacity-60 cursor-not-allowed")}
+					onClick={disabled ? undefined : togglePlayPause}
+				/>
+			)}
+			<audio
+				src={src}
+				autoPlay={autoPlay}
+				ref={audioPlayerRef}
+				preload="metadata"
+				onEnded={() => {
+					setIsPlaying(false);
+					setCurrentTime(0);
+					if (onEnd) onEnd();
+				}}
+			/>
+			<div className="flex flex-col gap-2 w-full relative">
+				<div className="absolute w-full flex justify-between -top-5 text-xs px-1">
+					<span>{formatTimeInMinutes(currentTime)}</span>
+					<span>{formatTimeInMinutes(duration)}</span>
+				</div>
+				<ProgressBar label="" color={color} useColor percentage={(currentTime * 100) / duration} className="h-3 w-full" />
+			</div>
+		</div>
+	);
+}