@tinyweb_dev/oe-exam-sdk 0.1.2 → 0.1.4

package/dist/components/results/ResultReviewPageContainer.d.ts

@@ -4,10 +4,12 @@ export interface ResultReviewPageContainerProps {
     attemptId: string;
     token?: string | null;
     api: ResultReviewSdkApi;
+    /** When true, polling is disabled and PDF readiness is signalled (headless render). */
+    isPrintMode?: boolean;
     onBack?: () => void;
     onNavigate?: (href: string) => void;
     topActionsSlot?: ReactNode;
     beforeReportSlot?: ReactNode;
     afterReportSlot?: ReactNode;
 }
-export declare function ResultReviewPageContainer({ attemptId, token, api, onBack, onNavigate, topActionsSlot, beforeReportSlot, afterReportSlot }: ResultReviewPageContainerProps): import("react").JSX.Element;
+export declare function ResultReviewPageContainer({ attemptId, token, api, isPrintMode, onBack, onNavigate, topActionsSlot, beforeReportSlot, afterReportSlot }: ResultReviewPageContainerProps): import("react").JSX.Element;

package/dist/components/results/ResultReviewPageContainer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useEffect as a,useMemo as s,useState as l}from"react";import{ChevronLeft as n,Download as r,Loader2 as i,Sparkles as c,XCircle as o}from"lucide-react";import{Button as m}from"../../components/ui/button";import{Card as d,CardContent as h,CardHeader as p,CardTitle as u}from"../../components/ui/card";import{useToast as x}from"../../shared/lib/hooks/useToast";import{transformResultAnswersForReview as f}from"./review-data";import{ReviewQuestionRenderer as b}from"./ReviewQuestionRenderer";import{unwrap as g}from"./result-review.utils";export function ResultReviewPageContainer({attemptId:c,token:b,api:y,onBack:A,onNavigate:S,topActionsSlot:R,beforeReportSlot:E,afterReportSlot:P}){const{error:j,success:$}=x(),[D,F]=l(null),[C,O]=l(null),[q,U]=l(!0),[K,L]=l(!1);a(()=>{let e=!1;return U(!0),Promise.all([y.getDetailedResult(c,b),y.getAttempt?.(c,b)]).then(([t,a])=>{e||(F(g(t)),O(a?g(a):null))}).catch(e=>j({message:"Không thể tải kết quả",description:e instanceof Error?e.message:void 0})).finally(()=>{e||U(!1)}),()=>{e=!0}},[y,c,b,j]);const M=s(()=>f(D?.answers??[],C?.exam?.template?.parts),[D?.answers,C?.exam?.template?.parts]),Q=C?.studentName??"Học sinh",T=C?.studentUsername,X=C?.branchName??"Chưa tham gia chi nhánh",H=C?.exam?.template?.title??D?.examName??"Kết quả bài thi",I=()=>{A?A():S?S("/student/results"):"undefined"!=typeof window&&window.history.back()},B=async()=>{if(D&&y.exportPdf){L(!0);try{const{blob:e,filename:t}=await y.exportPdf(c,C?.exam?.template?.type);!function(e,t){const a=URL.createObjectURL(e),s=document.createElement("a");s.href=a,s.download=t,document.body.appendChild(s),s.click(),document.body.removeChild(s),URL.revokeObjectURL(a)}(e,t),$({message:"Xuất PDF thành công"})}catch(e){j({message:"Không xuất được PDF",description:e instanceof Error?e.message:void 0})}finally{L(!1)}}};return q?e(k,{icon:e(i,{className:"h-8 w-8 animate-spin text-[#2874A6]"}),title:"Đang tải kết quả bài thi..."}):D?e("div",{className:"min-h-screen bg-[#e0e0e0] py-4 md:py-6",children:t("div",{className:"mx-auto flex w-full max-w-[1160px] flex-col gap-4 px-3 sm:px-4",children:[t("div",{className:"flex items-center justify-between gap-3 print:hidden",children:[t(m,{variant:"outline",onClick:I,children:[e(n,{className:"mr-2 h-4 w-4"}),"Quay lại"]}),t("div",{className:"flex items-center gap-2",children:[y.exportPdf&&t(m,{onClick:()=>{B()},disabled:K,className:"bg-[#00AEEF] hover:bg-[#0099D6]",children:[K?e(i,{className:"mr-2 h-4 w-4 animate-spin"}):e(r,{className:"mr-2 h-4 w-4"}),"Xuất PDF"]}),R]})]}),E,t(d,{className:"overflow-hidden rounded-[28px] border-0 shadow-xl",children:[t(p,{className:"bg-gradient-to-r from-[#0054A6] to-[#00AEEF] text-white",children:[e(u,{className:"text-2xl",children:H}),t("p",{className:"text-sm text-white/80",children:[Q,T?` • ${T}`:""," • ",X]})]}),t(h,{className:"space-y-6 p-5 md:p-8",children:[e(N,{detail:D}),e(w,{detail:D}),!1!==D.showDetailedResults&&e(v,{reviewData:M})]})]}),P]})}):e(k,{icon:e(o,{className:"h-8 w-8 text-red-400"}),title:"Không thể tải kết quả",action:e(m,{onClick:I,children:"Quay lại"})})}function N({detail:a}){return t("div",{className:"grid gap-3 md:grid-cols-4",children:[e(y,{label:"Tổng điểm",value:`${A(a.totalScore)} / ${A(a.maxScore)}`}),e(y,{label:"Câu đúng",value:`${a.correctAnswers} / ${a.totalQuestions}`}),e(y,{label:"Xếp hạng",value:a.rank?`${a.rank}/${a.totalStudents??"-"}`:"-"}),e(y,{label:"Trạng thái",value:a.isPendingGrading?"Đang chấm":"Hoàn tất"})]})}function w({detail:a}){return a.llmOverallAssessment||a.llmSkillAssessment?t("section",{className:"rounded-2xl border border-[#00AEEF]/30 bg-[#f0f8ff] p-4",children:[t("div",{className:"mb-2 flex items-center gap-2 font-bold text-[#0054A6]",children:[e(c,{className:"h-5 w-5"}),"Phân tích tổng quan"]}),a.llmOverallAssessment&&e("p",{className:"whitespace-pre-wrap text-sm text-slate-700",children:a.llmOverallAssessment}),a.llmSkillAssessment&&e("div",{className:"mt-3 grid gap-2 md:grid-cols-2",children:Object.entries(a.llmSkillAssessment).map(([a,s])=>s?t("div",{className:"rounded-xl bg-white p-3 text-sm",children:[e("strong",{children:s.label}),e("p",{className:"mt-1 text-slate-600",children:s.feedback})]},a):null)})]}):null}function v({reviewData:a}){return e("div",{className:"space-y-6",children:a.parts.map((s,l)=>t("section",{className:"rounded-2xl border border-[#00AEEF] bg-white p-5",children:[t("div",{className:"mb-4 flex items-center justify-between",children:[e("h3",{className:"text-lg font-bold text-[#0054A6]",children:s.name||`Phần ${s.partNo}`}),a.partScoresMap[l]&&t("span",{className:"rounded-full bg-[#0054A6] px-3 py-1 text-sm font-bold text-white",children:[A(a.partScoresMap[l].score)," / ",A(a.partScoresMap[l].maxScore)]})]}),s.instructions&&e("p",{className:"mb-4 font-semibold text-slate-700",children:s.instructions}),e(b,{part:s,reviewData:a})]},`${s.partId}-${l}`))})}function y({label:a,value:s}){return t("div",{className:"rounded-2xl bg-slate-50 p-4",children:[e("p",{className:"text-xs font-semibold uppercase text-slate-500",children:a}),e("p",{className:"mt-1 text-xl font-black text-[#0054A6]",children:s})]})}function k({icon:a,title:s,action:l}){return e("div",{className:"flex min-h-screen items-center justify-center bg-[#e0e0e0]",children:t("div",{className:"rounded-[28px] bg-white p-8 text-center shadow-xl",children:[e("div",{className:"mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-50",children:a}),e("p",{className:"font-semibold text-slate-700",children:s}),l&&e("div",{className:"mt-5",children:l})]})})}function A(e){return null!=e&&Number.isFinite(e)?e<10?e.toFixed(1):String(Math.round(e)):"0"}
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useCallback as a,useEffect as n,useMemo as l,useState as s}from"react";import{ChevronLeft as i,Download as r,Loader2 as c,Lock as o,Sparkles as m,XCircle as d}from"lucide-react";import{Button as u}from"../../components/ui/button";import{Card as h,CardContent as p,CardHeader as f,CardTitle as x}from"../../components/ui/card";import{useToast as b}from"../../shared/lib/hooks/useToast";import{transformResultAnswersForReview as g}from"./review-data";import{ReviewQuestionRenderer as N}from"./ReviewQuestionRenderer";import{unwrap as w}from"./result-review.utils";import{useResultReviewPolling as v}from"./hooks/useResultReviewPolling";import{isResultNotPublic as y,setPdfReady as k}from"./review-status.utils";export function ResultReviewPageContainer({attemptId:m,token:N,api:S,isPrintMode:F=!1,onBack:j,onNavigate:$,topActionsSlot:C,beforeReportSlot:D,afterReportSlot:q}){const{error:M,success:O}=b(),[K,L]=s(null),[Q,U]=s(null),[B,T]=s(!0),[X,H]=s(null),[I,G]=s(!1),z=a(async e=>{e&&T(!0);try{const[e,t]=await Promise.all([S.getDetailedResult(m,N),S.getAttempt?.(m,N)]);L(w(e)),U(t?w(t):null),H(null)}catch(e){H(e),y(e,Boolean(N))||M({message:"Không thể tải kết quả",description:e instanceof Error?e.message:void 0})}finally{e&&T(!1)}},[S,m,N,M]);n(()=>{let e=!1;return z(!0).then(()=>{}),()=>{e=!0}},[z]);const J=a(()=>{z(!1)},[z]);v({detail:K,isPrintMode:F,isLoading:B,onRefetch:J}),n(()=>{if(!F||B)return;const e=requestAnimationFrame(()=>k(!0));return()=>{cancelAnimationFrame(e),k(!1)}},[F,B]);const V=l(()=>g(K?.answers??[],Q?.exam?.template?.parts),[K?.answers,Q?.exam?.template?.parts]),W=Q?.studentName??"Học sinh",Y=Q?.studentUsername,Z=Q?.branchName??"Chưa tham gia chi nhánh",_=Q?.exam?.template?.title??K?.examName??"Kết quả bài thi",ee=()=>{j?j():$?$("/student/results"):"undefined"!=typeof window&&window.history.back()},te=async()=>{if(K&&S.exportPdf){G(!0);try{const{blob:e,filename:t}=await S.exportPdf(m,Q?.exam?.template?.type);!function(e,t){const a=URL.createObjectURL(e),n=document.createElement("a");n.href=a,n.download=t,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(a)}(e,t),O({message:"Xuất PDF thành công"})}catch(e){M({message:"Không xuất được PDF",description:e instanceof Error?e.message:void 0})}finally{G(!1)}}};return B?e(E,{icon:e(c,{className:"h-8 w-8 animate-spin text-[#2874A6]"}),title:"Đang tải kết quả bài thi..."}):y(X,Boolean(N))?e(E,{icon:e(o,{className:"h-8 w-8 text-amber-500"}),title:"Kết quả này chưa được công khai",action:e(u,{onClick:ee,children:"Quay lại"})}):K?e("div",{className:"min-h-screen bg-[#e0e0e0] py-4 md:py-6",children:t("div",{className:"mx-auto flex w-full max-w-[1160px] flex-col gap-4 px-3 sm:px-4",children:[t("div",{className:"flex items-center justify-between gap-3 print:hidden",children:[t(u,{variant:"outline",onClick:ee,children:[e(i,{className:"mr-2 h-4 w-4"}),"Quay lại"]}),t("div",{className:"flex items-center gap-2",children:[S.exportPdf&&t(u,{onClick:()=>{te()},disabled:I,className:"bg-[#00AEEF] hover:bg-[#0099D6]",children:[I?e(c,{className:"mr-2 h-4 w-4 animate-spin"}):e(r,{className:"mr-2 h-4 w-4"}),"Xuất PDF"]}),C]})]}),D,t(h,{className:"overflow-hidden rounded-[28px] border-0 shadow-xl",children:[t(f,{className:"bg-gradient-to-r from-[#0054A6] to-[#00AEEF] text-white",children:[e(x,{className:"text-2xl",children:_}),t("p",{className:"text-sm text-white/80",children:[W,Y?` • ${Y}`:""," • ",Z]})]}),t(p,{className:"space-y-6 p-5 md:p-8",children:[e(A,{detail:K}),e(R,{detail:K}),!1!==K.showDetailedResults&&e(P,{reviewData:V})]})]}),q]})}):e(E,{icon:e(d,{className:"h-8 w-8 text-red-400"}),title:"Không thể tải kết quả",action:e(u,{onClick:ee,children:"Quay lại"})})}function A({detail:a}){return t("div",{className:"grid gap-3 md:grid-cols-4",children:[e(S,{label:"Tổng điểm",value:`${F(a.totalScore)} / ${F(a.maxScore)}`}),e(S,{label:"Câu đúng",value:`${a.correctAnswers} / ${a.totalQuestions}`}),e(S,{label:"Xếp hạng",value:a.rank?`${a.rank}/${a.totalStudents??"-"}`:"-"}),e(S,{label:"Trạng thái",value:a.isPendingGrading?"Đang chấm":"Hoàn tất"})]})}function R({detail:a}){if(!a.llmOverallAssessment&&!a.llmSkillAssessment)return null;const n=Object.entries(a.llmSkillAssessment??{}).filter(e=>null!=e[1]);return t("section",{className:"rounded-2xl border border-[#00AEEF]/30 bg-[#f0f8ff] p-4",children:[t("div",{className:"mb-2 flex items-center gap-2 font-bold text-[#0054A6]",children:[e(m,{className:"h-5 w-5"}),"Phân tích tổng quan"]}),a.llmOverallAssessment&&e("p",{className:"whitespace-pre-wrap text-sm text-slate-700",children:a.llmOverallAssessment}),n.length>0&&e("div",{className:"mt-3 grid gap-2 md:grid-cols-2",children:n.map(([a,n])=>t("div",{className:"rounded-xl bg-white p-3 text-sm",children:[e("strong",{children:n.label}),e("p",{className:"mt-1 text-slate-600",children:n.feedback})]},a))})]})}function P({reviewData:a}){return e("div",{className:"space-y-6",children:a.parts.map((n,l)=>t("section",{className:"rounded-2xl border border-[#00AEEF] bg-white p-5",children:[t("div",{className:"mb-4 flex items-center justify-between",children:[e("h3",{className:"text-lg font-bold text-[#0054A6]",children:n.name||`Phần ${n.partNo}`}),a.partScoresMap[l]&&t("span",{className:"rounded-full bg-[#0054A6] px-3 py-1 text-sm font-bold text-white",children:[F(a.partScoresMap[l].score)," / ",F(a.partScoresMap[l].maxScore)]})]}),n.instructions&&e("p",{className:"mb-4 font-semibold text-slate-700",children:n.instructions}),e(N,{part:n,reviewData:a})]},`${n.partId}-${l}`))})}function S({label:a,value:n}){return t("div",{className:"rounded-2xl bg-slate-50 p-4",children:[e("p",{className:"text-xs font-semibold uppercase text-slate-500",children:a}),e("p",{className:"mt-1 text-xl font-black text-[#0054A6]",children:n})]})}function E({icon:a,title:n,action:l}){return e("div",{className:"flex min-h-screen items-center justify-center bg-[#e0e0e0]",children:t("div",{className:"rounded-[28px] bg-white p-8 text-center shadow-xl",children:[e("div",{className:"mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-slate-50",children:a}),e("p",{className:"font-semibold text-slate-700",children:n}),l&&e("div",{className:"mt-5",children:l})]})})}function F(e){return null!=e&&Number.isFinite(e)?e<10?e.toFixed(1):String(Math.round(e)):"0"}

