Now only when the user submits the listening exam are the mp3 are uploaded onto firebase bucket

src/pages/generation.tsx

@@ -18,8 +18,11 @@ import ExamEditor from "@/components/ExamEditor";
 import MultipleAudioUploader from "@/components/ExamEditor/Shared/AudioEdit";
 import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
+import { useEffect } from "react";
+import { Exercise, InteractiveSpeakingExercise, ListeningPart, SpeakingExercise } from "@/interfaces/exam";
+import { type } from "os";
 
-export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
+export const getServerSideProps = withIronSessionSsr(async ({ req, res }) => {
 	const user = await requestUser(req, res)
 	if (!user) return redirect("/login")
 
@@ -27,16 +30,56 @@ export const getServerSideProps = withIronSessionSsr(async ({req, res}) => {
 		return redirect("/")
 
 	return {
-		props: serialize({user}),
+		props: serialize({ user }),
 	};
 }, sessionOptions);
 
 export default function Generation({ user }: { user: User; }) {
-	const { title, currentModule, dispatch } = useExamEditorStore();
+	const { title, currentModule, modules, dispatch } = useExamEditorStore();
 
 	const updateRoot = (updates: Partial<ExamEditorStore>) => {
-        dispatch({ type: 'UPDATE_ROOT', payload: { updates } });
-    };
+		dispatch({ type: 'UPDATE_ROOT', payload: { updates } });
+	};
+
+	// media cleanup on unmount
+	useEffect(() => {
+		return () => {
+			const state = modules;
+			state.listening.sections.forEach(section => {
+				const listeningPart = section.state as ListeningPart;
+				if (listeningPart.audio?.source) {
+					URL.revokeObjectURL(listeningPart.audio.source);
+					dispatch({type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
+						sectionId: section.sectionId, module: "listening", field: "state", value: {...listeningPart, audio: undefined}
+					}})
+				}
+			});
+
+			state.speaking.sections.forEach(section => {
+				const sectionState = section.state as Exercise;
+				if (sectionState.type === 'speaking') {
+					const speakingExercise = sectionState as SpeakingExercise;
+					URL.revokeObjectURL(speakingExercise.video_url);
+					dispatch({type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
+						sectionId: section.sectionId, module: "listening", field: "state", value: {...speakingExercise, video_url: undefined}
+					}})
+				}
+				if (sectionState.type === 'interactiveSpeaking') {
+					const interactiveSpeaking = sectionState as InteractiveSpeakingExercise;
+					interactiveSpeaking.prompts.forEach(prompt => {
+						URL.revokeObjectURL(prompt.video_url);
+					});
+					dispatch({type: "UPDATE_SECTION_SINGLE_FIELD", payload: {
+						sectionId: section.sectionId, module: "listening", field: "state", value: {
+							...interactiveSpeaking, prompts: interactiveSpeaking.prompts.map((p)=> ({...p, video_url: undefined}))
+						}
+					}})
+				}
+			});
+
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
 
 
 	return (
@@ -60,7 +103,7 @@ export default function Generation({ user }: { user: User; }) {
 							placeholder="Insert a title here"
 							name="title"
 							label="Title"
-							onChange={(title) => updateRoot({title})}
+							onChange={(title) => updateRoot({ title })}
 							roundness="xl"
 							defaultValue={title}
 							required
@@ -69,7 +112,7 @@ export default function Generation({ user }: { user: User; }) {
 						<label className="font-normal text-base text-mti-gray-dim">Module</label>
 						<RadioGroup
 							value={currentModule}
-							onChange={(currentModule) => updateRoot({currentModule})}
+							onChange={(currentModule) => updateRoot({ currentModule })}
 							className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
 							{[...MODULE_ARRAY].map((x) => (
 								<Radio value={x} key={x}>