@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

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

@@ -1 +1,339 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useRef as n,useEffect as i,useCallback as a}from"react";import{usePresignedFileUrl as o}from"../../../../../../shared/lib/hooks";import{useSpeakingRendererSetup as s}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as d}from"../../../../../../components/themes";import l from"../SpeakingReadDisplayedContent.module.css";import c from"../../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import u from"next/image";import h from"../../../../../../components/themes/summer-sky/assets/images/mic_ver2_icon.png";import m from"../../../../../../components/themes/summer-sky/assets/images/stop_audio_ver2_icon.png";import p 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 f from"../../../../../../components/themes/summer-sky/assets/images/lock_mic_ver2_icon.png";function x({total:r,currentIndex:n,answeredIds:i,questionIds:a}){return e("div",{className:l.taskIndicator,style:{color:"#78350f",textShadow:"none",fontWeight:800},children:[e("span",{children:["Question ",n+1,"/ ",r]}),t("div",{className:"flex gap-2",children:Array.from({length:r},(e,r)=>{const o=r===n,s=i.has(a[r]);return t("div",{className:`${l.taskDot} ${o?l.taskDotActive:""} ${s&&!o?l.taskDotCompleted:""}`},r)})})]})}function v({audioUrl:o,autoPlay:s,onEnded:d,disabled:l}){const c=n(null),[u,h]=r(!1),[m,p]=r(0),[g,f]=r(0);i(()=>{const e=c.current;if(!e)return;const t=()=>p(e.currentTime),r=()=>f(e.duration),n=()=>{h(!1),d?.()},i=()=>h(!0),a=()=>h(!1);return e.addEventListener("timeupdate",t),e.addEventListener("loadedmetadata",r),e.addEventListener("ended",n),e.addEventListener("play",i),e.addEventListener("pause",a),()=>{e.removeEventListener("timeupdate",t),e.removeEventListener("loadedmetadata",r),e.removeEventListener("ended",n),e.removeEventListener("play",i),e.removeEventListener("pause",a)}},[o,d]),i(()=>{const e=c.current;e&&(e.pause(),e.currentTime=0,h(!1),p(0),f(0))},[o]),i(()=>{const e=c.current;if(!e||!s)return;let t=!1;const r=()=>{t||e.play().catch(()=>{})};return e.readyState>=3?r():e.addEventListener("canplay",r,{once:!0}),()=>{t=!0,e.removeEventListener("canplay",r)}},[o,s]);const x=a(()=>{const e=c.current;e&&(u?e.pause():((e.ended||e.currentTime>=e.duration)&&(e.currentTime=0,p(0)),e.play().catch(console.error)))},[u]),v=a(e=>{const t=c.current;if(!t)return;const r=parseFloat(e.target.value);t.currentTime=r,p(r)},[]),N=e=>`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`,w=g>0?m/g*100:0;return e("div",{className:"w-full flex items-center gap-4 rounded-full px-3 py-3",style:{maxWidth:"650px",background:"linear-gradient(135deg, #B4F0FF 0%, #7EEAFF 50%, #5FE0F5 100%)",border:"5px solid white",boxShadow:"0 4px 15px rgba(0,0,0,0.08)",borderRadius:"20px"},children:[t("audio",{ref:c,src:o,preload:"metadata"}),t("button",{onClick:l?void 0:x,disabled:l,className:"flex-shrink-0 flex items-center justify-center rounded-xl transition-all "+(l?"opacity-50 cursor-not-allowed grayscale":"hover:scale-105 active:scale-95"),style:{width:"40px",height:"40px",background:u?"linear-gradient(135deg, #FF5B7F, #FF3D6E)":"linear-gradient(135deg, #1565C0, #1E88E5)",boxShadow:u?"0 3px 8px rgba(255,61,110,0.4)":"0 3px 8px rgba(21,101,192,0.4)"},children:u?e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"white",children:[t("rect",{x:"5",y:"3",width:"5",height:"18",rx:"2"}),t("rect",{x:"14",y:"3",width:"5",height:"18",rx:"2"})]}):t("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"white",children:t("path",{d:"M8 5v14l11-7z"})})}),e("span",{className:"flex-shrink-0 font-bold tabular-nums",style:{color:"#1A3D6D",fontSize:"16px",fontFamily:'"Quicksand", sans-serif',minWidth:"85px"},children:[N(m)," / ",N(g)]}),e("div",{className:"flex-1 relative h-2 rounded-full overflow-hidden",style:{background:"rgba(255,255,255,0.6)"},children:[t("div",{className:"absolute top-0 left-0 h-full rounded-full transition-all",style:{width:`${w}%`,background:"linear-gradient(90deg, #1565C0, #42A5F5)"}}),t("input",{type:"range",min:0,max:g||0,step:.1,value:m,onChange:l?void 0:v,disabled:l,className:"absolute inset-0 w-full h-full opacity-0 "+(l?"cursor-not-allowed":"cursor-pointer")}),t("div",{className:"absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full border-2 border-white shadow-md pointer-events-none",style:{left:`calc(${w}% - 8px)`,background:"#1565C0"}})]})]})}function N({total:r,currentIndex:n,answeredIds:i,questionIds:a}){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 ",n+1,"/ ",r]}),t("div",{className:"flex gap-1.5",children:Array.from({length:r},(e,r)=>{const o=r===n,s=i.has(a[r]);return t("div",{className:"w-2.5 h-2.5 rounded-full "+(o?"bg-[#FF9900] scale-125 shadow-sm":s?"bg-[#16CA3B]":"bg-white/60")},r)})})]})}export function SpeakingSpontaneousQARenderer(l){const w=s({...l,maxDurationMs:6e4}),y=d(l.speakingTheme),b=w.currentQuestion?.content,{previewUrl:E}=o(b?.audioUrl??""),k=0===w.nav.currentIndex,I=w.isQuestionLocked,L=a(()=>I?"ALLOW_RECORDING":k&&!l.skipTeacherVideo&&l.waitForTeacherVideo?"WAITING_TEACHER":"DELAYING",[k,l.skipTeacherVideo,l.waitForTeacherVideo,I]),[A,T]=r(L),F=I||"ALLOW_RECORDING"===A,S=n(null),[C,_]=r(!1),[,P]=r(0),[,R]=r(0);i(()=>{const e=S.current;if(!e)return;const t=()=>{_(!0),w.onAudioPlayingChange?.(!0)},r=()=>{_(!1),w.onAudioPlayingChange?.(!1)},n=()=>{_(!1),P(0),w.onAudioPlayingChange?.(!1)},i=()=>{P(e.currentTime),e.duration&&isFinite(e.duration)&&R(e.duration)},a=()=>{e.duration&&isFinite(e.duration)&&R(e.duration)};return e.addEventListener("play",t),e.addEventListener("pause",r),e.addEventListener("ended",n),e.addEventListener("timeupdate",i),e.addEventListener("loadedmetadata",a),e.addEventListener("durationchange",a),()=>{e.removeEventListener("play",t),e.removeEventListener("pause",r),e.removeEventListener("ended",n),e.removeEventListener("timeupdate",i),e.removeEventListener("loadedmetadata",a),e.removeEventListener("durationchange",a),w.onAudioPlayingChange?.(!1)}},[w.recorder?.previewUrl]),i(()=>{T(L())},[L,w.nav.currentIndex]),i(()=>{if("DELAYING"===A&&!I){const e=setTimeout(()=>{T("PLAYING_QUESTION")},3e3);return()=>clearTimeout(e)}},[A,I]);const G=a(()=>{T("DELAYING"),l.onTeacherIntroPlayed?.()},[l.onTeacherIntroPlayed]),D=a(()=>{"PLAYING_QUESTION"!==A||I||T("ALLOW_RECORDING")},[A,I]);if(!w.currentQuestion||!b)return null;const O=new Set(l.part.questions.map(e=>e.id).filter(e=>!!l.answers[e])),W=l.part.questions.map(e=>e.id);if(l.speakingTheme&&"CAMBRIDGE_YLE"!==l.speakingTheme){const r=t(x,{total:l.part.questions.length,currentIndex:w.nav.currentIndex,answeredIds:O,questionIds:W});return t(y,{onExit:l.onExit,partName:l.part.name||`Part ${l.part.partNo}`,instruction:l.part.instructions||"LISTEN AND ANSWER",audioUrl:b.audioUrl??"",questionNumber:w.nav.questionNumberInPart,onPrev:w.handlePrev,onNext:w.handleNext,showPrev:w.nav.showPrev,showNext:w.nav.showNext,canGoPrev:w.nav.canGoPrev,canGoNext:w.nav.canGoNext,onAudioPlayingChange:w.onAudioPlayingChange,recorder:l.isReviewMode?null:w.recorder,showExistingBadge:w.showExistingBadge,headerRight:r,hideAudioBar:!0,teacherVideoUrl:l.teacherVideoUrl,waitForTeacherVideo:!(!k||l.skipTeacherVideo)&&l.waitForTeacherVideo,onTeacherVideoEnded:G,skipTeacherVideo:!k||l.skipTeacherVideo,showTeacherImage:F,isMicLockedOverride:!I&&"ALLOW_RECORDING"!==A,micLockedText:I?void 0:"PLAYING_QUESTION"===A?"Nghe câu hỏi trước khi trả lời":"DELAYING"===A?"Chuẩn bị phát audio câu hỏi...":"Hãy chờ giáo viên hoàn thành hướng dẫn",children:e("div",{className:"flex flex-col items-center justify-center h-full w-full gap-8 px-8 pb-40",children:[w.showExistingBadge&&e("div",{className:"rounded-full bg-green-500 px-4 py-1 flex items-center gap-2 text-sm font-bold text-white shadow-md border-2 border-white",children:[t("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),e("h2",{className:"text-center",style:{color:"#2C38B6",fontSize:"30px",fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif',fontWeight:600,lineHeight:"45.74px",letterSpacing:"-0.01em",maxWidth:"700px",WebkitTextStroke:"1px #ffffff",paintOrder:"stroke fill"},children:["Nghe câu hỏi, suy nghĩ và trả lời tự do",t("br",{}),"bằng tiếng Anh."]}),E&&t(v,{audioUrl:E,autoPlay:!I&&"PLAYING_QUESTION"===A,onEnded:D,disabled:"WAITING_TEACHER"===A})]})})}const Q=!I&&"ALLOW_RECORDING"!==A;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:[t("div",{className:"flex-1"}),t("div",{className:"flex-none drop-shadow-md",children:t(c,{partNumber:l.part.partNo,questionCount:l.part.questions.length,partName:l.part.name||`Part ${l.part.partNo}`})}),t("div",{className:"flex-1 flex justify-end mt-2 z-20",children:t(N,{total:l.part.questions.length,currentIndex:w.nav.currentIndex,answeredIds:O,questionIds:W})})]}),e("div",{className:"flex-1 w-full flex flex-col items-center min-h-0 px-4 pb-6 pt-12",children:[e("div",{className:"flex-1 w-full flex flex-col justify-center items-center gap-12 min-h-0 relative mb-6",children:[w.showExistingBadge&&e("div",{className:"absolute right-4 top-0 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 transform -translate-y-1/2",children:[t("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),e("h2",{className:"text-center z-10",style:{color:"#2C38B6",fontSize:"30px",fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif',fontWeight:600,lineHeight:"45.74px",letterSpacing:"-0.01em",maxWidth:"700px",WebkitTextStroke:"1px #ffffff",paintOrder:"stroke fill"},children:["Nghe câu hỏi, suy nghĩ và trả lời tự do",t("br",{}),"bằng tiếng Anh."]}),E&&t(v,{audioUrl:E,autoPlay:!I&&"PLAYING_QUESTION"===A,onEnded:D,disabled:"WAITING_TEACHER"===A})]}),w.recorder&&!l.isReviewMode&&e("div",{className:"shrink-0 flex flex-col items-center z-50 gap-3",children:[t("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:Q?"#888":"recording"===w.recorder.status?"#FF4D4D":["recorded","uploading","uploaded"].includes(w.recorder.status)?"#16CA3B":"#343C55",fontSize:"18px",fontFamily:'"Quicksand", sans-serif',fontWeight:700,lineHeight:"100%",letterSpacing:"-0.01em"},children:Q?I?"Ấn biểu tượng Micro để trả lời":"PLAYING_QUESTION"===A?"Nghe câu hỏi trước khi trả lời":"DELAYING"===A?"Chuẩn bị phát audio câu hỏi...":"Hãy chờ giáo viên hoàn thành hướng dẫn":"recording"===w.recorder.status?"Ấn lần nữa để lưu kết quả":["recorded","uploading","uploaded"].includes(w.recorder.status)?"Câu trả lời đã được ghi nhận !":"Ấn biểu tượng Micro để trả lời"}),t("div",{className:"relative flex flex-col items-center",children:"recording"===w.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:w.recorder.stopRecording,children:[t(u,{src:m,alt:"stop audio",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(w.recorder.remainingSeconds/60),":",(w.recorder.remainingSeconds%60).toString().padStart(2,"0")]})]}):t(u,Q?{src:f,alt:"micro locked",className:"opacity-80 cursor-not-allowed",style:{width:"120px",height:"120px"}}:{src:["recorded","uploading","uploaded"].includes(w.recorder.status)?C?g:p:h,alt:"micro",className:"transition-transform cursor-pointer hover:scale-[1.05] active:scale-[0.95]",style:{width:"120px",height:"120px"},onClick:()=>{if(!Q)if("recording"===w.recorder?.status)w.recorder.stopRecording();else if("idle"===w.recorder?.status||"error"===w.recorder?.status)w.recorder.startRecording();else if("uploaded"===w.recorder?.status||"recorded"===w.recorder?.status){const e=S.current;e&&(C?e.pause():e.play().catch(console.error))}}})}),w.recorder.previewUrl&&t("audio",{ref:S,src:w.recorder.previewUrl})]})]})]})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SpeakingSpontaneousQARenderer
+ *
+ * Renderer for SPONTANEOUS_QA (English Primary & Junior Speaking Part 3).
+ *
+ * Data shape:
+ *   - content.audioUrl: audio prompt to listen to (always present at client time)
+ *   - content.questionText: question text (NOT shown to student, admin/review only)
+ *   - content.inputType: 'AUDIO' | 'TEXT' (how admin created it — irrelevant to student)
+ *
+ * Interaction:
+ *   - Student hears an audio question prompt
+ *   - Records a spoken answer using the mic button (no script, spontaneous response)
+ *   - Answer = S3 audio key from recorder
+ */
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { usePresignedFileUrl } from '../../../../../../shared/lib/hooks';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+import styles from '../SpeakingReadDisplayedContent.module.css';
+import CambridgeYlePartBanner from '../../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import Image from 'next/image';
+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 TaskProgressDots({ total, currentIndex, answeredIds, questionIds }) {
+    return (_jsxs("div", { className: styles.taskIndicator, style: { color: '#78350f', 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 isCurrent = i === currentIndex;
+                    const isAnswered = answeredIds.has(questionIds[i]);
+                    return (_jsx("div", { className: `${styles.taskDot} ${isCurrent ? styles.taskDotActive : ''} ${isAnswered && !isCurrent ? styles.taskDotCompleted : ''}` }, i));
+                }) })] }));
+}
+function InlineAudioPlayer({ audioUrl, autoPlay, onEnded, disabled }) {
+    const audioRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const onTimeUpdate = () => setCurrentTime(audio.currentTime);
+        const onLoadedMetadata = () => setDuration(audio.duration);
+        const onEndedHandler = () => { setIsPlaying(false); onEnded?.(); };
+        const onPlay = () => setIsPlaying(true);
+        const onPause = () => setIsPlaying(false);
+        audio.addEventListener('timeupdate', onTimeUpdate);
+        audio.addEventListener('loadedmetadata', onLoadedMetadata);
+        audio.addEventListener('ended', onEndedHandler);
+        audio.addEventListener('play', onPlay);
+        audio.addEventListener('pause', onPause);
+        return () => {
+            audio.removeEventListener('timeupdate', onTimeUpdate);
+            audio.removeEventListener('loadedmetadata', onLoadedMetadata);
+            audio.removeEventListener('ended', onEndedHandler);
+            audio.removeEventListener('play', onPlay);
+            audio.removeEventListener('pause', onPause);
+        };
+    }, [audioUrl, onEnded]);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        audio.pause();
+        audio.currentTime = 0;
+        setIsPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+    }, [audioUrl]);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio || !autoPlay)
+            return;
+        // Auto-play the audio when autoPlay flag becomes true
+        let cancelled = false;
+        const tryPlay = () => {
+            if (cancelled)
+                return;
+            audio.play().catch(() => { });
+        };
+        if (audio.readyState >= 3) {
+            tryPlay();
+        }
+        else {
+            audio.addEventListener('canplay', tryPlay, { once: true });
+        }
+        return () => {
+            cancelled = true;
+            audio.removeEventListener('canplay', tryPlay);
+        };
+    }, [audioUrl, autoPlay]);
+    const togglePlay = useCallback(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        if (isPlaying) {
+            audio.pause();
+        }
+        else {
+            if (audio.ended || audio.currentTime >= audio.duration) {
+                audio.currentTime = 0;
+                setCurrentTime(0);
+            }
+            audio.play().catch(console.error);
+        }
+    }, [isPlaying]);
+    const handleSeek = useCallback((e) => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const newTime = parseFloat(e.target.value);
+        audio.currentTime = newTime;
+        setCurrentTime(newTime);
+    }, []);
+    const formatTime = (seconds) => {
+        const m = Math.floor(seconds / 60);
+        const s = Math.floor(seconds % 60);
+        return `${m}:${s.toString().padStart(2, '0')}`;
+    };
+    const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+    return (_jsxs("div", { className: "w-full flex items-center gap-4 rounded-full px-3 py-3", style: {
+            maxWidth: '650px',
+            background: 'linear-gradient(135deg, #B4F0FF 0%, #7EEAFF 50%, #5FE0F5 100%)',
+            border: '5px solid white',
+            boxShadow: '0 4px 15px rgba(0,0,0,0.08)',
+            borderRadius: '20px'
+        }, children: [_jsx("audio", { ref: audioRef, src: audioUrl, preload: "metadata" }), _jsx("button", { onClick: disabled ? undefined : togglePlay, disabled: disabled, className: `flex-shrink-0 flex items-center justify-center rounded-xl transition-all ${disabled ? 'opacity-50 cursor-not-allowed grayscale' : 'hover:scale-105 active:scale-95'}`, style: {
+                    width: '40px',
+                    height: '40px',
+                    background: isPlaying
+                        ? 'linear-gradient(135deg, #FF5B7F, #FF3D6E)'
+                        : 'linear-gradient(135deg, #1565C0, #1E88E5)',
+                    boxShadow: isPlaying
+                        ? '0 3px 8px rgba(255,61,110,0.4)'
+                        : '0 3px 8px rgba(21,101,192,0.4)',
+                }, children: isPlaying ? (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: [_jsx("rect", { x: "5", y: "3", width: "5", height: "18", rx: "2" }), _jsx("rect", { x: "14", y: "3", width: "5", height: "18", rx: "2" })] })) : (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "white", children: _jsx("path", { d: "M8 5v14l11-7z" }) })) }), _jsxs("span", { className: "flex-shrink-0 font-bold tabular-nums", style: {
+                    color: '#1A3D6D',
+                    fontSize: '16px',
+                    fontFamily: '"Quicksand", sans-serif',
+                    minWidth: '85px',
+                }, children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsxs("div", { className: "flex-1 relative h-2 rounded-full overflow-hidden", style: { background: 'rgba(255,255,255,0.6)' }, children: [_jsx("div", { className: "absolute top-0 left-0 h-full rounded-full transition-all", style: {
+                            width: `${progress}%`,
+                            background: 'linear-gradient(90deg, #1565C0, #42A5F5)',
+                        } }), _jsx("input", { type: "range", min: 0, max: duration || 0, step: 0.1, value: currentTime, onChange: disabled ? undefined : handleSeek, disabled: disabled, className: `absolute inset-0 w-full h-full opacity-0 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}` }), _jsx("div", { className: "absolute top-1/2 -translate-y-1/2 w-4 h-4 rounded-full border-2 border-white shadow-md pointer-events-none", style: {
+                            left: `calc(${progress}% - 8px)`,
+                            background: '#1565C0',
+                        } })] })] }));
+}
+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));
+                }) })] }));
+}
+// ============================================
+// Main component
+// ============================================
+export function SpeakingSpontaneousQARenderer(props) {
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        maxDurationMs: 60000, // 60 seconds
+    });
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const content = setup.currentQuestion?.content;
+    // Resolve the presigned audio URL for the question prompt
+    const { previewUrl: questionAudioUrl } = usePresignedFileUrl(content?.audioUrl ?? '');
+    const isFirstQuestion = setup.nav.currentIndex === 0;
+    const shouldResumeCompletedState = setup.isQuestionLocked;
+    const getInitialSequenceStep = useCallback(() => {
+        if (shouldResumeCompletedState) {
+            return 'ALLOW_RECORDING';
+        }
+        if (isFirstQuestion && !props.skipTeacherVideo) {
+            return props.waitForTeacherVideo ? 'WAITING_TEACHER' : 'DELAYING';
+        }
+        return 'DELAYING';
+    }, [isFirstQuestion, props.skipTeacherVideo, props.waitForTeacherVideo, shouldResumeCompletedState]);
+    // Determine initial sequence state based on teacher video and completed-answer resume behavior
+    const [sequenceStep, setSequenceStep] = useState(getInitialSequenceStep);
+    const shouldShowTeacherSmileImage = shouldResumeCompletedState || sequenceStep === 'ALLOW_RECORDING';
+    const playbackAudioRef = useRef(null);
+    const [isPlayingBack, setIsPlayingBack] = useState(false);
+    const [, setPlaybackTime] = useState(0);
+    const [, setPlaybackDuration] = useState(0);
+    // 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]);
+    // Reset sequence when jumping to another question
+    useEffect(() => {
+        setSequenceStep(getInitialSequenceStep());
+    }, [getInitialSequenceStep, setup.nav.currentIndex]);
+    useEffect(() => {
+        if (sequenceStep === 'DELAYING' && !shouldResumeCompletedState) {
+            const timer = setTimeout(() => {
+                setSequenceStep('PLAYING_QUESTION');
+            }, 3000);
+            return () => clearTimeout(timer);
+        }
+    }, [sequenceStep, shouldResumeCompletedState]);
+    const handleTeacherVideoEnded = useCallback(() => {
+        setSequenceStep('DELAYING');
+        props.onTeacherIntroPlayed?.();
+    }, [props.onTeacherIntroPlayed]);
+    const handleQuestionAudioEnded = useCallback(() => {
+        if (sequenceStep === 'PLAYING_QUESTION' && !shouldResumeCompletedState) {
+            setSequenceStep('ALLOW_RECORDING');
+        }
+    }, [sequenceStep, shouldResumeCompletedState]);
+    if (!setup.currentQuestion || !content)
+        return null;
+    // Build set of answered question IDs for progress dots
+    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 isSpeakingThemeLayout = props.speakingTheme && props.speakingTheme !== 'CAMBRIDGE_YLE';
+    if (isSpeakingThemeLayout) {
+        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 ANSWER', audioUrl: content.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, hideAudioBar: true, teacherVideoUrl: props.teacherVideoUrl, waitForTeacherVideo: isFirstQuestion && !props.skipTeacherVideo ? props.waitForTeacherVideo : false, onTeacherVideoEnded: handleTeacherVideoEnded, skipTeacherVideo: !isFirstQuestion || props.skipTeacherVideo, showTeacherImage: shouldShowTeacherSmileImage, isMicLockedOverride: !shouldResumeCompletedState && sequenceStep !== 'ALLOW_RECORDING', micLockedText: shouldResumeCompletedState
+                ? undefined
+                : sequenceStep === 'PLAYING_QUESTION'
+                    ? 'Nghe câu hỏi trước khi trả lời'
+                    : sequenceStep === 'DELAYING'
+                        ? 'Chuẩn bị phát audio câu hỏi...'
+                        : 'Hãy chờ giáo viên hoàn thành hướng dẫn', children: _jsxs("div", { className: "flex flex-col items-center justify-center h-full w-full gap-8 px-8 pb-40", children: [setup.showExistingBadge && (_jsxs("div", { className: "rounded-full bg-green-500 px-4 py-1 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"] })), _jsxs("h2", { className: "text-center", style: {
+                            color: '#2C38B6',
+                            fontSize: '30px',
+                            fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif',
+                            fontWeight: 600,
+                            lineHeight: '45.74px',
+                            letterSpacing: '-0.01em',
+                            maxWidth: '700px',
+                            WebkitTextStroke: '1px #ffffff',
+                            paintOrder: 'stroke fill',
+                        }, children: ["Nghe c\u00E2u h\u1ECFi, suy ngh\u0129 v\u00E0 tr\u1EA3 l\u1EDDi t\u1EF1 do", _jsx("br", {}), "b\u1EB1ng ti\u1EBFng Anh."] }), questionAudioUrl && (_jsx(InlineAudioPlayer, { audioUrl: questionAudioUrl, autoPlay: !shouldResumeCompletedState && sequenceStep === 'PLAYING_QUESTION', onEnded: handleQuestionAudioEnded, disabled: sequenceStep === 'WAITING_TEACHER' }))] }) }));
+    }
+    // ============================================
+    // CAMBRIDGE_YLE Inline Layout
+    // ============================================
+    const isMicLocked = !shouldResumeCompletedState && sequenceStep !== 'ALLOW_RECORDING';
+    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 items-center min-h-0 px-4 pb-6 pt-12", children: [_jsxs("div", { className: "flex-1 w-full flex flex-col justify-center items-center gap-12 min-h-0 relative mb-6", children: [setup.showExistingBadge && (_jsxs("div", { className: "absolute right-4 top-0 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 transform -translate-y-1/2", children: [_jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-white animate-pulse" }), "\u0110\u00E3 ghi \u00E2m"] })), _jsxs("h2", { className: "text-center z-10", style: {
+                                    color: '#2C38B6',
+                                    fontSize: '30px',
+                                    fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif',
+                                    fontWeight: 600,
+                                    lineHeight: '45.74px',
+                                    letterSpacing: '-0.01em',
+                                    maxWidth: '700px',
+                                    WebkitTextStroke: '1px #ffffff',
+                                    paintOrder: 'stroke fill',
+                                }, children: ["Nghe c\u00E2u h\u1ECFi, suy ngh\u0129 v\u00E0 tr\u1EA3 l\u1EDDi t\u1EF1 do", _jsx("br", {}), "b\u1EB1ng ti\u1EBFng Anh."] }), questionAudioUrl && (_jsx(InlineAudioPlayer, { audioUrl: questionAudioUrl, autoPlay: !shouldResumeCompletedState && sequenceStep === 'PLAYING_QUESTION', onEnded: handleQuestionAudioEnded, disabled: sequenceStep === 'WAITING_TEACHER' }))] }), setup.recorder && !props.isReviewMode && (_jsxs("div", { className: "shrink-0 flex flex-col items-center z-50 gap-3", 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
+                                    ? shouldResumeCompletedState
+                                        ? 'Ấn biểu tượng Micro để trả lời'
+                                        : sequenceStep === 'PLAYING_QUESTION'
+                                            ? 'Nghe câu hỏi trước khi trả lời'
+                                            : sequenceStep === 'DELAYING'
+                                                ? 'Chuẩn bị phát audio câu hỏi...'
+                                                : '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' }), _jsx("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 audio", 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: "micro", 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 }))] }))] })] }));
+}

