@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/exams/take/components/speaking/SpeakingRecordingPreview.js

@@ -1 +1,73 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as n,useState as r,useEffect as i}from"react";import{Play as a,Pause as l,RotateCcw as s,CheckCircle as d,AlertCircle as o,Loader2 as c}from"lucide-react";import{cn as m}from"../../../../../shared/lib/utils";function u(e){const t=Math.floor(e/60),n=Math.floor(e%60);return`${String(t).padStart(2,"0")}:${String(n).padStart(2,"0")}`}export function SpeakingRecordingPreview({previewUrl:p,uploadedKey:h,status:b,onReRecord:x,onPlayingChange:f}){const g=n(null),[w,v]=r(!1),[N,k]=r(0),[y,L]=r(0),E=!h&&"uploading"!==b&&"uploaded"!==b;i(()=>{const e=g.current;if(!e)return;const t=()=>{e.duration&&!isNaN(e.duration)&&isFinite(e.duration)&&L(e.duration)},n=()=>{k(e.currentTime),t()},r=()=>{v(!1),k(0),f?.(!1)};return t(),e.addEventListener("loadedmetadata",t),e.addEventListener("timeupdate",n),e.addEventListener("ended",r),()=>{e.removeEventListener("loadedmetadata",t),e.removeEventListener("timeupdate",n),e.removeEventListener("ended",r)}},[p]);const j=y>0?N/y*100:0;return t("div",{className:"mx-auto flex w-fit min-w-[320px] max-w-full items-center gap-3 rounded-full bg-white/70 backdrop-blur-md px-4 py-2.5 shadow-[0_8px_30px_rgb(0,0,0,0.12)] border border-white/60 ring-2 ring-white/40",children:[e("audio",{ref:g,src:p,preload:"metadata"}),e("button",{type:"button",onClick:()=>{const e=g.current;e&&(w?(e.pause(),v(!1),f?.(!1)):(e.play(),v(!0),f?.(!0)))},className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-500 text-white shadow-md transition-all hover:bg-blue-600 hover:scale-105 active:scale-95","aria-label":w?"Tạm dừng":"Nghe lại",children:w?e(l,{className:"h-4 w-4 fill-current"}):e(a,{className:"ml-0.5 h-4 w-4 fill-current"})}),e("div",{className:"flex-1 min-w-[100px] relative flex items-center",children:e("input",{type:"range",min:"0",max:y||0,step:"0.1",value:N,onChange:e=>{const t=g.current;if(!t)return;const n=parseFloat(e.target.value);t.currentTime=n,k(n)},className:m("w-full h-1.5 cursor-pointer appearance-none rounded-full bg-stone-200","[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5","[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md","[&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-blue-500","[&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-125"),style:{background:`linear-gradient(to right, #3b82f6 0%, #3b82f6 ${j}%, #e5e7eb ${j}%, #e5e7eb 100%)`}})}),t("span",{className:"min-w-[72px] text-right text-[11px] tabular-nums text-stone-600 font-bold shrink-0 tracking-wide",children:[u(N)," / ",u(y)]}),e("div",{className:"w-px h-6 bg-stone-200 shrink-0 mx-1"}),t("div",{className:"shrink-0 flex items-center justify-center min-w-[70px]",children:["uploading"===b&&t("div",{className:"flex items-center gap-1.5 rounded-full bg-amber-100 px-2.5 py-1 text-[11px] font-bold text-amber-700",children:[e(c,{className:"h-3 w-3 animate-spin"}),e("span",{className:"hidden sm:inline",children:"Đang lưu"})]}),"uploaded"===b&&t("div",{className:"flex items-center gap-1.5 rounded-full bg-green-100 px-2.5 py-1 text-[11px] font-bold text-green-700",children:[e(d,{className:"h-3.5 w-3.5"}),e("span",{className:"hidden sm:inline",children:"Đã lưu"})]}),"error"===b&&t("div",{className:"flex items-center gap-1.5 rounded-full bg-red-100 px-2.5 py-1 text-[11px] font-bold text-red-700",children:[e(o,{className:"h-3.5 w-3.5"}),e("span",{className:"hidden sm:inline",children:"Lỗi"})]}),"recorded"===b&&e("div",{className:"flex items-center gap-1 text-[11px] text-stone-400 font-medium",children:e(c,{className:"h-3 w-3 animate-spin"})})]}),E&&t("button",{type:"button",onClick:x,className:"flex items-center gap-1.5 rounded-full bg-stone-100 px-3 py-1.5 text-[11px] font-bold text-stone-700 transition-all hover:bg-stone-200 hover:text-stone-900 active:bg-stone-300 disabled:cursor-not-allowed disabled:opacity-50 shrink-0 ml-1",children:[e(s,{className:"h-3.5 w-3.5"}),e("span",{className:"hidden sm:inline",children:"Ghi lại"})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import { Play, Pause, RotateCcw, CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
+import { cn } from '../../../../../shared/lib/utils';
+function formatTime(time) {
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+export function SpeakingRecordingPreview({ previewUrl, uploadedKey, status, onReRecord, onPlayingChange, }) {
+    const audioRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const canReRecord = !uploadedKey && status !== 'uploading' && status !== 'uploaded';
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const updateDuration = () => {
+            if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration)) {
+                setDuration(audio.duration);
+            }
+        };
+        const handleTimeUpdate = () => {
+            setCurrentTime(audio.currentTime);
+            updateDuration();
+        };
+        const handleEnded = () => {
+            setIsPlaying(false);
+            setCurrentTime(0);
+            onPlayingChange?.(false);
+        };
+        updateDuration();
+        audio.addEventListener('loadedmetadata', updateDuration);
+        audio.addEventListener('timeupdate', handleTimeUpdate);
+        audio.addEventListener('ended', handleEnded);
+        return () => {
+            audio.removeEventListener('loadedmetadata', updateDuration);
+            audio.removeEventListener('timeupdate', handleTimeUpdate);
+            audio.removeEventListener('ended', handleEnded);
+        };
+    }, [previewUrl]);
+    const handlePlayPause = () => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        if (isPlaying) {
+            audio.pause();
+            setIsPlaying(false);
+            onPlayingChange?.(false);
+        }
+        else {
+            audio.play();
+            setIsPlaying(true);
+            onPlayingChange?.(true);
+        }
+    };
+    const handleProgressChange = (e) => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const newTime = parseFloat(e.target.value);
+        audio.currentTime = newTime;
+        setCurrentTime(newTime);
+    };
+    // Progress percentage for custom slider fill
+    const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+    return (_jsxs("div", { className: "mx-auto flex w-fit min-w-[320px] max-w-full items-center gap-3 rounded-full bg-white/70 backdrop-blur-md px-4 py-2.5 shadow-[0_8px_30px_rgb(0,0,0,0.12)] border border-white/60 ring-2 ring-white/40", children: [_jsx("audio", { ref: audioRef, src: previewUrl, preload: "metadata" }), _jsx("button", { type: "button", onClick: handlePlayPause, className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-blue-500 text-white shadow-md transition-all hover:bg-blue-600 hover:scale-105 active:scale-95", "aria-label": isPlaying ? 'Tạm dừng' : 'Nghe lại', children: isPlaying ? (_jsx(Pause, { className: "h-4 w-4 fill-current" })) : (_jsx(Play, { className: "ml-0.5 h-4 w-4 fill-current" })) }), _jsx("div", { className: "flex-1 min-w-[100px] relative flex items-center", children: _jsx("input", { type: "range", min: "0", max: duration || 0, step: "0.1", value: currentTime, onChange: handleProgressChange, className: cn('w-full h-1.5 cursor-pointer appearance-none rounded-full bg-stone-200', '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:w-3.5', '[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-md', '[&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-blue-500', '[&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-125'), style: {
+                        background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${progress}%, #e5e7eb ${progress}%, #e5e7eb 100%)`,
+                    } }) }), _jsxs("span", { className: "min-w-[72px] text-right text-[11px] tabular-nums text-stone-600 font-bold shrink-0 tracking-wide", children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsx("div", { className: "w-px h-6 bg-stone-200 shrink-0 mx-1" }), _jsxs("div", { className: "shrink-0 flex items-center justify-center min-w-[70px]", children: [status === 'uploading' && (_jsxs("div", { className: "flex items-center gap-1.5 rounded-full bg-amber-100 px-2.5 py-1 text-[11px] font-bold text-amber-700", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), _jsx("span", { className: "hidden sm:inline", children: "\u0110ang l\u01B0u" })] })), status === 'uploaded' && (_jsxs("div", { className: "flex items-center gap-1.5 rounded-full bg-green-100 px-2.5 py-1 text-[11px] font-bold text-green-700", children: [_jsx(CheckCircle, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "hidden sm:inline", children: "\u0110\u00E3 l\u01B0u" })] })), status === 'error' && (_jsxs("div", { className: "flex items-center gap-1.5 rounded-full bg-red-100 px-2.5 py-1 text-[11px] font-bold text-red-700", children: [_jsx(AlertCircle, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "hidden sm:inline", children: "L\u1ED7i" })] })), status === 'recorded' && (_jsx("div", { className: "flex items-center gap-1 text-[11px] text-stone-400 font-medium", children: _jsx(Loader2, { className: "h-3 w-3 animate-spin" }) }))] }), canReRecord && (_jsxs("button", { type: "button", onClick: onReRecord, className: "flex items-center gap-1.5 rounded-full bg-stone-100 px-3 py-1.5 text-[11px] font-bold text-stone-700 transition-all hover:bg-stone-200 hover:text-stone-900 active:bg-stone-300 disabled:cursor-not-allowed disabled:opacity-50 shrink-0 ml-1", children: [_jsx(RotateCcw, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "hidden sm:inline", children: "Ghi l\u1EA1i" })] }))] }));
+}

