@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/exams/take/components/speaking/renderers/SpeakingDescribeImageRenderer.js

@@ -1 +1,193 @@
-"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{usePresignedFileUrl as t}from"../../../../../../shared/lib/hooks";import{useSpeakingRendererSetup as a}from"../../../hooks/useSpeakingRendererSetup";import n from"../../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import{getSpeakingLayout as i}from"../../../../../../components/themes";import{SpeakingAudioPlayer as o}from"../../../../../../components/shared/audio/SpeakingAudioPlayer";import{useEffect as s,useRef as d,useState as l}from"react";import c from"next/image";import{useExamTakingStore as m}from"../../../../../../shared/lib/stores/examTakingStore";import u from"../../../../../../components/themes/summer-sky/assets/images/mic_ver2_icon.png";import p from"../../../../../../components/themes/summer-sky/assets/images/stop_audio_ver2_icon.png";import h from"../../../../../../components/themes/summer-sky/assets/images/audio_ver2_icon.png";import g from"../../../../../../components/themes/summer-sky/assets/images/pause_audio_ver2_icon.png";import x from"../../../../../../components/themes/summer-sky/assets/images/lock_mic_ver2_icon.png";function f({total:t,currentIndex:a,answeredIds:n,questionIds:i}){return e("div",{className:"flex items-center gap-2 font-bold text-[#78350f] font-['Quicksand'] z-10",children:[e("span",{className:"text-sm",children:["Question ",a+1,"/ ",t]}),r("div",{className:"flex gap-1.5",children:Array.from({length:t},(e,t)=>{const o=t===a,s=n.has(i[t]);return r("div",{className:"w-2.5 h-2.5 rounded-full "+(o?"bg-[#FF9900] scale-125 shadow-sm":s?"bg-[#16CA3B]":"bg-white/60")},t)})})]})}const b=new Set(["/speaking/video/read_displayed_content.webm","/speaking/video/speaking_describe_image.webm","/speaking/video/spontaneous_qa.webm"]);function w(e){const r=Math.floor(e/60),t=Math.floor(e%60);return`${r.toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`}export function SpeakingDescribeImageRenderer(x){const{currentQuestionIndex:v}=x,y=a({...x,maxDurationMs:6e4,currentQuestionIndex:v}),N=m(e=>e.examTitle),k=N?.toLowerCase().includes("placement test")||!1,_=y.currentQuestion?.content,{previewUrl:C,isLoading:E}=t(_?.imageUrl||""),P=d(null),[S,F]=l(!!x.skipTeacherVideo),I=d(null),[T,U]=l(!1),[j,q]=l(0),[A,z]=l(0);if(s(()=>{const e=P.current;e&&x.teacherVideoUrl&&(e.playbackRate=b.has(x.teacherVideoUrl)?1.25:1)},[x.teacherVideoUrl]),s(()=>{const e=I.current;if(!e)return;const r=()=>{U(!0),y.onAudioPlayingChange?.(!0)},t=()=>{U(!1),y.onAudioPlayingChange?.(!1)},a=()=>{U(!1),q(0),y.onAudioPlayingChange?.(!1)},n=()=>{q(e.currentTime),e.duration&&isFinite(e.duration)&&z(e.duration)},i=()=>{e.duration&&isFinite(e.duration)&&z(e.duration)};return e.addEventListener("play",r),e.addEventListener("pause",t),e.addEventListener("ended",a),e.addEventListener("timeupdate",n),e.addEventListener("loadedmetadata",i),e.addEventListener("durationchange",i),()=>{e.removeEventListener("play",r),e.removeEventListener("pause",t),e.removeEventListener("ended",a),e.removeEventListener("timeupdate",n),e.removeEventListener("loadedmetadata",i),e.removeEventListener("durationchange",i),y.onAudioPlayingChange?.(!1)}},[y.recorder?.previewUrl,y.onAudioPlayingChange]),!y.currentQuestion||!_)return null;const L=new Set(x.part.questions.map(e=>e.id).filter(e=>!!x.answers[e])),V=x.part.questions.map(e=>e.id);if(x.speakingTheme&&"CAMBRIDGE_YLE"!==x.speakingTheme){const t=i(x.speakingTheme),a=r(f,{total:x.part.questions.length,currentIndex:y.nav.currentIndex,answeredIds:L,questionIds:V});return r(t,{onExit:x.onExit,partName:x.part.name||`Part ${x.part.partNo}`,instruction:x.part.instructions||"DESCRIBE THE IMAGE",audioUrl:"",questionNumber:y.nav.questionNumberInPart,onPrev:y.handlePrev,onNext:y.handleNext,showPrev:y.nav.showPrev,showNext:y.nav.showNext,canGoPrev:y.nav.canGoPrev,canGoNext:y.nav.canGoNext,onAudioPlayingChange:y.onAudioPlayingChange,recorder:x.isReviewMode?null:y.recorder,showExistingBadge:y.showExistingBadge,headerRight:a,teacherVideoUrl:x.teacherVideoUrl,waitForTeacherVideo:x.waitForTeacherVideo,onTeacherVideoEnded:x.onTeacherIntroPlayed,skipTeacherVideo:x.skipTeacherVideo,children:r("div",{className:"w-full h-full relative overflow-y-auto custom-scrollbar flex flex-col items-center",children:e("div",{className:"w-full shrink-0 flex flex-col items-center",style:{width:"900px",maxWidth:"95%",padding:"20px 0 100px 0"},children:[_.isBackup&&r("div",{className:"bg-amber-500 text-white px-3 py-1 rounded-md text-xs font-bold border border-white shadow-md z-10 shrink-0 mb-4",children:"Câu hỏi dự phòng"}),_.question&&r("div",{className:"z-10 mx-auto px-8 py-2.5 bg-white/80 backdrop-blur-md rounded-full shadow-sm border border-slate-100 w-fit shrink-0 mb-4",children:r("h3",{className:"text-[17px] md:text-lg font-bold text-[#343C55] font-['Quicksand'] text-center whitespace-pre-wrap leading-tight",children:_.question})}),_.audioUrl&&r("div",{className:"z-10 mx-auto w-full max-w-[280px] shrink-0 mb-4",children:r(o,{audioUrl:_.audioUrl,onPlayingChange:y.onAudioPlayingChange,autoPlay:!x.waitForTeacherVideo})}),y.showExistingBadge&&e("div",{className:"absolute right-12 top-12 z-10 rounded-full bg-green-500 px-4 py-1.5 flex items-center gap-2 text-sm font-bold text-white shadow-md border-2 border-white",children:[r("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),r("div",{className:"w-full flex justify-center items-center mt-2 relative",children:r("div",E?{className:"flex justify-center items-center w-full max-w-[60%] h-[300px] border-4 border-dashed border-gray-300 rounded-xl bg-gray-50/50",children:r("div",{className:"animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"})}:C?{className:"bg-white rounded-2xl shadow-[0_4px_15px_rgba(0,0,0,0.08)] p-2 w-[80%] max-w-[700px] flex justify-center items-center",children:r("img",{src:C,alt:"Scene to describe",className:"w-full h-auto object-contain rounded-xl",draggable:!1})}:{className:"flex justify-center items-center text-orange-800 font-semibold opacity-70 w-full h-[300px] border-4 border-dashed border-orange-900/30 rounded-xl bg-orange-900/10",children:"Chưa có hình ảnh mô tả"})})]})})})}const B=x.teacherVideoUrl?r("div",{className:"fixed bottom-6 left-6 z-40 flex flex-col items-start w-[12vw] min-w-[150px] pointer-events-none",children:e("div",{className:"relative w-full",children:[r("video",{ref:P,src:x.teacherVideoUrl,autoPlay:!x.skipTeacherVideo,playsInline:!0,onEnded:()=>{F(!0),x.onTeacherIntroPlayed?.()},className:"w-full h-auto drop-shadow-[0_4px_16px_rgba(0,0,0,0.2)] transition-opacity duration-700",style:{opacity:S?0:1}}),!k&&"CAMBRIDGE_YLE"!==x.speakingTheme&&r("img",{src:"/speaking/image/teacher_ai_smile.png",alt:"AI Teacher",className:"absolute top-0 left-0 w-full h-auto drop-shadow-[0_4px_16px_rgba(0,0,0,0.2)] transition-opacity duration-700",style:{opacity:S?1:0}})]})}):null;return e("div",{className:"flex flex-col w-full h-full relative",style:{background:"linear-gradient(180deg, #E6F3FF 0%, #FFFFFF 100%)"},children:[e("div",{className:"relative w-full flex justify-between items-start pt-6 px-6 z-20 shrink-0",children:[r("div",{className:"flex-1"}),r("div",{className:"flex-none drop-shadow-md",children:r(n,{partNumber:x.part.partNo,questionCount:x.part.questions.length,partName:x.part.name||`Part ${x.part.partNo}`})}),r("div",{className:"flex-1 flex justify-end mt-2 z-20",children:r(f,{total:x.part.questions.length,currentIndex:y.nav.currentIndex,answeredIds:L,questionIds:V})})]}),e("div",{className:"flex-1 w-full flex flex-col min-h-0",children:[e("div",{className:"flex-1 w-full overflow-y-auto custom-scrollbar px-4 pb-6 pt-2 flex flex-col items-center relative",children:[_.isBackup&&r("div",{className:"bg-amber-500 text-white px-3 py-1 rounded-md text-xs font-bold border border-white shadow-md z-10 shrink-0 mb-4 mt-2",children:"Câu hỏi dự phòng"}),_.question&&r("div",{className:"z-10 mx-auto px-8 py-2.5 bg-white backdrop-blur-md rounded-full shadow-[0_2px_10px_rgba(0,0,0,0.05)] border border-slate-100 w-fit shrink-0 mb-4 mt-2",children:r("h3",{className:"text-[17px] md:text-lg font-bold text-[#343C55] font-['Quicksand'] text-center whitespace-pre-wrap leading-tight",children:_.question})}),_.audioUrl&&r("div",{className:"z-10 mx-auto w-full max-w-[280px] shrink-0 mb-4",children:r(o,{audioUrl:_.audioUrl,onPlayingChange:y.onAudioPlayingChange,autoPlay:!x.waitForTeacherVideo})}),y.showExistingBadge&&e("div",{className:"absolute right-[5%] lg:right-[15%] top-4 z-10 rounded-full bg-green-500 px-4 py-1.5 flex items-center gap-2 text-sm font-bold text-white shadow-lg border-2 border-white",children:[r("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),r("div",{className:"w-full flex justify-center items-center relative mb-4 shrink-0",children:r("div",E?{className:"flex justify-center items-center w-full max-w-[60%] h-[300px] border-4 border-dashed border-gray-300 rounded-xl bg-white/50 backdrop-blur-sm shadow-[0_4px_15px_rgba(0,0,0,0.05)]",children:r("div",{className:"animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"})}:C?{className:"bg-white rounded-2xl shadow-[0_4px_15px_rgba(0,0,0,0.08)] p-2 w-[80%] max-w-[650px] flex justify-center items-center",children:r("img",{src:C,alt:"Scene to describe",className:"w-full h-auto object-contain rounded-xl",draggable:!1})}:{className:"flex justify-center items-center text-orange-800 font-semibold opacity-70 w-full max-w-[800px] h-[300px] border-4 border-dashed border-orange-900/30 rounded-xl bg-orange-900/10",children:"Chưa có hình ảnh mô tả"})})]}),y.recorder&&!x.isReviewMode&&e("div",{className:"shrink-0 flex flex-col items-center z-50 gap-3 px-4 py-6 border-t border-slate-200/50 bg-white/40 backdrop-blur-md",children:[r("div",{className:"bg-white rounded-[100px] shadow-[0_4px_10px_rgba(0,0,0,0.1)] whitespace-nowrap flex items-center justify-center",style:{padding:"10px 30px",color:"recording"===y.recorder.status?"#FF4D4D":["recorded","uploading","uploaded"].includes(y.recorder.status)?"#16CA3B":"#343C55",fontSize:"18px",fontFamily:'"Quicksand", sans-serif',fontWeight:700,lineHeight:"100%",letterSpacing:"-0.01em"},children:"recording"===y.recorder.status?"Ấn lần nữa để lưu kết quả":["recorded","uploading","uploaded"].includes(y.recorder.status)?"Câu trả lời đã được ghi nhận !":"Ấn biểu tượng Micro để trả lời"}),e("div",{className:"relative flex flex-col items-center",children:["recording"===y.recorder.status?e("div",{className:"relative flex flex-col justify-center items-center cursor-pointer drop-shadow-[0_0_15px_rgba(255,100,100,0.8)] transition-transform hover:scale-[1.05] active:scale-[0.95]",onClick:y.recorder.stopRecording,children:[r(c,{src:p,alt:"stop recording",className:"animate-pulse",style:{width:"120px",height:"120px"}}),e("span",{className:"absolute text-white text-[16px] font-bold font-['Quicksand']",style:{bottom:"30px"},children:[Math.floor(y.recorder.remainingSeconds/60),":",(y.recorder.remainingSeconds%60).toString().padStart(2,"0")]})]}):r(c,{src:["recorded","uploading","uploaded"].includes(y.recorder.status)?T?g:h:u,alt:"mic",className:"transition-transform cursor-pointer hover:scale-[1.05] active:scale-[0.95]",style:{width:"120px",height:"120px"},onClick:()=>{if("recording"===y.recorder?.status)y.recorder.stopRecording();else if("idle"===y.recorder?.status||"error"===y.recorder?.status)y.recorder.startRecording();else if("uploaded"===y.recorder?.status||"recorded"===y.recorder?.status){const e=I.current;e&&(T?e.pause():e.play().catch(console.error))}}}),y.recorder?.previewUrl&&r("audio",{ref:I,src:y.recorder.previewUrl}),"recording"===y.recorder.status&&r("div",{className:"absolute whitespace-nowrap text-center",style:{top:"100%",marginTop:"16px",color:"#FF4D4D",fontSize:"18px",fontFamily:'"Quicksand", sans-serif',fontWeight:700,lineHeight:"100%",letterSpacing:"-0.01em",textShadow:"0 1px 3px rgba(0,0,0,0.15)"},children:"Đang ghi âm câu hỏi . . ."}),["recorded","uploading","uploaded"].includes(y.recorder.status)&&r("div",{className:"absolute whitespace-nowrap text-center flex flex-col items-center",style:{top:"100%",marginTop:"16px",color:"#343C55",fontSize:"18px",fontFamily:'"Quicksand", sans-serif',fontWeight:700,lineHeight:"100%",letterSpacing:"-0.01em"},children:T?`${w(j)}/${A?w(A):"--:--"}`:"Nghe đáp án"})]})]})]}),B]})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SpeakingDescribeImageRenderer
+ *
+ * Renderer for SPEAKING_DESCRIBE_IMAGE (Speaking Part 2).
+ * View: A wooden board with a large scene to describe.
+ * Interaction: Student records their description of the image.
+ */
+import { usePresignedFileUrl } from '../../../../../../shared/lib/hooks';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import CambridgeYlePartBanner from '../../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+import { SpeakingAudioPlayer } from '../../../../../../components/shared/audio/SpeakingAudioPlayer';
+import { useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
+import { useExamTakingStore } from '../../../../../../shared/lib/stores/examTakingStore';
+import microIcon from '../../../../../../components/themes/summer-sky/assets/images/mic_ver2_icon.png';
+import redCircleImg from '../../../../../../components/themes/summer-sky/assets/images/stop_audio_ver2_icon.png';
+import listenAudioImg from '../../../../../../components/themes/summer-sky/assets/images/audio_ver2_icon.png';
+import pauseAudioImg from '../../../../../../components/themes/summer-sky/assets/images/pause_audio_ver2_icon.png';
+import lockMicImg from '../../../../../../components/themes/summer-sky/assets/images/lock_mic_ver2_icon.png';
+function QuestionProgress({ total, currentIndex, answeredIds, questionIds }) {
+    return (_jsxs("div", { className: "flex items-center gap-2 font-bold text-[#78350f] font-['Quicksand'] z-10", children: [_jsxs("span", { className: "text-sm", children: ["Question ", currentIndex + 1, "/ ", total] }), _jsx("div", { className: "flex gap-1.5", children: Array.from({ length: total }, (_, i) => {
+                    const isActive = i === currentIndex;
+                    const isAnswered = answeredIds.has(questionIds[i]);
+                    return (_jsx("div", { className: `w-2.5 h-2.5 rounded-full ${isActive ? 'bg-[#FF9900] scale-125 shadow-sm' : isAnswered ? 'bg-[#16CA3B]' : 'bg-white/60'}` }, i));
+                }) })] }));
+}
+const FAST_TEACHER_VIDEO_URLS = new Set([
+    '/speaking/video/read_displayed_content.webm',
+    '/speaking/video/speaking_describe_image.webm',
+    '/speaking/video/spontaneous_qa.webm',
+]);
+const FAST_TEACHER_VIDEO_PLAYBACK_RATE = 1.25;
+// ============================================
+// Helpers
+// ============================================
+function formatPlaybackTime(timeInSeconds) {
+    const m = Math.floor(timeInSeconds / 60);
+    const s = Math.floor(timeInSeconds % 60);
+    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+}
+// ============================================
+// Main component
+// ============================================
+export function SpeakingDescribeImageRenderer(props) {
+    const { currentQuestionIndex } = props;
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        maxDurationMs: 60000, // 60 seconds max for describing an image
+        currentQuestionIndex,
+    });
+    const examTitle = useExamTakingStore((state) => state.examTitle);
+    const isPlacementTest = examTitle?.toLowerCase().includes('placement test') || false;
+    const content = setup.currentQuestion?.content;
+    // Fetch the presigned URL for the background image (uncooked hooks)
+    const { previewUrl: displayImageUrl, isLoading: isImageLoading } = usePresignedFileUrl(content?.imageUrl || '');
+    const teacherVideoRef = useRef(null);
+    const [teacherVideoEnded, setTeacherVideoEnded] = useState(!!props.skipTeacherVideo);
+    const playbackAudioRef = useRef(null);
+    const [isPlayingBack, setIsPlayingBack] = useState(false);
+    const [playbackTime, setPlaybackTime] = useState(0);
+    const [playbackDuration, setPlaybackDuration] = useState(0);
+    useEffect(() => {
+        const teacherVideo = teacherVideoRef.current;
+        if (!teacherVideo || !props.teacherVideoUrl)
+            return;
+        teacherVideo.playbackRate = FAST_TEACHER_VIDEO_URLS.has(props.teacherVideoUrl)
+            ? FAST_TEACHER_VIDEO_PLAYBACK_RATE
+            : 1;
+    }, [props.teacherVideoUrl]);
+    // Track playback audio events
+    useEffect(() => {
+        const audio = playbackAudioRef.current;
+        if (!audio)
+            return;
+        const onPlay = () => { setIsPlayingBack(true); setup.onAudioPlayingChange?.(true); };
+        const onPause = () => { setIsPlayingBack(false); setup.onAudioPlayingChange?.(false); };
+        const onEnded = () => { setIsPlayingBack(false); setPlaybackTime(0); setup.onAudioPlayingChange?.(false); };
+        const onTimeUpdate = () => {
+            setPlaybackTime(audio.currentTime);
+            if (audio.duration && isFinite(audio.duration)) {
+                setPlaybackDuration(audio.duration);
+            }
+        };
+        const onLoaded = () => {
+            if (audio.duration && isFinite(audio.duration)) {
+                setPlaybackDuration(audio.duration);
+            }
+        };
+        audio.addEventListener('play', onPlay);
+        audio.addEventListener('pause', onPause);
+        audio.addEventListener('ended', onEnded);
+        audio.addEventListener('timeupdate', onTimeUpdate);
+        audio.addEventListener('loadedmetadata', onLoaded);
+        audio.addEventListener('durationchange', onLoaded);
+        return () => {
+            audio.removeEventListener('play', onPlay);
+            audio.removeEventListener('pause', onPause);
+            audio.removeEventListener('ended', onEnded);
+            audio.removeEventListener('timeupdate', onTimeUpdate);
+            audio.removeEventListener('loadedmetadata', onLoaded);
+            audio.removeEventListener('durationchange', onLoaded);
+            setup.onAudioPlayingChange?.(false);
+        };
+    }, [setup.recorder?.previewUrl, setup.onAudioPlayingChange]);
+    if (!setup.currentQuestion || !content)
+        return null;
+    const answeredIds = new Set(props.part.questions.map((q) => q.id).filter((id) => !!props.answers[id]));
+    const questionIds = props.part.questions.map((q) => q.id);
+    // -------------------------------------------------------
+    // SUMMER_SKY / speaking theme path — use the speaking Layout
+    // (same pattern as SpeakingReadDisplayedContentRenderer)
+    // -------------------------------------------------------
+    const isSpeakingThemeLayout = props.speakingTheme && props.speakingTheme !== 'CAMBRIDGE_YLE';
+    if (isSpeakingThemeLayout) {
+        const Layout = getSpeakingLayout(props.speakingTheme);
+        const headerRight = (_jsx(QuestionProgress, { total: props.part.questions.length, currentIndex: setup.nav.currentIndex, answeredIds: answeredIds, questionIds: questionIds }));
+        return (_jsx(Layout, { onExit: props.onExit, partName: props.part.name || `Part ${props.part.partNo}`, instruction: props.part.instructions || 'DESCRIBE THE IMAGE', audioUrl: "", questionNumber: setup.nav.questionNumberInPart, onPrev: setup.handlePrev, onNext: setup.handleNext, showPrev: setup.nav.showPrev, showNext: setup.nav.showNext, canGoPrev: setup.nav.canGoPrev, canGoNext: setup.nav.canGoNext, onAudioPlayingChange: setup.onAudioPlayingChange, recorder: props.isReviewMode ? null : setup.recorder, showExistingBadge: setup.showExistingBadge, headerRight: headerRight, teacherVideoUrl: props.teacherVideoUrl, waitForTeacherVideo: props.waitForTeacherVideo, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, children: _jsx("div", { className: "w-full h-full relative overflow-y-auto custom-scrollbar flex flex-col items-center", children: _jsxs("div", { className: "w-full shrink-0 flex flex-col items-center", style: { width: '900px', maxWidth: '95%', padding: '20px 0 100px 0' }, children: [content.isBackup && (_jsx("div", { className: "bg-amber-500 text-white px-3 py-1 rounded-md text-xs font-bold border border-white shadow-md z-10 shrink-0 mb-4", children: "C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng" })), content.question && (_jsx("div", { className: "z-10 mx-auto px-8 py-2.5 bg-white/80 backdrop-blur-md rounded-full shadow-sm border border-slate-100 w-fit shrink-0 mb-4", children: _jsx("h3", { className: "text-[17px] md:text-lg font-bold text-[#343C55] font-['Quicksand'] text-center whitespace-pre-wrap leading-tight", children: content.question }) })), content.audioUrl && (_jsx("div", { className: "z-10 mx-auto w-full max-w-[280px] shrink-0 mb-4", children: _jsx(SpeakingAudioPlayer, { audioUrl: content.audioUrl, onPlayingChange: setup.onAudioPlayingChange, autoPlay: !props.waitForTeacherVideo }) })), setup.showExistingBadge && (_jsxs("div", { className: "absolute right-12 top-12 z-10 rounded-full bg-green-500 px-4 py-1.5 flex items-center gap-2 text-sm font-bold text-white shadow-md border-2 border-white", children: [_jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-white animate-pulse" }), "\u0110\u00E3 ghi \u00E2m"] })), _jsx("div", { className: "w-full flex justify-center items-center mt-2 relative", children: isImageLoading ? (_jsx("div", { className: "flex justify-center items-center w-full max-w-[60%] h-[300px] border-4 border-dashed border-gray-300 rounded-xl bg-gray-50/50", children: _jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent" }) })) : displayImageUrl ? (_jsx("div", { className: "bg-white rounded-2xl shadow-[0_4px_15px_rgba(0,0,0,0.08)] p-2 w-[80%] max-w-[700px] flex justify-center items-center", children: _jsx("img", { src: displayImageUrl, alt: "Scene to describe", className: "w-full h-auto object-contain rounded-xl", draggable: false }) })) : (_jsx("div", { className: "flex justify-center items-center text-orange-800 font-semibold opacity-70 w-full h-[300px] border-4 border-dashed border-orange-900/30 rounded-xl bg-orange-900/10", children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh m\u00F4 t\u1EA3" })) })] }) }) }));
+    }
+    // Floating Teacher Video element
+    const teacherVideo = props.teacherVideoUrl ? (_jsx("div", { className: "fixed bottom-6 left-6 z-40 flex flex-col items-start w-[12vw] min-w-[150px] pointer-events-none", children: _jsxs("div", { className: "relative w-full", children: [_jsx("video", { ref: teacherVideoRef, src: props.teacherVideoUrl, autoPlay: !props.skipTeacherVideo, playsInline: true, onEnded: () => { setTeacherVideoEnded(true); props.onTeacherIntroPlayed?.(); }, className: "w-full h-auto drop-shadow-[0_4px_16px_rgba(0,0,0,0.2)] transition-opacity duration-700", style: { opacity: teacherVideoEnded ? 0 : 1 } }), !isPlacementTest && props.speakingTheme !== 'CAMBRIDGE_YLE' && (_jsx("img", { src: "/speaking/image/teacher_ai_smile.png", alt: "AI Teacher", className: "absolute top-0 left-0 w-full h-auto drop-shadow-[0_4px_16px_rgba(0,0,0,0.2)] transition-opacity duration-700", style: { opacity: teacherVideoEnded ? 1 : 0 } }))] }) })) : null;
+    const isMicLocked = false;
+    const handleMicClick = () => {
+        if (isMicLocked)
+            return;
+        if (setup.recorder?.status === 'recording') {
+            setup.recorder.stopRecording();
+        }
+        else if (setup.recorder?.status === 'idle' || setup.recorder?.status === 'error') {
+            setup.recorder.startRecording();
+        }
+        else if (setup.recorder?.status === 'uploaded' || setup.recorder?.status === 'recorded') {
+            // Toggle playback
+            const audio = playbackAudioRef.current;
+            if (audio) {
+                if (isPlayingBack) {
+                    audio.pause();
+                }
+                else {
+                    audio.play().catch(console.error);
+                }
+            }
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col w-full h-full relative", style: {
+            background: 'linear-gradient(180deg, #E6F3FF 0%, #FFFFFF 100%)'
+        }, children: [_jsxs("div", { className: "relative w-full flex justify-between items-start pt-6 px-6 z-20 shrink-0", children: [_jsx("div", { className: "flex-1" }), _jsx("div", { className: "flex-none drop-shadow-md", children: _jsx(CambridgeYlePartBanner, { partNumber: props.part.partNo, questionCount: props.part.questions.length, partName: props.part.name || `Part ${props.part.partNo}` }) }), _jsx("div", { className: "flex-1 flex justify-end mt-2 z-20", children: _jsx(QuestionProgress, { total: props.part.questions.length, currentIndex: setup.nav.currentIndex, answeredIds: answeredIds, questionIds: questionIds }) })] }), _jsxs("div", { className: "flex-1 w-full flex flex-col min-h-0", children: [_jsxs("div", { className: "flex-1 w-full overflow-y-auto custom-scrollbar px-4 pb-6 pt-2 flex flex-col items-center relative", children: [content.isBackup && (_jsx("div", { className: "bg-amber-500 text-white px-3 py-1 rounded-md text-xs font-bold border border-white shadow-md z-10 shrink-0 mb-4 mt-2", children: "C\u00E2u h\u1ECFi d\u1EF1 ph\u00F2ng" })), content.question && (_jsx("div", { className: "z-10 mx-auto px-8 py-2.5 bg-white backdrop-blur-md rounded-full shadow-[0_2px_10px_rgba(0,0,0,0.05)] border border-slate-100 w-fit shrink-0 mb-4 mt-2", children: _jsx("h3", { className: "text-[17px] md:text-lg font-bold text-[#343C55] font-['Quicksand'] text-center whitespace-pre-wrap leading-tight", children: content.question }) })), content.audioUrl && (_jsx("div", { className: "z-10 mx-auto w-full max-w-[280px] shrink-0 mb-4", children: _jsx(SpeakingAudioPlayer, { audioUrl: content.audioUrl, onPlayingChange: setup.onAudioPlayingChange, autoPlay: !props.waitForTeacherVideo }) })), setup.showExistingBadge && (_jsxs("div", { className: "absolute right-[5%] lg:right-[15%] top-4 z-10 rounded-full bg-green-500 px-4 py-1.5 flex items-center gap-2 text-sm font-bold text-white shadow-lg border-2 border-white", children: [_jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-white animate-pulse" }), "\u0110\u00E3 ghi \u00E2m"] })), _jsx("div", { className: "w-full flex justify-center items-center relative mb-4 shrink-0", children: isImageLoading ? (_jsx("div", { className: "flex justify-center items-center w-full max-w-[60%] h-[300px] border-4 border-dashed border-gray-300 rounded-xl bg-white/50 backdrop-blur-sm shadow-[0_4px_15px_rgba(0,0,0,0.05)]", children: _jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent" }) })) : displayImageUrl ? (_jsx("div", { className: "bg-white rounded-2xl shadow-[0_4px_15px_rgba(0,0,0,0.08)] p-2 w-[80%] max-w-[650px] flex justify-center items-center", children: _jsx("img", { src: displayImageUrl, alt: "Scene to describe", className: "w-full h-auto object-contain rounded-xl", draggable: false }) })) : (_jsx("div", { className: "flex justify-center items-center text-orange-800 font-semibold opacity-70 w-full max-w-[800px] h-[300px] border-4 border-dashed border-orange-900/30 rounded-xl bg-orange-900/10", children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh m\u00F4 t\u1EA3" })) })] }), setup.recorder && !props.isReviewMode && (_jsxs("div", { className: "shrink-0 flex flex-col items-center z-50 gap-3 px-4 py-6 border-t border-slate-200/50 bg-white/40 backdrop-blur-md", children: [_jsx("div", { className: "bg-white rounded-[100px] shadow-[0_4px_10px_rgba(0,0,0,0.1)] whitespace-nowrap flex items-center justify-center", style: {
+                                    padding: '10px 30px',
+                                    color: isMicLocked
+                                        ? '#888'
+                                        : setup.recorder.status === 'recording'
+                                            ? '#FF4D4D'
+                                            : ['recorded', 'uploading', 'uploaded'].includes(setup.recorder.status)
+                                                ? '#16CA3B'
+                                                : '#343C55',
+                                    fontSize: '18px',
+                                    fontFamily: '"Quicksand", sans-serif',
+                                    fontWeight: 700,
+                                    lineHeight: '100%',
+                                    letterSpacing: '-0.01em',
+                                }, children: isMicLocked
+                                    ? 'Hãy chờ giáo viên hoàn thành hướng dẫn'
+                                    : setup.recorder.status === 'recording'
+                                        ? 'Ấn lần nữa để lưu kết quả'
+                                        : ['recorded', 'uploading', 'uploaded'].includes(setup.recorder.status)
+                                            ? 'Câu trả lời đã được ghi nhận !'
+                                            : 'Ấn biểu tượng Micro để trả lời' }), _jsxs("div", { className: "relative flex flex-col items-center", children: [setup.recorder.status === 'recording' ? (_jsxs("div", { className: "relative flex flex-col justify-center items-center cursor-pointer drop-shadow-[0_0_15px_rgba(255,100,100,0.8)] transition-transform hover:scale-[1.05] active:scale-[0.95]", onClick: setup.recorder.stopRecording, children: [_jsx(Image, { src: redCircleImg, alt: "stop recording", className: "animate-pulse", style: { width: '120px', height: '120px' } }), _jsxs("span", { className: "absolute text-white text-[16px] font-bold font-['Quicksand']", style: { bottom: '30px' }, children: [Math.floor(setup.recorder.remainingSeconds / 60), ":", (setup.recorder.remainingSeconds % 60).toString().padStart(2, '0')] })] })) : isMicLocked ? (_jsx(Image, { src: lockMicImg, alt: "micro locked", className: "opacity-80 cursor-not-allowed", style: { width: '120px', height: '120px' } })) : (_jsx(Image, { src: ['recorded', 'uploading', 'uploaded'].includes(setup.recorder.status)
+                                            ? (isPlayingBack ? pauseAudioImg : listenAudioImg)
+                                            : microIcon, alt: "mic", className: "transition-transform cursor-pointer hover:scale-[1.05] active:scale-[0.95]", style: { width: '120px', height: '120px' }, onClick: handleMicClick })), setup.recorder?.previewUrl && (_jsx("audio", { ref: playbackAudioRef, src: setup.recorder.previewUrl })), setup.recorder.status === 'recording' && (_jsx("div", { className: "absolute whitespace-nowrap text-center", style: {
+                                            top: '100%',
+                                            marginTop: '16px',
+                                            color: '#FF4D4D',
+                                            fontSize: '18px',
+                                            fontFamily: '"Quicksand", sans-serif',
+                                            fontWeight: 700,
+                                            lineHeight: '100%',
+                                            letterSpacing: '-0.01em',
+                                            textShadow: '0 1px 3px rgba(0,0,0,0.15)',
+                                        }, children: "\u0110ang ghi \u00E2m c\u00E2u h\u1ECFi . . ." })), ['recorded', 'uploading', 'uploaded'].includes(setup.recorder.status) && (_jsx("div", { className: "absolute whitespace-nowrap text-center flex flex-col items-center", style: {
+                                            top: '100%',
+                                            marginTop: '16px',
+                                            color: '#343C55',
+                                            fontSize: '18px',
+                                            fontFamily: '"Quicksand", sans-serif',
+                                            fontWeight: 700,
+                                            lineHeight: '100%',
+                                            letterSpacing: '-0.01em'
+                                        }, children: isPlayingBack
+                                            ? `${formatPlaybackTime(playbackTime)}/${playbackDuration ? formatPlaybackTime(playbackDuration) : '--:--'}`
+                                            : 'Nghe đáp án' }))] })] }))] }), teacherVideo] }));
+}

package/dist/components/exams/take/components/speaking/renderers/SpeakingDragObjectsRenderer.js

@@ -1 +1,155 @@
-"use client";import{jsxs as e,jsx as t,Fragment as r}from"react/jsx-runtime";import{useMemo as a,useState as n}from"react";import{X as o}from"lucide-react";import{usePresignedFileUrl as i}from"../../../../../../shared/lib/hooks";import{useSpeakingRendererSetup as s}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as d}from"../../../../../../components/themes";import l from"../SpeakingDragObjects.module.css";import c from"../SpeakingReadDisplayedContent.module.css";function u({total:r,currentIndex:a,answeredIds:n,questionIds:o}){return e("div",{className:c.taskIndicator,style:{color:"#1e3a8a",textShadow:"none",fontWeight:800},children:[e("span",{children:["Question ",a+1,"/ ",r]}),t("div",{className:"flex gap-2",children:Array.from({length:r},(e,r)=>{const i=r===a,s=n.has(o[r]);return t("div",{className:`${c.taskDot} ${i?c.taskDotActive:""} ${s&&!i?c.taskDotCompleted:""}`,style:i||s?void 0:{background:"#bfdbfe"}},r)})})]})}function m({node:e,isPlaced:r,onDragStart:a}){const{previewUrl:n}=i(e.imageUrl||"");return t("div",{className:l.dragItemContainer,children:t("div",{id:e.id,draggable:!r,className:l.dragItem,style:{cursor:r?"not-allowed":"move",position:"relative",zIndex:2,opacity:r?.3:1},onDragStart:t=>{r?t.preventDefault():(t.dataTransfer.setData("text/plain",e.id),t.dataTransfer.effectAllowed="move",a(e.id))},children:n?t("img",{alt:e.label||"icon",src:n,style:{maxHeight:"100%",maxWidth:"100%",height:"auto",width:"auto",objectFit:"contain"},draggable:!1}):t("div",{className:"flex h-full w-full items-center justify-center text-[10px] text-center px-1 text-gray-500 font-medium",children:e.label})})})}function p({zone:a,droppedObject:n,isDragOver:s,isReviewMode:d,onDragOver:c,onDrop:u,onDragLeave:m,onRemove:p}){const{previewUrl:h}=i(n?.imageUrl??"");return t("div",{onDragOver:e=>c(e,a.id),onDrop:e=>u(e,a.id),onDragLeave:m,"data-testid":`(${a.x}%,${a.y}%)`,style:{position:"absolute",zIndex:1,top:`${a.y}%`,left:`${a.x}%`,height:`${a.height}%`,width:`${a.width}%`,backgroundColor:n?"transparent":s?"rgba(245, 158, 11, 0.4)":"rgba(255, 255, 255, 0.2)",border:n?"none":s?"2px dashed #f59e0b":"1px dashed rgba(255,255,255,0.5)",borderRadius:"8px",transition:"all 0.2s"},children:n&&h&&e(r,{children:[t("img",{src:h,alt:n.label,className:l.objectImageMoved,style:{position:"absolute",height:"100%",width:"100%",inset:0,objectFit:"contain"},draggable:!1}),!d&&t("button",{type:"button",onClick:e=>{e.stopPropagation(),p(a.id)},className:"absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-white shadow-md hover:bg-red-600 z-10 border border-white",title:"Remove",children:t(o,{className:"h-3 w-3"})})]})})}export function SpeakingDragObjectsRenderer(r){const o=s({...r,hasMic:!1}),c=d(r.speakingTheme),h=o.currentQuestion?.content,g=o.currentQuestion,v=a(()=>{let e=g?.questionGroup?.payload||g?.question_group?.payload;if("string"==typeof e)try{e=JSON.parse(e)}catch{e={}}return e||{}},[g?.questionGroup?.payload,g?.question_group?.payload]),f=h?.audioUrl??"",b=v?.backgroundImageUrl??"",x=v?.objectNodes??[],w=v?.dropZones??[],{previewUrl:N}=i(b),[D,y]=a(()=>{const e=Math.ceil(x.length/2);return[x.slice(0,e),x.slice(e)]},[x]),[I,j]=n(null),k=o.currentQuestion?r.answers[o.currentQuestion.id]:void 0,C=k?.dropZoneId??null,R=k?.objectId??null,P=e=>{if(C===e&&R)return t=R,x.find(e=>e.id===t);var t},T=e=>{},O=(e,t)=>{e.preventDefault(),e.dataTransfer.dropEffect="move",j(t)},S=(e,t)=>{if(e.preventDefault(),j(null),!o.currentQuestion||r.isReviewMode)return;const a=e.dataTransfer.getData("text/plain");a&&r.onAnswerChange(o.currentQuestion.id,{objectId:a,dropZoneId:t})},$=()=>j(null),q=e=>{o.currentQuestion&&!r.isReviewMode&&C===e&&r.onAnswerChange(o.currentQuestion.id,void 0)};if(!o.currentQuestion)return null;const E=new Set(r.part.questions.map(e=>e.id).filter(e=>!!r.answers[e])),A=r.part.questions.map(e=>e.id),Q=t(u,{total:r.part.questions.length,currentIndex:o.nav.currentIndex,answeredIds:E,questionIds:A});return t(c,{onExit:r.onExit,partName:r.part.name||`Part ${r.part.partNo}`,instruction:r.part.instructions||"LISTEN AND DRAG THE CORRECT OBJECT INTO THE SCENE.",audioUrl:f,questionNumber:o.nav.questionNumberInPart,onPrev:o.handlePrev,onNext:o.handleNext,showPrev:o.nav.showPrev,showNext:o.nav.showNext,canGoPrev:o.nav.canGoPrev,canGoNext:o.nav.canGoNext,onAudioPlayingChange:o.onAudioPlayingChange,recorder:null,headerRight:Q,teacherVideoUrl:r.teacherVideoUrl,onTeacherVideoEnded:r.onTeacherIntroPlayed,skipTeacherVideo:r.skipTeacherVideo,contentClassName:"!p-0 !gap-0",children:e("div",{className:l.moveObjectContainer,children:[t("div",{className:l.objectChoices,children:D.map(e=>t(m,{node:e,isPlaced:R===e.id,onDragStart:T},e.id))}),t("div",{className:l.objectBackground,children:t("div",{className:`relative flex items-center justify-center w-full h-full ${l.imageBackground}`,children:t("div",{className:"relative w-full max-w-[950px] mx-auto rounded-xl drop-shadow-md bg-white border-2 border-stone-200 overflow-hidden mb-6",children:N?e("div",{className:l.imageAspectWrapper,children:[t("img",{alt:"scene",src:N,className:l.mainImg,draggable:!1}),w.map(e=>t(p,{zone:e,droppedObject:P(e.id),isDragOver:I===e.id,isReviewMode:r.isReviewMode||!1,onDragOver:O,onDrop:S,onDragLeave:$,onRemove:q},e.id))]}):t("div",{className:"flex h-full w-full items-center justify-center text-sm text-stone-400",children:"Đang tải ảnh..."})})})}),t("div",{className:`${l.objectChoices} ${l.objectChoicesRight}`,children:y.map(e=>t(m,{node:e,isPlaced:R===e.id,onDragStart:T},e.id))})]})})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * SpeakingDragObjectsRenderer
+ *
+ * Renderer for LISTEN_AND_DRAG_OBJECTS_INTO_SCENE.
+ *
+ * Uses the exact DOM structure and classes from the static Flyer HTML sample
+ * for the MoveObject layout.
+ */
+import { useMemo, useState } from 'react';
+import { X } from 'lucide-react';
+import { usePresignedFileUrl } from '../../../../../../shared/lib/hooks';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+import moveStyles from '../SpeakingDragObjects.module.css';
+import styles from '../SpeakingReadDisplayedContent.module.css';
+// ============================================
+// Task Progress Dots
+// ============================================
+function TaskProgressDots({ total, currentIndex, answeredIds, questionIds }) {
+    return (_jsxs("div", { className: styles.taskIndicator, style: { color: '#1e3a8a', textShadow: 'none', fontWeight: 800 }, children: [_jsxs("span", { children: ["Question ", currentIndex + 1, "/ ", total] }), _jsx("div", { className: "flex gap-2", children: Array.from({ length: total }, (_, i) => {
+                    const isActive = i === currentIndex;
+                    const isCompleted = answeredIds.has(questionIds[i]);
+                    return (_jsx("div", { className: `${styles.taskDot} ${isActive ? styles.taskDotActive : ''} ${isCompleted && !isActive ? styles.taskDotCompleted : ''}`, style: !isActive && !isCompleted ? { background: '#bfdbfe' } : undefined }, i));
+                }) })] }));
+}
+// ============================================
+// Draggable object card in sidebar
+// ============================================
+function DraggableObjectCard({ node, isPlaced, onDragStart, }) {
+    const { previewUrl } = usePresignedFileUrl(node.imageUrl || '');
+    return (_jsx("div", { className: moveStyles.dragItemContainer, children: _jsx("div", { id: node.id, draggable: !isPlaced, className: moveStyles.dragItem, style: {
+                cursor: isPlaced ? 'not-allowed' : 'move',
+                position: 'relative',
+                zIndex: 2,
+                opacity: isPlaced ? 0.3 : 1,
+            }, onDragStart: (e) => {
+                if (isPlaced) {
+                    e.preventDefault();
+                    return;
+                }
+                e.dataTransfer.setData('text/plain', node.id);
+                e.dataTransfer.effectAllowed = 'move';
+                onDragStart(node.id);
+            }, children: previewUrl ? (_jsx("img", { alt: node.label || 'icon', src: previewUrl, style: {
+                    maxHeight: '100%',
+                    maxWidth: '100%',
+                    height: 'auto',
+                    width: 'auto',
+                    objectFit: 'contain',
+                }, draggable: false })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center text-[10px] text-center px-1 text-gray-500 font-medium", children: node.label })) }) }));
+}
+// ============================================
+// Drop zone overlay on the scene image
+// ============================================
+function DropZoneOverlay({ zone, droppedObject, isDragOver, isReviewMode, onDragOver, onDrop, onDragLeave, onRemove, }) {
+    const { previewUrl } = usePresignedFileUrl(droppedObject?.imageUrl ?? '');
+    return (_jsx("div", { onDragOver: (e) => onDragOver(e, zone.id), onDrop: (e) => onDrop(e, zone.id), onDragLeave: onDragLeave, "data-testid": `(${zone.x}%,${zone.y}%)`, style: {
+            position: 'absolute',
+            zIndex: 1,
+            top: `${zone.y}%`,
+            left: `${zone.x}%`,
+            height: `${zone.height}%`,
+            width: `${zone.width}%`,
+            backgroundColor: droppedObject ? 'transparent' : isDragOver ? 'rgba(245, 158, 11, 0.4)' : 'rgba(255, 255, 255, 0.2)',
+            border: droppedObject ? 'none' : isDragOver ? '2px dashed #f59e0b' : '1px dashed rgba(255,255,255,0.5)',
+            borderRadius: '8px',
+            transition: 'all 0.2s',
+        }, children: droppedObject && previewUrl && (_jsxs(_Fragment, { children: [_jsx("img", { src: previewUrl, alt: droppedObject.label, className: moveStyles.objectImageMoved, style: { position: 'absolute', height: '100%', width: '100%', inset: 0, objectFit: 'contain' }, draggable: false }), !isReviewMode && (_jsx("button", { type: "button", onClick: (e) => {
+                        e.stopPropagation();
+                        onRemove(zone.id);
+                    }, className: "absolute -right-2 -top-2 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-white shadow-md hover:bg-red-600 z-10 border border-white", title: "Remove", children: _jsx(X, { className: "h-3 w-3" }) }))] })) }));
+}
+// ============================================
+// Main component
+// ============================================
+export function SpeakingDragObjectsRenderer(props) {
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        hasMic: false,
+    });
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const content = setup.currentQuestion?.content;
+    const rawQuestion = setup.currentQuestion;
+    const groupPayload = useMemo(() => {
+        let payload = rawQuestion?.questionGroup?.payload || rawQuestion?.question_group?.payload;
+        if (typeof payload === 'string') {
+            try {
+                payload = JSON.parse(payload);
+            }
+            catch {
+                payload = {};
+            }
+        }
+        return payload || {};
+    }, [rawQuestion?.questionGroup?.payload, rawQuestion?.question_group?.payload]);
+    const audioUrl = content?.audioUrl ?? '';
+    const backgroundImageUrl = groupPayload?.backgroundImageUrl ?? '';
+    const objectNodes = groupPayload?.objectNodes ?? [];
+    const dropZones = groupPayload?.dropZones ?? [];
+    const { previewUrl: backgroundUrl } = usePresignedFileUrl(backgroundImageUrl);
+    // Split objects into left and right sidebars
+    const [leftObjects, rightObjects] = useMemo(() => {
+        const mid = Math.ceil(objectNodes.length / 2);
+        return [objectNodes.slice(0, mid), objectNodes.slice(mid)];
+    }, [objectNodes]);
+    // Local drag-over state for visual feedback
+    const [dragOverZoneId, setDragOverZoneId] = useState(null);
+    // Current answer for this question
+    const currentAnswer = setup.currentQuestion
+        ? props.answers[setup.currentQuestion.id]
+        : undefined;
+    // Which drop zone has the placed object
+    const placedDropZoneId = currentAnswer?.dropZoneId ?? null;
+    const placedObjectId = currentAnswer?.objectId ?? null;
+    // Lookup helpers
+    const getObjectById = (id) => objectNodes.find((n) => n.id === id);
+    const getDroppedObject = (zoneId) => {
+        if (placedDropZoneId === zoneId && placedObjectId) {
+            return getObjectById(placedObjectId);
+        }
+        return undefined;
+    };
+    const handleDragStart = (_objectId) => { };
+    const handleDragOver = (e, zoneId) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        setDragOverZoneId(zoneId);
+    };
+    const handleDrop = (e, zoneId) => {
+        e.preventDefault();
+        setDragOverZoneId(null);
+        if (!setup.currentQuestion || props.isReviewMode)
+            return;
+        const objectId = e.dataTransfer.getData('text/plain');
+        if (!objectId)
+            return;
+        props.onAnswerChange(setup.currentQuestion.id, { objectId, dropZoneId: zoneId });
+    };
+    const handleDragLeave = () => setDragOverZoneId(null);
+    const handleRemove = (zoneId) => {
+        if (!setup.currentQuestion || props.isReviewMode)
+            return;
+        if (placedDropZoneId === zoneId) {
+            props.onAnswerChange(setup.currentQuestion.id, undefined);
+        }
+    };
+    if (!setup.currentQuestion)
+        return null;
+    const answeredIds = new Set(props.part.questions.map((q) => q.id).filter((id) => !!props.answers[id]));
+    const questionIds = props.part.questions.map((q) => q.id);
+    const headerRight = (_jsx(TaskProgressDots, { total: props.part.questions.length, currentIndex: setup.nav.currentIndex, answeredIds: answeredIds, questionIds: questionIds }));
+    return (_jsx(Layout, { onExit: props.onExit, partName: props.part.name || `Part ${props.part.partNo}`, instruction: props.part.instructions || "LISTEN AND DRAG THE CORRECT OBJECT INTO THE SCENE.", audioUrl: audioUrl, questionNumber: setup.nav.questionNumberInPart, onPrev: setup.handlePrev, onNext: setup.handleNext, showPrev: setup.nav.showPrev, showNext: setup.nav.showNext, canGoPrev: setup.nav.canGoPrev, canGoNext: setup.nav.canGoNext, onAudioPlayingChange: setup.onAudioPlayingChange, recorder: null, headerRight: headerRight, teacherVideoUrl: props.teacherVideoUrl, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, contentClassName: "!p-0 !gap-0", children: _jsxs("div", { className: moveStyles.moveObjectContainer, children: [_jsx("div", { className: moveStyles.objectChoices, children: leftObjects.map((node) => (_jsx(DraggableObjectCard, { node: node, isPlaced: placedObjectId === node.id, onDragStart: handleDragStart }, node.id))) }), _jsx("div", { className: moveStyles.objectBackground, children: _jsx("div", { className: `relative flex items-center justify-center w-full h-full ${moveStyles.imageBackground}`, children: _jsx("div", { className: "relative w-full max-w-[950px] mx-auto rounded-xl drop-shadow-md bg-white border-2 border-stone-200 overflow-hidden mb-6", children: backgroundUrl ? (_jsxs("div", { className: moveStyles.imageAspectWrapper, children: [_jsx("img", { alt: "scene", src: backgroundUrl, className: moveStyles.mainImg, draggable: false }), dropZones.map((zone) => (_jsx(DropZoneOverlay, { zone: zone, droppedObject: getDroppedObject(zone.id), isDragOver: dragOverZoneId === zone.id, isReviewMode: props.isReviewMode || false, onDragOver: handleDragOver, onDrop: handleDrop, onDragLeave: handleDragLeave, onRemove: handleRemove }, zone.id)))] })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center text-sm text-stone-400", children: "\u0110ang t\u1EA3i \u1EA3nh..." })) }) }) }), _jsx("div", { className: `${moveStyles.objectChoices} ${moveStyles.objectChoicesRight}`, children: rightObjects.map((node) => (_jsx(DraggableObjectCard, { node: node, isPlaced: placedObjectId === node.id, onDragStart: handleDragStart }, node.id))) })] }) }));
+}