ENCOA-295

src/components/ExamEditor/SettingsEditor/listening/components.tsx

@@ -30,7 +30,6 @@ const ListeningComponents: React.FC<Props> = ({ currentSection, localSettings, u
     const {
         focusedSection,
         difficulty,
-        sections
     } = useExamEditorStore(state => state.modules[currentModule]);
 
     const [originalAudioUrl, setOriginalAudioUrl] = useState<string | undefined>();

src/components/ExamEditor/SettingsEditor/listening/index.tsx

@@ -27,6 +27,7 @@ const ListeningSettings: React.FC = () => {
         sections,
         minTimer,
         isPrivate,
+        instructionsState
     } = useExamEditorStore(state => state.modules[currentModule]);
 
     const {
@@ -71,10 +72,33 @@ const ListeningSettings: React.FC = () => {
         try {
             const sectionsWithAudio = sections.filter(s => (s.state as ListeningPart).audio?.source);
 
+            if (instructionsState.chosenOption.value === "Custom" && !instructionsState.currentInstructionsURL.startsWith("blob:")) {
+                toast.error("Generate the custom instructions audio first!");
+                return;
+            }
+
             if (sectionsWithAudio.length > 0) {
+                let instructionsURL = instructionsState.currentInstructionsURL;
+
+                if (instructionsState.chosenOption.value === "Custom") {
+                    const instructionsFormData = new FormData();
+                    const instructionsResponse = await fetch(instructionsState.currentInstructionsURL);
+                    const instructionsBlob = await instructionsResponse.blob();
+                    instructionsFormData.append('file', instructionsBlob, 'audio.mp3');
+
+                    const instructionsUploadResponse = await axios.post('/api/storage', instructionsFormData, {
+                        params: {
+                            directory: 'listening_instructions'
+                        },
+                        headers: {
+                            'Content-Type': 'multipart/form-data'
+                        }
+                    });
+                    instructionsURL = instructionsUploadResponse.data.urls[0];
+                }
+
                 const formData = new FormData();
                 const sectionMap = new Map<number, string>();
-
                 await Promise.all(
                     sectionsWithAudio.map(async (section) => {
                         const listeningPart = section.state as ListeningPart;
@@ -120,6 +144,7 @@ const ListeningSettings: React.FC = () => {
                     variant: sections.length === 4 ? "full" : "partial",
                     difficulty,
                     private: isPrivate,
+                    instructions: instructionsURL
                 };
 
                 const result = await axios.post('/api/exam/listening', exam);
@@ -140,6 +165,11 @@ const ListeningSettings: React.FC = () => {
 
 
     const preview = () => {
+        if (instructionsState.chosenOption.value === "Custom" && !instructionsState.currentInstructionsURL.startsWith("blob:")) {
+            toast.error("Generate the custom instructions audio first!");
+            return;
+        }
+
         setExam({
             parts: sections.map((s) => {
                 const exercise = s.state as ListeningPart;
@@ -156,6 +186,7 @@ const ListeningSettings: React.FC = () => {
             variant: sections.length === 4 ? "full" : "partial",
             difficulty,
             private: isPrivate,
+            instructions: instructionsState.currentInstructionsURL
         } as ListeningExam);
         setExerciseIndex(0);
         setQuestionIndex(0);