package/dist/components/exams/take/components/speaking/SpeakingReportErrorButton.js

@@ -1 +1,8 @@
-import{jsx as o}from"react/jsx-runtime";import{toast as e}from"../../../../../shared/lib/toast";export function SpeakingReportErrorButton(){return o("button",{type:"button",onClick:()=>{e.info("Tính năng báo cáo lỗi sẽ sớm có")},className:"flex flex-col items-center justify-center gap-0.5 rounded-lg border-2 border-yellow-600 bg-gradient-to-b from-yellow-400 to-yellow-600 px-2 py-3 shadow-md transition-all hover:from-yellow-500 hover:to-yellow-700 active:scale-95","aria-label":"Báo cáo lỗi",title:"Báo cáo lỗi",children:"BÁO CÁO LỖI".split("").map((e,t)=>o("span",{className:"text-[9px] font-extrabold leading-tight text-yellow-900",children:" "===e?" ":e},t))})}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toast } from '../../../../../shared/lib/toast';
+export function SpeakingReportErrorButton() {
+    const handleClick = () => {
+        toast.info('Tính năng báo cáo lỗi sẽ sớm có');
+    };
+    return (_jsx("button", { type: "button", onClick: handleClick, className: "flex flex-col items-center justify-center gap-0.5 rounded-lg border-2 border-yellow-600 bg-gradient-to-b from-yellow-400 to-yellow-600 px-2 py-3 shadow-md transition-all hover:from-yellow-500 hover:to-yellow-700 active:scale-95", "aria-label": "B\u00E1o c\u00E1o l\u1ED7i", title: "B\u00E1o c\u00E1o l\u1ED7i", children: 'BÁO CÁO LỖI'.split('').map((char, index) => (_jsx("span", { className: "text-[9px] font-extrabold leading-tight text-yellow-900", children: char === ' ' ? '\u00A0' : char }, index))) }));
+}