package/dist/components/results/hooks/useResultReviewPolling.d.ts

@@ -0,0 +1,27 @@
+import type { ResultReviewDetail } from '../../../api/result-review';
+export interface UseResultReviewPollingOptions {
+    /** Latest loaded result detail (null while first load is in flight). */
+    detail: ResultReviewDetail | null;
+    /** Disable polling entirely (e.g. headless PDF print mode). */
+    isPrintMode: boolean;
+    /** Whether the initial load has finished. */
+    isLoading: boolean;
+    /** Poll interval in milliseconds. */
+    intervalMs?: number;
+    /** Called on each tick to refetch the result; should be stable. */
+    onRefetch: () => void;
+}
+export interface UseResultReviewPollingResult {
+    /** `true` while some answers are still being auto/LLM graded. */
+    hasPendingQuestions: boolean;
+    /** `true` while the LLM overall assessment hasn't arrived yet. */
+    hasPendingLlm: boolean;
+    /** `true` while polling is active. */
+    isPolling: boolean;
+}
+/**
+ * Polls the result endpoint while any answer is still being graded or the LLM
+ * assessment hasn't been generated yet. Ports the host app's behaviour: polling
+ * is suppressed in print mode so the headless PDF renderer reaches an idle state.
+ */
+export declare function useResultReviewPolling({ detail, isPrintMode, isLoading, intervalMs, onRefetch, }: UseResultReviewPollingOptions): UseResultReviewPollingResult;

