@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

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

@@ -1 +1,212 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as s,useEffect as i,useRef as n,useCallback as a,useMemo as r}from"react";import l from"next/image";import{usePresignedFileUrl as o}from"../../../../../../shared/lib/hooks";import{useSpeakingRendererSetup as c}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as d}from"../../../../../../components/themes";import p from"../../../../../../components/themes/summer-sky/assets/images/question-badge-sunset.png";import m from"../../../../../../components/themes/summer-sky/assets/images/red-badge-sunset.png";import h from"../../../../../../components/themes/summer-sky/assets/images/blue-badge-sunset.png";import u from"../../../../../../components/themes/summer-sky/assets/images/red-wrapper-sunset.png";import x from"../../../../../../components/themes/summer-sky/assets/images/blue-wrapper-sunset.png";import f from"../../../../../../components/themes/summer-sky/assets/images/robot-avatar.png";import g from"../../../../../../components/themes/summer-sky/assets/images/student-avatar.png";import y from"../../../../../../components/themes/summer-sky/assets/images/ic-play-sunset.png";import v from"../../../../../../components/themes/summer-sky/assets/images/ic-play-violet.webp";import w from"../../../../../../components/themes/summer-sky/assets/images/next-small.webp";function N({total:t,currentIndex:s,answeredIds:i,questionIds:n,virtualIndices:a}){return e("div",{className:"flex items-center gap-1.5 flex-wrap justify-center",children:Array.from({length:t},(t,r)=>{const l=r===s,o=i.has(n[r]),c=a.has(r);return e("div",{className:"h-2.5 w-2.5 rounded-full border-2 transition-all "+(l?"scale-125 border-yellow-300 bg-yellow-400 shadow-lg":o?"border-green-400 bg-green-400":c?"border-white/30 bg-white/10":"border-white/50 bg-white/20"),title:c?"Câu HS ảo":`Câu ${r+1}`},r)})})}export function SpeakingGNInterviewRenderer(b){const[S,k]=s(!0),[R,j]=s(!1),I=n(null),T=b.part.groupPayload,P=T?.virtualStudentName||"Học sinh AI",W=r(()=>{const e=new Set;return b.part.questions.forEach((t,s)=>{const i=t.content;"VIRTUAL"===i?.targetCandidate&&e.add(s)}),e},[b.part.questions]),q=c({...b,maxDurationMs:6e4,hasMic:!0}),U=d("SUMMER_SKY"),z=q.currentQuestion?.content,A="VIRTUAL"===z?.targetCandidate,C=!A,{previewUrl:E}=o(z?.virtualAnswer?.audioUrl??""),{previewUrl:B}=o(z?.imageUrl??""),L=!!z?.imageUrl&&!!B;i(()=>{I.current&&(I.current.pause(),I.current.currentTime=0),j(!1)},[q.currentQuestion?.id]);const V=a(()=>{if(E){if(R&&I.current)return I.current.pause(),void j(!1);I.current?I.current.src=E:(I.current=new Audio(E),I.current.onended=()=>j(!1),I.current.onerror=()=>j(!1)),I.current.play(),j(!0)}},[E,R]);i(()=>()=>{I.current&&(I.current.pause(),I.current=null)},[]);const Y=a(()=>{if(!A||!E)return;const e=setTimeout(()=>{V()},1e3);return()=>clearTimeout(e)},[A,E,V]);if(!q.currentQuestion||!z)return null;const F=new Set(b.part.questions.map(e=>e.id).filter(e=>!!b.answers[e])),H=b.part.questions.map(e=>e.id),D=e(N,{total:b.part.questions.length,currentIndex:q.nav.currentIndex,answeredIds:F,questionIds:H,virtualIndices:W});return t(U,{onExit:b.onExit,partName:b.part.name||`Part ${b.part.partNo}`,instruction:b.part.instructions||"LISTEN AND ANSWER",audioUrl:z.audioUrl??"",questionNumber:q.nav.questionNumberInPart,onPrev:q.handlePrev,onNext:q.handleNext,showPrev:q.nav.showPrev,showNext:q.nav.showNext,canGoPrev:q.nav.canGoPrev,canGoNext:q.nav.canGoNext,onAudioPlayingChange:q.onAudioPlayingChange,recorder:b.isReviewMode||A?null:q.recorder,showExistingBadge:C&&q.showExistingBadge,teacherVideoUrl:b.teacherVideoUrl,onTeacherVideoEnded:b.onTeacherIntroPlayed,skipTeacherVideo:b.skipTeacherVideo,headerRight:D,onAudioEnded:Y,children:[t("div",{className:"w-full h-full flex flex-col items-center relative",children:[e("div",{className:"w-full flex-1",style:{minHeight:0},children:e("div",{className:"mx-auto",style:{width:"850px",maxWidth:"90%",height:L?"auto":"calc(100% - 100px)"},children:t("div",{className:`w-full ${L?"":"h-full"} flex flex-col items-center`,style:L?{}:{paddingTop:"30px"},children:[S&&z.questionText&&t("div",{className:"relative flex flex-col justify-center items-center",style:{width:"882px",maxWidth:"90%",maxHeight:"80%",paddingLeft:"77px",paddingRight:"77px",paddingTop:"26px",paddingBottom:"26px",backgroundColor:"rgba(232, 136, 154, 0.15)",borderRadius:"20px"},children:[t("div",{className:"absolute cursor-pointer",style:{top:"-19px"},onClick:()=>k(!1),children:[e(l,{src:p,alt:"",style:{width:"169px",height:"38px"}}),e("div",{className:"absolute inset-0 flex justify-center items-center select-none",children:e("span",{className:"font-normal text-center leading-5 text-white",style:{fontSize:"18px"},children:"Ẩn câu hỏi"})})]}),e("div",{className:"max-w-full",children:e("div",{className:"text-black font-bold leading-[26px] text-center max-w-full",style:{fontSize:"18px",fontFamily:'"Open Sans", sans-serif'},children:e("p",{children:z.questionText})})})]}),!S&&t("div",{className:"cursor-pointer",onClick:()=>k(!0),children:[e(l,{src:p,alt:"",style:{width:"169px",height:"38px"}}),e("div",{className:"absolute inset-0 flex justify-center items-center select-none",style:{position:"relative",top:"-30px"},children:e("span",{className:"font-normal text-center leading-5 text-white",style:{fontSize:"18px"},children:"Hiện câu hỏi"})})]}),L&&e("div",{className:"flex justify-center",style:{marginTop:"12px"},children:e("div",{className:"relative overflow-hidden",style:{maxWidth:"100%",borderRadius:"16px",border:"3px solid rgba(230, 99, 93, 0.3)",boxShadow:"0 4px 15px rgba(0,0,0,0.08)"},children:e("img",{src:B,alt:"Booklet",style:{width:"100%",height:"100%",objectFit:"cover"}})})})]})})}),t("div",{className:"flex justify-between select-none items-end",style:{width:"990px",maxWidth:"95%",paddingBottom:"40px",paddingLeft:"20px",paddingRight:"20px"},children:[t("div",{className:"relative select-none transition-opacity duration-300 "+(A?"opacity-100":"opacity-50 grayscale"),children:[e("div",{children:t("div",{className:"relative flex",children:[e(l,{src:m,alt:"",style:{height:"57px",width:"258px"}}),e("div",{className:"absolute inset-0 flex justify-center items-center",style:{paddingTop:"12px"},children:e("div",{className:"text-white leading-5 font-normal text-center m-0 w-full select-none",children:e("p",{className:"m-0 truncate select-none",style:{fontSize:"18px",paddingLeft:"60px",paddingRight:"60px"},children:P})})})]})}),t("div",{className:"absolute",style:{top:"7px",right:"-58px"},children:[e(l,{src:u,alt:"",className:"relative",style:{width:"115px",height:"84px",zIndex:0}}),e("div",{className:"absolute inset-0 flex justify-center items-center w-full h-full",children:t("div",{className:"relative",style:{width:"68px",height:"68px"},children:[e(l,{src:f,alt:P,width:68,height:68,className:"object-cover rounded-full select-none",style:{width:"68px",height:"68px"},draggable:!1}),e("div",{className:"flex items-center justify-center absolute w-full h-full top-0 rounded-full text-white cursor-pointer",onClick:A?V:void 0,children:e(l,{src:y,alt:"play",width:16,height:16,className:"opacity-80"})})]})})]}),R&&e("div",{className:"absolute pointer-events-none",style:{top:"0px",right:"-130px",width:"70px",height:"84px",display:"flex",alignItems:"center"},children:t("div",{className:"relative",style:{width:"70px",height:"70px"},children:[e("div",{style:{position:"absolute",left:"0px",top:"50%",transform:"translateY(-50%)",width:"20px",height:"34px",borderRight:"3px solid rgba(30, 64, 175, 0.95)",borderRadius:"0 50% 50% 0",animation:"soundWavePulse 1s ease-in-out infinite",animationDelay:"0s"}}),e("div",{style:{position:"absolute",left:"12px",top:"50%",transform:"translateY(-50%)",width:"28px",height:"50px",borderRight:"3px solid rgba(30, 64, 175, 0.7)",borderRadius:"0 50% 50% 0",animation:"soundWavePulse 1s ease-in-out infinite",animationDelay:"0.2s"}}),e("div",{style:{position:"absolute",left:"24px",top:"50%",transform:"translateY(-50%)",width:"36px",height:"66px",borderRight:"3px solid rgba(30, 64, 175, 0.45)",borderRadius:"0 50% 50% 0",animation:"soundWavePulse 1s ease-in-out infinite",animationDelay:"0.4s"}})]})})]}),R&&e("div",{className:"flex-1 flex justify-center items-center text-center",style:{paddingLeft:"40px",paddingRight:"40px",paddingBottom:"40px"},children:t("p",{className:"m-0 select-none",style:{fontSize:"16px",fontWeight:700,fontStyle:"italic",color:"#1a1a2e",lineHeight:"1.5",fontFamily:'"Open Sans", sans-serif'},children:["Người chÆ¡i khác Ä‘ang trả lời.",e("br",{}),"Vui lòng nghe xong để tiếp tục."]})}),A&&!R&&t("div",{className:"flex-1 flex flex-col justify-center items-center text-center",style:{paddingLeft:"40px",paddingRight:"40px",paddingBottom:"40px"},children:[t("p",{className:"m-0 whitespace-nowrap",style:{color:"#1a1a2e",fontSize:"16px",fontWeight:700,fontStyle:"italic",fontFamily:'"Open Sans", sans-serif'},children:["Ấn biểu tượng"," ",e(l,{src:v,alt:"",width:20,height:20,className:"inline-block"})," ","trên avatar để nghe lại."]}),t("div",{className:"flex items-center",style:{gap:"4px"},children:[e("p",{className:"m-0",style:{color:"#1a1a2e",fontSize:"16px",fontWeight:700,fontStyle:"italic",fontFamily:'"Open Sans", sans-serif'},children:"Ấn nút"}),e(l,{src:w,alt:"next",width:34,height:34}),e("p",{className:"m-0",style:{color:"#1a1a2e",fontSize:"16px",fontWeight:700,fontStyle:"italic",fontFamily:'"Open Sans", sans-serif'},children:"để tiếp tục."})]})]}),t("div",{className:"relative select-none transition-opacity duration-300 "+(C?"opacity-100":"opacity-50 grayscale"),children:[e("div",{children:t("div",{className:"relative flex",children:[e(l,{src:h,alt:"",style:{height:"57px",width:"258px"}}),e("div",{className:"absolute inset-0 flex justify-center items-center",style:{paddingTop:"12px"},children:e("div",{className:"text-white leading-5 font-normal text-center m-0 w-full select-none",children:e("p",{className:"m-0 truncate select-none",style:{fontSize:"18px",paddingLeft:"60px",paddingRight:"60px"},children:"Bạn"})})})]})}),t("div",{className:"absolute",style:{top:"7px",left:"-58px"},children:[e(l,{src:x,alt:"",className:"relative",style:{width:"115px",height:"84px",zIndex:0}}),e("div",{className:"absolute inset-0 flex justify-center items-center w-full h-full",children:e("div",{className:"relative",style:{width:"68px",height:"68px"},children:e(l,{src:g,alt:"Bạn",width:68,height:68,className:"object-cover rounded-full select-none",style:{width:"68px",height:"68px"},draggable:!1})})})]})]})]})]}),e("style",{jsx:!0,children:"\n        @keyframes soundWavePulse {\n          0% {\n            opacity: 0.2;\n            transform: translateY(-50%) scaleX(0.7);\n          }\n          50% {\n            opacity: 1;\n            transform: translateY(-50%) scaleX(1);\n          }\n          100% {\n            opacity: 0.2;\n            transform: translateY(-50%) scaleX(0.7);\n          }\n        }\n      "})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SpeakingGNInterviewRenderer
+ *
+ * Renderer for GN_SPEAKING_INTERVIEW (GN Speaking Part 1 & Part 2).
+ * Simulates 2 candidates: virtual (pre-recorded) + real (student records).
+ *
+ * Flow per question:
+ *   - If targetCandidate === 'VIRTUAL' -> auto-play virtual answer, no mic
+ *   - If targetCandidate === 'REAL' -> show mic, student records
+ *
+ * Part 2 extension: When content.imageUrl exists, displays a booklet
+ * image (collage) above the question text for Discussion with Pictures.
+ *
+ * UI: Summer Sky theme with two game-style candidate avatars at bottom,
+ * question text shown inside a teal card with hide/show question toggle badge,
+ * audio player for examiner question.
+ */
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import Image from 'next/image';
+import { usePresignedFileUrl } from '../../../../../../shared/lib/hooks';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+// Summer Sky theme assets (shared GN/KFS badges)
+import questionBadge from '../../../../../../components/themes/summer-sky/assets/images/question-badge-sunset.png';
+import redBadge from '../../../../../../components/themes/summer-sky/assets/images/red-badge-sunset.png';
+import blueBadge from '../../../../../../components/themes/summer-sky/assets/images/blue-badge-sunset.png';
+import redWrapper from '../../../../../../components/themes/summer-sky/assets/images/red-wrapper-sunset.png';
+import blueWrapper from '../../../../../../components/themes/summer-sky/assets/images/blue-wrapper-sunset.png';
+import bingoAvatar from '../../../../../../components/themes/summer-sky/assets/images/robot-avatar.png';
+import userAvatar from '../../../../../../components/themes/summer-sky/assets/images/student-avatar.png';
+import icPlay from '../../../../../../components/themes/summer-sky/assets/images/ic-play-sunset.png';
+import icPlayViolet from '../../../../../../components/themes/summer-sky/assets/images/ic-play-violet.webp';
+import nextSmall from '../../../../../../components/themes/summer-sky/assets/images/next-small.webp';
+function ProgressDots({ total, currentIndex, answeredIds, questionIds, virtualIndices }) {
+    return (_jsx("div", { className: "flex items-center gap-1.5 flex-wrap justify-center", children: Array.from({ length: total }, (_, i) => {
+            const isCurrent = i === currentIndex;
+            const isAnswered = answeredIds.has(questionIds[i]);
+            const isVirtual = virtualIndices.has(i);
+            return (_jsx("div", { className: `h-2.5 w-2.5 rounded-full border-2 transition-all ${isCurrent
+                    ? 'scale-125 border-yellow-300 bg-yellow-400 shadow-lg'
+                    : isAnswered
+                        ? 'border-green-400 bg-green-400'
+                        : isVirtual
+                            ? 'border-white/30 bg-white/10'
+                            : 'border-white/50 bg-white/20'}`, title: isVirtual ? 'Câu HS ảo' : `Câu ${i + 1}` }, i));
+        }) }));
+}
+// ============================================
+// Main component
+// ============================================
+export function SpeakingGNInterviewRenderer(props) {
+    const [isQuestionVisible, setIsQuestionVisible] = useState(true);
+    const [isVirtualPlaying, setIsVirtualPlaying] = useState(false);
+    const virtualAudioRef = useRef(null);
+    // Get group payload for virtual candidate config
+    const groupPayload = props.part.groupPayload;
+    const virtualName = groupPayload?.virtualStudentName || 'Học sinh AI';
+    // Determine which questions are virtual
+    const virtualIndices = useMemo(() => {
+        const indices = new Set();
+        props.part.questions.forEach((q, i) => {
+            const content = q.content;
+            if (content?.targetCandidate === 'VIRTUAL') {
+                indices.add(i);
+            }
+        });
+        return indices;
+    }, [props.part.questions]);
+    // Setup with mic always enabled - we'll conditionally show/hide based on virtual/real
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        maxDurationMs: 60000, // 60 seconds
+        hasMic: true,
+    });
+    const Layout = getSpeakingLayout('SUMMER_SKY');
+    const content = setup.currentQuestion?.content;
+    const isVirtualTurn = content?.targetCandidate === 'VIRTUAL';
+    const isRealTurn = !isVirtualTurn;
+    // Resolve presigned URLs
+    const { previewUrl: virtualAnswerAudioUrl } = usePresignedFileUrl(content?.virtualAnswer?.audioUrl ?? '');
+    const { previewUrl: bookletImageUrl } = usePresignedFileUrl(content?.imageUrl ?? '');
+    const hasBookletImage = !!content?.imageUrl && !!bookletImageUrl;
+    // Stop virtual audio when navigating to a different question
+    useEffect(() => {
+        if (virtualAudioRef.current) {
+            virtualAudioRef.current.pause();
+            virtualAudioRef.current.currentTime = 0;
+        }
+        setIsVirtualPlaying(false);
+    }, [setup.currentQuestion?.id]);
+    // Play virtual answer audio
+    const handlePlayVirtualAnswer = useCallback(() => {
+        if (!virtualAnswerAudioUrl)
+            return;
+        if (isVirtualPlaying && virtualAudioRef.current) {
+            virtualAudioRef.current.pause();
+            setIsVirtualPlaying(false);
+            return;
+        }
+        if (!virtualAudioRef.current) {
+            virtualAudioRef.current = new Audio(virtualAnswerAudioUrl);
+            virtualAudioRef.current.onended = () => setIsVirtualPlaying(false);
+            virtualAudioRef.current.onerror = () => setIsVirtualPlaying(false);
+        }
+        else {
+            virtualAudioRef.current.src = virtualAnswerAudioUrl;
+        }
+        virtualAudioRef.current.play();
+        setIsVirtualPlaying(true);
+    }, [virtualAnswerAudioUrl, isVirtualPlaying]);
+    // Cleanup audio on unmount
+    useEffect(() => {
+        return () => {
+            if (virtualAudioRef.current) {
+                virtualAudioRef.current.pause();
+                virtualAudioRef.current = null;
+            }
+        };
+    }, []);
+    // Auto-play virtual answer after teacher audio ends (1s delay)
+    const handleTeacherAudioEnded = useCallback(() => {
+        if (!isVirtualTurn || !virtualAnswerAudioUrl)
+            return;
+        const timer = setTimeout(() => {
+            handlePlayVirtualAnswer();
+        }, 1000);
+        return () => clearTimeout(timer);
+    }, [isVirtualTurn, virtualAnswerAudioUrl, handlePlayVirtualAnswer]);
+    if (!setup.currentQuestion || !content)
+        return null;
+    // Progress tracking
+    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(ProgressDots, { total: props.part.questions.length, currentIndex: setup.nav.currentIndex, answeredIds: answeredIds, questionIds: questionIds, virtualIndices: virtualIndices }));
+    return (_jsxs(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 || isVirtualTurn ? null : setup.recorder, showExistingBadge: isRealTurn && setup.showExistingBadge, teacherVideoUrl: props.teacherVideoUrl, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, headerRight: headerRight, onAudioEnded: handleTeacherAudioEnded, children: [_jsxs("div", { className: "w-full h-full flex flex-col items-center relative", children: [_jsx("div", { className: "w-full flex-1", style: { minHeight: 0 }, children: _jsx("div", { className: "mx-auto", style: { width: '850px', maxWidth: '90%', height: hasBookletImage ? 'auto' : 'calc(100% - 100px)' }, children: _jsxs("div", { className: `w-full ${hasBookletImage ? '' : 'h-full'} flex flex-col items-center`, style: hasBookletImage ? {} : { paddingTop: '30px' }, children: [isQuestionVisible && content.questionText && (_jsxs("div", { className: "relative flex flex-col justify-center items-center", style: {
+                                            width: '882px',
+                                            maxWidth: '90%',
+                                            maxHeight: '80%',
+                                            paddingLeft: '77px',
+                                            paddingRight: '77px',
+                                            paddingTop: '26px',
+                                            paddingBottom: '26px',
+                                            backgroundColor: 'rgba(232, 136, 154, 0.15)',
+                                            borderRadius: '20px',
+                                        }, children: [_jsxs("div", { className: "absolute cursor-pointer", style: { top: '-19px' }, onClick: () => setIsQuestionVisible(false), children: [_jsx(Image, { src: questionBadge, alt: "", style: { width: '169px', height: '38px' } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center select-none", children: _jsx("span", { className: "font-normal text-center leading-5 text-white", style: { fontSize: '18px' }, children: "\u00E1\u00BA\u00A8n c\u00C3\u00A2u h\u00E1\u00BB\u008Fi" }) })] }), _jsx("div", { className: "max-w-full", children: _jsx("div", { className: "text-black font-bold leading-[26px] text-center max-w-full", style: { fontSize: '18px', fontFamily: '"Open Sans", sans-serif' }, children: _jsx("p", { children: content.questionText }) }) })] })), !isQuestionVisible && (_jsxs("div", { className: "cursor-pointer", onClick: () => setIsQuestionVisible(true), children: [_jsx(Image, { src: questionBadge, alt: "", style: { width: '169px', height: '38px' } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center select-none", style: { position: 'relative', top: '-30px' }, children: _jsx("span", { className: "font-normal text-center leading-5 text-white", style: { fontSize: '18px' }, children: "Hi\u00E1\u00BB\u2021n c\u00C3\u00A2u h\u00E1\u00BB\u008Fi" }) })] })), hasBookletImage && (_jsx("div", { className: "flex justify-center", style: { marginTop: '12px' }, children: _jsx("div", { className: "relative overflow-hidden", style: {
+                                                maxWidth: '100%',
+                                                borderRadius: '16px',
+                                                border: '3px solid rgba(230, 99, 93, 0.3)',
+                                                boxShadow: '0 4px 15px rgba(0,0,0,0.08)',
+                                            }, children: _jsx("img", { src: bookletImageUrl, alt: "Booklet", style: {
+                                                    width: '100%',
+                                                    height: '100%',
+                                                    objectFit: 'cover',
+                                                } }) }) }))] }) }) }), _jsxs("div", { className: "flex justify-between select-none items-end", style: { width: '990px', maxWidth: '95%', paddingBottom: '40px', paddingLeft: '20px', paddingRight: '20px' }, children: [_jsxs("div", { className: `relative select-none transition-opacity duration-300 ${isVirtualTurn ? 'opacity-100' : 'opacity-50 grayscale'}`, children: [_jsx("div", { children: _jsxs("div", { className: "relative flex", children: [_jsx(Image, { src: redBadge, alt: "", style: { height: '57px', width: '258px' } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center", style: { paddingTop: '12px' }, children: _jsx("div", { className: "text-white leading-5 font-normal text-center m-0 w-full select-none", children: _jsx("p", { className: "m-0 truncate select-none", style: { fontSize: '18px', paddingLeft: '60px', paddingRight: '60px' }, children: virtualName }) }) })] }) }), _jsxs("div", { className: "absolute", style: { top: '7px', right: '-58px' }, children: [_jsx(Image, { src: redWrapper, alt: "", className: "relative", style: { width: '115px', height: '84px', zIndex: 0 } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center w-full h-full", children: _jsxs("div", { className: "relative", style: { width: '68px', height: '68px' }, children: [_jsx(Image, { src: bingoAvatar, alt: virtualName, width: 68, height: 68, className: "object-cover rounded-full select-none", style: { width: '68px', height: '68px' }, draggable: false }), _jsx("div", { className: "flex items-center justify-center absolute w-full h-full top-0 rounded-full text-white cursor-pointer", onClick: isVirtualTurn ? handlePlayVirtualAnswer : undefined, children: _jsx(Image, { src: icPlay, alt: "play", width: 16, height: 16, className: "opacity-80" }) })] }) })] }), isVirtualPlaying && (_jsx("div", { className: "absolute pointer-events-none", style: { top: '0px', right: '-130px', width: '70px', height: '84px', display: 'flex', alignItems: 'center' }, children: _jsxs("div", { className: "relative", style: { width: '70px', height: '70px' }, children: [_jsx("div", { style: {
+                                                        position: 'absolute',
+                                                        left: '0px',
+                                                        top: '50%',
+                                                        transform: 'translateY(-50%)',
+                                                        width: '20px',
+                                                        height: '34px',
+                                                        borderRight: '3px solid rgba(30, 64, 175, 0.95)',
+                                                        borderRadius: '0 50% 50% 0',
+                                                        animation: 'soundWavePulse 1s ease-in-out infinite',
+                                                        animationDelay: '0s',
+                                                    } }), _jsx("div", { style: {
+                                                        position: 'absolute',
+                                                        left: '12px',
+                                                        top: '50%',
+                                                        transform: 'translateY(-50%)',
+                                                        width: '28px',
+                                                        height: '50px',
+                                                        borderRight: '3px solid rgba(30, 64, 175, 0.7)',
+                                                        borderRadius: '0 50% 50% 0',
+                                                        animation: 'soundWavePulse 1s ease-in-out infinite',
+                                                        animationDelay: '0.2s',
+                                                    } }), _jsx("div", { style: {
+                                                        position: 'absolute',
+                                                        left: '24px',
+                                                        top: '50%',
+                                                        transform: 'translateY(-50%)',
+                                                        width: '36px',
+                                                        height: '66px',
+                                                        borderRight: '3px solid rgba(30, 64, 175, 0.45)',
+                                                        borderRadius: '0 50% 50% 0',
+                                                        animation: 'soundWavePulse 1s ease-in-out infinite',
+                                                        animationDelay: '0.4s',
+                                                    } })] }) }))] }), isVirtualPlaying && (_jsx("div", { className: "flex-1 flex justify-center items-center text-center", style: { paddingLeft: '40px', paddingRight: '40px', paddingBottom: '40px' }, children: _jsxs("p", { className: "m-0 select-none", style: {
+                                        fontSize: '16px',
+                                        fontWeight: 700,
+                                        fontStyle: 'italic',
+                                        color: '#1a1a2e',
+                                        lineHeight: '1.5',
+                                        fontFamily: '"Open Sans", sans-serif',
+                                    }, children: ["Ng\u00C6\u00B0\u00E1\u00BB\u009Di ch\u00C6\u00A1i kh\u00C3\u00A1c \u00C4\u2018ang tr\u00E1\u00BA\u00A3 l\u00E1\u00BB\u009Di.", _jsx("br", {}), "Vui l\u00C3\u00B2ng nghe xong \u0111\u1EC3 ti\u1EBFp t\u1EE5c."] }) })), isVirtualTurn && !isVirtualPlaying && (_jsxs("div", { className: "flex-1 flex flex-col justify-center items-center text-center", style: { paddingLeft: '40px', paddingRight: '40px', paddingBottom: '40px' }, children: [_jsxs("p", { className: "m-0 whitespace-nowrap", style: { color: '#1a1a2e', fontSize: '16px', fontWeight: 700, fontStyle: 'italic', fontFamily: '"Open Sans", sans-serif' }, children: ["\u00E1\u00BA\u00A4n bi\u00E1\u00BB\u0192u t\u00C6\u00B0\u00E1\u00BB\u00A3ng", ' ', _jsx(Image, { src: icPlayViolet, alt: "", width: 20, height: 20, className: "inline-block" }), ' ', "tr\u00EAn avatar \u0111\u1EC3 nghe l\u1EA1i."] }), _jsxs("div", { className: "flex items-center", style: { gap: '4px' }, children: [_jsx("p", { className: "m-0", style: { color: '#1a1a2e', fontSize: '16px', fontWeight: 700, fontStyle: 'italic', fontFamily: '"Open Sans", sans-serif' }, children: "\u1EA4n n\u00FAt" }), _jsx(Image, { src: nextSmall, alt: "next", width: 34, height: 34 }), _jsx("p", { className: "m-0", style: { color: '#1a1a2e', fontSize: '16px', fontWeight: 700, fontStyle: 'italic', fontFamily: '"Open Sans", sans-serif' }, children: "\u0111\u1EC3 ti\u1EBFp t\u1EE5c." })] })] })), _jsxs("div", { className: `relative select-none transition-opacity duration-300 ${isRealTurn ? 'opacity-100' : 'opacity-50 grayscale'}`, children: [_jsx("div", { children: _jsxs("div", { className: "relative flex", children: [_jsx(Image, { src: blueBadge, alt: "", style: { height: '57px', width: '258px' } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center", style: { paddingTop: '12px' }, children: _jsx("div", { className: "text-white leading-5 font-normal text-center m-0 w-full select-none", children: _jsx("p", { className: "m-0 truncate select-none", style: { fontSize: '18px', paddingLeft: '60px', paddingRight: '60px' }, children: "B\u1EA1n" }) }) })] }) }), _jsxs("div", { className: "absolute", style: { top: '7px', left: '-58px' }, children: [_jsx(Image, { src: blueWrapper, alt: "", className: "relative", style: { width: '115px', height: '84px', zIndex: 0 } }), _jsx("div", { className: "absolute inset-0 flex justify-center items-center w-full h-full", children: _jsx("div", { className: "relative", style: { width: '68px', height: '68px' }, children: _jsx(Image, { src: userAvatar, alt: "B\u1EA1n", width: 68, height: 68, className: "object-cover rounded-full select-none", style: { width: '68px', height: '68px' }, draggable: false }) }) })] })] })] })] }), _jsx("style", { jsx: true, children: `
+        @keyframes soundWavePulse {
+          0% {
+            opacity: 0.2;
+            transform: translateY(-50%) scaleX(0.7);
+          }
+          50% {
+            opacity: 1;
+            transform: translateY(-50%) scaleX(1);
+          }
+          100% {
+            opacity: 0.2;
+            transform: translateY(-50%) scaleX(0.7);
+          }
+        }
+      ` })] }));
+}

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

@@ -1 +1,77 @@
-"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{ResolvedImage as i}from"../../../../../../components/common/ResolvedImage";import{useSpeakingRendererSetup as n}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as r}from"../../../../../../components/themes";import t from"../SpeakingInfoExchange.module.css";import s from"../SpeakingInfoExchangeSummerSky.module.css";export function SpeakingInfoExchangeRenderer(l){const d=n({...l,maxDurationMs:3e4}),c=r(l.speakingTheme),m="SUMMER_SKY"===l.speakingTheme,h=m?s:t,f=d.currentQuestion?.content,u=d.currentQuestion?.questionGroup?.payload;if(!d.currentQuestion||!f)return null;const g=f.audioUrl??"",p=u?.title??"",N=u?.imageUrl??"",v=u?.candidateFields??[],x=u?.examinerFields??[];return e(c,{onExit:l.onExit,partName:l.part.name||`Part ${l.part.partNo}`,instruction:l.part.instructions||"INFORMATION EXCHANGE",audioUrl:g,questionNumber:d.nav.questionNumberInPart,onPrev:d.handlePrev,onNext:d.handleNext,showPrev:d.nav.showPrev,showNext:d.nav.showNext,canGoPrev:d.nav.canGoPrev,canGoNext:d.nav.canGoNext,onAudioPlayingChange:d.onAudioPlayingChange,recorder:l.isReviewMode?null:d.recorder,showExistingBadge:d.showExistingBadge,teacherVideoUrl:l.teacherVideoUrl,onTeacherVideoEnded:l.onTeacherIntroPlayed,skipTeacherVideo:l.skipTeacherVideo,contentClassName:"!gap-2",children:e("div",{className:"w-full h-full",children:e("div",{className:h.part2Container,children:a("div",{className:h.questionContainer,children:[N&&a("div",m?{className:h.imageWrapper,children:[d.showExistingBadge&&a("div",{className:h.recordedBadge,children:[e("span",{className:h.recordedBadgeDot}),"Đã ghi âm"]}),e("div",{className:h.imageFrame,children:e(i,{src:N,alt:p||"Info Exchange",className:"object-contain h-full w-full pointer-events-none",draggable:!1})})]}:{className:"relative h-full flex items-center justify-center",children:[d.showExistingBadge&&a("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"]}),e("div",{className:t.imageBorder,children:e(i,{src:N,alt:p||"Info Exchange",className:"object-cover h-full w-full pointer-events-none",draggable:!1})})]}),a("div",{className:h.infoContainer,children:[e(o,{heading:"Candidate's Copy",title:p,fields:v,styles:h,isSummerSky:m}),e(o,{heading:"Examiner's Copy",title:p,fields:x,styles:h,isSummerSky:m})]})]})})})})}function o({heading:i,title:n,fields:r,styles:t,isSummerSky:s}){const o=r.map((i,n)=>{const r=!i.answer||"___"===i.answer||"?"===i.answer;return a("div",s?{className:t.infoDetailItem,children:[e("div",{className:t.infoDetailLabel,children:i.key}),e("div",{className:t.infoDetailDivide}),e("div",{className:[t.infoDetailValue,r?t.infoDetailValueBlank:""].join(" "),children:r?"?":i.answer})]}:{className:t.infoDetailItem,children:[e("div",{className:t.infoDetailItemValue,style:{textAlign:"right",flex:1,minWidth:0,wordBreak:"break-word",paddingRight:"10px",color:"#fff",fontSize:"18px",fontWeight:700},children:i.key}),e("div",{className:t.infoDetailItemDivide}),e("div",{className:t.infoDetailItemValue,style:{textAlign:"left",flex:1,minWidth:0,wordBreak:"break-word",paddingLeft:"10px",color:r?"#a8a29e":"#fff",fontStyle:r?"italic":"normal",fontSize:"18px",fontWeight:r?"normal":700},children:r?"?":i.answer})]},n)});return a("div",s?{className:t.infoItem,children:[e("div",{className:t.infoHeader,children:i}),a("div",{className:t.infoItemInner,children:[n&&e("div",{className:t.infoName,children:n}),o]})]}:{className:t.infoItem,children:[e("div",{className:t.infoHeader,children:i}),n&&e("div",{className:t.infoName,children:n}),o]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SpeakingInfoExchangeRenderer
+ *
+ * Renderer for LISTEN_AND_SPEAK_INFO_EXCHANGE (Flyers Part 2 — Information Exchange).
+ *
+ * The group payload holds a title, image, and two sets of fields (candidate / examiner).
+ * Each individual question has its own audioUrl. The student listens and records their answer.
+ *
+ * Supports per-theme styling:
+ *  - Default (Cambridge YLE): dark translucent cards with wood-plank badge
+ *  - SUMMER_SKY: bright sky-blue cards with floating pill badge (matches ocean-frame board)
+ */
+import { ResolvedImage } from '../../../../../../components/common/ResolvedImage';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+import defaultStyles from '../SpeakingInfoExchange.module.css';
+import summerSkyStyles from '../SpeakingInfoExchangeSummerSky.module.css';
+// ============================================
+// Component
+// ============================================
+export function SpeakingInfoExchangeRenderer(props) {
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        maxDurationMs: 30000,
+    });
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const isSummerSky = props.speakingTheme === 'SUMMER_SKY';
+    const styles = isSummerSky ? summerSkyStyles : defaultStyles;
+    const content = setup.currentQuestion?.content;
+    const groupPayload = setup.currentQuestion?.questionGroup?.payload;
+    if (!setup.currentQuestion || !content)
+        return null;
+    const audioUrl = content.audioUrl ?? '';
+    const title = groupPayload?.title ?? '';
+    const imageUrl = groupPayload?.imageUrl ?? '';
+    const candidateFields = groupPayload?.candidateFields ?? [];
+    const examinerFields = groupPayload?.examinerFields ?? [];
+    return (_jsx(Layout, { onExit: props.onExit, partName: props.part.name || `Part ${props.part.partNo}`, instruction: props.part.instructions || 'INFORMATION EXCHANGE', 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, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, contentClassName: "!gap-2", children: _jsx("div", { className: "w-full h-full", children: _jsx("div", { className: styles.part2Container, children: _jsxs("div", { className: styles.questionContainer, children: [imageUrl && (isSummerSky ? (_jsxs("div", { className: styles.imageWrapper, children: [setup.showExistingBadge && (_jsxs("div", { className: styles.recordedBadge, children: [_jsx("span", { className: styles.recordedBadgeDot }), "\u00C4\u0090\u00C3\u00A3 ghi \u00C3\u00A2m"] })), _jsx("div", { className: styles.imageFrame, children: _jsx(ResolvedImage, { src: imageUrl, alt: title || 'Info Exchange', className: "object-contain h-full w-full pointer-events-none", draggable: false }) })] })) : (_jsxs("div", { className: "relative h-full flex items-center justify-center", 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" }), "\u00C4\u0090\u00C3\u00A3 ghi \u00C3\u00A2m"] })), _jsx("div", { className: defaultStyles.imageBorder, children: _jsx(ResolvedImage, { src: imageUrl, alt: title || 'Info Exchange', className: "object-cover h-full w-full pointer-events-none", draggable: false }) })] }))), _jsxs("div", { className: styles.infoContainer, children: [_jsx(InfoCard, { heading: "Candidate's Copy", title: title, fields: candidateFields, styles: styles, isSummerSky: isSummerSky }), _jsx(InfoCard, { heading: "Examiner's Copy", title: title, fields: examinerFields, styles: styles, isSummerSky: isSummerSky })] })] }) }) }) }));
+}
+function InfoCard({ heading, title, fields, styles, isSummerSky }) {
+    const rows = fields.map((field, index) => {
+        const isBlank = !field.answer || field.answer === '___' || field.answer === '?';
+        if (isSummerSky) {
+            return (_jsxs("div", { className: styles.infoDetailItem, children: [_jsx("div", { className: styles.infoDetailLabel, children: field.key }), _jsx("div", { className: styles.infoDetailDivide }), _jsx("div", { className: [
+                            styles.infoDetailValue,
+                            isBlank ? styles.infoDetailValueBlank : '',
+                        ].join(' '), children: isBlank ? '?' : field.answer })] }, index));
+        }
+        // Default (Cambridge YLE) — preserve previous look
+        return (_jsxs("div", { className: styles.infoDetailItem, children: [_jsx("div", { className: styles.infoDetailItemValue, style: {
+                        textAlign: 'right',
+                        flex: 1,
+                        minWidth: 0,
+                        wordBreak: 'break-word',
+                        paddingRight: '10px',
+                        color: '#fff',
+                        fontSize: '18px',
+                        fontWeight: 700,
+                    }, children: field.key }), _jsx("div", { className: styles.infoDetailItemDivide }), _jsx("div", { className: styles.infoDetailItemValue, style: {
+                        textAlign: 'left',
+                        flex: 1,
+                        minWidth: 0,
+                        wordBreak: 'break-word',
+                        paddingLeft: '10px',
+                        color: isBlank ? '#a8a29e' : '#fff',
+                        fontStyle: isBlank ? 'italic' : 'normal',
+                        fontSize: '18px',
+                        fontWeight: isBlank ? 'normal' : 700,
+                    }, children: isBlank ? '?' : field.answer })] }, index));
+    });
+    if (isSummerSky) {
+        return (_jsxs("div", { className: styles.infoItem, children: [_jsx("div", { className: styles.infoHeader, children: heading }), _jsxs("div", { className: styles.infoItemInner, children: [title && _jsx("div", { className: styles.infoName, children: title }), rows] })] }));
+    }
+    return (_jsxs("div", { className: styles.infoItem, children: [_jsx("div", { className: styles.infoHeader, children: heading }), title && _jsx("div", { className: styles.infoName, children: title }), rows] }));
+}

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

@@ -1 +1,64 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{usePresignedFileUrl as r}from"../../../../../../shared/lib/hooks";import{useSpeakingRendererSetup as n}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as a}from"../../../../../../components/themes";import o from"../SpeakingReadDisplayedContent.module.css";function s({total:r,currentIndex:n,answeredIds:a,questionIds:s}){return e("div",{className:o.taskIndicator,style:{color:"#1e3a8a",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 i=r===n,l=a.has(s[r]);return t("div",{className:`${o.taskDot} ${i?o.taskDotActive:""} ${l&&!i?o.taskDotCompleted:""}`,style:i||l?void 0:{background:"#bfdbfe"}},r)})})]})}function i({backgroundImageUrl:n,arrowNode:a}){const{previewUrl:o}=r(n);return o?e("div",{className:"relative w-full flex justify-center items-center",children:[t("img",{src:o,alt:"Scene",className:"block w-full h-auto max-h-[calc(100vh-280px)] object-contain rounded-xl",draggable:!1}),a&&t("div",{className:"absolute",style:{left:`${a.x}%`,top:`${a.y}%`,width:`${a.width}%`,height:`${a.height}%`},"aria-hidden":"true",children:t("div",{className:"flex h-full w-full items-end justify-center pb-1",children:t("svg",{viewBox:"0 0 24 24",className:"w-full h-full text-red-500 drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]",fill:"currentColor",children:t("path",{d:"M12 21L4 12h5V3h6v9h5L12 21z"})})})})]}):null}export function SpeakingListenAndSpeakAnswerRenderer(r){const o=n({...r,maxDurationMs:3e4}),l=a(r.speakingTheme),d=o.currentQuestion?.content;if(!o.currentQuestion||!d)return null;const c=d.audioUrl??"",h=d.backgroundImageUrl??"",u=d.arrowNode,m=new Set(r.part.questions.map(e=>e.id).filter(e=>!!r.answers[e])),p=r.part.questions.map(e=>e.id),x=t(s,{total:r.part.questions.length,currentIndex:o.nav.currentIndex,answeredIds:m,questionIds:p});return t(l,{onExit:r.onExit,partName:r.part.name||`Part ${r.part.partNo}`,instruction:r.part.instructions||"LISTEN AND SPEAK YOUR ANSWER.",audioUrl:c,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:r.isReviewMode?null:o.recorder,showExistingBadge:o.showExistingBadge,headerRight:x,teacherVideoUrl:r.teacherVideoUrl,onTeacherVideoEnded:r.onTeacherIntroPlayed,skipTeacherVideo:r.skipTeacherVideo,contentClassName:"!p-0 !gap-0",children:t("div",{className:"w-full h-full flex items-center justify-center px-8 pb-[80px] pt-[70px]",children:e("div",{className:"relative w-full max-w-[850px] bg-white rounded-xl drop-shadow-md border-2 border-stone-200 overflow-hidden",children:[o.showExistingBadge&&e("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:[t("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),h?t(i,{backgroundImageUrl:h,arrowNode:u}):t("div",{className:"flex h-[400px] w-full justify-center items-center text-stone-400 font-medium",children:"Đang tải ảnh..."})]})})})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SpeakingListenAndSpeakAnswerRenderer
+ *
+ * Renderer for LISTEN_AND_SPEAK_ANSWER (Starters Speaking Part 2).
+ *
+ * Data shape:
+ *   - content.audioUrl: audio prompt to listen to
+ *   - content.backgroundImageUrl: background scene image
+ *   - content.arrowNode: { x, y, width, height } — percentage-positioned arrow overlay
+ *     pointing to the item on the scene that the student should answer about
+ *
+ * Interaction:
+ *   - Student sees background image with a downward arrow pointing to something
+ *   - Listens to audio question
+ *   - Records a spoken answer using the mic button
+ *   - Answer = S3 audio key from recorder
+ */
+import { usePresignedFileUrl } from '../../../../../../shared/lib/hooks';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+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));
+                }) })] }));
+}
+function SceneWithArrow({ backgroundImageUrl, arrowNode }) {
+    const { previewUrl: bgUrl } = usePresignedFileUrl(backgroundImageUrl);
+    if (!bgUrl)
+        return null;
+    return (_jsxs("div", { className: "relative w-full flex justify-center items-center", children: [_jsx("img", { src: bgUrl, alt: "Scene", className: "block w-full h-auto max-h-[calc(100vh-280px)] object-contain rounded-xl", draggable: false }), arrowNode && (_jsx("div", { className: "absolute", style: {
+                    left: `${arrowNode.x}%`,
+                    top: `${arrowNode.y}%`,
+                    width: `${arrowNode.width}%`,
+                    height: `${arrowNode.height}%`,
+                }, "aria-hidden": "true", children: _jsx("div", { className: "flex h-full w-full items-end justify-center pb-1", children: _jsx("svg", { viewBox: "0 0 24 24", className: "w-full h-full text-red-500 drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]", fill: "currentColor", children: _jsx("path", { d: "M12 21L4 12h5V3h6v9h5L12 21z" }) }) }) }))] }));
+}
+// ============================================
+// Main component
+// ============================================
+export function SpeakingListenAndSpeakAnswerRenderer(props) {
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        maxDurationMs: 30000,
+    });
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const content = setup.currentQuestion?.content;
+    if (!setup.currentQuestion || !content)
+        return null;
+    const audioUrl = content.audioUrl ?? '';
+    const backgroundImageUrl = content.backgroundImageUrl ?? '';
+    const arrowNode = content.arrowNode;
+    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 SPEAK YOUR ANSWER.", 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, headerRight: headerRight, teacherVideoUrl: props.teacherVideoUrl, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, contentClassName: "!p-0 !gap-0", children: _jsx("div", { className: "w-full h-full flex items-center justify-center px-8 pb-[80px] pt-[70px]", children: _jsxs("div", { className: "relative w-full max-w-[850px] bg-white rounded-xl drop-shadow-md border-2 border-stone-200 overflow-hidden", 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"] })), backgroundImageUrl ? (_jsx(SceneWithArrow, { backgroundImageUrl: backgroundImageUrl, arrowNode: arrowNode })) : (_jsx("div", { className: "flex h-[400px] w-full justify-center items-center text-stone-400 font-medium", children: "\u0110ang t\u1EA3i \u1EA3nh..." }))] }) }) }));
+}

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

@@ -1 +1,69 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{cn as n}from"../../../../../../shared/lib/utils";import{ResolvedImage as r}from"../../../../../../components/common/ResolvedImage";import{useSpeakingRendererSetup as a}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as i}from"../../../../../../components/themes";import s from"../SpeakingReadDisplayedContent.module.css";function o({total:n,currentIndex:r,answeredIds:a,questionIds:i}){return e("div",{className:s.taskIndicator,style:{color:"#1e3a8a",textShadow:"none",fontWeight:800},children:[e("span",{children:["Question ",r+1,"/ ",n]}),t("div",{className:"flex gap-2",children:Array.from({length:n},(e,n)=>{const o=n===r,d=a.has(i[n]);return t("div",{className:`${s.taskDot} ${o?s.taskDotActive:""} ${d&&!o?s.taskDotCompleted:""}`,style:o||d?void 0:{background:"#bfdbfe"}},n)})})]})}export function SpeakingOddOneOutRenderer(e){const n=a({...e,maxDurationMs:3e4}),r=i(e.speakingTheme),s=n.currentQuestion?.content,l=n.currentQuestion?.questionGroup?.payload;if(!n.currentQuestion||!s)return null;const c=s.audioUrl??"",m=l?.images??[],u=s.images,h=m.length>0?m:(u??[]).map((e,t)=>({id:`img-${t}`,url:e,label:String(t+1)})),g=s.activeImageId,p=new Set(e.part.questions.map(e=>e.id).filter(t=>!!e.answers[t])),x=e.part.questions.map(e=>e.id),v=t(o,{total:e.part.questions.length,currentIndex:n.nav.currentIndex,answeredIds:p,questionIds:x});return t(r,{onExit:e.onExit,partName:e.part.name||`Part ${e.part.partNo}`,instruction:e.part.instructions||"WHICH ONE IS DIFFERENT? LISTEN AND EXPLAIN.",audioUrl:c,questionNumber:n.nav.questionNumberInPart,onPrev:n.handlePrev,onNext:n.handleNext,showPrev:n.nav.showPrev,showNext:n.nav.showNext,canGoPrev:n.nav.canGoPrev,canGoNext:n.nav.canGoNext,onAudioPlayingChange:n.onAudioPlayingChange,recorder:e.isReviewMode?null:n.recorder,showExistingBadge:n.showExistingBadge,headerRight:v,teacherVideoUrl:e.teacherVideoUrl,onTeacherVideoEnded:e.onTeacherIntroPlayed,skipTeacherVideo:e.skipTeacherVideo,children:t("div",{className:"w-full flex justify-center items-center",style:{flex:"1 1 0",minHeight:0},children:t(d,{images:h,activeImageId:g,showExistingBadge:n.showExistingBadge})})})}function d({images:a,activeImageId:i,showExistingBadge:s}){return 0===a.length?t("div",{className:"flex h-40 items-center justify-center text-stone-400",children:t("span",{className:"text-sm",children:"No images available"})}):e("div",{className:"relative flex h-full items-center justify-center px-4 py-3",children:[s&&t("div",{className:"absolute right-3 top-3 z-10 rounded-full bg-green-600 px-3 py-1 text-xs font-bold text-white shadow",children:"Đã ghi âm"}),t("div",{className:"flex items-end gap-6",children:a.map(e=>{const a=e.id===i;return t("div",{className:"flex flex-col items-center",children:t("div",{className:n("overflow-hidden",a?"rounded-[10px] border-4 border-white shadow-lg":"rounded-[10px] border-4 border-white shadow-sm"),style:{width:a?"300px":"220px",height:a?"300px":"220px"},children:t(r,{src:e.url,alt:`Image ${e.label}`,className:"h-full w-full object-cover pointer-events-none",draggable:!1})})},e.id)})})]})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SpeakingOddOneOutRenderer
+ *
+ * Renderer for LISTEN_AND_SPEAK_IMAGE_GROUP (Movers Part 3 — Odd One Out).
+ *
+ * The group payload provides 4 images. Each question has an `activeImageId`
+ * that points to the "odd one out" image — highlighted with a border/scale.
+ * The student listens, identifies the odd image, and records their explanation.
+ */
+import { cn } from '../../../../../../shared/lib/utils';
+import { ResolvedImage } from '../../../../../../components/common/ResolvedImage';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+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));
+                }) })] }));
+}
+// ============================================
+// Component
+// ============================================
+export function SpeakingOddOneOutRenderer(props) {
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        maxDurationMs: 30000,
+    });
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const content = setup.currentQuestion?.content;
+    const groupPayload = setup.currentQuestion?.questionGroup?.payload;
+    if (!setup.currentQuestion || !content)
+        return null;
+    const audioUrl = content.audioUrl ?? '';
+    // Support both data shapes:
+    // 1. Grouped: groupPayload.images = [{id, url, label}], content.activeImageId
+    // 2. Non-grouped (API actual): content.images = string[] (no activeImageId)
+    const groupImages = groupPayload?.images ?? [];
+    const contentImages = content.images;
+    // Normalize to the {id, url, label} format
+    const images = groupImages.length > 0
+        ? groupImages
+        : (contentImages ?? []).map((url, i) => ({ id: `img-${i}`, url, label: String(i + 1) }));
+    const activeImageId = content.activeImageId;
+    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 || "WHICH ONE IS DIFFERENT? LISTEN AND EXPLAIN.", 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, headerRight: headerRight, teacherVideoUrl: props.teacherVideoUrl, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, children: _jsx("div", { className: "w-full flex justify-center items-center", style: { flex: '1 1 0', minHeight: 0 }, children: _jsx(OddOneOutGrid, { images: images, activeImageId: activeImageId, showExistingBadge: setup.showExistingBadge }) }) }));
+}
+function OddOneOutGrid({ images, activeImageId, showExistingBadge }) {
+    if (images.length === 0) {
+        return (_jsx("div", { className: "flex h-40 items-center justify-center text-stone-400", children: _jsx("span", { className: "text-sm", children: "No images available" }) }));
+    }
+    return (_jsxs("div", { className: "relative flex h-full items-center justify-center px-4 py-3", children: [showExistingBadge && (_jsx("div", { className: "absolute right-3 top-3 z-10 rounded-full bg-green-600 px-3 py-1 text-xs font-bold text-white shadow", children: "\u0110\u00E3 ghi \u00E2m" })), _jsx("div", { className: "flex items-end gap-6", children: images.map((image) => {
+                    const isActive = image.id === activeImageId;
+                    return (_jsx("div", { className: "flex flex-col items-center", children: _jsx("div", { className: cn('overflow-hidden', isActive
+                                ? 'rounded-[10px] border-4 border-white shadow-lg'
+                                : 'rounded-[10px] border-4 border-white shadow-sm'), style: {
+                                width: isActive ? '300px' : '220px',
+                                height: isActive ? '300px' : '220px',
+                            }, children: _jsx(ResolvedImage, { src: image.url, alt: `Image ${image.label}`, className: "h-full w-full object-cover pointer-events-none", draggable: false }) }) }, image.id));
+                }) })] }));
+}

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

@@ -1 +1,64 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useSpeakingRendererSetup as n}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as i}from"../../../../../../components/themes";import a from"../SpeakingReadDisplayedContent.module.css";function s({total:n,currentIndex:i,answeredIds:s,questionIds:r}){return e("div",{className:a.taskIndicator,style:{color:"#1e3a8a",textShadow:"none",fontWeight:800},children:[e("span",{children:["Question ",i+1,"/ ",n]}),t("div",{className:"flex gap-2",children:Array.from({length:n},(e,n)=>{const o=n===i,l=s.has(r[n]);return t("div",{className:`${a.taskDot} ${o?a.taskDotActive:""} ${l&&!o?a.taskDotCompleted:""}`,style:o||l?void 0:{background:"#bfdbfe"}},n)})})]})}export function SpeakingQuestionListRenderer(e){const a=n({...e,maxDurationMs:15e3}),o=i(e.speakingTheme),l=a.currentQuestion?.content,d=a.currentQuestion?.questionGroup?.payload;if(!a.currentQuestion||!l)return null;const c=l.audioUrl??"",u=d?.content??d?.questions??[],h=l.activeQuestionId,x=new Set(e.part.questions.map(e=>e.id).filter(t=>!!e.answers[t])),m=e.part.questions.map(e=>e.id),p=t(s,{total:e.part.questions.length,currentIndex:a.nav.currentIndex,answeredIds:x,questionIds:m});return t(o,{onExit:e.onExit,partName:e.part.name||`Part ${e.part.partNo}`,instruction:e.part.instructions||"ANSWER THE QUESTIONS.",audioUrl:c,questionNumber:a.nav.questionNumberInPart,onPrev:a.handlePrev,onNext:a.handleNext,showPrev:a.nav.showPrev,showNext:a.nav.showNext,canGoPrev:a.nav.canGoPrev,canGoNext:a.nav.canGoNext,onAudioPlayingChange:a.onAudioPlayingChange,recorder:e.isReviewMode?null:a.recorder,showExistingBadge:a.showExistingBadge,headerRight:p,teacherVideoUrl:e.teacherVideoUrl,onTeacherVideoEnded:e.onTeacherIntroPlayed,skipTeacherVideo:e.skipTeacherVideo,waitForTeacherVideo:e.waitForTeacherVideo,contentClassName:"!p-0 !gap-0",children:t("div",{className:"w-full h-full flex items-center justify-center px-8 pb-[80px] pt-[70px]",children:t(r,{questionList:u,activeQuestionId:h,showExistingBadge:a.showExistingBadge})})})}function r({questionList:n,activeQuestionId:i,showExistingBadge:a}){return 0===n.length?t("div",{className:"flex h-40 items-center justify-center text-stone-400",children:t("span",{className:"text-sm",children:"No questions available"})}):e("div",{className:"relative w-full max-w-[820px] flex flex-col gap-3",children:[a&&e("div",{className:"absolute right-0 -top-8 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:[t("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),n.map((e,n)=>{const a=e.id===i;return t(o,{index:n,text:e.text,isActive:a},e.id)})]})}function o({index:n,text:i,isActive:a}){return e("div",{className:`\n        flex items-center gap-4 w-full px-6 py-4 rounded-2xl\n        border-2 transition-all duration-300 select-none\n        ${a?"bg-gradient-to-r from-[#3B82F6] to-[#1D4ED8] border-[#60A5FA] shadow-lg shadow-blue-200/60":"bg-white border-[#BFDBFE] shadow-sm"}\n      `,children:[t("div",{className:`\n          flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center\n          text-base font-bold transition-colors duration-300\n          ${a?"bg-white/20 text-white":"bg-blue-100 text-blue-600"}\n        `,children:n+1}),t("span",{className:`\n          text-xl font-semibold leading-snug tracking-wide transition-colors duration-300\n          ${a?"text-white":"text-slate-500"}\n        `,children:i}),a&&t("div",{className:"ml-auto flex-shrink-0",children:e("span",{className:"flex h-3 w-3",children:[t("span",{className:"animate-ping absolute inline-flex h-3 w-3 rounded-full bg-white opacity-75"}),t("span",{className:"relative inline-flex rounded-full h-3 w-3 bg-white"})]})})]})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+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));
+                }) })] }));
+}
+// ============================================
+// Component
+// ============================================
+export function SpeakingQuestionListRenderer(props) {
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        maxDurationMs: 15000, // Part 4 (QUESTION_LIST) uses shorter duration
+    });
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const content = setup.currentQuestion?.content;
+    const groupPayload = setup.currentQuestion?.questionGroup?.payload;
+    if (!setup.currentQuestion || !content)
+        return null;
+    const audioUrl = content.audioUrl ?? '';
+    // Support both field names: API returns `questions`, type definition uses `content`
+    const questionList = groupPayload?.content ?? groupPayload?.questions ?? [];
+    const activeQuestionId = content.activeQuestionId;
+    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 || "ANSWER THE QUESTIONS.", 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, headerRight: headerRight, teacherVideoUrl: props.teacherVideoUrl, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, waitForTeacherVideo: props.waitForTeacherVideo, contentClassName: "!p-0 !gap-0", children: _jsx("div", { className: "w-full h-full flex items-center justify-center px-8 pb-[80px] pt-[70px]", children: _jsx(QuestionListPanel, { questionList: questionList, activeQuestionId: activeQuestionId, showExistingBadge: setup.showExistingBadge }) }) }));
+}
+function QuestionListPanel({ questionList, activeQuestionId, showExistingBadge, }) {
+    if (questionList.length === 0) {
+        return (_jsx("div", { className: "flex h-40 items-center justify-center text-stone-400", children: _jsx("span", { className: "text-sm", children: "No questions available" }) }));
+    }
+    return (_jsxs("div", { className: "relative w-full max-w-[820px] flex flex-col gap-3", children: [showExistingBadge && (_jsxs("div", { className: "absolute right-0 -top-8 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"] })), questionList.map((item, index) => {
+                const isActive = item.id === activeQuestionId;
+                return (_jsx(QuestionListItem, { index: index, text: item.text, isActive: isActive }, item.id));
+            })] }));
+}
+function QuestionListItem({ index, text, isActive }) {
+    return (_jsxs("div", { className: `
+        flex items-center gap-4 w-full px-6 py-4 rounded-2xl
+        border-2 transition-all duration-300 select-none
+        ${isActive
+            ? 'bg-gradient-to-r from-[#3B82F6] to-[#1D4ED8] border-[#60A5FA] shadow-lg shadow-blue-200/60'
+            : 'bg-white border-[#BFDBFE] shadow-sm'}
+      `, children: [_jsx("div", { className: `
+          flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center
+          text-base font-bold transition-colors duration-300
+          ${isActive
+                    ? 'bg-white/20 text-white'
+                    : 'bg-blue-100 text-blue-600'}
+        `, children: index + 1 }), _jsx("span", { className: `
+          text-xl font-semibold leading-snug tracking-wide transition-colors duration-300
+          ${isActive ? 'text-white' : 'text-slate-500'}
+        `, children: text }), isActive && (_jsx("div", { className: "ml-auto flex-shrink-0", children: _jsxs("span", { className: "flex h-3 w-3", children: [_jsx("span", { className: "animate-ping absolute inline-flex h-3 w-3 rounded-full bg-white opacity-75" }), _jsx("span", { className: "relative inline-flex rounded-full h-3 w-3 bg-white" })] }) }))] }));
+}