package/dist/components/exams/take/components/speaking/SpeakingSpontaneousQA.module.css

@@ -0,0 +1,344 @@
+.root {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  background: linear-gradient(180deg, #e6f3ff 0%, #ffffff 100%);
+}
+
+.contentRegion {
+  display: flex;
+  width: 100%;
+  min-height: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 0.125rem 0;
+}
+
+.contentCard {
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: 950px;
+  min-height: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  overflow-y: auto;
+  border: 1px solid #eff6ff;
+  border-radius: 1rem;
+  background: rgba(255, 255, 255, 0.68);
+  padding: 0.75rem;
+  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
+  backdrop-filter: blur(12px);
+  scrollbar-color: #93c5fd transparent;
+  scrollbar-width: thin;
+}
+
+.contentCard::-webkit-scrollbar {
+  width: 6px;
+}
+
+.contentCard::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background: #93c5fd;
+}
+
+.promptText {
+  max-width: 760px;
+  margin: 0;
+  color: #2c38b6;
+  font-family: 'SVN-Volte Rounded', 'Quicksand', sans-serif;
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+  text-align: center;
+}
+
+.audioPlayer {
+  display: flex;
+  width: min(100%, 620px);
+  align-items: center;
+  gap: 0.5rem;
+  border: 3px solid #ffffff;
+  border-radius: 1rem;
+  background: linear-gradient(135deg, #b4f0ff 0%, #7eeaff 50%, #5fe0f5 100%);
+  padding: 0.45rem 0.6rem;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+}
+
+.audioPlayerDisabled {
+  opacity: 0.55;
+  filter: grayscale(0.35);
+}
+
+.audioPlayButton {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 0.625rem;
+  background: linear-gradient(135deg, #1565c0, #1e88e5);
+  cursor: pointer;
+  box-shadow: 0 3px 8px rgba(21, 101, 192, 0.4);
+  transition: transform 0.15s ease;
+}
+
+.audioPlayButton:hover:not(:disabled) {
+  transform: scale(1.05);
+}
+
+.audioPlayButton:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.audioPlayButton:disabled {
+  cursor: not-allowed;
+}
+
+.audioPauseButton {
+  background: linear-gradient(135deg, #ff5b7f, #ff3d6e);
+  box-shadow: 0 3px 8px rgba(255, 61, 110, 0.4);
+}
+
+.audioPlayButton svg {
+  width: 15px;
+  height: 15px;
+  fill: #ffffff;
+}
+
+.audioTime {
+  min-width: 72px;
+  flex-shrink: 0;
+  color: #1a3d6d;
+  font-family: 'Quicksand', sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.audioProgress {
+  position: relative;
+  height: 7px;
+  min-width: 0;
+  flex: 1;
+  overflow: visible;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.65);
+}
+
+.audioProgressFill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #1565c0, #42a5f5);
+}
+
+.audioProgress input {
+  position: absolute;
+  inset: -6px 0;
+  z-index: 2;
+  width: 100%;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.audioProgress input:disabled {
+  cursor: not-allowed;
+}
+
+.audioProgressThumb {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  transform: translateY(-50%);
+  border: 2px solid #ffffff;
+  border-radius: 9999px;
+  background: #1565c0;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+}
+
+.recordedBadge {
+  position: absolute;
+  top: 0;
+  right: 0.75rem;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  transform: translateY(-50%);
+  border: 2px solid #ffffff;
+  border-radius: 9999px;
+  background: #22c55e;
+  padding: 0.125rem 0.5rem;
+  color: #ffffff;
+  font-size: 10px;
+  font-weight: 700;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+}
+
+.recordedDot {
+  width: 0.375rem;
+  height: 0.375rem;
+  animation: spontaneous-pulse 1.5s ease-in-out infinite;
+  border-radius: 9999px;
+  background: #ffffff;
+}
+
+.lockedMic {
+  cursor: not-allowed;
+  opacity: 0.75;
+}
+
+.teacherVideo {
+  position: fixed;
+  bottom: 0.75rem;
+  left: 0.75rem;
+  z-index: 40;
+  width: clamp(90px, 9vw, 150px);
+  pointer-events: none;
+}
+
+.teacherVideoMedia {
+  display: block;
+  width: 100%;
+  height: auto;
+  transition: opacity 0.7s ease;
+  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2));
+}
+
+@media (min-width: 640px) {
+  .contentRegion {
+    padding: 0.25rem 0;
+  }
+
+  .contentCard {
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  .promptText {
+    font-size: 20px;
+  }
+
+  .audioPlayer {
+    gap: 0.75rem;
+    padding: 0.55rem 0.75rem;
+  }
+
+  .audioPlayButton {
+    width: 36px;
+    height: 36px;
+  }
+
+  .audioTime {
+    min-width: 80px;
+    font-size: 13px;
+  }
+
+  .recordedBadge {
+    right: 1rem;
+    font-size: 11px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .contentRegion {
+    padding: 0.5rem 0;
+  }
+
+  .contentCard {
+    gap: 1.25rem;
+    padding: 1.25rem;
+  }
+
+  .promptText {
+    font-size: 24px;
+  }
+
+  .audioPlayer {
+    border-width: 4px;
+    padding: 0.7rem 0.9rem;
+  }
+
+  .audioPlayButton {
+    width: 40px;
+    height: 40px;
+  }
+
+  .audioTime {
+    min-width: 86px;
+    font-size: 15px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .promptText {
+    font-size: 27px;
+  }
+}
+
+@media (max-height: 700px) {
+  .contentRegion {
+    padding: 0.1rem 0;
+  }
+
+  .contentCard {
+    gap: 0.6rem;
+    padding: 0.6rem 0.75rem;
+  }
+
+  .promptText {
+    font-size: 17px;
+    line-height: 1.3;
+  }
+
+  .audioPlayer {
+    padding-block: 0.4rem;
+  }
+
+  .teacherVideo {
+    width: clamp(80px, 8vw, 120px);
+  }
+}
+
+@media (max-height: 600px) {
+  .contentCard {
+    gap: 0.4rem;
+    padding: 0.45rem 0.6rem;
+  }
+
+  .promptText {
+    font-size: 15px;
+  }
+
+  .audioPlayButton {
+    width: 30px;
+    height: 30px;
+  }
+
+  .audioTime {
+    min-width: 68px;
+    font-size: 11px;
+  }
+
+  .teacherVideo {
+    width: clamp(70px, 7vw, 100px);
+  }
+}
+
+@keyframes spontaneous-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+

package/dist/components/exams/take/components/speaking/SpeakingVideoIntro.js

@@ -1 +1,32 @@
-const e={READ_DISPLAYED_CONTENT:"/speaking/video/read_displayed_content.webm",SPEAKING_DESCRIBE_IMAGE:"/speaking/video/speaking_describe_image.webm",SPONTANEOUS_QA:"/speaking/video/spontaneous_qa.webm"};export function getTeacherVideoUrl(n){return e[n]}const n=new Set(["READ_DISPLAYED_CONTENT","SPEAKING_DESCRIBE_IMAGE","SPONTANEOUS_QA"]);export function shouldWaitForTeacherVideo(e){return n.has(e)}
+/**
+ * speakingVideoMap — Maps speaking question types to their AI teacher intro video URLs.
+ *
+ * These videos play muted in the floating AI teacher widget within the speaking exam layout,
+ * corresponding to the current question type being answered.
+ */
+// ============================================
+// Video mapping: question type → video file
+// ============================================
+const QUESTION_TYPE_VIDEO_MAP = {
+    READ_DISPLAYED_CONTENT: '/speaking/video/read_displayed_content.webm',
+    SPEAKING_DESCRIBE_IMAGE: '/speaking/video/speaking_describe_image.webm',
+    SPONTANEOUS_QA: '/speaking/video/spontaneous_qa.webm',
+    SPONTANEOUS_QA_GROUP: '/speaking/video/spontaneous_qa.webm',
+};
+/**
+ * Resolve the AI teacher video URL for the given question type.
+ * Returns the type-specific video or undefined if no video exists.
+ */
+export function getTeacherVideoUrl(questionType) {
+    return QUESTION_TYPE_VIDEO_MAP[questionType];
+}
+/** Question types where the student must wait for the teacher video to finish before answering */
+const WAIT_FOR_VIDEO_TYPES = new Set([
+    'READ_DISPLAYED_CONTENT',
+    'SPEAKING_DESCRIBE_IMAGE',
+    'SPONTANEOUS_QA',
+    'SPONTANEOUS_QA_GROUP',
+]);
+export function shouldWaitForTeacherVideo(questionType) {
+    return WAIT_FOR_VIDEO_TYPES.has(questionType);
+}

package/dist/components/exams/take/components/speaking/index.js

@@ -1 +1 @@
-export{SpeakingRecordingPreview}from"./SpeakingRecordingPreview";
+export { SpeakingRecordingPreview } from './SpeakingRecordingPreview';

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

@@ -1 +1,63 @@
-"use client";import{jsxs as e,jsx as n}from"react/jsx-runtime";import{ResolvedImage as o}from"../../../../../../components/common/ResolvedImage";import{cn as r}from"../../../../../../shared/lib/utils";import{useSpeakingRendererSetup as t}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as a}from"../../../../../../components/themes";import s from"../SpeakingReadDisplayedContent.module.css";function i({total:o,currentIndex:r,answeredIds:t,questionIds:a}){return e("div",{className:s.taskIndicator,style:{color:"#1e3a8a",textShadow:"none",fontWeight:800},children:[e("span",{children:["Question ",r+1,"/ ",o]}),n("div",{className:"flex gap-2",children:Array.from({length:o},(e,o)=>{const i=o===r,l=t.has(a[o]);return n("div",{className:`${s.taskDot} ${i?s.taskDotActive:""} ${l&&!i?s.taskDotCompleted:""}`,style:i||l?void 0:{background:"#bfdbfe"}},o)})})]})}function l({option:e,isSelected:t,isDisabled:a,onClick:s}){return n("button",{type:"button",onClick:s,disabled:a&&!t,className:r("group relative aspect-square w-[calc(33.333%-16px)] overflow-hidden rounded-xl bg-white shadow-sm cursor-pointer outline-none focus:outline-none transition-all duration-200",t?"border-[5px] border-red-400 shadow-[0_0_8px_rgba(239,68,68,0.5),0_0_16px_rgba(239,68,68,0.3)]":"border-2 border-gray-300 hover:border-gray-400 hover:shadow-md hover:scale-105",a&&!t&&"cursor-not-allowed"),children:n(o,{src:e.imageUrl,alt:e.label||"Answer option",className:"h-full w-full object-contain p-2 pointer-events-none",draggable:!1})})}export function SpeakingChooseAnswerGroupRenderer(e){const o=t({...e,hasMic:!1}),r=a(e.speakingTheme),s=o.currentQuestion?.content,d=o.currentQuestion?.questionGroup?.payload,c=s?.audioUrl??"",u=d?.options??s?.options??[],p=o.currentQuestion?e.answers[o.currentQuestion.id]:void 0,h=p?.answer??"";if(!o.currentQuestion)return null;const m=new Set(e.part.questions.map(e=>e.id).filter(n=>!!e.answers[n])),v=e.part.questions.map(e=>e.id),f=n(i,{total:e.part.questions.length,currentIndex:o.nav.currentIndex,answeredIds:m,questionIds:v});return n(r,{onExit:e.onExit,partName:e.part.name||`Part ${e.part.partNo}`,instruction:e.part.instructions||"LISTEN AND CHOOSE THE CORRECT ANSWER.",audioUrl:c,questionNumber:o.nav.questionNumberInPart,onPrev:o.handlePrev,onNext:o.handleNext,showPrev:o.nav.showPrev,showNext:o.nav.showNext,canGoPrev:o.nav.canGoPrev,canGoNext:o.nav.canGoNext,onAudioPlayingChange:o.onAudioPlayingChange,recorder:null,headerRight:f,teacherVideoUrl:e.teacherVideoUrl,onTeacherVideoEnded:e.onTeacherIntroPlayed,skipTeacherVideo:e.skipTeacherVideo,contentClassName:"h-full !p-0",children:n("div",{className:"w-full h-full overflow-y-auto pr-2",style:{scrollbarWidth:"thin",scrollbarColor:"#fff rgba(0,0,0,0.2)"},children:u.length>0?n("div",{className:"mx-auto flex max-w-[830px] flex-wrap justify-center gap-6 pb-6 pt-17",children:u.map(r=>n(l,{option:r,isSelected:h===r.id,isDisabled:e.isReviewMode||!1,onClick:()=>{return n=r.id,void(o.currentQuestion&&!e.isReviewMode&&e.onAnswerChange(o.currentQuestion.id,{answer:n}));var n}},r.id))}):n("div",{className:"flex h-48 items-center justify-center text-sm text-stone-400",children:"No options available"})})})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SpeakingChooseAnswerGroupRenderer
+ *
+ * Renderer for LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP.
+ *
+ * Uses the Flyer wooden-themed exam layout.
+ * The student listens to audio and clicks one of the image cards.
+ * Answer shape: { answer: string }
+ */
+import { ResolvedImage } from '../../../../../../components/common/ResolvedImage';
+import { cn } from '../../../../../../shared/lib/utils';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+import styles from '../SpeakingReadDisplayedContent.module.css';
+// ============================================
+// Task Progress Dots
+// ============================================
+function TaskProgressDots({ total, currentIndex, answeredIds, questionIds }) {
+    return (_jsxs("div", { className: styles.taskIndicator, style: { color: '#1e3a8a', textShadow: 'none', fontWeight: 800 }, children: [_jsxs("span", { children: ["Question ", currentIndex + 1, "/ ", total] }), _jsx("div", { className: "flex gap-2", children: Array.from({ length: total }, (_, i) => {
+                    const isActive = i === currentIndex;
+                    const isCompleted = answeredIds.has(questionIds[i]);
+                    return (_jsx("div", { className: `${styles.taskDot} ${isActive ? styles.taskDotActive : ''} ${isCompleted && !isActive ? styles.taskDotCompleted : ''}`, style: !isActive && !isCompleted ? { background: '#bfdbfe' } : undefined }, i));
+                }) })] }));
+}
+function AnswerOptionCard({ option, isSelected, isDisabled, onClick }) {
+    return (_jsx("button", { type: "button", onClick: onClick, disabled: isDisabled && !isSelected, className: cn('group relative aspect-square w-[calc(33.333%-16px)] overflow-hidden rounded-xl bg-white shadow-sm cursor-pointer outline-none focus:outline-none transition-all duration-200', isSelected
+            ? 'border-[5px] border-red-400 shadow-[0_0_8px_rgba(239,68,68,0.5),0_0_16px_rgba(239,68,68,0.3)]'
+            : 'border-2 border-gray-300 hover:border-gray-400 hover:shadow-md hover:scale-105', isDisabled && !isSelected && 'cursor-not-allowed'), children: _jsx(ResolvedImage, { src: option.imageUrl, alt: option.label || 'Answer option', className: "h-full w-full object-contain p-2 pointer-events-none", draggable: false }) }));
+}
+// ============================================
+// Main component
+// ============================================
+export function SpeakingChooseAnswerGroupRenderer(props) {
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        hasMic: false,
+    });
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const content = setup.currentQuestion?.content;
+    const groupPayload = setup.currentQuestion?.questionGroup?.payload;
+    const audioUrl = content?.audioUrl ?? '';
+    const options = groupPayload?.options ?? content?.options ?? [];
+    const currentAnswer = setup.currentQuestion
+        ? props.answers[setup.currentQuestion.id]
+        : undefined;
+    const selectedObjectId = currentAnswer?.answer ?? '';
+    const handleSelect = (optionId) => {
+        if (!setup.currentQuestion || props.isReviewMode)
+            return;
+        props.onAnswerChange(setup.currentQuestion.id, { answer: optionId });
+    };
+    if (!setup.currentQuestion)
+        return null;
+    const answeredIds = new Set(props.part.questions.map((q) => q.id).filter((id) => !!props.answers[id]));
+    const questionIds = props.part.questions.map((q) => q.id);
+    const headerRight = (_jsx(TaskProgressDots, { total: props.part.questions.length, currentIndex: setup.nav.currentIndex, answeredIds: answeredIds, questionIds: questionIds }));
+    return (_jsx(Layout, { onExit: props.onExit, partName: props.part.name || `Part ${props.part.partNo}`, instruction: props.part.instructions || "LISTEN AND CHOOSE THE CORRECT ANSWER.", audioUrl: audioUrl, questionNumber: setup.nav.questionNumberInPart, onPrev: setup.handlePrev, onNext: setup.handleNext, showPrev: setup.nav.showPrev, showNext: setup.nav.showNext, canGoPrev: setup.nav.canGoPrev, canGoNext: setup.nav.canGoNext, onAudioPlayingChange: setup.onAudioPlayingChange, recorder: null, headerRight: headerRight, teacherVideoUrl: props.teacherVideoUrl, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, contentClassName: "h-full !p-0", children: _jsx("div", { className: "w-full h-full overflow-y-auto pr-2", style: {
+                scrollbarWidth: 'thin',
+                scrollbarColor: '#fff rgba(0,0,0,0.2)'
+            }, children: options.length > 0 ? (_jsx("div", { className: "mx-auto flex max-w-[830px] flex-wrap justify-center gap-6 pb-6 pt-17", children: options.map((option) => (_jsx(AnswerOptionCard, { option: option, isSelected: selectedObjectId === option.id, isDisabled: props.isReviewMode || false, onClick: () => handleSelect(option.id) }, option.id))) })) : (_jsx("div", { className: "flex h-48 items-center justify-center text-sm text-stone-400", children: "No options available" })) }) }));
+}

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

@@ -1 +1,95 @@
-"use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import{usePresignedFileUrl as n}from"../../../../../../shared/lib/hooks";import{useSpeakingRendererSetup as r}from"../../../hooks/useSpeakingRendererSetup";import{getSpeakingLayout as o}from"../../../../../../components/themes";import i from"../FindObjectInPicture.module.css";import a from"../SpeakingReadDisplayedContent.module.css";function s({total:n,currentIndex:r,answeredIds:o,questionIds:i}){return e("div",{className:a.taskIndicator,style:{color:"#1e3a8a",textShadow:"none",fontWeight:800},children:[e("span",{children:["Question ",r+1,"/ ",n]}),t("div",{className:"flex gap-2",children:Array.from({length:n},(e,n)=>{const s=n===r,c=o.has(i[n]);return t("div",{className:`${a.taskDot} ${s?a.taskDotActive:""} ${c&&!s?a.taskDotCompleted:""}`,style:s||c?void 0:{background:"#bfdbfe"}},n)})})]})}function c({node:e,isSelected:r,isDisabled:o,onClick:a}){const{previewUrl:s}=n(e.imageUrl||"");return t("button",{type:"button",onClick:a,disabled:o,className:`${i.objectItem} ${r?i.objectItemSelected:""}`,style:{left:`${e.x}%`,top:`${e.y}%`,width:`${e.width}%`,height:`${e.height}%`},children:s?t("img",{src:s,alt:e.label,className:i.objectItemImageBorder,style:{height:"100%",width:"100%"},draggable:!1}):t("div",{style:{display:"flex",height:"100%",width:"100%",alignItems:"center",justifyContent:"center",background:"rgba(255,255,255,0.5)",fontSize:"12px",color:"#999"},children:e.label})})}export function SpeakingChooseObjectsRenderer(a){const d=r({...a,hasMic:!1}),l=o(a.speakingTheme),u=d.currentQuestion?.content,h=d.currentQuestion;let m=h?.questionGroup?.payload||h?.question_group?.payload;if("string"==typeof m)try{m=JSON.parse(m)}catch{m={}}const p=u?.audioUrl??"",g=m?.backgroundImageUrl??"",b=m?.objectNodes??[],v=d.currentQuestion?a.answers[d.currentQuestion.id]:void 0,f=v?.objectId??"",{previewUrl:x}=n(g);if(!d.currentQuestion)return null;const y=new Set(a.part.questions.map(e=>e.id).filter(e=>!!a.answers[e])),N=a.part.questions.map(e=>e.id),k=t(s,{total:a.part.questions.length,currentIndex:d.nav.currentIndex,answeredIds:y,questionIds:N});return t(l,{onExit:a.onExit,partName:a.part.name||`Part ${a.part.partNo}`,instruction:a.part.instructions||"Choose the correct objects in the Scene picture:",audioUrl:p,questionNumber:d.nav.questionNumberInPart,onPrev:d.handlePrev,onNext:d.handleNext,showPrev:d.nav.showPrev,showNext:d.nav.showNext,canGoPrev:d.nav.canGoPrev,canGoNext:d.nav.canGoNext,onAudioPlayingChange:d.onAudioPlayingChange,recorder:null,headerRight:k,teacherVideoUrl:a.teacherVideoUrl,onTeacherVideoEnded:a.onTeacherIntroPlayed,skipTeacherVideo:a.skipTeacherVideo,contentClassName:"!p-0",children:t("div",{className:i.findObjectContainer,children:e("div",{className:i.objectBackground,children:[t("div",{className:i.imageBackground,children:x?t("img",{alt:"Scene",src:x,draggable:!1}):t("div",{style:{display:"flex",height:"100%",width:"100%",alignItems:"center",justifyContent:"center",color:"#999"},children:"Loading..."})}),b.map(e=>t(c,{node:e,isSelected:f===e.id,isDisabled:a.isReviewMode||!1,onClick:()=>{return t=e.id,void(d.currentQuestion&&!a.isReviewMode&&a.onAnswerChange(d.currentQuestion.id,{objectId:t}));var t}},e.id))]})})})}
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * SpeakingChooseObjectsRenderer
+ *
+ * Renderer for LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE.
+ *
+ *   - questionGroup.payload has backgroundImageUrl + objectNodes[]
+ *   - content has audioUrl per question
+ *   - Student listens to audio and clicks one of the object thumbnails
+ *   - Answer: { objectId: string }
+ *
+ * Uses the Flyer wooden-themed exam layout (matching the static sample design).
+ */
+import { usePresignedFileUrl } from '../../../../../../shared/lib/hooks';
+import { useSpeakingRendererSetup } from '../../../hooks/useSpeakingRendererSetup';
+import { getSpeakingLayout } from '../../../../../../components/themes';
+import findStyles from '../FindObjectInPicture.module.css';
+import styles from '../SpeakingReadDisplayedContent.module.css';
+function TaskProgressDots({ total, currentIndex, answeredIds, questionIds }) {
+    return (_jsxs("div", { className: styles.taskIndicator, style: { color: '#1e3a8a', textShadow: 'none', fontWeight: 800 }, children: [_jsxs("span", { children: ["Question ", currentIndex + 1, "/ ", total] }), _jsx("div", { className: "flex gap-2", children: Array.from({ length: total }, (_, i) => {
+                    const isActive = i === currentIndex;
+                    const isCompleted = answeredIds.has(questionIds[i]);
+                    return (_jsx("div", { className: `${styles.taskDot} ${isActive ? styles.taskDotActive : ''} ${isCompleted && !isActive ? styles.taskDotCompleted : ''}`, style: !isActive && !isCompleted ? { background: '#bfdbfe' } : undefined }, i));
+                }) })] }));
+}
+// ============================================
+// Scene object button — overlaid on background
+// ============================================
+function SceneObjectButton({ node, isSelected, isDisabled, onClick, }) {
+    const { previewUrl } = usePresignedFileUrl(node.imageUrl || '');
+    return (_jsx("button", { type: "button", onClick: onClick, disabled: isDisabled, className: `${findStyles.objectItem} ${isSelected ? findStyles.objectItemSelected : ''}`, style: {
+            left: `${node.x}%`,
+            top: `${node.y}%`,
+            width: `${node.width}%`,
+            height: `${node.height}%`,
+        }, children: previewUrl ? (_jsx("img", { src: previewUrl, alt: node.label, className: findStyles.objectItemImageBorder, style: { height: '100%', width: '100%' }, draggable: false })) : (_jsx("div", { style: {
+                display: 'flex',
+                height: '100%',
+                width: '100%',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'rgba(255,255,255,0.5)',
+                fontSize: '12px',
+                color: '#999',
+            }, children: node.label })) }));
+}
+// ============================================
+// Main component
+// ============================================
+export function SpeakingChooseObjectsRenderer(props) {
+    const setup = useSpeakingRendererSetup({
+        ...props,
+        hasMic: false,
+    });
+    const Layout = getSpeakingLayout(props.speakingTheme);
+    const content = setup.currentQuestion?.content;
+    const rawQuestion = setup.currentQuestion;
+    let groupPayload = rawQuestion?.questionGroup?.payload || rawQuestion?.question_group?.payload;
+    if (typeof groupPayload === 'string') {
+        try {
+            groupPayload = JSON.parse(groupPayload);
+        }
+        catch {
+            groupPayload = {};
+        }
+    }
+    const audioUrl = content?.audioUrl ?? '';
+    const backgroundImageUrl = groupPayload?.backgroundImageUrl ?? '';
+    const objectNodes = groupPayload?.objectNodes ?? [];
+    const currentAnswer = setup.currentQuestion
+        ? props.answers[setup.currentQuestion.id]
+        : undefined;
+    const selectedObjectId = currentAnswer?.objectId ?? '';
+    const { previewUrl: backgroundUrl } = usePresignedFileUrl(backgroundImageUrl);
+    const handleSelect = (objectId) => {
+        if (!setup.currentQuestion || props.isReviewMode)
+            return;
+        props.onAnswerChange(setup.currentQuestion.id, { objectId });
+    };
+    if (!setup.currentQuestion)
+        return null;
+    // Build answered IDs set 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 headerRight = (_jsx(TaskProgressDots, { total: props.part.questions.length, currentIndex: setup.nav.currentIndex, answeredIds: answeredIds, questionIds: questionIds }));
+    return (_jsx(Layout, { onExit: props.onExit, partName: props.part.name || `Part ${props.part.partNo}`, instruction: props.part.instructions || 'Choose the correct objects in the Scene picture:', audioUrl: audioUrl, questionNumber: setup.nav.questionNumberInPart, onPrev: setup.handlePrev, onNext: setup.handleNext, showPrev: setup.nav.showPrev, showNext: setup.nav.showNext, canGoPrev: setup.nav.canGoPrev, canGoNext: setup.nav.canGoNext, onAudioPlayingChange: setup.onAudioPlayingChange, recorder: null, headerRight: headerRight, teacherVideoUrl: props.teacherVideoUrl, onTeacherVideoEnded: props.onTeacherIntroPlayed, skipTeacherVideo: props.skipTeacherVideo, contentClassName: "!p-0", children: _jsx("div", { className: findStyles.findObjectContainer, children: _jsxs("div", { className: findStyles.objectBackground, children: [_jsx("div", { className: findStyles.imageBackground, children: backgroundUrl ? (_jsx("img", { alt: "Scene", src: backgroundUrl, draggable: false })) : (_jsx("div", { style: {
+                                display: 'flex',
+                                height: '100%',
+                                width: '100%',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                color: '#999',
+                            }, children: "Loading..." })) }), objectNodes.map((node) => (_jsx(SceneObjectButton, { node: node, isSelected: selectedObjectId === node.id, isDisabled: props.isReviewMode || false, onClick: () => handleSelect(node.id) }, node.id)))] }) }) }));
+}