@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

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

@@ -1 +1,35 @@
-"use client";import{jsx as e,jsxs as r,Fragment as a}from"react/jsx-runtime";import{ResolvedImage as n}from"../../../../../../components/common/ResolvedImage";import{useSpeakingRendererSetup as t}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as o}from"../../../../../../components/themes";export function SpeakingCompareImagesRenderer(r){const a=t({...r,maxDurationMs:3e4}),n=o(r.speakingTheme),d=a.currentQuestion?.content,l=a.currentQuestion?.questionGroup?.payload;if(!a.currentQuestion)return null;const s=d?.audioUrl??"",c=l?.candidateImageUrl??"",m=l?.examinerImageUrl??"";return e(n,{onExit:r.onExit,partName:r.part.name||`Part ${r.part.partNo}`,instruction:r.part.instructions||"LOOK AT THE TWO PICTURES. THEY LOOK THE SAME BUT SOME THINGS ARE DIFFERENT.",audioUrl:s,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:r.isReviewMode?null:a.recorder,showExistingBadge:a.showExistingBadge,teacherVideoUrl:r.teacherVideoUrl,onTeacherVideoEnded:r.onTeacherIntroPlayed,skipTeacherVideo:r.skipTeacherVideo,waitForTeacherVideo:r.waitForTeacherVideo,children:e("div",{className:"flex h-full w-full flex-col items-center gap-8 overflow-y-auto overflow-x-hidden px-4 py-18 scrollbar-thin",children:e(i,{candidateImageUrl:c,examinerImageUrl:m,showExistingBadge:a.showExistingBadge})})})}function i({candidateImageUrl:t,examinerImageUrl:o,showExistingBadge:i}){return r(a,{children:[i&&r("div",{className:"absolute right-4 top-4 z-10 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:[e("span",{className:"h-2.5 w-2.5 animate-pulse rounded-full bg-white"}),"Đã ghi âm"]}),r("div",{className:"relative flex w-full max-w-[1000px] flex-col items-center",children:[e("div",{className:"z-10 -mb-3 flex h-8 min-w-[200px] items-center justify-center rounded-xl bg-[#1e3458] px-6 text-[13px] font-bold uppercase tracking-[1.5px] text-white shadow-md md:-mb-4 md:h-10 md:text-sm",children:"Candidate's copy"}),e("div",{className:"relative aspect-[3.3] w-full overflow-hidden rounded-xl border-4 p-[10px] border-[#b45309] bg-white shadow-md",children:e(n,{src:t,alt:"Candidate's copy",className:"pointer-events-none h-full w-full object-cover rounded-xl",draggable:!1})})]}),r("div",{className:"relative flex w-full max-w-[1000px] flex-col items-center pb-8",children:[e("div",{className:"z-10 -mb-3 flex h-8 min-w-[200px] items-center justify-center rounded-xl bg-[#1e3458] px-6 text-[13px] font-bold uppercase tracking-[1.5px] text-white shadow-md md:-mb-4 md:h-10 md:text-sm",children:"Examiner's copy"}),e("div",{className:"relative aspect-[3.3] w-full overflow-hidden rounded-xl border-4 p-[10px] border-[#1e3a8a] bg-white shadow-md",children:e(n,{src:o,alt:"Examiner's copy",className:"pointer-events-none h-full w-full object-cover rounded-xl",draggable:!1})})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * SpeakingCompareImagesRenderer
+ *
+ * Renderer for LISTEN_AND_SPEAK_COMPARE_IMAGES (Movers/Flyers Part 1).
+ *
+ * The student listens to the audio prompt and looks at two scene images
+ * (candidate's copy vs examiner's copy). They record a spoken response
+ * describing the differences between the pictures.
+ */
+import { ResolvedImage } from '../../../../../../components/common/ResolvedImage';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+// ============================================
+// Component
+// ============================================
+export function SpeakingCompareImagesRenderer(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)
+        return null;
+    const audioUrl = content?.audioUrl ?? '';
+    const candidateImageUrl = groupPayload?.candidateImageUrl ?? '';
+    const examinerImageUrl = groupPayload?.examinerImageUrl ?? '';
+    return (_jsx(Layout, { onExit: props.onExit, partName: props.part.name || `Part ${props.part.partNo}`, instruction: props.part.instructions || "LOOK AT THE TWO PICTURES. THEY LOOK THE SAME BUT SOME THINGS ARE DIFFERENT.", 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, waitForTeacherVideo: props.waitForTeacherVideo, children: _jsx("div", { className: "flex h-full w-full flex-col items-center gap-8 overflow-y-auto overflow-x-hidden px-4 py-18 scrollbar-thin", children: _jsx(DualImageLayout, { candidateImageUrl: candidateImageUrl, examinerImageUrl: examinerImageUrl, showExistingBadge: setup.showExistingBadge }) }) }));
+}
+function DualImageLayout({ candidateImageUrl, examinerImageUrl, showExistingBadge }) {
+    return (_jsxs(_Fragment, { children: [showExistingBadge && (_jsxs("div", { className: "absolute right-4 top-4 z-10 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("div", { className: "relative flex w-full max-w-[1000px] flex-col items-center", children: [_jsx("div", { className: "z-10 -mb-3 flex h-8 min-w-[200px] items-center justify-center rounded-xl bg-[#1e3458] px-6 text-[13px] font-bold uppercase tracking-[1.5px] text-white shadow-md md:-mb-4 md:h-10 md:text-sm", children: "Candidate's copy" }), _jsx("div", { className: "relative aspect-[3.3] w-full overflow-hidden rounded-xl border-4 p-[10px] border-[#b45309] bg-white shadow-md", children: _jsx(ResolvedImage, { src: candidateImageUrl, alt: "Candidate's copy", className: "pointer-events-none h-full w-full object-cover rounded-xl", draggable: false }) })] }), _jsxs("div", { className: "relative flex w-full max-w-[1000px] flex-col items-center pb-8", children: [_jsx("div", { className: "z-10 -mb-3 flex h-8 min-w-[200px] items-center justify-center rounded-xl bg-[#1e3458] px-6 text-[13px] font-bold uppercase tracking-[1.5px] text-white shadow-md md:-mb-4 md:h-10 md:text-sm", children: "Examiner's copy" }), _jsx("div", { className: "relative aspect-[3.3] w-full overflow-hidden rounded-xl border-4 p-[10px] border-[#1e3a8a] bg-white shadow-md", children: _jsx(ResolvedImage, { src: examinerImageUrl, alt: "Examiner's copy", className: "pointer-events-none h-full w-full object-cover rounded-xl", draggable: false }) })] })] }));
+}

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

@@ -1 +1,147 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as s}from"react";import a from"next/image";import{Pause as r,Play as n}from"lucide-react";import{ResolvedImage as i}from"../../../../../../components/common/ResolvedImage";import{useSpeakingRendererSetup as l}from"../../../hooks/useSpeakingRendererSetup";import{useSpeakingConversationAudio as o}from"../../../hooks/useSpeakingConversationAudio";import{getSpeakingLayout as c}from"../../../../../../components/themes";import d from"../../../../../../components/themes/summer-sky/assets/styles/SummerSkyLayout.module.css";import m from"../../../../../../components/themes/summer-sky/assets/images/big-blue-badge-sunset.png";import p from"../../../../../../components/themes/summer-sky/assets/images/teacher-play-sunset.png";import u from"../../../../../../components/themes/summer-sky/assets/images/question-badge-sunset.png";import h from"../../../../../../components/themes/summer-sky/assets/images/red-badge-sunset.png";import x from"../../../../../../components/themes/summer-sky/assets/images/blue-badge-sunset.png";import g from"../../../../../../components/themes/summer-sky/assets/images/red-wrapper-sunset.png";import f from"../../../../../../components/themes/summer-sky/assets/images/blue-wrapper-sunset.png";import N from"../../../../../../components/themes/summer-sky/assets/images/robot-avatar.png";import y from"../../../../../../components/themes/summer-sky/assets/images/student-avatar.png";import v from"../../../../../../components/themes/summer-sky/assets/images/next-small.webp";function b(e){if(!isFinite(e)||e<0)return"0:00";return`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`}function w({phase:s,isPlaying:i,togglePlayPause:l,partNumber:o,partnerName:c,currentTime:u,duration:h}){const x="playing-partner"===s?c||"Bạn thi":`PART ${o}`,g=h>0?u/h*100:0;return e("div",{className:d.examAudioContainer,children:t("div",{className:d.bigBlueBadge,children:[e(a,{src:m,alt:"Audio Badge",className:d.bigBlueBadgeBg,priority:!0}),e("div",{className:d.audioBarContent,children:t("div",{className:d.audioBarInner,children:[e("span",{className:d.partLabel,children:x}),t("div",{className:d.teacherAvatarContainer,onClick:l,title:i?"Tạm dừng":"Phát",children:[e("img",{src:p.src,alt:"Speaker",className:d.teacherPlayIcon}),e("div",{className:"absolute inset-0 flex items-center justify-center",children:i?e(r,{className:"h-5 w-5 text-white drop-shadow-md",fill:"currentColor"}):e(n,{className:"h-5 w-5 text-white drop-shadow-md ml-0.5",fill:"currentColor"})})]}),t("div",{className:d.audioControlsWrapper,children:[t("span",{className:d.audioTime,children:["idle"===s&&"0:00 / 0:00",i&&`${b(u)} / ${b(h)}`,"ready"===s&&`${b(h)} / ${b(h)}`]}),e("div",{className:d.sliderTrack,children:e("div",{className:d.sliderFill,style:{width:`${g}%`,transition:"width 0.25s linear"}})})]})]})})]})})}function P({text:r}){const[n,i]=s(!0);return r?e("div",{className:"flex flex-col items-center w-full",style:{maxWidth:"882px"},children:t("div",n?{className:"relative flex flex-col justify-center items-center",style:{width:"882px",maxWidth:"90%",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:()=>i(!1),children:[e(a,{src:u,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("p",{className:"text-black font-bold leading-[26px] text-center m-0",style:{fontSize:"18px",fontFamily:'"Open Sans", sans-serif'},children:r})]}:{className:"relative cursor-pointer",onClick:()=>i(!0),children:[e(a,{src:u,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:"Hiện câu hỏi"})})]})}):null}function k({images:s}){if(!s||0===s.length)return null;const a=1===s.length,r=a?"grid-cols-1":2===s.length||4===s.length?"grid-cols-2":"grid-cols-3";return e("div",{className:`grid ${r} gap-4 w-full`,style:{maxWidth:a?"650px":"800px",margin:"0 auto"},children:s.map(s=>t("div",{className:"flex flex-col items-center gap-2",children:[e("div",{className:`relative w-full ${a?"":"aspect-square"} flex justify-center items-center rounded-xl overflow-hidden border-2 border-white/40 shadow-md bg-white/20`,children:e(i,{src:s.url,alt:s.label||"Image",className:"object-contain pointer-events-none "+(a?"max-h-[350px] w-auto":"w-full h-full p-1"),draggable:!1})}),s.label&&e("span",{className:"text-center font-bold",style:{fontSize:"14px",color:"#333"},children:s.label})]},s.id))})}function S({partnerName:s,partnerAvatarUrl:r,studentName:n,activeCharacter:l,isPartnerQuestion:o}){const c="partner"===l,d="student"===l;return t("div",{className:"flex justify-between select-none",style:{width:"990px",maxWidth:"95%",paddingBottom:"10px",paddingLeft:"20px",paddingRight:"20px"},children:[t("div",{className:"relative select-none",style:{opacity:c?1:.55},children:[t("div",{className:"relative flex",children:[e(a,{src:h,alt:"",style:{height:"57px",width:"258px"}}),e("div",{className:"absolute inset-0 flex justify-center items-center",style:{paddingTop:"12px"},children:e("p",{className:"m-0 truncate select-none text-white font-normal text-center leading-5",style:{fontSize:"18px",paddingLeft:"60px",paddingRight:"60px"},children:s||"Bạn thi"})})]}),t("div",{className:"absolute",style:{top:"7px",right:"-58px"},children:[e(a,{src:g,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:[r?e(i,{src:r,alt:s||"Partner",className:"object-cover rounded-full select-none",style:{width:"68px",height:"68px"},draggable:!1}):e(a,{src:N,alt:s||"Partner",width:68,height:68,className:"object-cover rounded-full select-none",draggable:!1}),c&&e("div",{className:"absolute inset-0 rounded-full border-4 border-yellow-400 shadow-[0_0_12px_4px_rgba(250,204,21,0.6)]"})]})})]})]}),t("div",{className:"relative select-none",style:{opacity:d||!o?1:.55},children:[t("div",{className:"relative flex",children:[e(a,{src:x,alt:"",style:{height:"57px",width:"258px"}}),e("div",{className:"absolute inset-0 flex justify-center items-center",style:{paddingTop:"12px"},children:e("p",{className:"m-0 truncate select-none text-white font-normal text-center leading-5",style:{fontSize:"18px",paddingLeft:"60px",paddingRight:"60px"},children:n||"Bạn"})})]}),t("div",{className:"absolute",style:{top:"7px",left:"-58px"},children:[e(a,{src:f,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(a,{src:y,alt:n||"Bạn",width:68,height:68,className:"object-cover rounded-full select-none",draggable:!1}),d&&e("div",{className:"absolute inset-0 rounded-full border-4 border-sky-400 shadow-[0_0_12px_4px_rgba(56,189,248,0.6)]"})]})})]})]})]})}function B({audioReady:s,onNext:r}){return s?e("div",{className:"flex flex-col items-center text-center",style:{maxWidth:"291px",marginTop:"-10px",marginBottom:"10px"},children:t("div",{className:"flex items-center gap-1",children:[e("p",{className:"m-0",style:{color:"#333",fontSize:"13px"},children:"Ấn nút"}),e("div",{className:"cursor-pointer",onClick:r,children:e(a,{src:v,alt:"next",width:30,height:30})}),e("p",{className:"m-0",style:{color:"#333",fontSize:"13px"},children:"để tiếp tục."})]})}):null}export function SpeakingConversationRenderer(a){const[r,n]=s(!1),i=l({...a,maxDurationMs:3e4,hasMic:!0}),d=c("SUMMER_SKY"),m=i.currentQuestion?.content,p=i.currentQuestion?.questionGroup?.payload,u="PARTNER"===m?.responder,h=o({interlocutorAudioUrl:m?.interlocutorAudioUrl,partnerAudioUrl:m?.partnerAudioUrl,onSequenceComplete:()=>n(!0)});if(!i.currentQuestion||!m)return null;const x="playing-interlocutor"===h.phase?"interlocutor":"playing-partner"===h.phase||u?"partner":r?"student":"none",g=()=>{n(!1),i.handleNext()};return e(d,{onExit:a.onExit,partName:a.part.name||`Part ${a.part.partNo}`,instruction:a.part.instructions||"SPEAKING CONVERSATION",audioUrl:"",questionNumber:i.nav.questionNumberInPart,onPrev:()=>{n(!1),i.handlePrev()},onNext:g,showPrev:i.nav.showPrev,showNext:i.nav.showNext,canGoPrev:i.nav.canGoPrev,canGoNext:i.nav.canGoNext,onAudioPlayingChange:i.onAudioPlayingChange,recorder:a.isReviewMode||u?null:i.recorder,showExistingBadge:!u&&i.showExistingBadge,teacherVideoUrl:a.teacherVideoUrl,onTeacherVideoEnded:a.onTeacherIntroPlayed,skipTeacherVideo:a.skipTeacherVideo,hideAudioBar:!0,hideFooterTitle:u,children:t("div",{className:"w-full h-full flex flex-col items-center relative",style:{paddingBottom:u?"0":"50px"},children:[e(w,{phase:h.phase,isPlaying:h.isPlaying,togglePlayPause:h.togglePlayPause,partNumber:i.nav.currentPartNo,partnerName:p?.partnerName,currentTime:h.currentTime,duration:h.duration}),e(P,{text:m.questionText}),p?.images&&p.images.length>0&&e("div",{className:"mt-4 w-full flex justify-center",children:e(k,{images:p.images})}),e("div",{className:"flex-1"}),u&&e(B,{audioReady:r,onNext:g}),e(S,{partnerName:p?.partnerName,partnerAvatarUrl:p?.partnerAvatarUrl,activeCharacter:x,isPartnerQuestion:u})]},i.currentQuestion.id)})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SpeakingConversationRenderer
+ *
+ * Renderer for SPEAKING_CONVERSATION (KFS Speaking - 3-participant conversation exam).
+ * Uses the Summer Sky theme shell with shared GN/KFS badge assets.
+ *
+ * Participants:
+ *   - Interlocutor (I): Automated audio - asks questions / directs conversation
+ *   - Partner: Automated audio - virtual partner who demonstrates example answers
+ *   - Student (S): Real student - records spoken answers via microphone
+ *
+ * Audio sequence per question: Interlocutor audio -> Partner audio -> ready state
+ *
+ * responder: 'PARTNER' - example question, no mic. Show Next instruction after audio.
+ * responder: 'STUDENT' - real question. Enable mic after audio sequence completes.
+ *
+ * Group payload may include:
+ *   - images: shown in Part 2 Phases 1A and 1B (picture discussion)
+ *   - partnerName / partnerAvatarUrl: character identity for the Partner role
+ */
+import { useState } from 'react';
+import Image from 'next/image';
+import { Pause, Play } from 'lucide-react';
+import { ResolvedImage } from '../../../../../../components/common/ResolvedImage';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { useSpeakingConversationAudio, } from '../../../hooks/useSpeakingConversationAudio';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+import layoutStyles from '../../../../../../components/themes/summer-sky/assets/styles/SummerSkyLayout.module.css';
+// Summer Sky theme assets (shared GN/KFS badges)
+import bigBlueBadge from '../../../../../../components/themes/summer-sky/assets/images/big-blue-badge-sunset.png';
+import teacherPlay from '../../../../../../components/themes/summer-sky/assets/images/teacher-play-sunset.png';
+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 nextSmall from '../../../../../../components/themes/summer-sky/assets/images/next-small.webp';
+// ============================================
+// Sub-component: Sequential audio bar
+// Replaces the Layout built-in audio player
+// ============================================
+/** Format seconds to m:ss */
+function formatTime(seconds) {
+    if (!isFinite(seconds) || seconds < 0)
+        return '0:00';
+    const m = Math.floor(seconds / 60);
+    const s = Math.floor(seconds % 60);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+}
+function ConversationAudioBar({ phase, isPlaying, togglePlayPause, partNumber, partnerName, currentTime, duration, }) {
+    const partLabel = phase === 'playing-partner'
+        ? (partnerName || 'Bạn thi')
+        : `PART ${partNumber}`;
+    const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0;
+    return (_jsx("div", { className: layoutStyles.examAudioContainer, children: _jsxs("div", { className: layoutStyles.bigBlueBadge, children: [_jsx(Image, { src: bigBlueBadge, alt: "Audio Badge", className: layoutStyles.bigBlueBadgeBg, priority: true }), _jsx("div", { className: layoutStyles.audioBarContent, children: _jsxs("div", { className: layoutStyles.audioBarInner, children: [_jsx("span", { className: layoutStyles.partLabel, children: partLabel }), _jsxs("div", { className: layoutStyles.teacherAvatarContainer, onClick: togglePlayPause, title: isPlaying ? 'Tạm dừng' : 'Phát', children: [_jsx("img", { src: teacherPlay.src, alt: "Speaker", className: layoutStyles.teacherPlayIcon }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: isPlaying ? (_jsx(Pause, { className: "h-5 w-5 text-white drop-shadow-md", fill: "currentColor" })) : (_jsx(Play, { className: "h-5 w-5 text-white drop-shadow-md ml-0.5", fill: "currentColor" })) })] }), _jsxs("div", { className: layoutStyles.audioControlsWrapper, children: [_jsxs("span", { className: layoutStyles.audioTime, children: [phase === 'idle' && '0:00 / 0:00', isPlaying && `${formatTime(currentTime)} / ${formatTime(duration)}`, phase === 'ready' && `${formatTime(duration)} / ${formatTime(duration)}`] }), _jsx("div", { className: layoutStyles.sliderTrack, children: _jsx("div", { className: layoutStyles.sliderFill, style: { width: `${progressPercent}%`, transition: 'width 0.25s linear' } }) })] })] }) })] }) }));
+}
+function QuestionTextDisplay({ text }) {
+    const [visible, setVisible] = useState(true);
+    if (!text)
+        return null;
+    return (_jsx("div", { className: "flex flex-col items-center w-full", style: { maxWidth: '882px' }, children: visible ? (_jsxs("div", { className: "relative flex flex-col justify-center items-center", style: {
+                width: '882px',
+                maxWidth: '90%',
+                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: () => setVisible(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\u00A4n c\u00C3\u00A2u h\u00E1\u00BB\u008Fi" }) })] }), _jsx("p", { className: "text-black font-bold leading-[26px] text-center m-0", style: { fontSize: '18px', fontFamily: '"Open Sans", sans-serif' }, children: text })] })) : (_jsxs("div", { className: "relative cursor-pointer", onClick: () => setVisible(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", 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" }) })] })) }));
+}
+function ImageGrid({ images }) {
+    if (!images || images.length === 0)
+        return null;
+    const isSingle = images.length === 1;
+    const gridCols = isSingle
+        ? 'grid-cols-1'
+        : images.length === 2 || images.length === 4
+            ? 'grid-cols-2'
+            : 'grid-cols-3';
+    return (_jsx("div", { className: `grid ${gridCols} gap-4 w-full`, style: { maxWidth: isSingle ? '650px' : '800px', margin: '0 auto' }, children: images.map((img) => (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: `relative w-full ${isSingle ? '' : 'aspect-square'} flex justify-center items-center rounded-xl overflow-hidden border-2 border-white/40 shadow-md bg-white/20`, children: _jsx(ResolvedImage, { src: img.url, alt: img.label || 'Image', className: `object-contain pointer-events-none ${isSingle ? 'max-h-[350px] w-auto' : 'w-full h-full p-1'}`, draggable: false }) }), img.label && (_jsx("span", { className: "text-center font-bold", style: { fontSize: '14px', color: '#333' }, children: img.label }))] }, img.id))) }));
+}
+function CharacterAvatars({ partnerName, partnerAvatarUrl, studentName, activeCharacter, isPartnerQuestion, }) {
+    const isPartnerActive = activeCharacter === 'partner';
+    const isStudentActive = activeCharacter === 'student';
+    return (_jsxs("div", { className: "flex justify-between select-none", style: {
+            width: '990px',
+            maxWidth: '95%',
+            paddingBottom: '10px',
+            paddingLeft: '20px',
+            paddingRight: '20px',
+        }, children: [_jsxs("div", { className: "relative select-none", style: { opacity: isPartnerActive ? 1 : 0.55 }, 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("p", { className: "m-0 truncate select-none text-white font-normal text-center leading-5", style: { fontSize: '18px', paddingLeft: '60px', paddingRight: '60px' }, children: partnerName || 'Bạn thi' }) })] }), _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: [partnerAvatarUrl ? (_jsx(ResolvedImage, { src: partnerAvatarUrl, alt: partnerName || 'Partner', className: "object-cover rounded-full select-none", style: { width: '68px', height: '68px' }, draggable: false })) : (_jsx(Image, { src: bingoAvatar, alt: partnerName || 'Partner', width: 68, height: 68, className: "object-cover rounded-full select-none", draggable: false })), isPartnerActive && (_jsx("div", { className: "absolute inset-0 rounded-full border-4 border-yellow-400 shadow-[0_0_12px_4px_rgba(250,204,21,0.6)]" }))] }) })] })] }), _jsxs("div", { className: "relative select-none", style: { opacity: isStudentActive || !isPartnerQuestion ? 1 : 0.55 }, 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("p", { className: "m-0 truncate select-none text-white font-normal text-center leading-5", style: { fontSize: '18px', paddingLeft: '60px', paddingRight: '60px' }, children: studentName || 'Bạn' }) })] }), _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: _jsxs("div", { className: "relative", style: { width: '68px', height: '68px' }, children: [_jsx(Image, { src: userAvatar, alt: studentName || 'Bạn', width: 68, height: 68, className: "object-cover rounded-full select-none", draggable: false }), isStudentActive && (_jsx("div", { className: "absolute inset-0 rounded-full border-4 border-sky-400 shadow-[0_0_12px_4px_rgba(56,189,248,0.6)]" }))] }) })] })] })] }));
+}
+function PartnerTurnInstruction({ audioReady, onNext }) {
+    if (!audioReady)
+        return null;
+    return (_jsx("div", { className: "flex flex-col items-center text-center", style: { maxWidth: '291px', marginTop: '-10px', marginBottom: '10px' }, children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("p", { className: "m-0", style: { color: '#333', fontSize: '13px' }, children: "\u1EA4n n\u00FAt" }), _jsx("div", { className: "cursor-pointer", onClick: onNext, children: _jsx(Image, { src: nextSmall, alt: "next", width: 30, height: 30 }) }), _jsx("p", { className: "m-0", style: { color: '#333', fontSize: '13px' }, children: "\u0111\u1EC3 ti\u1EBFp t\u1EE5c." })] }) }));
+}
+// ============================================
+// Main component
+// ============================================
+export function SpeakingConversationRenderer(props) {
+    const [audioReady, setAudioReady] = useState(false);
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        maxDurationMs: 30000,
+        hasMic: true,
+    });
+    // Always use Summer Sky theme for KFS Speaking
+    const Layout = getSpeakingLayout('SUMMER_SKY');
+    const currentContent = setup.currentQuestion?.content;
+    const groupPayload = setup.currentQuestion?.questionGroup?.payload;
+    const isPartnerQuestion = currentContent?.responder === 'PARTNER';
+    // Sequential audio: interlocutor -> partner -> ready
+    const audio = useSpeakingConversationAudio({
+        interlocutorAudioUrl: currentContent?.interlocutorAudioUrl,
+        partnerAudioUrl: currentContent?.partnerAudioUrl,
+        onSequenceComplete: () => setAudioReady(true),
+    });
+    if (!setup.currentQuestion || !currentContent)
+        return null;
+    // Which avatar is highlighted
+    const activeCharacter = audio.phase === 'playing-interlocutor'
+        ? 'interlocutor'
+        : audio.phase === 'playing-partner'
+            ? 'partner'
+            : isPartnerQuestion
+                ? 'partner'
+                : audioReady
+                    ? 'student'
+                    : 'none';
+    const handleNext = () => {
+        setAudioReady(false);
+        setup.handleNext();
+    };
+    const handlePrev = () => {
+        setAudioReady(false);
+        setup.handlePrev();
+    };
+    return (_jsx(Layout, { onExit: props.onExit, partName: props.part.name || `Part ${props.part.partNo}`, instruction: props.part.instructions || 'SPEAKING CONVERSATION', audioUrl: "", questionNumber: setup.nav.questionNumberInPart, onPrev: handlePrev, onNext: handleNext, showPrev: setup.nav.showPrev, showNext: setup.nav.showNext, canGoPrev: setup.nav.canGoPrev, canGoNext: setup.nav.canGoNext, onAudioPlayingChange: setup.onAudioPlayingChange, 
+        // PARTNER questions: no mic (example only)
+        recorder: props.isReviewMode || isPartnerQuestion ? null : setup.recorder, showExistingBadge: !isPartnerQuestion && setup.showExistingBadge, teacherVideoUrl: props.teacherVideoUrl, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, hideAudioBar: true, hideFooterTitle: isPartnerQuestion, children: _jsxs("div", { className: "w-full h-full flex flex-col items-center relative", style: { paddingBottom: isPartnerQuestion ? '0' : '50px' }, children: [_jsx(ConversationAudioBar, { phase: audio.phase, isPlaying: audio.isPlaying, togglePlayPause: audio.togglePlayPause, partNumber: setup.nav.currentPartNo, partnerName: groupPayload?.partnerName, currentTime: audio.currentTime, duration: audio.duration }), _jsx(QuestionTextDisplay, { text: currentContent.questionText }), groupPayload?.images && groupPayload.images.length > 0 && (_jsx("div", { className: "mt-4 w-full flex justify-center", children: _jsx(ImageGrid, { images: groupPayload.images }) })), _jsx("div", { className: "flex-1" }), isPartnerQuestion && (_jsx(PartnerTurnInstruction, { audioReady: audioReady, onNext: handleNext })), _jsx(CharacterAvatars, { partnerName: groupPayload?.partnerName, partnerAvatarUrl: groupPayload?.partnerAvatarUrl, activeCharacter: activeCharacter, isPartnerQuestion: isPartnerQuestion })] }, setup.currentQuestion.id) }));
+}

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