package/dist/components/results/hooks/useResultReviewPolling.js

@@ -0,0 +1 @@
+"use client";import{useEffect as e,useRef as n}from"react";const s=new Set(["PENDING","PROCESSING","QUEUED","IN_PROGRESS"]);export function useResultReviewPolling({detail:t,isPrintMode:l,isLoading:r,intervalMs:i=5e3,onRefetch:a}){const o=(u=t?.answers,!!u&&u.some(e=>null!=e.gradingStatus&&s.has(e.gradingStatus)));var u;const c=Boolean(t?.llmOverallAssessment||t?.llmSkillAssessment),g=Boolean(t)&&!c,m=!l&&!r&&(o||g),P=n(a);return P.current=a,e(()=>{if(!m)return;const e=setInterval(()=>P.current(),i);return()=>clearInterval(e)},[i,m]),{hasPendingQuestions:o,hasPendingLlm:g,isPolling:m}}

package/dist/components/results/index.d.ts

@@ -2,3 +2,6 @@ export { ResultReviewPageContainer } from './ResultReviewPageContainer';
 export type { ResultReviewPageContainerProps } from './ResultReviewPageContainer';
 export { ReviewQuestionRenderer } from './ReviewQuestionRenderer';
 export type { ReviewQuestionRendererProps } from './ReviewQuestionRenderer';
+export { useResultReviewPolling } from './hooks/useResultReviewPolling';
+export type { UseResultReviewPollingOptions, UseResultReviewPollingResult } from './hooks/useResultReviewPolling';
+export { isResultNotPublic, setPdfReady } from './review-status.utils';

package/dist/components/results/index.js

@@ -1 +1 @@
-export{ResultReviewPageContainer}from"./ResultReviewPageContainer";export{ReviewQuestionRenderer}from"./ReviewQuestionRenderer";
+export{ResultReviewPageContainer}from"./ResultReviewPageContainer";export{ReviewQuestionRenderer}from"./ReviewQuestionRenderer";export{useResultReviewPolling}from"./hooks/useResultReviewPolling";export{isResultNotPublic,setPdfReady}from"./review-status.utils";

package/dist/components/results/review-status.utils.d.ts

@@ -0,0 +1,12 @@
+/** Status & access helpers for the result review screen. */
+/**
+ * Determine whether a load error means "this result is not public". Ports the
+ * host app's logic: a 403 with an explicit `RESULT_NOT_PUBLIC`/`FORBIDDEN` code,
+ * or any 403 reached via a token link (the only anonymous-access path).
+ */
+export declare function isResultNotPublic(error: unknown, hasToken: boolean): boolean;
+/**
+ * Toggle the `data-pdf-ready` body attribute the headless PDF renderer waits on.
+ * Call with `true` once the result has finished loading in print mode.
+ */
+export declare function setPdfReady(ready: boolean): void;

package/dist/components/results/review-status.utils.js

@@ -0,0 +1 @@
+const t=new Set(["RESULT_NOT_PUBLIC","FORBIDDEN"]);export function isResultNotPublic(e,n){const o=function(t){return"object"!=typeof t||null===t?null:t}(e);if(403!==o?.response?.status)return!1;const r=o.response.data?.errorCode;return r?t.has(r):n}export function setPdfReady(t){"undefined"!=typeof document&&(t?document.body.setAttribute("data-pdf-ready","true"):document.body.removeAttribute("data-pdf-ready"))}

package/dist/components/shared/audio/SpeakingAudioPlayer.d.ts

@@ -0,0 +1,12 @@
+interface SpeakingAudioPlayerProps {
+    audioUrl: string;
+    onPlayingChange?: (isPlaying: boolean) => void;
+    /**
+     * Auto-play the audio a few seconds (3s) after it loads or changes — e.g.
+     * when navigating to the next question. Defaults to false so other usages
+     * (such as model-pronunciation playback) are not auto-triggered.
+     */
+    autoPlay?: boolean;
+}
+export declare function SpeakingAudioPlayer({ audioUrl, onPlayingChange, autoPlay }: SpeakingAudioPlayerProps): import("react").JSX.Element;
+export {};

