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,9 +45,10 @@ 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>
+					{!video_url && (
 						<span className="font-regular">
 							{text.split("\\n").map((line, index) => (
 								<Fragment key={index}>
@@ -56,7 +57,16 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
 								</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>
+					)}
 					{prompts && prompts.length > 0 && (
 						<div className="flex flex-col gap-4">
 							<span className="font-bold">You should talk about the following things:</span>
@@ -70,6 +80,7 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
 						</div>
 					)}
 				</div>
+			</div>
 
 			<ReactMediaRecorder
 				audio

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;