@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

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

@@ -1 +1,92 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{getTeacherVideoUrl as n,shouldWaitForTeacherVideo as t}from"../SpeakingVideoIntro";import{SpeakingCompareImagesRenderer as o}from"./SpeakingCompareImagesRenderer";import{SpeakingStoryImagesRenderer as i}from"./SpeakingStoryImagesRenderer";import{SpeakingOddOneOutRenderer as a}from"./SpeakingOddOneOutRenderer";import{SpeakingQuestionListRenderer as s}from"./SpeakingQuestionListRenderer";import{SpeakingChooseObjectsRenderer as p}from"./SpeakingChooseObjectsRenderer";import{SpeakingChooseAnswerGroupRenderer as S}from"./SpeakingChooseAnswerGroupRenderer";import{SpeakingDragObjectsRenderer as _}from"./SpeakingDragObjectsRenderer";import{SpeakingListenAndSpeakAnswerRenderer as E}from"./SpeakingListenAndSpeakAnswerRenderer";import{SpeakingDescribeImageRenderer as m}from"./SpeakingDescribeImageRenderer";import{SpeakingInfoExchangeRenderer as d}from"./SpeakingInfoExchangeRenderer";import{SpeakingReadDisplayedContentRenderer as N}from"./SpeakingReadDisplayedContentRenderer";import{SpeakingSpontaneousQARenderer as c}from"./SpeakingSpontaneousQARenderer";import{SpeakingConversationRenderer as A}from"./SpeakingConversationRenderer";import{SpeakingGNInterviewRenderer as u}from"./SpeakingGNInterviewRenderer";import{SpeakingCueCardRenderer as I}from"./SpeakingCueCardRenderer";export function SpeakingQuestionRenderer({part:T,answers:R,onAnswerChange:g,isReviewMode:O=!1,onExit:k,onPartComplete:f,onPartBack:C,speakingTheme:P,initialQuestionIndex:D,skipTeacherVideo:h,onTeacherIntroPlayed:l,currentQuestionIndex:w}){const x=k??(()=>{"undefined"!=typeof window&&window.history.back()}),G=!h&&t(T.questionType),L={part:T,answers:R,onAnswerChange:g,isReviewMode:O,onExit:x,onPartComplete:f,onPartBack:C,speakingTheme:P,initialQuestionIndex:D,teacherVideoUrl:n(T.questionType),waitForTeacherVideo:G,onTeacherIntroPlayed:l,skipTeacherVideo:!!h,currentQuestionIndex:w};switch(T.questionType){case"LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE":return e(p,{...L});case"LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP":return e(S,{...L});case"LISTEN_AND_DRAG_OBJECTS_INTO_SCENE":return e(_,{...L});case"LISTEN_AND_SPEAK_ANSWER":return e(E,{...L});case"SPEAKING_DESCRIBE_IMAGE":return e(m,{...L});case"LISTEN_AND_SPEAK_COMPARE_IMAGES":return e(o,{...L});case"LISTEN_AND_SPEAK_WITH_STORY_IMAGES":return e(i,{...L});case"LISTEN_AND_SPEAK_IMAGE_GROUP":case"LISTEN_AND_SPEAK_ODD_ONE_OUT":return e(a,{...L});case"LISTEN_AND_SPEAK_QUESTION_LIST":return e(s,{...L});case"LISTEN_AND_SPEAK_INFO_EXCHANGE":return e(d,{...L});case"READ_DISPLAYED_CONTENT":return e(N,{...L});case"SPONTANEOUS_QA":return e(c,{...L});case"SPEAKING_CONVERSATION":return e(A,{...L});case"GN_SPEAKING_INTERVIEW":return e(u,{...L});case"SPEAKING_CUE_CARD":return e(I,{...L});default:return e("div",{className:"flex h-full items-center justify-center p-8",children:r("p",{className:"text-center text-sm text-red-500",children:["Unsupported speaking question type: ",T.questionType]})})}}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTeacherVideoUrl, shouldWaitForTeacherVideo } from '../SpeakingVideoIntro';
+import { SpeakingCompareImagesRenderer } from './SpeakingCompareImagesRenderer';
+import { SpeakingStoryImagesRenderer } from './SpeakingStoryImagesRenderer';
+import { SpeakingOddOneOutRenderer } from './SpeakingOddOneOutRenderer';
+import { SpeakingQuestionListRenderer } from './SpeakingQuestionListRenderer';
+import { SpeakingChooseObjectsRenderer } from './SpeakingChooseObjectsRenderer';
+import { SpeakingChooseAnswerGroupRenderer } from './SpeakingChooseAnswerGroupRenderer';
+import { SpeakingDragObjectsRenderer } from './SpeakingDragObjectsRenderer';
+import { SpeakingListenAndSpeakAnswerRenderer } from './SpeakingListenAndSpeakAnswerRenderer';
+import { SpeakingDescribeImageRenderer } from './SpeakingDescribeImageRenderer';
+import { SpeakingInfoExchangeRenderer } from './SpeakingInfoExchangeRenderer';
+import { SpeakingReadDisplayedContentRenderer } from './SpeakingReadDisplayedContentRenderer';
+import { SpeakingSpontaneousQARenderer } from './SpeakingSpontaneousQARenderer';
+import { SpeakingSpontaneousQaGroupRenderer } from './SpeakingSpontaneousQaGroupRenderer';
+import { SpeakingConversationRenderer } from './SpeakingConversationRenderer';
+import { SpeakingGNInterviewRenderer } from './SpeakingGNInterviewRenderer';
+import { SpeakingCueCardRenderer } from './SpeakingCueCardRenderer';
+// ============================================
+// Factory
+// ============================================
+export function SpeakingQuestionRenderer({ part, answers, onAnswerChange, isReviewMode = false, onExit, onPartComplete, onPartBack, speakingTheme, initialQuestionIndex, skipTeacherVideo, onTeacherIntroPlayed, currentQuestionIndex, }) {
+    const handleExit = onExit ?? (() => { if (typeof window !== 'undefined')
+        window.history.back(); });
+    // Determine if teacher video should play:
+    // Only play on first visit to this part (skipTeacherVideo=false).
+    const shouldPlayVideo = !skipTeacherVideo && shouldWaitForTeacherVideo(part.questionType);
+    const sharedProps = {
+        part,
+        answers,
+        onAnswerChange,
+        isReviewMode,
+        onExit: handleExit,
+        onPartComplete,
+        onPartBack,
+        speakingTheme,
+        initialQuestionIndex,
+        // Always pass the URL so the Layout can show the static AI teacher image
+        teacherVideoUrl: getTeacherVideoUrl(part.questionType),
+        waitForTeacherVideo: shouldPlayVideo,
+        onTeacherIntroPlayed,
+        // Tell Layout to skip video playback and show static image directly
+        skipTeacherVideo: !!skipTeacherVideo,
+        currentQuestionIndex,
+    };
+    switch (part.questionType) {
+        // Starters Speaking — Part 1 (choose/drag objects in scene)
+        case 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE':
+            return _jsx(SpeakingChooseObjectsRenderer, { ...sharedProps });
+        case 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP':
+            return _jsx(SpeakingChooseAnswerGroupRenderer, { ...sharedProps });
+        case 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE':
+            return _jsx(SpeakingDragObjectsRenderer, { ...sharedProps });
+        // Starters Speaking — Part 2 (listen and speak answer)
+        case 'LISTEN_AND_SPEAK_ANSWER':
+            return _jsx(SpeakingListenAndSpeakAnswerRenderer, { ...sharedProps });
+        case 'SPEAKING_DESCRIBE_IMAGE':
+            return _jsx(SpeakingDescribeImageRenderer, { ...sharedProps });
+        // Movers/Flyers Speaking types
+        case 'LISTEN_AND_SPEAK_COMPARE_IMAGES':
+            return _jsx(SpeakingCompareImagesRenderer, { ...sharedProps });
+        case 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES':
+            return _jsx(SpeakingStoryImagesRenderer, { ...sharedProps });
+        case 'LISTEN_AND_SPEAK_IMAGE_GROUP':
+        case 'LISTEN_AND_SPEAK_ODD_ONE_OUT':
+            return _jsx(SpeakingOddOneOutRenderer, { ...sharedProps });
+        case 'LISTEN_AND_SPEAK_QUESTION_LIST':
+            return _jsx(SpeakingQuestionListRenderer, { ...sharedProps });
+        case 'LISTEN_AND_SPEAK_INFO_EXCHANGE':
+            return _jsx(SpeakingInfoExchangeRenderer, { ...sharedProps });
+        // Read Displayed Content — pronunciation assessment
+        case 'READ_DISPLAYED_CONTENT':
+            return _jsx(SpeakingReadDisplayedContentRenderer, { ...sharedProps });
+        // Spontaneous Q&A — listen to audio prompt and answer freely
+        case 'SPONTANEOUS_QA':
+            return _jsx(SpeakingSpontaneousQARenderer, { ...sharedProps });
+        case 'SPONTANEOUS_QA_GROUP':
+            return _jsx(SpeakingSpontaneousQaGroupRenderer, { ...sharedProps });
+        // KFS Speaking — 3-participant conversation (Interlocutor + Partner + Student)
+        case 'SPEAKING_CONVERSATION':
+            return _jsx(SpeakingConversationRenderer, { ...sharedProps });
+        // GN Speaking Interview — virtual + real candidate simulation
+        case 'GN_SPEAKING_INTERVIEW':
+            return _jsx(SpeakingGNInterviewRenderer, { ...sharedProps });
+        // IELTS Part 2 — Cue Card (Preparation + Recording)
+        case 'SPEAKING_CUE_CARD':
+            return _jsx(SpeakingCueCardRenderer, { ...sharedProps });
+        default:
+            return (_jsx("div", { className: "flex h-full items-center justify-center p-8", children: _jsxs("p", { className: "text-center text-sm text-red-500", children: ["Unsupported speaking question type: ", part.questionType] }) }));
+    }
+}

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

