Updated the Speaking to also work the with exam session persistence

src/components/Exercises/Speaking.tsx

@@ -5,28 +5,58 @@ import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsTrashFill}
 import dynamic from "next/dynamic";
 import Button from "../Low/Button";
 import useExamStore from "@/stores/examStore";
+import {downloadBlob} from "@/utils/evaluation";
+import axios from "axios";
 
 const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
 const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
 	ssr: false,
 });
 
-export default function Speaking({id, title, text, video_url, type, prompts, onNext, onBack}: SpeakingExercise & CommonProps) {
+export default function Speaking({id, title, text, video_url, type, prompts, userSolutions, onNext, onBack}: SpeakingExercise & CommonProps) {
 	const [recordingDuration, setRecordingDuration] = useState(0);
 	const [isRecording, setIsRecording] = useState(false);
 	const [mediaBlob, setMediaBlob] = useState<string>();
+	const [audioURL, setAudioURL] = useState<string>();
+	const [isLoading, setIsLoading] = useState(false);
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
-	useEffect(() => {
-		if (hasExamEnded) {
-			onNext({
-				exercise: id,
-				solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
-				score: {correct: 1, total: 1, missing: 0},
-				type,
-			});
+	const saveToStorage = async () => {
+		if (mediaBlob && mediaBlob.startsWith("blob")) {
+			const blobBuffer = await downloadBlob(mediaBlob);
+			const audioFile = new File([blobBuffer], "audio.wav", {type: "audio/wav"});
+
+			const seed = Math.random().toString().replace("0.", "");
+
+			const formData = new FormData();
+			formData.append("audio", audioFile, `${seed}.wav`);
+			formData.append("root", "speaking_recordings");
+
+			const config = {
+				headers: {
+					"Content-Type": "audio/wav",
+				},
+			};
+
+			const response = await axios.post<{path: string}>("/api/storage/insert", formData, config);
+			if (audioURL) await axios.post("/api/storage/delete", {path: audioURL});
+			return response.data.path;
 		}
+
+		return undefined;
+	};
+
+	useEffect(() => {
+		if (userSolutions.length > 0) {
+			const {solution} = userSolutions[0] as {solution?: string};
+			if (solution && !mediaBlob) setMediaBlob(solution);
+			if (solution && !solution.startsWith("blob")) setAudioURL(solution);
+		}
+	}, [userSolutions, mediaBlob]);
+
+	useEffect(() => {
+		if (hasExamEnded) next();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
@@ -43,6 +73,32 @@ export default function Speaking({id, title, text, video_url, type, prompts, onN
 		};
 	}, [isRecording]);
 
+	const next = async () => {
+		setIsLoading(true);
+		const storagePath = await saveToStorage();
+		setIsLoading(false);
+
+		onNext({
+			exercise: id,
+			solutions: storagePath ? [{id, solution: storagePath}] : [],
+			score: {correct: 1, total: 1, missing: 0},
+			type,
+		});
+	};
+
+	const back = async () => {
+		setIsLoading(true);
+		const storagePath = await saveToStorage();
+		setIsLoading(false);
+
+		onBack({
+			exercise: id,
+			solutions: storagePath ? [{id, solution: storagePath}] : [],
+			score: {correct: 1, total: 1, missing: 0},
+			type,
+		});
+	};
+
 	return (
 		<div className="flex flex-col h-full w-full gap-9">
 			<div className="flex flex-col w-full gap-2 bg-mti-gray-smoke rounded-xl py-8 px-16">
@@ -89,7 +145,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, onN
 					<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
 						<p className="text-base font-normal">Record your answer:</p>
 						<div className="flex gap-8 items-center justify-center py-8">
-							{status === "idle" && (
+							{status === "idle" && !mediaBlob && (
 								<>
 									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
 									{status === "idle" && (
@@ -168,9 +224,9 @@ export default function Speaking({id, title, text, video_url, type, prompts, onN
 									</div>
 								</>
 							)}
-							{status === "stopped" && mediaBlobUrl && (
+							{((status === "stopped" && mediaBlobUrl) || (status === "idle" && mediaBlob)) && (
 								<>
-									<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
+									<Waveform audio={mediaBlobUrl ? mediaBlobUrl : mediaBlob!} waveColor="#FCDDEC" progressColor="#EF5DA8" />
 									<div className="flex gap-4 items-center">
 										<BsTrashFill
 											className="text-mti-gray-cool cursor-pointer w-5 h-5"
@@ -200,32 +256,10 @@ export default function Speaking({id, title, text, video_url, type, prompts, onN
 			/>
 
 			<div className="self-end flex justify-between w-full  gap-8">
-				<Button
-					color="purple"
-					variant="outline"
-					onClick={() =>
-						onBack({
-							exercise: id,
-							solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
-							score: {correct: 1, total: 1, missing: 0},
-							type,
-						})
-					}
-					className="max-w-[200px] self-end w-full">
+				<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
 					Back
 				</Button>
-				<Button
-					color="purple"
-					disabled={!mediaBlob}
-					onClick={() =>
-						onNext({
-							exercise: id,
-							solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
-							score: {correct: 1, total: 1, missing: 0},
-							type,
-						})
-					}
-					className="max-w-[200px] self-end w-full">
+				<Button color="purple" isLoading={isLoading} disabled={!mediaBlob} onClick={next} className="max-w-[200px] self-end w-full">
 					Next
 				</Button>
 			</div>