@tinyweb_dev/oe-exam-sdk 0.1.3 → 0.1.5

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})})})]})}

package/dist/components/themes/spaceship/assets/styles/SpaceshipLayout.module.css

@@ -0,0 +1,347 @@
+/* ===== Font Face ===== */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVQUwaEQXjN_mQ.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@keyframes audioWaveBouncing {
+  0% {
+    transform: scaleY(0.1);
+  }
+
+  50% {
+    transform: scaleY(1);
+  }
+
+  100% {
+    transform: scaleY(0.2);
+  }
+}
+
+.audioWaveBar {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 9999px;
+  width: 3px;
+  height: 100%;
+  animation-name: audioWaveBouncing;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  transform-origin: center;
+}
+
+/* ===== Page Container ===== */
+.pageContainer {
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  inset: 0;
+  overflow: auto;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.pageContainer::before {
+  content: "";
+  position: fixed;
+  inset: -20px;
+  background: url('../images/bg_sunset.png') no-repeat center center;
+  background-size: cover;
+  filter: blur(8px);
+  z-index: -1;
+}
+
+/* ===== Exam Container ===== */
+.examContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding: 0 30px 10px;
+  margin-top: 8%;
+  transform-origin: top;
+  height: 700px;
+}
+
+/* ===== Main Board ===== */
+.examMainBoard {
+  position: relative;
+  height: 100%;
+}
+
+.examContentMainContainer {
+  background-color: white;
+  width: 1269px !important;
+  height: 100%;
+  border-radius: 33px;
+  border: 4px solid rgb(120, 30, 60);
+  box-shadow: rgb(163, 50, 80) 0px 0px 0px 7px, rgb(208, 120, 79) 0px 0px 0px 8px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: visible;
+}
+
+/* ===== Header Title (Top Left) ===== */
+.headerTitleWrapper {
+  position: absolute;
+  top: -120px;
+  left: -15%;
+  z-index: 200;
+}
+
+@media (min-width: 1536px) {
+  .headerTitleWrapper {
+    left: -20%;
+  }
+}
+
+.exitButtonWrapper {
+  position: absolute;
+  z-index: 2;
+  transform: translate(-10px, -10px) scale(1.15);
+  user-select: none;
+}
+
+.circleBtn {
+  position: relative;
+  display: inline-block;
+  width: 90px;
+  height: 90px;
+}
+
+.circleBtnBg {
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.circleBtnInner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  user-select: none;
+}
+
+.exitIcon {
+  width: 23px;
+  height: 23px;
+}
+
+.headerTitleBox {
+  border-radius: 24px;
+  position: absolute;
+  height: 64px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  border: 2px solid rgb(235, 151, 99);
+  background: linear-gradient(rgb(222, 71, 92) 0%, rgb(251, 154, 117) 100%);
+  box-shadow: rgba(0, 0, 0, 0.396) 3px 3px 0px 1px;
+}
+
+.headerTitleText {
+  color: white;
+  text-transform: uppercase;
+  padding-left: 80px;
+}
+
+.headerTitlePartName {
+  font-size: 1.125rem;
+  margin: 0;
+  line-height: 17px;
+  white-space: nowrap;
+}
+
+.headerTitleInstruction {
+  font-size: 0.875rem;
+  margin: 0;
+  line-height: 17px;
+  padding-right: 20px;
+  white-space: nowrap;
+}
+
+/* ===== Controls ===== */
+.controlLeft {
+  width: 80px !important;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  left: -130px;
+  top: 0;
+  user-select: none;
+}
+
+.controlRight {
+  width: 80px !important;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+  right: -120px;
+  top: 0;
+  user-select: none;
+}
+
+.nextPrevIcon {
+  width: auto;
+  height: 29px;
+  transform: translateX(4px);
+}
+
+.nextPrevIcon.rotate {
+  transform: rotate(180deg) translateX(4px);
+}
+
+/* ===== Audio Container (Big Blue Badge) ===== */
+.examAudioContainer {
+  position: absolute;
+  top: -50px;
+  display: flex;
+  justify-content: center;
+}
+
+.bigBlueBadge {
+  position: relative;
+  display: flex;
+}
+
+.bigBlueBadgeBg {
+  z-index: 0;
+  height: 66px;
+  width: 999px;
+}
+
+.audioBarContent {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 12px;
+}
+
+.audioBarInner {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 24px;
+  gap: 12px;
+}
+
+.partLabel {
+  font-size: 28px;
+  text-transform: uppercase;
+  white-space: nowrap;
+  line-height: 40px;
+  color: white;
+  text-shadow: rgba(0, 0, 0, 0.25) 0px 3px 0px;
+}
+
+.teacherAvatarContainer {
+  border-radius: 9999px;
+  width: 72px;
+  height: 72px;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.teacherPlayIcon {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  transform: scale(1.15);
+}
+
+.audioControlsWrapper {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  width: 100%;
+  flex-grow: 1;
+}
+
+.audioTime {
+  color: white;
+  font-size: 0.875rem;
+  font-weight: 700;
+  transform: translateY(2px);
+  white-space: nowrap;
+  padding-right: 4px;
+}
+
+.sliderTrack {
+  border-radius: 2px;
+  height: 10px;
+  background-color: #541F0C;
+  overflow: hidden;
+  flex-grow: 1;
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 0.587px 0px 0px;
+  position: relative;
+  cursor: pointer;
+}
+
+.sliderFill {
+  height: 100%;
+  border-radius: 1px;
+  background-color: #FFDC30;
+  box-shadow: rgb(247, 171, 22) 0px -4px 0px 0px inset;
+}
+
+.volumeContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100px;
+  margin-right: 16px;
+}
+
+.volumeIcon {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+}
+
+/* ===== Content Space ===== */
+.examContentSpace {
+  margin-top: 50px;
+  width: 100%;
+  height: calc(100% - 95px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+/* ===== Feedback Button ===== */
+.feedbackButton {
+  position: fixed;
+  right: 0;
+  bottom: 10%;
+  cursor: pointer;
+  z-index: 100;
+}
+
+.feedbackButton img {
+  width: 3vw;
+}
+
+@media (min-width: 1280px) {
+  .feedbackButton img {
+    width: 2vw;
+  }
+}