package/dist/components/exams/take/components/speaking/renderers/SpeakingSpontaneousQaGroupRenderer.d.ts

@@ -0,0 +1,19 @@
+import type { QuestionPart } from '../../../utils/question-transformers';
+interface SpeakingSpontaneousQaGroupRendererProps {
+    part: QuestionPart;
+    answers: Record<string, unknown>;
+    onAnswerChange: (questionId: string, value: unknown) => void;
+    isReviewMode?: boolean;
+    onExit: () => void;
+    onPartComplete?: () => void;
+    onPartBack?: () => void;
+    speakingTheme?: string;
+    teacherVideoUrl?: string;
+    waitForTeacherVideo?: boolean;
+    onTeacherIntroPlayed?: () => void;
+    skipTeacherVideo?: boolean;
+    initialQuestionIndex?: number;
+    currentQuestionIndex?: number;
+}
+export declare function SpeakingSpontaneousQaGroupRenderer(props: SpeakingSpontaneousQaGroupRendererProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,76 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+import { usePresignedFileUrl } from '../../../../../../shared/lib/hooks';
+import { useSpontaneousQaGroupRendererSetup } from '../../../hooks/useSpontaneousQaGroupRendererSetup';
+import styles from '../SpeakingReadDisplayedContent.module.css';
+import { SPONTANEOUS_QA_SEQUENCE_STEP, SpontaneousQACambridgeLayout, } from './SpontaneousQACambridgeLayout';
+import { SpontaneousQASummerSkyAudioPlayer } from './SpontaneousQASummerSkyAudioPlayer';
+function TaskProgressDots({ total, currentIndex, answeredIds, questionIds }) {
+    return (_jsxs("div", { className: styles.taskIndicator, style: { color: '#78350f', textShadow: 'none', fontWeight: 800 }, children: [_jsxs("span", { children: ["Question ", currentIndex + 1, "/ ", total] }), _jsx("div", { className: "flex gap-2", children: Array.from({ length: total }, (_, index) => {
+                    const isCurrent = index === currentIndex;
+                    const isAnswered = answeredIds.has(questionIds[index]);
+                    return (_jsx("div", { className: `${styles.taskDot} ${isCurrent ? styles.taskDotActive : ''} ${isAnswered && !isCurrent ? styles.taskDotCompleted : ''}` }, questionIds[index] || index));
+                }) })] }));
+}
+export function SpeakingSpontaneousQaGroupRenderer(props) {
+    const setup = useSpontaneousQaGroupRendererSetup({
+        ...props,
+        maxDurationMs: 60000,
+    });
+    const content = setup.currentQuestion?.content;
+    const { previewUrl: questionAudioUrl } = usePresignedFileUrl(content?.audioUrl ?? '');
+    const isFirstQuestion = setup.nav.currentIndex === 0;
+    const shouldResumeCompletedState = setup.isQuestionLocked;
+    const getInitialSequenceStep = useCallback(() => {
+        if (shouldResumeCompletedState)
+            return SPONTANEOUS_QA_SEQUENCE_STEP.ALLOW_RECORDING;
+        if (isFirstQuestion && !props.skipTeacherVideo) {
+            return props.waitForTeacherVideo
+                ? SPONTANEOUS_QA_SEQUENCE_STEP.WAITING_TEACHER
+                : SPONTANEOUS_QA_SEQUENCE_STEP.DELAYING;
+        }
+        return SPONTANEOUS_QA_SEQUENCE_STEP.DELAYING;
+    }, [isFirstQuestion, props.skipTeacherVideo, props.waitForTeacherVideo, shouldResumeCompletedState]);
+    const [sequenceStep, setSequenceStep] = useState(getInitialSequenceStep);
+    useEffect(() => {
+        setSequenceStep(getInitialSequenceStep());
+    }, [getInitialSequenceStep, setup.nav.currentIndex]);
+    useEffect(() => {
+        if (sequenceStep !== SPONTANEOUS_QA_SEQUENCE_STEP.DELAYING || shouldResumeCompletedState)
+            return;
+        const timer = setTimeout(() => {
+            setSequenceStep(SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION);
+        }, 3000);
+        return () => clearTimeout(timer);
+    }, [sequenceStep, shouldResumeCompletedState]);
+    const handleTeacherVideoEnded = useCallback(() => {
+        setSequenceStep(SPONTANEOUS_QA_SEQUENCE_STEP.DELAYING);
+        props.onTeacherIntroPlayed?.();
+    }, [props.onTeacherIntroPlayed]);
+    const handleQuestionAudioEnded = useCallback(() => {
+        if (sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION &&
+            !shouldResumeCompletedState) {
+            setSequenceStep(SPONTANEOUS_QA_SEQUENCE_STEP.ALLOW_RECORDING);
+        }
+    }, [sequenceStep, shouldResumeCompletedState]);
+    if (!setup.currentQuestion || !content)
+        return null;
+    const answeredIds = new Set(Array.from({ length: setup.flattenedCount }, (_, index) => `${setup.parentId}-item-${index}`)
+        .filter((id) => Boolean(props.answers[id])));
+    const questionIds = Array.from({ length: setup.flattenedCount }, (_, index) => `${setup.parentId}-item-${index}`);
+    const layoutSetup = setup;
+    const isCambridgeYle = !props.speakingTheme || props.speakingTheme === 'CAMBRIDGE_YLE';
+    if (isCambridgeYle) {
+        return (_jsxs("div", { className: "flex h-full w-full flex-col", children: [(content.partTitle || content.topic) && (_jsxs("div", { className: "mx-auto mb-3 w-full max-w-[950px] rounded-xl border border-white/70 bg-white/80 px-4 py-2 text-center", children: [content.partTitle && (_jsx("p", { className: "text-sm font-bold uppercase tracking-wide text-[#2C38B6]", children: content.partTitle })), content.topic && _jsx("p", { className: "text-sm text-slate-600", children: content.topic })] })), _jsx(SpontaneousQACambridgeLayout, { instruction: setup.instruction, questionText: content?.questionText || setup.currentQuestion?.content?.questionText, isReviewMode: props.isReviewMode, onQuestionAudioEnded: handleQuestionAudioEnded, onTeacherVideoEnded: handleTeacherVideoEnded, questionAudioUrl: questionAudioUrl, sequenceStep: sequenceStep, setup: layoutSetup, shouldResumeCompletedState: shouldResumeCompletedState, skipTeacherVideo: !isFirstQuestion || props.skipTeacherVideo, teacherVideoUrl: props.teacherVideoUrl })] }));
+    }
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const isMicLocked = !shouldResumeCompletedState && sequenceStep !== SPONTANEOUS_QA_SEQUENCE_STEP.ALLOW_RECORDING;
+    const micLockedText = sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION
+        ? 'Nghe câu hỏi trước khi trả lời'
+        : sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.DELAYING
+            ? 'Chuẩn bị phát audio câu hỏi...'
+            : 'Hãy chờ giáo viên hoàn thành hướng dẫn';
+    return (_jsx(Layout, { onExit: props.onExit, partName: content.partTitle || props.part.name || `Part ${props.part.partNo}`, instruction: setup.instruction || 'LISTEN AND ANSWER', audioUrl: content.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: (_jsx(TaskProgressDots, { total: setup.flattenedCount, currentIndex: setup.nav.currentIndex, answeredIds: answeredIds, questionIds: questionIds })), hideAudioBar: true, teacherVideoUrl: props.teacherVideoUrl, waitForTeacherVideo: isFirstQuestion && !props.skipTeacherVideo ? props.waitForTeacherVideo : false, onTeacherVideoEnded: handleTeacherVideoEnded, skipTeacherVideo: !isFirstQuestion || props.skipTeacherVideo, showTeacherImage: shouldResumeCompletedState || sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.ALLOW_RECORDING, isMicLockedOverride: isMicLocked, micLockedText: shouldResumeCompletedState ? undefined : micLockedText, children: _jsxs("div", { className: "flex h-full w-full flex-col items-center justify-center gap-8 px-8 pb-40", children: [(content.partTitle || content.topic) && (_jsxs("div", { className: "text-center", children: [content.partTitle && (_jsx("p", { className: "text-sm font-bold uppercase tracking-wide text-[#2C38B6]", children: content.partTitle })), content.topic && _jsx("p", { className: "text-base text-slate-700", children: content.topic })] })), setup.showExistingBadge && (_jsxs("div", { className: "flex items-center gap-2 rounded-full border-2 border-white bg-green-500 px-4 py-1 text-sm font-bold text-white shadow-md", children: [_jsx("span", { className: "h-2.5 w-2.5 animate-pulse rounded-full bg-white" }), "\u0110\u00E3 ghi \u00E2m"] })), _jsxs("h2", { className: "max-w-[700px] text-center font-['SVN-Volte_Rounded','Quicksand',sans-serif] text-[30px] font-semibold leading-[1.52] tracking-[-0.01em] text-[#2C38B6]", style: { WebkitTextStroke: '1px #ffffff', paintOrder: 'stroke fill' }, children: ["Nghe c\u00E2u h\u1ECFi, suy ngh\u0129 v\u00E0 tr\u1EA3 l\u1EDDi t\u1EF1 do", _jsx("br", {}), "b\u1EB1ng ti\u1EBFng Anh."] }), questionAudioUrl && (_jsx(SpontaneousQASummerSkyAudioPlayer, { audioUrl: questionAudioUrl, autoPlay: !shouldResumeCompletedState && sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.PLAYING_QUESTION, onEnded: handleQuestionAudioEnded, disabled: sequenceStep === SPONTANEOUS_QA_SEQUENCE_STEP.WAITING_TEACHER }))] }) }));
+}

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

@@ -1 +1,56 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useCallback as a,useEffect as n,useState as o}from"react";import{ResolvedImage as t}from"../../../../../../components/common/ResolvedImage";import{useSpeakingRendererSetup as i}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as s}from"../../../../../../components/themes";import l from"../SpeakingStoryImages.module.css";export function SpeakingStoryImagesRenderer(c){const m=i({...c,maxDurationMs:3e4}),h=s(c.speakingTheme),u=m.currentQuestion?.content,[g,p]=o(null),x=a(()=>p(null),[]);if(n(()=>{if(!g)return;const e=e=>{"Escape"===e.key&&x()};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[g,x]),!m.currentQuestion||!u)return null;const N=u.audioUrl??"",v=u.images??[];return e(h,{onExit:c.onExit,partName:c.part.name||`Part ${c.part.partNo}`,instruction:c.part.instructions||"LOOK AT THE PICTURES. LISTEN AND TELL THE STORY.",audioUrl:N,questionNumber:m.nav.questionNumberInPart,onPrev:m.handlePrev,onNext:m.handleNext,showPrev:m.nav.showPrev,showNext:m.nav.showNext,canGoPrev:m.nav.canGoPrev,canGoNext:m.nav.canGoNext,onAudioPlayingChange:m.onAudioPlayingChange,recorder:c.isReviewMode?null:m.recorder,showExistingBadge:m.showExistingBadge,teacherVideoUrl:c.teacherVideoUrl,waitForTeacherVideo:c.waitForTeacherVideo,onTeacherVideoEnded:c.onTeacherIntroPlayed,skipTeacherVideo:c.skipTeacherVideo,children:r("div",{className:l.part3Container,children:[m.showExistingBadge&&r("div",{className:"absolute right-4 top-4 z-10 rounded-full bg-green-500 px-4 py-1 flex items-center gap-2 text-sm font-bold text-white shadow-md border-2 border-white",children:[e("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),0===v.length?e("div",{className:l.emptyState,children:e("span",{children:"No images available"})}):e("div",{className:l.storyGrid,"data-count":v.length,children:v.map((r,a)=>e(d,{src:r,index:a,onEnlarge:()=>p(r)},`${r}-${a}`))}),g&&r("div",{className:l.lightboxBackdrop,onClick:x,role:"dialog","aria-modal":"true",children:[e("button",{type:"button",className:l.lightboxClose,onClick:x,"aria-label":"Đóng",children:"✕"}),e(t,{src:g,alt:"Story image enlarged",className:l.lightboxImage,draggable:!1})]})]})})}function d({src:a,index:n,onEnlarge:o}){return r("div",{className:l.storyFrame,children:[e("span",{className:l.storyNumber,"aria-hidden":"true",children:n+1}),e("button",{type:"button",className:l.imageBorder,onClick:o,"aria-label":`Phóng to ảnh số ${n+1}`,children:e(t,{src:a,alt:`Story image ${n+1}`,draggable:!1})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SpeakingStoryImagesRenderer
+ *
+ * Renderer for LISTEN_AND_SPEAK_WITH_STORY_IMAGES (Movers/Flyers Part 2).
+ *
+ * Each question has its own audio prompt and a set of story images.
+ * The student listens and tells the story shown by the images, then records their response.
+ *
+ * Layout:
+ *  - Images render as a single horizontal "story strip" with numbered
+ *    badges and connector arrows so the reading order is unmistakable.
+ *  - The strip is sandwiched between explicit top/bottom safe zones in
+ *    {@link ../SpeakingStoryImages.module.css} so it never collides with
+ *    the floating audio bar (top) or the mic label / mic button (bottom).
+ *  - Each frame is click-to-enlarge via a lightweight inline lightbox.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { ResolvedImage } from '../../../../../../components/common/ResolvedImage';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+import part3Styles from '../SpeakingStoryImages.module.css';
+// ============================================
+// Component
+// ============================================
+export function SpeakingStoryImagesRenderer(props) {
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        maxDurationMs: 30000,
+    });
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const content = setup.currentQuestion?.content;
+    // Lightbox / enlarged-preview state
+    const [enlargedSrc, setEnlargedSrc] = useState(null);
+    const closeLightbox = useCallback(() => setEnlargedSrc(null), []);
+    // Close lightbox on Escape
+    useEffect(() => {
+        if (!enlargedSrc)
+            return;
+        const handler = (e) => {
+            if (e.key === 'Escape')
+                closeLightbox();
+        };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [enlargedSrc, closeLightbox]);
+    if (!setup.currentQuestion || !content)
+        return null;
+    const audioUrl = content.audioUrl ?? '';
+    const images = content.images ?? [];
+    return (_jsx(Layout, { onExit: props.onExit, partName: props.part.name || `Part ${props.part.partNo}`, instruction: props.part.instructions || 'LOOK AT THE PICTURES. LISTEN AND TELL THE STORY.', 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: props.isReviewMode ? null : setup.recorder, showExistingBadge: setup.showExistingBadge, teacherVideoUrl: props.teacherVideoUrl, waitForTeacherVideo: props.waitForTeacherVideo, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, children: _jsxs("div", { className: part3Styles.part3Container, children: [setup.showExistingBadge && (_jsxs("div", { className: "absolute right-4 top-4 z-10 rounded-full bg-green-500 px-4 py-1 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"] })), images.length === 0 ? (_jsx("div", { className: part3Styles.emptyState, children: _jsx("span", { children: "No images available" }) })) : (_jsx("div", { className: part3Styles.storyGrid, "data-count": images.length, children: images.map((src, index) => (_jsx(StoryImageCard, { src: src, index: index, onEnlarge: () => setEnlargedSrc(src) }, `${src}-${index}`))) })), enlargedSrc && (_jsxs("div", { className: part3Styles.lightboxBackdrop, onClick: closeLightbox, role: "dialog", "aria-modal": "true", children: [_jsx("button", { type: "button", className: part3Styles.lightboxClose, onClick: closeLightbox, "aria-label": "\u0110\u00F3ng", children: "\u2715" }), _jsx(ResolvedImage, { src: enlargedSrc, alt: "Story image enlarged", className: part3Styles.lightboxImage, draggable: false })] }))] }) }));
+}
+function StoryImageCard({ src, index, onEnlarge }) {
+    return (_jsxs("div", { className: part3Styles.storyFrame, children: [_jsx("span", { className: part3Styles.storyNumber, "aria-hidden": "true", children: index + 1 }), _jsx("button", { type: "button", className: part3Styles.imageBorder, onClick: onEnlarge, "aria-label": `Phóng to ảnh số ${index + 1}`, children: _jsx(ResolvedImage, { src: src, alt: `Story image ${index + 1}`, draggable: false }) })] }));
+}

package/dist/components/exams/take/components/speaking/renderers/SpontaneousQACambridgeLayout.d.ts

@@ -0,0 +1,24 @@
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+export declare const SPONTANEOUS_QA_SEQUENCE_STEP: {
+    readonly WAITING_TEACHER: "WAITING_TEACHER";
+    readonly DELAYING: "DELAYING";
+    readonly PLAYING_QUESTION: "PLAYING_QUESTION";
+    readonly ALLOW_RECORDING: "ALLOW_RECORDING";
+};
+export type SpontaneousQASequenceStep = (typeof SPONTANEOUS_QA_SEQUENCE_STEP)[keyof typeof SPONTANEOUS_QA_SEQUENCE_STEP];
+type SpeakingRendererSetup = ReturnType<typeof useSpeakingRendererSetup>;
+interface SpontaneousQACambridgeLayoutProps {
+    instruction?: string;
+    questionText?: string;
+    isReviewMode?: boolean;
+    onQuestionAudioEnded: () => void;
+    onTeacherVideoEnded: () => void;
+    questionAudioUrl: string;
+    sequenceStep: SpontaneousQASequenceStep;
+    setup: SpeakingRendererSetup;
+    shouldResumeCompletedState: boolean;
+    skipTeacherVideo?: boolean;
+    teacherVideoUrl?: string;
+}
+export declare function SpontaneousQACambridgeLayout({ instruction, questionText, isReviewMode, onQuestionAudioEnded, onTeacherVideoEnded, questionAudioUrl, sequenceStep, setup, shouldResumeCompletedState, skipTeacherVideo, teacherVideoUrl, }: SpontaneousQACambridgeLayoutProps): import("react").JSX.Element;
+export {};