package/dist/components/shared/audio/SpeakingAudioPlayer.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useRef as t,useState as n,useEffect as r}from"react";import{Pause as i,Play as o}from"lucide-react";import{usePresignedFileUrl as d}from"../../../shared/lib/hooks/usePresignedFileUrl";import{useDelayedAutoPlay as l}from"../../../shared/lib/hooks/useDelayedAutoPlay";import s from"./SpeakingAudioPlayer.module.css";const u=[.4,.6,.85,.55,.75,1,.65,.45,.7,.9,.6,.5,.8,.65,.95,.7,.5,.6,.8,.45];export function SpeakingAudioPlayer({audioUrl:c,onPlayingChange:m,autoPlay:p=!1}){const v=t(null),[h,y]=n(!1),[g,f]=n(0),[L,E]=n(0),{previewUrl:N}=d(c||void 0);r(()=>{const e=v.current;if(!e)return;const a=()=>{e.duration&&!isNaN(e.duration)&&isFinite(e.duration)&&E(e.duration)},t=()=>{f(e.currentTime),a()},n=()=>{y(!0),m?.(!0)},r=()=>{y(!1),m?.(!1)},i=()=>{y(!1),f(0),m?.(!1)};return a(),e.addEventListener("loadedmetadata",a),e.addEventListener("durationchange",a),e.addEventListener("canplay",a),e.addEventListener("timeupdate",t),e.addEventListener("play",n),e.addEventListener("pause",r),e.addEventListener("ended",i),()=>{e.removeEventListener("loadedmetadata",a),e.removeEventListener("durationchange",a),e.removeEventListener("canplay",a),e.removeEventListener("timeupdate",t),e.removeEventListener("play",n),e.removeEventListener("pause",r),e.removeEventListener("ended",i)}},[N]),r(()=>{y(!1),f(0),E(0)},[N]),l({audioRef:v,audioUrl:N,enabled:p});const b=L>0?g/L:0,P=!N;return a("div",{className:s.audioPill,children:[e("audio",{ref:v,...N?{src:N}:{},preload:"metadata"}),e("button",{type:"button",className:`${s.playButton} ${h?s.playButtonPlaying:""} ${P?s.playButtonDisabled:""}`,onClick:P?void 0:()=>{const e=v.current;e&&(h?e.pause():e.play().catch(e=>{console.warn("Audio play request was interrupted:",e)}))},disabled:P,"aria-label":P?"Không có âm thanh đính kèm":h?"Tạm dừng":"Nghe câu hỏi",title:P?"Không có âm thanh đính kèm":h?"Tạm dừng":"Nghe câu hỏi",children:h?e(i,{className:s.playIcon,fill:"currentColor"}):e(o,{className:s.playIcon,fill:"currentColor",style:{marginLeft:"2px"}})}),e("div",{className:s.waveform,"aria-hidden":"true",children:u.map((a,t)=>{const n=(t+.5)/u.length<=b;return e("span",{className:`${s.waveBar} ${h&&n?s.waveBarPlaying:""}`,style:{height:100*a+"%",background:n?"linear-gradient(180deg, #ffc93c, #ff9900)":"#d8e0ea",animationDelay:h&&n?t%6*.1+"s":void 0}},t)})})]})}

package/dist/components/shared/audio/SpeakingAudioPlayer.module.css