@@ -1 +1,202 @@
-"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useEffect as t,useRef as i,useState as n}from"react";import{useSpeakingRendererSetup as s}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as a}from"../../../../../../components/themes";import l from"../../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import o 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 m 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 p from"../SpeakingReadDisplayedContent.module.css";import{SpeakingAudioPlayer as h}from"../../../../../../components/shared/audio/SpeakingAudioPlayer";function f(e){switch(e){case"BASIC_PHONICS":return p.difficultyBasicPhonics;case"DAILY_ROUTINE":return p.difficultyDailyRoutine;case"DESCRIPTIVE_EMOTIONAL":return p.difficultyDescriptiveEmotional;default:return""}}function g(e){switch(e){case"BASIC_PHONICS":return"📖 Basic Phonics";case"DAILY_ROUTINE":return"🕐 Daily Routine & Time";case"DESCRIPTIVE_EMOTIONAL":return"🌄 Descriptive & Emotional";default:return""}}function x({total:t,currentIndex:i,answeredIds:n,questionIds:s,isSpeakingShell:a}){return e("div",{className:p.taskIndicator,style:a?{color:"#78350f",textShadow:"none",fontWeight:800}:void 0,children:[e("span",{children:["Question ",i+1,"/ ",t]}),r("div",{className:"flex gap-2",children:Array.from({length:t},(e,t)=>{const a=t===i,l=n.has(s[t]);return r("div",{className:`${p.taskDot} ${a?p.taskDotActive:""} ${l&&!a?p.taskDotCompleted:""}`},t)})})]})}function v({total:t,currentIndex:i,answeredIds:n,questionIds:s}){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 ",i+1,"/ ",t]}),r("div",{className:"flex gap-1.5",children:Array.from({length:t},(e,t)=>{const a=t===i,l=n.has(s[t]);return r("div",{className:"w-2.5 h-2.5 rounded-full "+(a?"bg-[#FF9900] scale-125 shadow-sm":l?"bg-[#16CA3B]":"bg-white/60")},t)})})]})}export function SpeakingReadDisplayedContentRenderer(w){const N=s({...w,maxDurationMs:3e4}),y=i(null),[b,k]=n(!1);t(()=>{const e=y.current;if(!e)return;const r=()=>{k(!0),N.onAudioPlayingChange?.(!0)},t=()=>{k(!1),N.onAudioPlayingChange?.(!1)},i=()=>{k(!1),N.onAudioPlayingChange?.(!1)};return e.addEventListener("play",r),e.addEventListener("pause",t),e.addEventListener("ended",i),()=>{e.removeEventListener("play",r),e.removeEventListener("pause",t),e.removeEventListener("ended",i),N.onAudioPlayingChange?.(!1)}},[N.recorder?.previewUrl,N.onAudioPlayingChange]);const S=a(w.speakingTheme),E="SUMMER_SKY"===w.speakingTheme,I=N.currentQuestion?.content;if(!N.currentQuestion||!I)return null;const C=I.referenceText??"",A=I.modelAudioUrl??"",_=I.difficultyTag,P=C.length>700?"clamp(15px, 1.6vw, 19px)":C.length>400?"clamp(18px, 2vw, 24px)":"clamp(22px, 2.2vw, 30px)",T=new Set(w.part.questions.map(e=>e.id).filter(e=>!!w.answers[e])),F=w.part.questions.map(e=>e.id);if(w.speakingTheme&&"CAMBRIDGE_YLE"!==w.speakingTheme){const t=r(x,{total:w.part.questions.length,currentIndex:N.nav.currentIndex,answeredIds:T,questionIds:F,isSpeakingShell:E}),i=A?e("div",{className:p.modelAudioSection,children:[r("span",{className:p.modelAudioLabel,children:"🔊 Model pronunciation:"}),r(h,{audioUrl:A})]}):null;return r(S,{onExit:w.onExit,partName:w.part.name||`Part ${w.part.partNo}`,instruction:w.part.instructions||"READ THE PASSAGE ALOUD",audioUrl:E&&A||"",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:w.isReviewMode?null:N.recorder,showExistingBadge:N.showExistingBadge,headerRight:t,audioBarRight:E?null:i,teacherVideoUrl:w.teacherVideoUrl,waitForTeacherVideo:w.waitForTeacherVideo,onTeacherVideoEnded:w.onTeacherIntroPlayed,skipTeacherVideo:w.skipTeacherVideo,children:E?r("div",{className:"w-full h-full flex flex-col items-center relative",children:r("div",{className:"w-full flex-1",style:{minHeight:0},children:r("div",{className:"mx-auto",style:{width:"900px",maxWidth:"95%",height:"calc(100% - 100px)"},children:r("div",{className:"w-full h-full flex flex-col items-center justify-center",style:{paddingTop:"10px"},children:e("div",{className:"relative flex flex-col justify-center items-center",style:{width:"100%",paddingLeft:"60px",paddingRight:"60px",paddingTop:"20px",paddingBottom:"20px"},children:[N.showExistingBadge&&e("div",{className:"absolute right-12 top-12 z-10 rounded-full bg-green-500 px-4 py-1.5 flex items-center gap-2 text-sm font-bold text-white shadow-md border-2 border-white",children:[r("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),r("div",{className:"max-w-full",children:r("div",{className:"text-center max-w-full",style:{fontSize:"40px",fontFamily:'"SVN-Volte Rounded", sans-serif',fontWeight:600,lineHeight:"52px",letterSpacing:"-0.01em",color:"#2C38B6"},children:r("p",{className:"m-0 break-words whitespace-pre-wrap",children:`"${C}"`})})})]})})})})}):e("div",{className:"flex flex-col items-center justify-center h-full w-full gap-4 px-4",children:[_&&r("div",{className:`${p.difficultyBadge} ${f(_)}`,children:g(_)}),e("div",{className:p.referenceTextCard,children:[N.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:[r("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),r("p",{className:p.referenceText,children:`"${C}"`})]})]})})}return e("div",{className:"flex flex-col w-full h-full relative",style:{background:"linear-gradient(180deg, #E6F3FF 0%, #FFFFFF 100%)"},children:[e("div",{className:"relative w-full flex justify-between items-start pt-6 px-6 z-20 shrink-0",children:[r("div",{className:"flex-1"}),r("div",{className:"flex-none drop-shadow-md",children:r(l,{partNumber:w.part.partNo,questionCount:w.part.questions.length,partName:w.part.name||`Part ${w.part.partNo}`})}),r("div",{className:"flex-1 flex justify-end mt-2 z-20",children:r(v,{total:w.part.questions.length,currentIndex:N.nav.currentIndex,answeredIds:T,questionIds:F})})]}),e("div",{className:"flex-1 w-full flex flex-col items-center min-h-0 px-4 pb-6 pt-5",children:[w.part.instructions&&e("div",{className:"shrink-0 w-full max-w-[760px] flex items-center gap-3 rounded-2xl px-5 py-3 mb-4",style:{background:"rgba(255, 255, 255, 0.9)",border:"2px solid #FCD34D",boxShadow:"0 3px 12px rgba(180, 130, 20, 0.12)"},children:[r("div",{className:"shrink-0 flex items-center justify-center rounded-full",style:{width:42,height:42,background:"#FEF3C7"},children:r("span",{style:{fontSize:22,lineHeight:1},children:"💡"})}),r("div",{className:"flex flex-col text-left min-w-0",children:r("p",{className:"m-0",style:{color:"#78350F",fontSize:16,fontWeight:600,lineHeight:1.35,fontFamily:'"Quicksand", sans-serif'},children:w.part.instructions})})]}),_&&r("div",{className:"shrink-0 mb-3",children:r("div",{className:`${p.difficultyBadge} ${f(_)}`,children:g(_)})}),r("div",{className:"flex-1 w-full flex flex-col items-center justify-center min-h-0 relative mb-8",children:e("div",{className:"w-full max-w-[850px] max-h-full 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 flex flex-col min-h-0",children:[N.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:[r("span",{className:"h-2.5 w-2.5 rounded-full bg-white animate-pulse"}),"Đã ghi âm"]}),r("div",{className:"w-full min-h-0 overflow-y-auto",children:r("p",{className:"text-center break-words whitespace-pre-wrap m-0",style:{fontSize:P,fontFamily:'"SVN-Volte Rounded", "Quicksand", sans-serif',fontWeight:600,lineHeight:1.4,letterSpacing:"-0.01em",color:"#2C38B6"},children:`"${C}"`})}),A&&e("div",{className:"mt-6 flex items-center justify-center gap-2 shrink-0",children:[r("span",{className:"text-sm font-semibold text-[#283593] font-['Quicksand']",children:"🔊 Model pronunciation:"}),r(h,{audioUrl:A})]})]})}),N.recorder&&!w.isReviewMode&&e("div",{className:"shrink-0 flex flex-col items-center z-50 gap-3",children:[r("div",{className:"bg-white rounded-[100px] shadow-[0_4px_10px_rgba(0,0,0,0.1)] whitespace-nowrap flex items-center justify-center",style:{padding:"10px 30px",color:"recording"===N.recorder.status?"#FF4D4D":["recorded","uploading","uploaded"].includes(N.recorder.status)?"#16CA3B":"#343C55",fontSize:"18px",fontFamily:'"Quicksand", sans-serif',fontWeight:700,lineHeight:"100%",letterSpacing:"-0.01em"},children:"recording"===N.recorder.status?"Ấn lần nữa để lưu kết quả":["recorded","uploading","uploaded"].includes(N.recorder.status)?"Câu trả lời đã được ghi nhận !":"Ấn biểu tượng Micro để trả lời"}),r("div",{className:"relative flex flex-col items-center",children:"recording"===N.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:N.recorder.stopRecording,children:[r(o,{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(N.recorder.remainingSeconds/60),":",(N.recorder.remainingSeconds%60).toString().padStart(2,"0")]})]}):r(o,{src:["recorded","uploading","uploaded"].includes(N.recorder.status)?b?u:m:d,alt:"micro",className:"transition-transform cursor-pointer hover:scale-[1.05] active:scale-[0.95]",style:{width:"120px",height:"120px"},onClick:()=>{if("recording"===N.recorder?.status)N.recorder.stopRecording();else if("idle"===N.recorder?.status||"error"===N.recorder?.status)N.recorder.startRecording();else if("uploaded"===N.recorder?.status||"recorded"===N.recorder?.status){const e=y.current;e&&(b?e.pause():e.play().catch(console.error))}}})}),N.recorder.previewUrl&&r("audio",{ref:y,src:N.recorder.previewUrl})]})]})]})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SpeakingReadDisplayedContentRenderer
+ *
+ * Renderer for READ_DISPLAYED_CONTENT (English Primary & Junior Speaking Test — Part 1).
+ *
+ * Data shape:
+ *   - content.referenceText: the passage the student must read aloud
+ *   - content.modelAudioUrl: optional model pronunciation audio
+ *   - content.difficultyTag: optional tag (BASIC_PHONICS | DAILY_ROUTINE | DESCRIPTIVE_EMOTIONAL)
+ *
+ * Interaction:
+ *   - Student sees the reference text prominently displayed
+ *   - Optionally listens to model pronunciation
+ *   - Records themselves reading the passage aloud
+ *   - Answer = S3 audio key from recorder
+ *   - Backend AI compares recorded audio to referenceText using Phonetic Distance
+ */
+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 styles from '../SpeakingReadDisplayedContent.module.css';
+import { SpeakingAudioPlayer } from '../../../../../../components/shared/audio/SpeakingAudioPlayer';
+// ============================================
+// Helper
+// ============================================
+/** Map difficultyTag to CSS class */
+function getDifficultyClass(tag) {
+    switch (tag) {
+        case 'BASIC_PHONICS':
+            return styles.difficultyBasicPhonics;
+        case 'DAILY_ROUTINE':
+            return styles.difficultyDailyRoutine;
+        case 'DESCRIPTIVE_EMOTIONAL':
+            return styles.difficultyDescriptiveEmotional;
+        default:
+            return '';
+    }
+}
+/** Map difficultyTag to display label */
+function getDifficultyLabel(tag) {
+    switch (tag) {
+        case 'BASIC_PHONICS':
+            return '📖 Basic Phonics';
+        case 'DAILY_ROUTINE':
+            return '🕐 Daily Routine & Time';
+        case 'DESCRIPTIVE_EMOTIONAL':
+            return '🌄 Descriptive & Emotional';
+        default:
+            return '';
+    }
+}
+function TaskProgressDots({ total, currentIndex, answeredIds, questionIds, isSpeakingShell }) {
+    return (_jsxs("div", { className: styles.taskIndicator, style: isSpeakingShell ? { color: '#78350f', textShadow: 'none', fontWeight: 800 } : undefined, 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 : ''}` }, i));
+                }) })] }));
+}
+/** Cambridge YLE styled progress (mirrors the sibling CAMBRIDGE_YLE inline layouts) */
+function QuestionProgress({ total, currentIndex, answeredIds, questionIds }) {
+    return (_jsxs("div", { className: "flex items-center gap-2 font-bold text-[#78350f] font-['Quicksand'] z-10", children: [_jsxs("span", { className: "text-sm", children: ["Question ", currentIndex + 1, "/ ", total] }), _jsx("div", { className: "flex gap-1.5", children: Array.from({ length: total }, (_, i) => {
+                    const isActive = i === currentIndex;
+                    const isAnswered = answeredIds.has(questionIds[i]);
+                    return (_jsx("div", { className: `w-2.5 h-2.5 rounded-full ${isActive ? 'bg-[#FF9900] scale-125 shadow-sm' : isAnswered ? 'bg-[#16CA3B]' : 'bg-white/60'}` }, i));
+                }) })] }));
+}
+// ============================================
+// Main component
+// ============================================
+export function SpeakingReadDisplayedContentRenderer(props) {
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        maxDurationMs: 30000, // 30 seconds for reading passages
+    });
+    // Playback of the recorded answer (used by the CAMBRIDGE_YLE inline mic UI)
+    const playbackAudioRef = useRef(null);
+    const [isPlayingBack, setIsPlayingBack] = useState(false);
+    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]);
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const isSpeakingShell = props.speakingTheme === 'SUMMER_SKY';
+    const content = setup.currentQuestion?.content;
+    if (!setup.currentQuestion || !content)
+        return null;
+    const referenceText = content.referenceText ?? '';
+    const modelAudioUrl = content.modelAudioUrl ?? '';
+    const difficultyTag = content.difficultyTag;
+    // Longer passages: shrink the font (and let the passage scroll) so the whole text stays reachable
+    const passageFontSize = referenceText.length > 700
+        ? 'clamp(15px, 1.6vw, 19px)'
+        : referenceText.length > 400
+            ? 'clamp(18px, 2vw, 24px)'
+            : 'clamp(22px, 2.2vw, 30px)';
+    // Build set of answered question IDs for progress dots
+    const answeredIds = new Set(props.part.questions.map((q) => q.id).filter((id) => !!props.answers[id]));
+    const questionIds = props.part.questions.map((q) => q.id);
+    const isSpeakingThemeLayout = props.speakingTheme && props.speakingTheme !== 'CAMBRIDGE_YLE';
+    // ============================================
+    // Speaking theme layout (SUMMER_SKY)
+    // ============================================
+    if (isSpeakingThemeLayout) {
+        const headerRight = (_jsx(TaskProgressDots, { total: props.part.questions.length, currentIndex: setup.nav.currentIndex, answeredIds: answeredIds, questionIds: questionIds, isSpeakingShell: isSpeakingShell }));
+        const audioBarRight = modelAudioUrl ? (_jsxs("div", { className: styles.modelAudioSection, children: [_jsx("span", { className: styles.modelAudioLabel, children: "\u00F0\u0178\u201D\u0160 Model pronunciation:" }), _jsx(SpeakingAudioPlayer, { audioUrl: modelAudioUrl })] })) : null;
+        return (_jsx(Layout, { onExit: props.onExit, partName: props.part.name || `Part ${props.part.partNo}`, instruction: props.part.instructions || 'READ THE PASSAGE ALOUD', audioUrl: isSpeakingShell ? (modelAudioUrl || '') : '', 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, audioBarRight: isSpeakingShell ? null : audioBarRight, teacherVideoUrl: props.teacherVideoUrl, waitForTeacherVideo: props.waitForTeacherVideo, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, children: isSpeakingShell ? (_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: '900px', maxWidth: '95%', height: 'calc(100% - 100px)' }, children: _jsx("div", { className: `w-full h-full flex flex-col items-center justify-center`, style: { paddingTop: '10px' }, children: _jsxs("div", { className: "relative flex flex-col justify-center items-center", style: {
+                                    width: '100%',
+                                    paddingLeft: '60px',
+                                    paddingRight: '60px',
+                                    paddingTop: '20px',
+                                    paddingBottom: '20px',
+                                }, children: [setup.showExistingBadge && (_jsxs("div", { className: "absolute right-12 top-12 z-10 rounded-full bg-green-500 px-4 py-1.5 flex items-center gap-2 text-sm font-bold text-white shadow-md border-2 border-white", children: [_jsx("span", { className: "h-2.5 w-2.5 rounded-full bg-white animate-pulse" }), "\u00C4\u0090\u00C3\u00A3 ghi \u00C3\u00A2m"] })), _jsx("div", { className: "max-w-full", children: _jsx("div", { className: "text-center max-w-full", style: {
+                                                fontSize: '40px',
+                                                fontFamily: '"SVN-Volte Rounded", sans-serif',
+                                                fontWeight: 600,
+                                                lineHeight: '52px',
+                                                letterSpacing: '-0.01em',
+                                                color: '#2C38B6'
+                                            }, children: _jsx("p", { className: "m-0 break-words whitespace-pre-wrap", children: `"${referenceText}"` }) }) })] }) }) }) }) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center h-full w-full gap-4 px-4", children: [difficultyTag && (_jsx("div", { className: `${styles.difficultyBadge} ${getDifficultyClass(difficultyTag)}`, children: getDifficultyLabel(difficultyTag) })), _jsxs("div", { className: styles.referenceTextCard, 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("p", { className: styles.referenceText, children: `"${referenceText}"` })] })] })) }));
+    }
+    // ============================================
+    // CAMBRIDGE_YLE Inline Layout
+    // ============================================
+    const handleMicClick = () => {
+        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-5", children: [props.part.instructions && (_jsxs("div", { className: "shrink-0 w-full max-w-[760px] flex items-center gap-3 rounded-2xl px-5 py-3 mb-4", style: {
+                            background: 'rgba(255, 255, 255, 0.9)',
+                            border: '2px solid #FCD34D',
+                            boxShadow: '0 3px 12px rgba(180, 130, 20, 0.12)',
+                        }, children: [_jsx("div", { className: "shrink-0 flex items-center justify-center rounded-full", style: { width: 42, height: 42, background: '#FEF3C7' }, children: _jsx("span", { style: { fontSize: 22, lineHeight: 1 }, children: "\u00F0\u0178\u2019\u00A1" }) }), _jsx("div", { className: "flex flex-col text-left min-w-0", children: _jsx("p", { className: "m-0", style: {
+                                        color: '#78350F',
+                                        fontSize: 16,
+                                        fontWeight: 600,
+                                        lineHeight: 1.35,
+                                        fontFamily: '"Quicksand", sans-serif',
+                                    }, children: props.part.instructions }) })] })), difficultyTag && (_jsx("div", { className: "shrink-0 mb-3", children: _jsx("div", { className: `${styles.difficultyBadge} ${getDifficultyClass(difficultyTag)}`, children: getDifficultyLabel(difficultyTag) }) })), _jsx("div", { className: "flex-1 w-full flex flex-col items-center justify-center min-h-0 relative mb-8", children: _jsxs("div", { className: "w-full max-w-[850px] max-h-full 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 flex flex-col min-h-0", 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" }), "\u00C4\u0090\u00C3\u00A3 ghi \u00C3\u00A2m"] })), _jsx("div", { className: "w-full min-h-0 overflow-y-auto", children: _jsx("p", { className: "text-center break-words whitespace-pre-wrap m-0", style: {
+                                            fontSize: passageFontSize,
+                                            fontFamily: '"SVN-Volte Rounded", "Quicksand", sans-serif',
+                                            fontWeight: 600,
+                                            lineHeight: 1.4,
+                                            letterSpacing: '-0.01em',
+                                            color: '#2C38B6',
+                                        }, children: `"${referenceText}"` }) }), modelAudioUrl && (_jsxs("div", { className: "mt-6 flex items-center justify-center gap-2 shrink-0", children: [_jsx("span", { className: "text-sm font-semibold text-[#283593] font-['Quicksand']", children: "\u00F0\u0178\u201D\u0160 Model pronunciation:" }), _jsx(SpeakingAudioPlayer, { audioUrl: modelAudioUrl })] }))] }) }), 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: 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: 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')] })] })) : (_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 }))] }))] })] }));
+}