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

src/components/ExamEditor/SectionRenderer/SectionContext/listening.tsx

@@ -6,6 +6,9 @@ import useSectionEdit from "../../Hooks/useSectionEdit";
 import ScriptRender from "../../Exercises/Script";
 import { Card, CardContent } from "@/components/ui/card";
 import Dropdown from "@/components/Dropdown";
+import AudioPlayer from "@/components/Low/AudioPlayer";
+import { MdHeadphones } from "react-icons/md";
+import clsx from "clsx";
 
 
 const ListeningContext: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
@@ -41,7 +44,7 @@ const ListeningContext: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
     }, [genResult, dispatch, sectionId, setEditing, currentModule]);
 
     const renderContent = (editing: boolean) => {
-        if (scriptLocal === undefined) {
+        if (scriptLocal === undefined && !editing) {
             return (
                 <Card>
                     <CardContent className="py-10">
@@ -50,20 +53,38 @@ const ListeningContext: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
                 </Card>
             );
         }
-        return (
 
-            <Dropdown
-                className={`w-full text-left p-4 mb-2 bg-gradient-to-r from-ielts-${currentModule}/60 to-ielts-${currentModule} text-white rounded-lg shadow-lg transition-transform transform hover:scale-102`}
-                title="Conversation"
-                contentWrapperClassName="rounded-xl"
-            >
-                <ScriptRender
-                    local={scriptLocal}
-                    setLocal={setScriptLocal}
-                    section={sectionId}
-                    editing={editing}
-                />
-            </Dropdown>
+        return (
+            <>
+
+                {listeningPart.audio?.source && (
+                    <AudioPlayer
+                        key={sectionId}
+                        src={listeningPart.audio?.source ?? ''}
+                        color="listening"
+                    />
+                )}
+                <Dropdown
+                    className="mt-8 w-full flex items-center justify-between p-4 bg-white hover:bg-gray-50 transition-colors border rounded-xl border-gray-200"
+                    contentWrapperClassName="rounded-xl mt-2"
+                    customTitle={
+                        <div className="flex items-center space-x-3">
+                            <MdHeadphones className={clsx(
+                                "h-5 w-5",
+                                `text-ielts-${currentModule}`
+                            )} />
+                            <span className="font-medium text-gray-900">Conversation</span>
+                        </div>
+                    }
+                >
+                    <ScriptRender
+                        local={scriptLocal}
+                        setLocal={setScriptLocal}
+                        section={sectionId}
+                        editing={editing}
+                    />
+                </Dropdown>
+            </>
         );
     };