@@ -0,0 +1,115 @@
+/* ===== Speaking Audio Player — "Listen to the question" ===== */
+/* Small, simple, kid-friendly player for light backgrounds (Summer Sky theme):
+   a sky-blue play/replay button + a sunny-amber waveform progress indicator.
+   No time digits, no seek — compact and tap-friendly. */
+
+.audioPill {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 5px 14px 5px 5px;
+    background: #ffffff;
+    border: 2px solid #dcebff;
+    border-radius: 999px;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+    box-sizing: border-box;
+}
+
+/* ===== Play / Pause button ===== */
+.playButton {
+    flex-shrink: 0;
+    height: 42px;
+    width: 42px;
+    min-width: 42px;
+    border: none;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #5ba8e8, #357abd);
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    padding: 0;
+    box-shadow: 0 3px 8px rgba(53, 122, 189, 0.35);
+    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
+}
+
+.playButton:hover {
+    transform: scale(1.08);
+}
+
+.playButton:active {
+    transform: scale(0.95);
+}
+
+.playIcon {
+    width: 20px;
+    height: 20px;
+}
+
+/* Playing — coral with a gentle pulsing ring */
+.playButtonPlaying {
+    background: linear-gradient(135deg, #ff8a8a, #ff6b6b);
+    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.5);
+    animation: playPulse 1.5s infinite;
+}
+
+@keyframes playPulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.5);
+    }
+
+    70% {
+        box-shadow: 0 0 0 8px rgba(255, 107, 107, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
+    }
+}
+
+/* Disabled — no audio attached */
+.playButtonDisabled {
+    background: #cbd5e1;
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 0.7;
+    animation: none;
+}
+
+.playButtonDisabled:hover {
+    transform: none;
+}
+
+/* ===== Waveform progress indicator (display-only, fills L→R with progress) ===== */
+.waveform {
+    flex: 1;
+    min-width: 0;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+
+.waveBar {
+    flex: 1;
+    min-width: 0;
+    border-radius: 999px;
+    transform-origin: center;
+}
+
+/* Subtle liveliness on the already-played region while playing */
+.waveBarPlaying {
+    animation: waveBounce 0.9s ease-in-out infinite alternate;
+}
+
+@keyframes waveBounce {
+    0% {
+        transform: scaleY(0.7);
+    }
+
+    100% {
+        transform: scaleY(1);
+    }
+}

package/dist/components/themes/cambridge-yle/CambridgeYleTimer.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import s from"next/image";import r from"@/components/themes/summer-sky/assets/images/clock.png";export function CambridgeYleTimer({remainingSeconds:a,totalQuestions:n,answeredCount:p}){const o=a%60,x=`${Math.floor(a/60).toString().padStart(2,"0")}:${o.toString().padStart(2,"0")}`;let m="bg-[#001590]",i="shadow-[0_4px_20px_rgba(0,0,0,0.25)]";return a<=120?(m="bg-[rgba(220,38,38,0.85)]",i="shadow-[0_0_24px_rgba(220,38,38,0.5)] animate-pulse"):a<=300&&(m="bg-[rgba(180,120,0,0.85)]"),t("div",{className:`flex items-center w-[130px] sm:w-[170px] h-[40px] sm:h-[50px] rounded-[33.5px] backdrop-blur-[8px] transition-all duration-300 ease-in-out border-none ${m} ${i}`,children:[e(s,{src:r,alt:"clock",width:75,height:75,className:"w-[50px] h-[50px] sm:w-[75px] sm:h-[75px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none z-10"}),e("span",{className:"flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]",style:{fontFamily:"'SVN-Volte Rounded', 'Quicksand', sans-serif",textShadow:"0 2px 4px rgba(0, 0, 0, 0.2)"},children:x})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import s from"next/image";import r from"../../../components/themes/summer-sky/assets/images/clock.png";export function CambridgeYleTimer({remainingSeconds:a,totalQuestions:n,answeredCount:p}){const o=a%60,x=`${Math.floor(a/60).toString().padStart(2,"0")}:${o.toString().padStart(2,"0")}`;let m="bg-[#001590]",i="shadow-[0_4px_20px_rgba(0,0,0,0.25)]";return a<=120?(m="bg-[rgba(220,38,38,0.85)]",i="shadow-[0_0_24px_rgba(220,38,38,0.5)] animate-pulse"):a<=300&&(m="bg-[rgba(180,120,0,0.85)]"),t("div",{className:`flex items-center w-[130px] sm:w-[170px] h-[40px] sm:h-[50px] rounded-[33.5px] backdrop-blur-[8px] transition-all duration-300 ease-in-out border-none ${m} ${i}`,children:[e(s,{src:r,alt:"clock",width:75,height:75,className:"w-[50px] h-[50px] sm:w-[75px] sm:h-[75px] -ml-[5px] sm:-ml-[10px] -mt-[10px] sm:-mt-[15px] shrink-0 drop-shadow-[0_2px_6px_rgba(0,0,0,0.2)] pointer-events-none z-10"}),e("span",{className:"flex-1 text-center font-bold text-[18px] sm:text-[25px] leading-none tracking-[-0.03em] uppercase text-white pr-[10px] sm:pr-[16px]",style:{fontFamily:"'SVN-Volte Rounded', 'Quicksand', sans-serif",textShadow:"0 2px 4px rgba(0, 0, 0, 0.2)"},children:x})]})}

package/dist/components/themes/english-certification/EnglishCertificationAudioPlayer.d.ts

@@ -2,12 +2,20 @@ interface EnglishCertificationAudioPlayerProps {
     audioUrl: string;
     partNumber?: number;
     isLoading?: boolean;
+    /**
+     * TOEIC play-once rule: once true, playback is permanently disabled for
+     * this part (persisted so a page reload can't be used to re-listen).
+     */
+    isLocked?: boolean;
+    /** Fired the first time the student starts playback in this part. */
+    onFirstPlay?: () => void;
 }
 /**
  * Branded Ocean Edu audio bar for English Certification Listening sections.
  *
- * Handles play/pause/reset, progress and presigned-URL resolution while
- * adopting the compact Ocean Edu audio-bar look.
+ * Enforces the TOEIC "play once" rule: no seeking/scrubbing and no replay —
+ * once playback starts, `onFirstPlay` locks the part permanently (survives
+ * reload via the caller's persisted state).
  */
-export declare function EnglishCertificationAudioPlayer({ audioUrl, partNumber, isLoading, }: EnglishCertificationAudioPlayerProps): import("react").JSX.Element;
+export declare function EnglishCertificationAudioPlayer({ audioUrl, partNumber, isLoading, isLocked, onFirstPlay, }: EnglishCertificationAudioPlayerProps): import("react").JSX.Element;
 export {};

package/dist/components/themes/english-certification/EnglishCertificationAudioPlayer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useState as a,useEffect as n}from"react";import{Play as i,Pause as d,RotateCcw as l,RefreshCw as s}from"lucide-react";import{usePresignedFileUrl as o}from"../../../shared/lib/hooks/usePresignedFileUrl";import{cn as c}from"../../../shared/lib/utils";export function EnglishCertificationAudioPlayer({audioUrl:u,partNumber:p=0,isLoading:m=!1}){const b=t(null),{previewUrl:f}=o(u||void 0),[g,x]=a(!1),[h,v]=a(0),[y,N]=a(0),[w,L]=a(null),E=e=>{if(!e||isNaN(e))return"00:00";const r=Math.floor(e/60),t=Math.floor(e%60);return`${r.toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`};n(()=>{const e=b.current;if(!e)return;const r=()=>v(e.currentTime),t=()=>{N(e.duration),L(null)},a=()=>x(!1),n=()=>{L("Failed to load audio file"),x(!1)};return e.addEventListener("timeupdate",r),e.addEventListener("loadedmetadata",t),e.addEventListener("ended",a),e.addEventListener("error",n),()=>{e.removeEventListener("timeupdate",r),e.removeEventListener("loadedmetadata",t),e.removeEventListener("ended",a),e.removeEventListener("error",n)}},[]),n(()=>{b.current&&f&&(b.current.src=f,v(0),x(!1),L(null))},[f]);const _=y>0?h/y*100:0,k=w?"Audio unavailable":m?"Loading...":g?"Playing...":h>0?"Paused":"Ready to play";return r("div",{className:"grid w-full grid-cols-[64px_1fr] items-center gap-4 rounded-[10px] border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] sm:gap-[18px] sm:px-5",children:[e("audio",{ref:b}),e("button",{type:"button",onClick:()=>{b.current&&(g?(b.current.pause(),x(!1)):(b.current.play().catch(e=>{L(`Failed to play audio: ${e.message}`)}),x(!0)))},disabled:m||!u||!!w,className:"grid h-14 w-14 place-items-center rounded-full text-2xl text-white shadow-[0_12px_22px_rgba(11,87,208,0.22)] transition-transform hover:scale-[1.03] disabled:cursor-not-allowed disabled:opacity-50",style:{background:"linear-gradient(180deg, #1f7cff, #0b57d0)"},"aria-label":g?"Pause audio":"Play audio",children:g?e(d,{size:24}):e(i,{size:24,className:"ml-0.5"})}),r("div",{className:"min-w-0",children:[r("div",{className:"flex items-center justify-between gap-3",children:[r("span",{className:"text-[18px] font-black text-[#0f1730]",children:["Listening Audio",p>0&&` · Part ${p}`]}),e("button",{type:"button",onClick:()=>{b.current&&(b.current.currentTime=0,b.current.pause(),x(!1),v(0))},disabled:m||!u||!!w,className:"flex h-8 w-8 items-center justify-center rounded-full border border-[#d9e4f2] text-[#0b57d0] transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50","aria-label":"Replay from start",children:e(l,{size:16})})]}),r("div",{className:"mt-1 flex items-center gap-2.5",children:[e("span",{className:c("text-sm font-bold",w?"text-red-500":"text-[#64748b]"),children:w??k}),w&&r("button",{type:"button",onClick:()=>{const e=b.current;e&&f&&(L(null),v(0),x(!1),e.src=f,e.load())},disabled:!u,className:"inline-flex items-center gap-1.5 rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-bold text-red-600 transition-colors hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50","aria-label":"Retry loading audio",children:[e(s,{size:13}),"Retry"]})]}),r("div",{className:"mt-2 grid grid-cols-[46px_1fr_46px] items-center gap-2.5 text-sm font-bold tabular-nums text-[#0f1730]",children:[e("span",{children:E(h)}),r("div",{className:"relative",children:[e("div",{className:"pointer-events-none absolute inset-y-0 left-0 rounded-full",style:{width:`${_}%`,background:"linear-gradient(90deg, #1f7cff, #0b57d0)"}}),e("input",{type:"range",min:"0",max:y||0,step:"0.1",value:h,onChange:e=>{const r=parseFloat(e.target.value);b.current&&(b.current.currentTime=r,v(r))},disabled:m||!u||!!w,className:"relative z-10 h-2 w-full cursor-pointer appearance-none rounded-full bg-[#dfe9f6] accent-[#0b57d0] disabled:cursor-not-allowed disabled:opacity-50","aria-label":"Audio progress"})]}),e("span",{children:y>0?E(y):"00:00"})]})]})]})}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useState as a,useEffect as i}from"react";import{Play as d,Pause as l,RefreshCw as n,Lock as o}from"lucide-react";import{usePresignedFileUrl as s}from"../../../shared/lib/hooks/usePresignedFileUrl";import{cn as c}from"../../../shared/lib/utils";export function EnglishCertificationAudioPlayer({audioUrl:u,partNumber:m=0,isLoading:p=!1,isLocked:f=!1,onFirstPlay:b}){const g=t(null),{previewUrl:x}=s(u||void 0),[h,v]=a(!1),[y,w]=a(0),[N,L]=a(0),[E,_]=a(null),k=t(!1),P=p||!u||!!E||f,A=e=>{if(!e||isNaN(e))return"00:00";const r=Math.floor(e/60),t=Math.floor(e%60);return`${r.toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`};i(()=>{const e=g.current;if(!e)return;const r=()=>w(e.currentTime),t=()=>{L(e.duration),_(null)},a=()=>v(!1),i=()=>{_("Failed to load audio file"),v(!1)};return e.addEventListener("timeupdate",r),e.addEventListener("loadedmetadata",t),e.addEventListener("ended",a),e.addEventListener("error",i),()=>{e.removeEventListener("timeupdate",r),e.removeEventListener("loadedmetadata",t),e.removeEventListener("ended",a),e.removeEventListener("error",i)}},[]),i(()=>{g.current&&x&&(g.current.src=x,w(0),v(!1),_(null))},[x]);const $=N>0?y/N*100:0,j=f?"Already played":E?"Audio unavailable":p?"Loading...":h?"Playing...":y>0?"Paused":"Ready to play";return r("div",{className:"grid w-full grid-cols-[64px_1fr] items-center gap-4 rounded-[10px] border border-[#d9e4f2] bg-white/90 p-4 shadow-[0_5px_16px_rgba(13,71,161,0.08)] sm:gap-[18px] sm:px-5",children:[e("audio",{ref:g}),e("button",{type:"button",onClick:()=>{g.current&&!f&&(h?(g.current.pause(),v(!1)):(k.current||(k.current=!0,b?.()),g.current.play().catch(e=>{_(`Failed to play audio: ${e.message}`)}),v(!0)))},disabled:P,className:"grid h-14 w-14 place-items-center rounded-full text-2xl text-white shadow-[0_12px_22px_rgba(11,87,208,0.22)] transition-transform hover:scale-[1.03] disabled:cursor-not-allowed disabled:opacity-50",style:{background:"linear-gradient(180deg, #1f7cff, #0b57d0)"},"aria-label":f?"Audio locked, already played":h?"Pause audio":"Play audio",children:f?e(o,{size:22}):h?e(l,{size:24}):e(d,{size:24,className:"ml-0.5"})}),r("div",{className:"min-w-0",children:[e("div",{className:"flex items-center justify-between gap-3",children:r("span",{className:"text-[18px] font-black text-[#0f1730]",children:["Listening Audio",m>0&&` · Part ${m}`]})}),r("div",{className:"mt-1 flex items-center gap-2.5",children:[e("span",{className:c("text-sm font-bold",E?"text-red-500":"text-[#64748b]"),children:E??j}),E&&r("button",{type:"button",onClick:()=>{const e=g.current;e&&x&&(_(null),w(0),v(!1),e.src=x,e.load())},disabled:!u,className:"inline-flex items-center gap-1.5 rounded-full border border-red-200 bg-red-50 px-3 py-1 text-xs font-bold text-red-600 transition-colors hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-50","aria-label":"Retry loading audio",children:[e(n,{size:13}),"Retry"]})]}),r("div",{className:"mt-2 grid grid-cols-[46px_1fr_46px] items-center gap-2.5 text-sm font-bold tabular-nums text-[#0f1730]",children:[e("span",{children:A(y)}),e("div",{className:"relative h-2 w-full overflow-hidden rounded-full bg-[#dfe9f6]",role:"progressbar","aria-label":"Audio progress","aria-valuemin":0,"aria-valuemax":N||0,"aria-valuenow":y,children:e("div",{className:"absolute inset-y-0 left-0 rounded-full",style:{width:`${$}%`,background:"linear-gradient(90deg, #1f7cff, #0b57d0)"}})}),e("span",{children:N>0?A(N):"00:00"})]})]})]})}

package/dist/components/themes/english-certification/EnglishCertificationQuestionRenderer.d.ts

@@ -10,6 +10,10 @@ interface EnglishCertificationQuestionRendererProps {
     onAnswerChange: (questionId: string, answer: any) => void;
     onToggleFlag: (questionId: string) => void;
     isReviewMode?: boolean;
+    /** TOEIC play-once: true once this part's listening audio has been played. */
+    isAudioPlayed?: boolean;
+    /** Fired the first time the student plays this part's listening audio. */
+    onAudioFirstPlay?: () => void;
 }
 /**
  * Dispatcher for English Certification question rendering based on part config.
@@ -20,5 +24,5 @@ interface EnglishCertificationQuestionRendererProps {
  *   (full-width, structured to match TOEIC) — never delegated to the shared
  *   Movers renderer, which squeezed IELTS tables into narrow columns.
  */
-export declare function EnglishCertificationQuestionRenderer({ part, partConfig, answers, flaggedQuestions, onAnswerChange, onToggleFlag, isReviewMode, }: EnglishCertificationQuestionRendererProps): import("react").JSX.Element;
+export declare function EnglishCertificationQuestionRenderer({ part, partConfig, answers, flaggedQuestions, onAnswerChange, onToggleFlag, isReviewMode, isAudioPlayed, onAudioFirstPlay, }: EnglishCertificationQuestionRendererProps): import("react").JSX.Element;
 export {};

package/dist/components/themes/english-certification/EnglishCertificationQuestionRenderer.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{SkillEnum as i}from"../../../shared/types/common.types";import{EnglishCertificationSingleQuestionList as n}from"./EnglishCertificationSingleQuestionList";import{EnglishCertificationGroupedQuestion as o}from"./EnglishCertificationGroupedQuestion";import{EnglishCertificationAudioPlayer as s}from"./EnglishCertificationAudioPlayer";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as t}from"./english-certification-theme";import{EcWordFillStructuredForm as a}from"./EcWordFillStructuredForm";import{EcMatchByWritingAnswer as l}from"./EcMatchByWritingAnswer";import{EcAnswerTheQuestion as d}from"./EcAnswerTheQuestion";import{EcWordFillParagraph as c}from"./EcWordFillParagraph";import{EcWritingTask as g}from"./EcWritingTask";const u=new Set(["CHOOSE_THE_CORRECT_ANSWER"]);export function EnglishCertificationQuestionRenderer({part:p,partConfig:m,answers:f,flaggedQuestions:h,onAnswerChange:w,onToggleFlag:R,isReviewMode:E=!1}){if(!p.questions.length)return e("div",{className:"flex h-full items-center justify-center rounded-xl border border-red-200 bg-red-50 p-8 text-red-600",children:"No questions found for this part"});const A=m.category===i.LISTENING,C=A?p.audioUrl??m.audioUrl??"":void 0,T=p.questionType,N=Boolean(p.isGroup)&&"DOCUMENT"===p.group?.type,_=m.isGroup&&u.has(T),v=Boolean(p.sections?.length);if(N||_||v)return e("div",{className:"h-full",children:e(o,{part:p,partConfig:m,answers:f,flaggedQuestions:h,onAnswerChange:w,onToggleFlag:R,isReviewMode:E,isListeningPart:A,partAudioUrl:C})});if(u.has(T))return e(n,{part:p,partConfig:m,answers:f,flaggedQuestions:h,onAnswerChange:w,onToggleFlag:R,isReviewMode:E,isListeningPart:A,partAudioUrl:C});return r("div",{className:"flex flex-col items-center gap-5 pb-4",children:[A&&e("div",{className:t,children:e(s,{audioUrl:C??"",partNumber:p.partNo})}),e("div",{className:`${t} w-full`,children:(()=>{switch(T){case"WORD_FILL_STRUCTURED_FORM":return e(a,{part:p,answers:f,onAnswerChange:w,isReviewMode:E});case"MATCH_BY_WRITING_ANSWER":return e(l,{part:p,answers:f,onAnswerChange:w,isReviewMode:E});case"ANSWER_THE_QUESTION":return e(d,{part:p,answers:f,onAnswerChange:w,isReviewMode:E});case"WORD_FILL_PARAGRAPH":return e(c,{part:p,answers:f,onAnswerChange:w,isReviewMode:E});case"WRITE_A_SHORT_LETTER":return e(g,{part:p,answers:f,onAnswerChange:w,isReviewMode:E});default:return r("div",{className:"rounded-xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-700",children:['Loại câu hỏi "',T,'" chưa được hỗ trợ trong giao diện này.']})}})()})]})}
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{SkillEnum as i}from"../../../shared/types/common.types";import{EnglishCertificationSingleQuestionList as n}from"./EnglishCertificationSingleQuestionList";import{EnglishCertificationGroupedQuestion as o}from"./EnglishCertificationGroupedQuestion";import{EnglishCertificationAudioPlayer as s}from"./EnglishCertificationAudioPlayer";import{ENGLISH_CERT_CONTENT_WIDTH_CLASS as t}from"./english-certification-theme";import{EcWordFillStructuredForm as a}from"./EcWordFillStructuredForm";import{EcMatchByWritingAnswer as l}from"./EcMatchByWritingAnswer";import{EcAnswerTheQuestion as d}from"./EcAnswerTheQuestion";import{EcWordFillParagraph as c}from"./EcWordFillParagraph";import{EcWritingTask as u}from"./EcWritingTask";const g=new Set(["CHOOSE_THE_CORRECT_ANSWER"]);export function EnglishCertificationQuestionRenderer({part:p,partConfig:m,answers:f,flaggedQuestions:h,onAnswerChange:w,onToggleFlag:R,isReviewMode:A=!1,isAudioPlayed:E=!1,onAudioFirstPlay:C}){if(!p.questions.length)return e("div",{className:"flex h-full items-center justify-center rounded-xl border border-red-200 bg-red-50 p-8 text-red-600",children:"No questions found for this part"});const T=m.category===i.LISTENING,N=T?p.audioUrl??m.audioUrl??"":void 0,_=p.questionType,v=Boolean(p.isGroup)&&"DOCUMENT"===p.group?.type,x=m.isGroup&&g.has(_),y=Boolean(p.sections?.length);if(v||x||y)return e("div",{className:"h-full",children:e(o,{part:p,partConfig:m,answers:f,flaggedQuestions:h,onAnswerChange:w,onToggleFlag:R,isReviewMode:A,isListeningPart:T,partAudioUrl:N})});if(g.has(_))return e(n,{part:p,partConfig:m,answers:f,flaggedQuestions:h,onAnswerChange:w,onToggleFlag:R,isReviewMode:A,isListeningPart:T,partAudioUrl:N});return r("div",{className:"flex flex-col items-center gap-5 pb-4",children:[T&&e("div",{className:t,children:e(s,{audioUrl:N??"",partNumber:p.partNo,isLocked:!A&&E,onFirstPlay:C})}),e("div",{className:`${t} w-full`,children:(()=>{switch(_){case"WORD_FILL_STRUCTURED_FORM":return e(a,{part:p,answers:f,onAnswerChange:w,isReviewMode:A});case"MATCH_BY_WRITING_ANSWER":return e(l,{part:p,answers:f,onAnswerChange:w,isReviewMode:A});case"ANSWER_THE_QUESTION":return e(d,{part:p,answers:f,onAnswerChange:w,isReviewMode:A});case"WORD_FILL_PARAGRAPH":return e(c,{part:p,answers:f,onAnswerChange:w,isReviewMode:A});case"WRITE_A_SHORT_LETTER":return e(u,{part:p,answers:f,onAnswerChange:w,isReviewMode:A});default:return r("div",{className:"rounded-xl border border-amber-200 bg-amber-50 p-6 text-sm text-amber-700",children:['Loại câu hỏi "',_,'" chưa được hỗ trợ trong giao diện này.']})}})()})]})}

package/dist/components/themes/index.d.ts

@@ -1,7 +1,18 @@
+import type { ComponentType } from 'react';
+import type { SpeakingLayoutProps, StandardExamLayoutProps, StandardQuestionCardProps } from './types';
 export * from './cambridge-yle';
 export * from './english-certification';
+export * from './spaceship/SpaceshipLayout';
+export * from './spaceship/SpaceshipAudioPlayer';
 export * from './summer-sky/SummerSkyAudioPlayer';
 export * from './summer-sky/SummerSkyLayout';
 export * from './summer-sky/SummerSkySubmitModal';
 export * from './summer-sky/SummerSkyWaitingRoom';
 export type * from './types';
+export type SpeakingThemeId = 'SPACESHIP' | 'SUMMER_SKY' | string;
+export declare function getSpeakingLayout(themeId?: SpeakingThemeId): ComponentType<SpeakingLayoutProps>;
+export interface StandardThemeEntry {
+    Layout: ComponentType<StandardExamLayoutProps>;
+    QuestionCard: ComponentType<StandardQuestionCardProps>;
+}
+export declare function getStandardExamTheme(themeId?: string): StandardThemeEntry;

package/dist/components/themes/index.js

@@ -1 +1 @@
-export*from"./cambridge-yle";export*from"./english-certification";export*from"./summer-sky/SummerSkyAudioPlayer";export*from"./summer-sky/SummerSkyLayout";export*from"./summer-sky/SummerSkySubmitModal";export*from"./summer-sky/SummerSkyWaitingRoom";
+import{SpaceshipLayout as r}from"./spaceship/SpaceshipLayout";import{SummerSkyLayout as e}from"./summer-sky/SummerSkyLayout";import{CambridgeYleExamLayout as m}from"./cambridge-yle/CambridgeYleExamLayout";import o from"./cambridge-yle/CambridgeYleQuestionCard";export*from"./cambridge-yle";export*from"./english-certification";export*from"./spaceship/SpaceshipLayout";export*from"./spaceship/SpaceshipAudioPlayer";export*from"./summer-sky/SummerSkyAudioPlayer";export*from"./summer-sky/SummerSkyLayout";export*from"./summer-sky/SummerSkySubmitModal";export*from"./summer-sky/SummerSkyWaitingRoom";const t={SPACESHIP:r,SUMMER_SKY:e},a="SUMMER_SKY";export function getSpeakingLayout(r){return t[r||a]||t[a]}const i={CAMBRIDGE_YLE:{Layout:m,QuestionCard:o}},p="CAMBRIDGE_YLE";export function getStandardExamTheme(r){return i[r||p]||i[p]}

package/dist/components/themes/spaceship/SpaceshipAudioPlayer.d.ts

@@ -0,0 +1,8 @@
+interface SpaceshipAudioPlayerProps {
+    audioUrl: string;
+    partName?: string;
+    onEnded?: () => void;
+    onPlayingChange?: (isPlaying: boolean) => void;
+}
+export declare function SpaceshipAudioPlayer({ audioUrl, partName, onEnded, onPlayingChange }: SpaceshipAudioPlayerProps): import("react").JSX.Element;
+export {};

package/dist/components/themes/spaceship/SpaceshipAudioPlayer.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as a,useState as r,useEffect as n}from"react";import s from"next/image";import{Pause as i,Play as l,VolumeX as o}from"lucide-react";import{usePresignedFileUrl as d}from"../../../shared/lib/hooks/usePresignedFileUrl";import c from"./assets/styles/SpaceshipLayout.module.css";import u from"./assets/images/big-blue-badge-sunset.png";import m from"./assets/images/teacher-play-sunset.png";import p from"./assets/images/ic-mute-sunset.png";function v(e){if(isNaN(e)||!isFinite(e))return"0:00";const t=Math.floor(e/60),a=Math.floor(e%60);return`${t}:${String(a).padStart(2,"0")}`}export function SpaceshipAudioPlayer({audioUrl:h,partName:f="Part 1 - Phase 2",onEnded:g,onPlayingChange:N}){const w=a(null),[y,b]=r(!1),[L,E]=r(0),[x,k]=r(0),[C,B]=r(100),{previewUrl:P}=d(h||void 0);n(()=>{const e=w.current;if(!e)return;const t=()=>{e.duration&&!isNaN(e.duration)&&isFinite(e.duration)&&k(e.duration)},a=()=>{E(e.currentTime),t()},r=()=>{b(!0),N?.(!0)},n=()=>{b(!1),N?.(!1)},s=()=>{b(!1),E(0),N?.(!1),g?.()};return t(),e.addEventListener("loadedmetadata",t),e.addEventListener("durationchange",t),e.addEventListener("canplay",t),e.addEventListener("timeupdate",a),e.addEventListener("play",r),e.addEventListener("pause",n),e.addEventListener("ended",s),()=>{e.removeEventListener("loadedmetadata",t),e.removeEventListener("durationchange",t),e.removeEventListener("canplay",t),e.removeEventListener("timeupdate",a),e.removeEventListener("play",r),e.removeEventListener("pause",n),e.removeEventListener("ended",s)}},[P,g]),n(()=>{b(!1),E(0),k(0)},[P]),n(()=>{const e=w.current;if(!e||!P)return;let t=!1;const a=()=>{t||e.play().catch(()=>{if(t)return;const a=()=>{t||(e.play().catch(()=>{}),document.removeEventListener("click",a),document.removeEventListener("keydown",a))};document.addEventListener("click",a,{once:!0}),document.addEventListener("keydown",a,{once:!0})})};return e.readyState>=3?a():e.addEventListener("canplay",a,{once:!0}),()=>{t=!0,e.removeEventListener("canplay",a)}},[P]);const F=x>0?L/x*100:0;return t("div",{className:c.examAudioContainer,children:[e("audio",{ref:w,...P?{src:P}:{},preload:"metadata"}),t("div",{className:c.bigBlueBadge,children:[e(s,{src:u,alt:"Audio Badge",className:c.bigBlueBadgeBg,priority:!0}),e("div",{className:c.audioBarContent,children:t("div",{className:c.audioBarInner,children:[e("span",{className:c.partLabel,children:f}),t("div",{className:c.teacherAvatarContainer,onClick:P?()=>{const e=w.current;e&&(e.paused?e.play().catch(()=>{}):e.pause())}:void 0,children:[e("img",{src:m.src,alt:"Play",className:c.teacherPlayIcon}),e("div",{className:"absolute inset-0 flex items-center justify-center",children:y?e(i,{className:"h-5 w-5 text-white drop-shadow-md",fill:"currentColor"}):e(l,{className:"h-5 w-5 text-white drop-shadow-md ml-1",fill:"currentColor"})})]}),t("div",{className:c.audioControlsWrapper,children:[t("span",{className:c.audioTime,children:[v(L)," / ",v(x)]}),t("div",{className:c.sliderTrack,children:[e("div",{className:c.sliderFill,style:{width:`${F}%`}}),e("input",{type:"range",min:"0",max:x||0,step:"0.1",value:L,onChange:e=>{const t=w.current;if(!t)return;const a=parseFloat(e.target.value);t.currentTime=a,E(a)},className:"absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed",disabled:!P})]}),t("div",{className:c.volumeContainer,children:[e("div",{className:c.volumeIcon,onClick:()=>{const e=w.current;e&&(C>0?(e.volume=0,B(0)):(e.volume=1,B(100)))},children:0===C?e(o,{className:"text-white w-full h-full"}):e(s,{src:p,alt:"volume",className:"w-full h-full"})}),e("div",{className:"flex-grow items-center flex",style:{width:"60px"},children:e("input",{type:"range",min:"0",max:"100",value:C,onChange:e=>{const t=w.current;if(!t)return;const a=parseFloat(e.target.value);t.volume=a/100,B(a)},className:"w-full h-[3px] appearance-none bg-white/50 rounded cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-2.5 [&::-webkit-slider-thumb]:h-2.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white"})})]})]})]})})]})]})}

package/dist/components/themes/spaceship/SpaceshipLayout.d.ts

@@ -0,0 +1,2 @@
+import type { SpeakingLayoutProps } from '../types';
+export declare function SpaceshipLayout({ onExit, partName, headerRight, onPrev, onNext, canGoPrev, canGoNext, audioUrl, onAudioEnded, recorder, children, contentClassName, hideAudioBar, onAudioPlayingChange, }: SpeakingLayoutProps): import("react").JSX.Element;

package/dist/components/themes/spaceship/SpaceshipLayout.js

@@ -0,0 +1 @@
+"use client";import{jsx as e,jsxs as t,Fragment as s}from"react/jsx-runtime";import a from"next/image";import r from"./assets/styles/SpaceshipLayout.module.css";import{SpaceshipAudioPlayer as i}from"./SpaceshipAudioPlayer";import n from"./assets/images/circle-btn-right-sunset.png";import l from"./assets/images/circle-btn-sunset.png";import c from"./assets/images/next-sunset.png";import o from"./assets/images/X-sunset.png";import m from"./assets/images/button_feedback_vi.png";import d from"./assets/images/blue-wrapper-sunset.png";import p from"./assets/images/timer-badge.png";import h from"./assets/images/micro.png";export function SpaceshipLayout({onExit:g,partName:u,headerRight:f,onPrev:x,onNext:v,canGoPrev:N,canGoNext:b,audioUrl:y,onAudioEnded:B,recorder:w,children:C,contentClassName:S="",hideAudioBar:k,onAudioPlayingChange:I}){return t("div",{id:"exam-main-scroll-area",className:r.pageContainer,children:[e("div",{className:r.examContainer,children:t("div",{className:r.examMainBoard,children:[e("div",{className:r.headerTitleWrapper,children:e("div",{className:r.exitButtonWrapper,children:t("div",{className:r.circleBtn,tabIndex:0,onClick:g,children:[e(a,{src:n,alt:"btn",className:r.circleBtnBg}),e("div",{className:r.circleBtnInner,children:e(a,{src:o,alt:"X",className:r.exitIcon})})]})})}),N&&e("div",{className:r.controlLeft,children:t("div",{className:r.circleBtn,onClick:x,children:[e(a,{src:n,alt:"btn",className:r.circleBtnBg}),e("div",{className:r.circleBtnInner,children:e(a,{src:c,alt:"prev",className:`${r.nextPrevIcon} ${r.rotate}`})})]})}),t("div",{className:r.examContentMainContainer,children:[!k&&e(i,{audioUrl:y,partName:u,onEnded:B,onPlayingChange:I}),t("div",{className:r.examContentSpace,children:[f&&e("div",{className:"absolute top-2 right-6 z-50",children:f}),e("div",{className:`w-full h-full flex flex-col items-center justify-center ${S}`,children:C})]}),w&&t(s,{children:[e("p",{className:"absolute left-1/2 -translate-x-1/2 text-center whitespace-nowrap text-black font-bold m-0",style:{bottom:"115px",fontSize:"16px",fontFamily:'"Open Sans", sans-serif'},children:"uploaded"===w.status?"Đã ghi nhận câu trả lời":"Ấn biểu tượng micro để trả lời"}),e("div",{className:`absolute left-1/2 -translate-x-1/2 flex flex-col items-center z-10 transition-transform ${"recording"===w.status?"scale-[1.05]":"hover:scale-[1.02] active:scale-[0.98]"} ${"uploaded"===w.status?"opacity-80 grayscale-[20%] pointer-events-none":""}`,style:{bottom:"-40px",overflow:"visible"},children:t("div",{className:"block relative",style:{overflow:"visible"},children:[e(a,{src:d,alt:"wrapper",className:"z-0 "+("recording"===w.status?"animate-pulse":""),style:{width:"158px",height:"116px"}}),"uploaded"!==w.status&&t("div",{className:"absolute left-1/2 -translate-x-1/2 z-20",style:{top:"-32px"},children:[e(a,{src:p,alt:"timer",style:{width:"104px",height:"45px"}}),e("div",{className:"absolute inset-0 flex items-center justify-center",children:t("p",{className:"text-white text-center text-[20px] font-normal m-0",style:{margin:0},children:[Math.floor(w.remainingSeconds/60),":",(w.remainingSeconds%60).toString().padStart(2,"0")]})})]}),e("div",{className:"absolute inset-0 flex justify-center items-center w-full h-full",children:e(a,{src:h,alt:"micro",className:"cursor-pointer "+("recording"===w.status?"drop-shadow-[0_0_15px_rgba(0,255,255,0.8)]":""),style:{width:"51px",height:"51px"},onClick:"recording"===w.status?w.stopRecording:"idle"===w.status||"error"===w.status?w.startRecording:void 0})})]})})]})]}),b&&e("div",{className:r.controlRight,children:t("div",{className:r.circleBtn,onClick:v,children:[e(a,{src:l,alt:"btn",className:r.circleBtnBg}),e("div",{className:r.circleBtnInner,children:e(a,{src:c,alt:"next",className:r.nextPrevIcon})})]})})]})}),e("div",{className:r.feedbackButton,children:e("a",{target:"_blank",href:"https://forms.gle/DxdZqfgSirYzf1vW8",rel:"noopener noreferrer",children:e(a,{alt:"feedback",src:m})})})]})}