Updated the Speaking exam to work with always having video

src/components/Exercises/Speaking.tsx

@@ -11,7 +11,7 @@ const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mo
 	ssr: false,
 });
 
-export default function Speaking({id, title, text, type, prompts, onNext, onBack}: SpeakingExercise & CommonProps) {
+export default function Speaking({id, title, text, video_url, type, prompts, onNext, onBack}: SpeakingExercise & CommonProps) {
 	const [recordingDuration, setRecordingDuration] = useState(0);
 	const [isRecording, setIsRecording] = useState(false);
 	const [mediaBlob, setMediaBlob] = useState<string>();
@@ -45,30 +45,41 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
 
 	return (
 		<div className="flex flex-col h-full w-full gap-9">
-			<div className="flex flex-col w-full gap-14 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
+			<div className="flex flex-col w-full gap-2 bg-mti-gray-smoke rounded-xl py-8 px-16">
 				<div className="flex flex-col gap-3">
 					<span className="font-semibold">{title}</span>
-					<span className="font-regular">
-						{text.split("\\n").map((line, index) => (
-							<Fragment key={index}>
-								<span>{line}</span>
-								<br />
-							</Fragment>
-						))}
-					</span>
-				</div>
-				{prompts && prompts.length > 0 && (
-					<div className="flex flex-col gap-4">
-						<span className="font-bold">You should talk about the following things:</span>
-						<div className="flex flex-col gap-1 ml-4">
-							{prompts.map((x, index) => (
-								<li className="italic" key={index}>
-									{x}
-								</li>
+					{!video_url && (
+						<span className="font-regular">
+							{text.split("\\n").map((line, index) => (
+								<Fragment key={index}>
+									<span>{line}</span>
+									<br />
+								</Fragment>
 							))}
+						</span>
+					)}
+				</div>
+				<div className="flex gap-6">
+					{video_url && (
+						<div className="flex flex-col gap-4 w-full items-center">
+							<video key={id} autoPlay controls className="max-w-3xl rounded-xl">
+								<source src={video_url} />
+							</video>
 						</div>
-					</div>
-				)}
+					)}
+					{prompts && prompts.length > 0 && (
+						<div className="flex flex-col gap-4">
+							<span className="font-bold">You should talk about the following things:</span>
+							<div className="flex flex-col gap-1 ml-4">
+								{prompts.map((x, index) => (
+									<li className="italic" key={index}>
+										{x}
+									</li>
+								))}
+							</div>
+						</div>
+					)}
+				</div>
 			</div>
 
 			<ReactMediaRecorder

src/exams/Speaking.tsx

@@ -5,6 +5,7 @@ import {infoButtonStyle} from "@/constants/buttonStyles";
 import {UserSolution, SpeakingExam} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import {defaultUserSolutions} from "@/utils/exams";
+import {convertCamelCaseToReadable} from "@/utils/string";
 import {mdiArrowRight} from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
@@ -67,6 +68,7 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 		<>
 			<div className="flex flex-col h-full w-full gap-8 items-center">
 				<ModuleTitle
+					label={convertCamelCaseToReadable(exam.exercises[exerciseIndex].type)}
 					minTimer={exam.minTimer}
 					exerciseIndex={exerciseIndex + 1}
 					module="speaking"

src/interfaces/exam.ts

@@ -104,6 +104,7 @@ export interface SpeakingExercise {
 	title: string;
 	text: string;
 	prompts: string[];
+	video_url: string;
 	userSolutions: {
 		id: string;
 		solution: string;