@@ -1 +1,232 @@
-"use client";import{jsxs as e,jsx as n}from"react/jsx-runtime";import{useEffect as t,useRef as r,useState as o}from"react";import{useSpeakingRendererSetup as a}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as i}from"../../../../../../components/themes";import s from"../../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import l from"next/image";import d from"../../../../../../components/themes/summer-sky/assets/images/mic_ver2_icon.png";import c 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 u from"../../../../../../components/themes/summer-sky/assets/images/pause_audio_ver2_icon.png";import m from"../../../../../../components/themes/summer-sky/assets/images/lock_mic_ver2_icon.png";import h from"../SpeakingReadDisplayedContent.module.css";function g({total:t,currentIndex:r,answeredIds:o,questionIds:a}){return e("div",{className:h.taskIndicator,style:{color:"#78350f",textShadow:"none",fontWeight:800},children:[e("span",{children:["Question ",r+1,"/ ",t]}),n("div",{className:"flex gap-2",children:Array.from({length:t},(e,t)=>{const i=t===r,s=o.has(a[t]);return n("div",{className:`${h.taskDot} ${i?h.taskDotActive:""} ${s&&!i?h.taskDotCompleted:""}`},t)})})]})}function x({total:t,currentIndex:r,answeredIds:o,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 ",r+1,"/ ",t]}),n("div",{className:"flex gap-1.5",children:Array.from({length:t},(e,t)=>{const i=t===r,s=o.has(a[t]);return n("div",{className:"w-2.5 h-2.5 rounded-full "+(i?"bg-[#FF9900] scale-125 shadow-sm":s?"bg-[#16CA3B]":"bg-white/60")},t)})})]})}export function SpeakingCueCardRenderer(m){const h=a({...m,maxDurationMs:12e4}),f=i(m.speakingTheme),v=h.currentQuestion?.content,w=v?.speakingTimeSeconds??120;t(()=>{h.recorder&&(h.recorder.maxDurationMs=1e3*w)},[w,h.recorder]);const b=r(null),[y,N]=o(!1);if(t(()=>{const e=b.current;if(!e)return;const n=()=>{N(!0),h.onAudioPlayingChange?.(!0)},t=()=>{N(!1),h.onAudioPlayingChange?.(!1)},r=()=>{N(!1),h.onAudioPlayingChange?.(!1)};return e.addEventListener("play",n),e.addEventListener("pause",t),e.addEventListener("ended",r),()=>{e.removeEventListener("play",n),e.removeEventListener("pause",t),e.removeEventListener("ended",r),h.onAudioPlayingChange?.(!1)}},[h.recorder?.previewUrl,h.onAudioPlayingChange]),!h.currentQuestion||!v)return null;const k=new Set(m.part.questions.map(e=>e.id).filter(e=>!!m.answers[e])),_=m.part.questions.map(e=>e.id);if(m.speakingTheme&&"CAMBRIDGE_YLE"!==m.speakingTheme){const t=n(g,{total:m.part.questions.length,currentIndex:h.nav.currentIndex,answeredIds:k,questionIds:_});return e(f,{onExit:m.onExit,partName:m.part.name||`Part ${m.part.partNo}`,instruction:m.part.instructions||"READ CUE CARD AND SPEAK",audioUrl:"",questionNumber:h.nav.questionNumberInPart,onPrev:h.handlePrev,onNext:h.handleNext,showPrev:h.nav.showPrev,showNext:h.nav.showNext,canGoPrev:h.nav.canGoPrev,canGoNext:h.nav.canGoNext,onAudioPlayingChange:h.onAudioPlayingChange,recorder:m.isReviewMode?null:h.recorder,showExistingBadge:h.showExistingBadge,headerRight:t,teacherVideoUrl:m.teacherVideoUrl,onTeacherVideoEnded:m.onTeacherIntroPlayed,skipTeacherVideo:m.skipTeacherVideo,waitForTeacherVideo:m.waitForTeacherVideo,children:[n("div",{className:"w-full h-full flex flex-col items-center relative",children:n("div",{className:"w-full flex-1",style:{minHeight:0},children:n("div",{className:"mx-auto",style:{width:"850px",maxWidth:"95%",height:"calc(100% - 80px)"},children:n("div",{className:"w-full h-full flex flex-col items-center justify-center",children:e("div",{className:"relative flex flex-col justify-start",style:{width:"100%",paddingLeft:"50px",paddingRight:"50px",paddingTop:"16px",paddingBottom:"16px"},children:[h.showExistingBadge&&e("div",{className:"absolute right-12 top-4 z-10 rounded-full bg-green-500 px-4 py-1.5 flex items-center gap-2 text-sm font-bold text-white shadow-md border-2 border-white",children:[n("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),n("div",{className:"cue-card-content",dangerouslySetInnerHTML:{__html:v.cueCardHtml},style:{fontSize:"22px",fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif',fontWeight:600,lineHeight:"35px",letterSpacing:"-0.01em",color:"#2C38B6"}})]})})})})}),n("style",{jsx:!0,global:!0,children:"\n          .cue-card-content p {\n            margin: 0 0 12px 0;\n          }\n          .cue-card-content p:last-child {\n            margin-bottom: 0;\n          }\n          .cue-card-content strong {\n            font-weight: 700;\n            font-size: 24px;\n            color: #1a237e;\n            line-height: 37px;\n          }\n          .cue-card-content ul {\n            margin: 16px 0;\n            padding: 0;\n            list-style: none;\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n          }\n          .cue-card-content ul li {\n            position: relative;\n            padding: 9px 15px 9px 34px;\n            font-size: 19px;\n            line-height: 28px;\n            font-weight: 500;\n            color: #283593;\n            background: rgba(44, 56, 182, 0.06);\n            border-radius: 12px;\n            border-left: 3px solid #5c6bc0;\n          }\n          .cue-card-content ul li::before {\n            content: '';\n            position: absolute;\n            left: 14px;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n            background: #5c6bc0;\n          }\n          .cue-card-content ul li p {\n            margin: 0;\n          }\n        "})]})}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:[n("div",{className:"flex-1"}),n("div",{className:"flex-none drop-shadow-md",children:n(s,{partNumber:m.part.partNo,questionCount:m.part.questions.length,partName:m.part.name||`Part ${m.part.partNo}`})}),n("div",{className:"flex-1 flex justify-end mt-2 z-20",children:n(x,{total:m.part.questions.length,currentIndex:h.nav.currentIndex,answeredIds:k,questionIds:_})})]}),e("div",{className:"flex-1 w-full flex flex-col items-center min-h-0 px-4 pb-6 pt-8",children:[n("div",{className:"flex-1 w-full flex flex-col items-center min-h-0 relative mb-6",children:e("div",{className:"w-full max-w-[850px] relative bg-white/60 backdrop-blur-md rounded-2xl shadow-[0_2px_15px_rgba(0,0,0,0.04)] border border-blue-50 p-8",children:[h.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:[n("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),n("div",{className:"cue-card-content",dangerouslySetInnerHTML:{__html:v.cueCardHtml},style:{fontSize:"22px",fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif',fontWeight:600,lineHeight:"35px",letterSpacing:"-0.01em",color:"#2C38B6"}})]})}),h.recorder&&!m.isReviewMode&&e("div",{className:"shrink-0 flex flex-col items-center z-50 gap-3",children:[n("div",{className:"bg-white rounded-[100px] shadow-[0_4px_10px_rgba(0,0,0,0.1)] whitespace-nowrap flex items-center justify-center",style:{padding:"10px 30px",color:"recording"===h.recorder.status?"#FF4D4D":["recorded","uploading","uploaded"].includes(h.recorder.status)?"#16CA3B":"#343C55",fontSize:"18px",fontFamily:'"Quicksand", sans-serif',fontWeight:700,lineHeight:"100%",letterSpacing:"-0.01em"},children:"recording"===h.recorder.status?"Ấn lần nữa để lưu kết quả":["recorded","uploading","uploaded"].includes(h.recorder.status)?"Câu trả lời đã được ghi nhận !":"Ấn biểu tượng Micro để trả lời"}),n("div",{className:"relative flex flex-col items-center",children:"recording"===h.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:h.recorder.stopRecording,children:[n(l,{src:c,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(h.recorder.remainingSeconds/60),":",(h.recorder.remainingSeconds%60).toString().padStart(2,"0")]})]}):n(l,{src:["recorded","uploading","uploaded"].includes(h.recorder.status)?y?u:p:d,alt:"micro",className:"transition-transform cursor-pointer hover:scale-[1.05] active:scale-[0.95]",style:{width:"120px",height:"120px"},onClick:()=>{if("recording"===h.recorder?.status)h.recorder.stopRecording();else if("idle"===h.recorder?.status||"error"===h.recorder?.status)h.recorder.startRecording();else if("uploaded"===h.recorder?.status||"recorded"===h.recorder?.status){const e=b.current;e&&(y?e.pause():e.play().catch(console.error))}}})}),h.recorder.previewUrl&&n("audio",{ref:b,src:h.recorder.previewUrl})]})]}),n("style",{jsx:!0,global:!0,children:"\n        .cue-card-content p {\n          margin: 0 0 12px 0;\n        }\n        .cue-card-content p:last-child {\n          margin-bottom: 0;\n        }\n        .cue-card-content strong {\n          font-weight: 700;\n          font-size: 24px;\n          color: #1a237e;\n          line-height: 37px;\n        }\n        .cue-card-content ul {\n          margin: 16px 0;\n          padding: 0;\n          list-style: none;\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n        }\n        .cue-card-content ul li {\n          position: relative;\n          padding: 9px 15px 9px 34px;\n          font-size: 19px;\n          line-height: 28px;\n          font-weight: 500;\n          color: #283593;\n          background: rgba(44, 56, 182, 0.06);\n          border-radius: 12px;\n          border-left: 3px solid #5c6bc0;\n        }\n        .cue-card-content ul li::before {\n          content: '';\n          position: absolute;\n          left: 14px;\n          top: 50%;\n          transform: translateY(-50%);\n          width: 8px;\n          height: 8px;\n          border-radius: 50%;\n          background: #5c6bc0;\n        }\n        .cue-card-content ul li p {\n          margin: 0;\n        }\n      "})]})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+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';
+import styles from '../SpeakingReadDisplayedContent.module.css';
+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 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));
+                }) })] }));
+}
+export function SpeakingCueCardRenderer(props) {
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        maxDurationMs: 120 * 1000,
+    });
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const content = setup.currentQuestion?.content;
+    const speakTime = content?.speakingTimeSeconds ?? 120;
+    useEffect(() => {
+        if (setup.recorder) {
+            setup.recorder.maxDurationMs = speakTime * 1000;
+        }
+    }, [speakTime, setup.recorder]);
+    const playbackAudioRef = useRef(null);
+    const [isPlayingBack, setIsPlayingBack] = useState(false);
+    // 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); setup.onAudioPlayingChange?.(false); };
+        audio.addEventListener('play', onPlay);
+        audio.addEventListener('pause', onPause);
+        audio.addEventListener('ended', onEnded);
+        return () => {
+            audio.removeEventListener('play', onPlay);
+            audio.removeEventListener('pause', onPause);
+            audio.removeEventListener('ended', onEnded);
+            setup.onAudioPlayingChange?.(false);
+        };
+    }, [setup.recorder?.previewUrl, setup.onAudioPlayingChange]);
+    if (!setup.currentQuestion || !content)
+        return null;
+    const answeredIds = new Set(props.part.questions.map((q) => q.id).filter((id) => !!props.answers[id]));
+    const questionIds = props.part.questions.map((q) => q.id);
+    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 (_jsxs(Layout, { onExit: props.onExit, partName: props.part.name || `Part ${props.part.partNo}`, instruction: props.part.instructions || 'READ CUE CARD AND SPEAK', 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, children: [_jsx("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: '95%', height: 'calc(100% - 80px)' }, children: _jsx("div", { className: "w-full h-full flex flex-col items-center justify-center", children: _jsxs("div", { className: "relative flex flex-col justify-start", style: {
+                                        width: '100%',
+                                        paddingLeft: '50px',
+                                        paddingRight: '50px',
+                                        paddingTop: '16px',
+                                        paddingBottom: '16px',
+                                    }, children: [setup.showExistingBadge && (_jsxs("div", { className: "absolute right-12 top-4 z-10 rounded-full bg-green-500 px-4 py-1.5 flex items-center gap-2 text-sm font-bold text-white shadow-md border-2 border-white", children: [_jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-white animate-pulse" }), "\u0110\u00E3 ghi \u00E2m"] })), _jsx("div", { className: "cue-card-content", dangerouslySetInnerHTML: { __html: content.cueCardHtml }, style: {
+                                                fontSize: '22px',
+                                                fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif',
+                                                fontWeight: 600,
+                                                lineHeight: '35px',
+                                                letterSpacing: '-0.01em',
+                                                color: '#2C38B6',
+                                            } })] }) }) }) }) }), _jsx("style", { jsx: true, global: true, children: `
+          .cue-card-content p {
+            margin: 0 0 12px 0;
+          }
+          .cue-card-content p:last-child {
+            margin-bottom: 0;
+          }
+          .cue-card-content strong {
+            font-weight: 700;
+            font-size: 24px;
+            color: #1a237e;
+            line-height: 37px;
+          }
+          .cue-card-content ul {
+            margin: 16px 0;
+            padding: 0;
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+          }
+          .cue-card-content ul li {
+            position: relative;
+            padding: 9px 15px 9px 34px;
+            font-size: 19px;
+            line-height: 28px;
+            font-weight: 500;
+            color: #283593;
+            background: rgba(44, 56, 182, 0.06);
+            border-radius: 12px;
+            border-left: 3px solid #5c6bc0;
+          }
+          .cue-card-content ul li::before {
+            content: '';
+            position: absolute;
+            left: 14px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #5c6bc0;
+          }
+          .cue-card-content ul li p {
+            margin: 0;
+          }
+        ` })] }));
+    }
+    // ============================================
+    // CAMBRIDGE_YLE Inline Layout
+    // ============================================
+    const isMicLocked = false;
+    const handleMicClick = () => {
+        if (isMicLocked)
+            return;
+        if (setup.recorder?.status === 'recording') {
+            setup.recorder.stopRecording();
+        }
+        else if (setup.recorder?.status === 'idle' || setup.recorder?.status === 'error') {
+            setup.recorder.startRecording();
+        }
+        else if (setup.recorder?.status === 'uploaded' || setup.recorder?.status === 'recorded') {
+            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-8", children: [_jsx("div", { className: "flex-1 w-full flex flex-col items-center min-h-0 relative mb-6", children: _jsxs("div", { className: "w-full max-w-[850px] relative bg-white/60 backdrop-blur-md rounded-2xl shadow-[0_2px_15px_rgba(0,0,0,0.04)] border border-blue-50 p-8", 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"] })), _jsx("div", { className: "cue-card-content", dangerouslySetInnerHTML: { __html: content.cueCardHtml }, style: {
+                                        fontSize: '22px',
+                                        fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif',
+                                        fontWeight: 600,
+                                        lineHeight: '35px',
+                                        letterSpacing: '-0.01em',
+                                        color: '#2C38B6',
+                                    } })] }) }), 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
+                                    ? '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 }))] }))] }), _jsx("style", { jsx: true, global: true, children: `
+        .cue-card-content p {
+          margin: 0 0 12px 0;
+        }
+        .cue-card-content p:last-child {
+          margin-bottom: 0;
+        }
+        .cue-card-content strong {
+          font-weight: 700;
+          font-size: 24px;
+          color: #1a237e;
+          line-height: 37px;
+        }
+        .cue-card-content ul {
+          margin: 16px 0;
+          padding: 0;
+          list-style: none;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+        .cue-card-content ul li {
+          position: relative;
+          padding: 9px 15px 9px 34px;
+          font-size: 19px;
+          line-height: 28px;
+          font-weight: 500;
+          color: #283593;
+          background: rgba(44, 56, 182, 0.06);
+          border-radius: 12px;
+          border-left: 3px solid #5c6bc0;
+        }
+        .cue-card-content ul li::before {
+          content: '';
+          position: absolute;
+          left: 14px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: #5c6bc0;
+        }
+        .cue-card-content ul li p {
+          margin: 0;
+        }
+      ` })] }));
+}