@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.29

package/dist/components/themes/summer-sky/SummerSkyLayout.js

@@ -1 +1,221 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as i,useState as a,useEffect as r,useCallback as n}from"react";import o from"next/image";import s from"./assets/styles/SummerSkyLayout.module.css";import{SummerSkyAudioPlayer as l}from"./SummerSkyAudioPlayer";import d from"./assets/images/prev-question-btn.png";import c from"./assets/images/next-question-btn.png";import p from"./assets/images/arrow-left.png";import u from"./assets/images/title-logo.png";import m from"./assets/images/mic_ver2_icon.png";import h from"./assets/images/stop_audio_ver2_icon.png";import g from"./assets/images/audio_ver2_icon.png";import v from"./assets/images/pause_audio_ver2_icon.png";import x from"./assets/images/lock_mic_ver2_icon.png";import f from"./assets/images/rope_v3.png";const y=new Set(["/speaking/video/read_displayed_content.webm","/speaking/video/speaking_describe_image.webm","/speaking/video/spontaneous_qa.webm"]);export function SummerSkyLayout({onExit:w,partName:b,instruction:N,headerRight:k,onPrev:_,onNext:S,showPrev:E,showNext:C,canGoPrev:L,canGoNext:F,audioUrl:z,questionNumber:T,onAudioEnded:I,recorder:j,showExistingBadge:A,children:M,contentClassName:P="",hideAudioBar:U,hideFooterTitle:q,teacherVideoUrl:Q,waitForTeacherVideo:R,onTeacherVideoEnded:W,skipTeacherVideo:B,showTeacherImage:D,isMicLockedOverride:$,micLockedText:H,onAudioPlayingChange:V}){const G=i(null),K=i(null),[X,O]=a(!!B),[J,Y]=a(!1),[Z,ee]=a(0),[te,ie]=a(0);r(()=>{const e=G.current;if(!e)return;const t=()=>{Y(!0),V?.(!0)},i=()=>{Y(!1),V?.(!1)},a=()=>{Y(!1),ee(0),V?.(!1)},r=()=>{ee(e.currentTime),e.duration&&isFinite(e.duration)&&ie(e.duration)},n=()=>{e.duration&&isFinite(e.duration)&&ie(e.duration)};return e.addEventListener("play",t),e.addEventListener("pause",i),e.addEventListener("ended",a),e.addEventListener("timeupdate",r),e.addEventListener("loadedmetadata",n),e.addEventListener("durationchange",n),()=>{e.removeEventListener("play",t),e.removeEventListener("pause",i),e.removeEventListener("ended",a),e.removeEventListener("timeupdate",r),e.removeEventListener("loadedmetadata",n),e.removeEventListener("durationchange",n)}},[j?.previewUrl]),r(()=>{const e=K.current;e&&Q&&(e.playbackRate=y.has(Q)?1.25:1)},[Q]),r(()=>{O(!!B)},[Q,B]);const ae=n(e=>{if(!isFinite(e)||isNaN(e))return"00:00";const t=Math.floor(e/60),i=Math.floor(e%60);return`${t.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`},[]),re=(j&&null!=j.previewUrl&&("recorded"===j.status||"uploading"===j.status||j.status),R&&!X||$),ne="recording"===j?.status||R&&!X,oe=E??L,se=C??F,le=!!Q||!!D,de=!!Q&&!X,ce=X||!!D;return t("div",{id:"exam-main-scroll-area",className:s.pageContainer,children:[e("div",{className:s.examContainer,children:t("div",{className:s.examMainBoard,style:{zIndex:1},children:[t("div",{className:"absolute w-full top-0 h-0",style:{zIndex:-1},children:[e(o,{src:f,alt:"rope",className:"absolute",style:{bottom:"-20px",left:"15%",transform:"translateX(-50%)",width:"37px",height:"172px"}}),e(o,{src:f,alt:"rope",className:"absolute",style:{bottom:"-20px",left:"85%",transform:"translateX(-50%)",width:"37px",height:"172px"}})]}),e("div",{className:s.headerTitleWrapper,onClick:w,style:{cursor:"pointer",zIndex:100},children:e(o,{src:p,alt:"Quay lại",style:{width:"80px"}})}),e("div",{className:"absolute w-full flex justify-center z-10 pointer-events-none",style:{top:"-23%"},children:e(o,{src:u,alt:"Title Logo",style:{width:"350px",height:"auto"}})}),oe&&e("div",{className:s.controlLeft,style:{zIndex:50},children:e("div",{className:["transition-transform",!L||ne?"cursor-not-allowed opacity-45 grayscale pointer-events-none":"cursor-pointer hover:scale-[1.05] active:scale-[0.95]"].join(" "),onClick:!L||ne?void 0:_,"aria-disabled":!L||ne,title:!L||ne?"Không thể chuyển câu khi đang ghi âm":void 0,children:e(o,{src:d,alt:"prev"})})}),t("div",{className:s.examContentMainContainer,children:[!q&&e(l,{audioUrl:z,partName:b,onEnded:I,hideAudio:U,onPlayingChange:V}),t("div",{className:s.examContentSpace,children:[k&&e("div",{className:"absolute top-2 right-6 z-50",children:k}),e("div",{className:`w-full h-full flex flex-col items-center justify-center ${P}`,children:M})]}),j&&t("div",{className:s.micWrapper,children:[e("div",{className:"bg-white rounded-[100px] shadow-[0_4px_10px_rgba(0,0,0,0.1)] whitespace-nowrap mb-3 flex items-center justify-center",style:{padding:"10px 30px",color:re?"#888":"recording"===j.status?"#FF4D4D":["recorded","uploading","uploaded"].includes(j.status)?"#16CA3B":"#343C55",fontSize:"20px",fontFamily:'"Quicksand", sans-serif',fontWeight:700,lineHeight:"100%",letterSpacing:"-0.01em"},children:re?H||"Hãy chờ giáo viên hoàn thành hướng dẫn":"recording"===j.status?"Ấn lần nữa để lưu kết quả":["recorded","uploading","uploaded"].includes(j.status)?"Câu trả lời đã được ghi nhận !":"Ấn biểu tượng Micro để trả lời"}),t("div",{className:"relative flex flex-col items-center",children:["recording"===j.status?t("div",{className:"relative flex flex-col justify-center items-center cursor-pointer drop-shadow-[0_0_15px_rgba(255,100,100,0.8)] transition-transform hover:scale-[1.05] active:scale-[0.95]",onClick:j.stopRecording,children:[e(o,{src:h,alt:"stop audio",className:"animate-pulse",style:{width:"120px",height:"120px"}}),t("span",{className:"absolute text-white text-[16px] font-bold font-['Quicksand']",style:{bottom:"30px"},children:[Math.floor(j.remainingSeconds/60),":",(j.remainingSeconds%60).toString().padStart(2,"0")]})]}):e(o,re?{src:x,alt:"micro locked",className:"opacity-80 cursor-not-allowed",style:{width:"120px",height:"120px"}}:{src:["recorded","uploading","uploaded"].includes(j.status)?J?v:g:m,alt:"micro",className:"transition-transform cursor-pointer hover:scale-[1.05] active:scale-[0.95]",style:{width:"120px",height:"120px"},onClick:()=>{re||("idle"===j.status||"error"===j.status?j.startRecording():["recorded","uploading","uploaded"].includes(j.status)&&G.current&&(J?G.current.pause():(G.current.currentTime=0,G.current.play().catch(console.error))))}}),j?.previewUrl&&e("audio",{ref:G,src:j.previewUrl}),"recording"===j.status&&e("div",{className:"absolute whitespace-nowrap text-center",style:{top:"100%",marginTop:"16px",color:"#FF4D4D",fontSize:"24px",fontFamily:'"Quicksand", sans-serif',fontWeight:700,lineHeight:"100%",letterSpacing:"-0.01em",textShadow:"0 1px 3px rgba(0,0,0,0.15)"},children:"Đang ghi âm câu hỏi . . ."}),["recorded","uploading","uploaded"].includes(j.status)&&e("div",{className:"absolute whitespace-nowrap text-center",style:{top:"100%",marginTop:"16px",color:"#343C55",fontSize:"24px",fontFamily:'"Quicksand", sans-serif',fontWeight:700,lineHeight:"100%",letterSpacing:"-0.01em"},children:J?`${ae(Z)}/${te?ae(te):"--:--"}`:"Nghe đáp án"})]})]})]}),se&&e("div",{className:s.controlRight,style:{zIndex:50},children:e("div",{className:["transition-transform",!F||ne?"cursor-not-allowed opacity-45 grayscale pointer-events-none":"cursor-pointer hover:scale-[1.05] active:scale-[0.95]"].join(" "),onClick:!F||ne?void 0:S,"aria-disabled":!F||ne,title:!F||ne?"Không thể chuyển câu khi đang ghi âm":void 0,children:e(o,{src:c,alt:"next"})})})]})}),le&&e("div",{style:{position:"fixed",bottom:0,left:"1%",zIndex:40,display:"flex",flexDirection:"column",alignItems:"flex-start"},children:t("div",{style:{position:"relative",width:"12vw"},children:[de&&e("button",{onClick:()=>{K.current&&K.current.pause(),O(!0),W?.()},style:{position:"absolute",top:"-40px",right:"0",zIndex:50,backgroundColor:"rgba(255, 255, 255, 0.9)",color:"#343C55",border:"1px solid #E2E8F0",borderRadius:"20px",padding:"4px 12px",fontSize:"14px",fontWeight:600,fontFamily:'"Quicksand", sans-serif',cursor:"pointer",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)",display:"flex",alignItems:"center",gap:"6px",whiteSpace:"nowrap"},className:"hover:bg-white hover:scale-105 active:scale-95 transition-all outline-none",children:"Bỏ qua ⏭"}),Q&&e("video",{ref:K,src:Q,autoPlay:!B,playsInline:!0,onEnded:()=>{O(!0),W?.()},style:{width:"100%",height:"auto",display:"block",filter:"drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2))",pointerEvents:"none",opacity:de?1:0,transition:"opacity 0.6s ease-in-out"}}),e("img",{src:"/speaking/image/teacher_ai_smile.png",alt:"AI Teacher",style:{position:Q?"absolute":"relative",top:0,left:0,width:"100%",height:"auto",display:"block",filter:"drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2))",pointerEvents:"none",opacity:ce?1:0,transition:"opacity 0.6s ease-in-out"}})]})})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from 'react';
+import Image from 'next/image';
+import layoutStyles from './assets/styles/SummerSkyLayout.module.css';
+import { SummerSkyAudioPlayer } from './SummerSkyAudioPlayer';
+import prevQuestionImg from './assets/images/prev-question-btn.png';
+import nextQuestionImg from './assets/images/next-question-btn.png';
+import arrowLeftImg from './assets/images/arrow-left.png';
+import titleLogoImg from './assets/images/title-logo.png';
+import microIcon from './assets/images/mic_ver2_icon.png';
+import redCircleImg from './assets/images/stop_audio_ver2_icon.png';
+import listenAudioImg from './assets/images/audio_ver2_icon.png';
+import pauseAudioImg from './assets/images/pause_audio_ver2_icon.png';
+import lockMicImg from './assets/images/lock_mic_ver2_icon.png';
+import ropeImg from './assets/images/rope_v3.png';
+const FAST_TEACHER_VIDEO_URLS = new Set([
+    '/speaking/video/read_displayed_content.webm',
+    '/speaking/video/speaking_describe_image.webm',
+    '/speaking/video/spontaneous_qa.webm',
+]);
+const FAST_TEACHER_VIDEO_PLAYBACK_RATE = 1.25;
+export function SummerSkyLayout({ onExit, partName, instruction, headerRight, onPrev, onNext, showPrev, showNext, canGoPrev, canGoNext, audioUrl, questionNumber, onAudioEnded, recorder, showExistingBadge, children, contentClassName = '', hideAudioBar, hideFooterTitle, teacherVideoUrl, waitForTeacherVideo, onTeacherVideoEnded, skipTeacherVideo, showTeacherImage, isMicLockedOverride, micLockedText, onAudioPlayingChange, }) {
+    const playbackAudioRef = useRef(null);
+    const teacherVideoRef = useRef(null);
+    const [teacherVideoEnded, setTeacherVideoEnded] = useState(!!skipTeacherVideo);
+    const [isPlayingBack, setIsPlayingBack] = useState(false);
+    const [playbackTime, setPlaybackTime] = useState(0);
+    const [playbackDuration, setPlaybackDuration] = useState(0);
+    // Track playback audio events
+    useEffect(() => {
+        const audio = playbackAudioRef.current;
+        if (!audio)
+            return;
+        const onPlay = () => { setIsPlayingBack(true); onAudioPlayingChange?.(true); };
+        const onPause = () => { setIsPlayingBack(false); onAudioPlayingChange?.(false); };
+        const onEnded = () => { setIsPlayingBack(false); setPlaybackTime(0); onAudioPlayingChange?.(false); };
+        const onTimeUpdate = () => {
+            setPlaybackTime(audio.currentTime);
+            // For blob URLs, duration may only become available during playback
+            if (audio.duration && isFinite(audio.duration)) {
+                setPlaybackDuration(audio.duration);
+            }
+        };
+        const onLoaded = () => {
+            if (audio.duration && isFinite(audio.duration)) {
+                setPlaybackDuration(audio.duration);
+            }
+        };
+        audio.addEventListener('play', onPlay);
+        audio.addEventListener('pause', onPause);
+        audio.addEventListener('ended', onEnded);
+        audio.addEventListener('timeupdate', onTimeUpdate);
+        audio.addEventListener('loadedmetadata', onLoaded);
+        audio.addEventListener('durationchange', onLoaded);
+        return () => {
+            audio.removeEventListener('play', onPlay);
+            audio.removeEventListener('pause', onPause);
+            audio.removeEventListener('ended', onEnded);
+            audio.removeEventListener('timeupdate', onTimeUpdate);
+            audio.removeEventListener('loadedmetadata', onLoaded);
+            audio.removeEventListener('durationchange', onLoaded);
+        };
+    }, [recorder?.previewUrl]);
+    useEffect(() => {
+        const teacherVideo = teacherVideoRef.current;
+        if (!teacherVideo || !teacherVideoUrl)
+            return;
+        teacherVideo.playbackRate = FAST_TEACHER_VIDEO_URLS.has(teacherVideoUrl)
+            ? FAST_TEACHER_VIDEO_PLAYBACK_RATE
+            : 1;
+    }, [teacherVideoUrl]);
+    useEffect(() => {
+        setTeacherVideoEnded(!!skipTeacherVideo);
+    }, [teacherVideoUrl, skipTeacherVideo]);
+    const formatPlaybackTime = useCallback((sec) => {
+        if (!isFinite(sec) || isNaN(sec))
+            return '00:00';
+        const m = Math.floor(sec / 60);
+        const s = Math.floor(sec % 60);
+        return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+    }, []);
+    const hasRecording = recorder &&
+        recorder.previewUrl != null &&
+        (recorder.status === 'recorded' ||
+            recorder.status === 'uploading' ||
+            recorder.status === 'uploaded');
+    const isMicLocked = (waitForTeacherVideo && !teacherVideoEnded) || isMicLockedOverride;
+    const isNavDisabled = recorder?.status === 'recording' || (waitForTeacherVideo && !teacherVideoEnded);
+    const shouldShowPrev = showPrev ?? canGoPrev;
+    const shouldShowNext = showNext ?? canGoNext;
+    const shouldRenderTeacherGuide = !!teacherVideoUrl || !!showTeacherImage;
+    const shouldShowTeacherVideo = !!teacherVideoUrl && !teacherVideoEnded;
+    const shouldShowTeacherSmileImage = teacherVideoEnded || !!showTeacherImage;
+    return (_jsxs("div", { id: "exam-main-scroll-area", className: layoutStyles.pageContainer, children: [_jsx("div", { className: layoutStyles.examContainer, children: _jsxs("div", { className: layoutStyles.examMainBoard, style: { zIndex: 1 }, children: [_jsxs("div", { className: "absolute w-full top-0 h-0", style: { zIndex: -1 }, children: [_jsx(Image, { src: ropeImg, alt: "rope", className: "absolute", style: { bottom: '-20px', left: '15%', transform: 'translateX(-50%)', width: '37px', height: '172px' } }), _jsx(Image, { src: ropeImg, alt: "rope", className: "absolute", style: { bottom: '-20px', left: '85%', transform: 'translateX(-50%)', width: '37px', height: '172px' } })] }), _jsx("div", { className: layoutStyles.headerTitleWrapper, onClick: onExit, style: { cursor: 'pointer', zIndex: 100 }, children: _jsx(Image, { src: arrowLeftImg, alt: "Quay l\u1EA1i", style: { width: '80px' } }) }), _jsx("div", { className: "absolute w-full flex justify-center z-10 pointer-events-none", style: { top: '-23%' }, children: _jsx(Image, { src: titleLogoImg, alt: "Title Logo", style: { width: '350px', height: 'auto' } }) }), shouldShowPrev && (_jsx("div", { className: layoutStyles.controlLeft, style: { zIndex: 50 }, children: _jsx("div", { className: [
+                                    'transition-transform',
+                                    !canGoPrev || isNavDisabled
+                                        ? 'cursor-not-allowed opacity-45 grayscale pointer-events-none'
+                                        : 'cursor-pointer hover:scale-[1.05] active:scale-[0.95]',
+                                ].join(' '), onClick: !canGoPrev || isNavDisabled ? undefined : onPrev, "aria-disabled": !canGoPrev || isNavDisabled, title: !canGoPrev || isNavDisabled ? 'Không thể chuyển câu khi đang ghi âm' : undefined, children: _jsx(Image, { src: prevQuestionImg, alt: "prev" }) }) })), _jsxs("div", { className: layoutStyles.examContentMainContainer, children: [!hideFooterTitle && (_jsx(SummerSkyAudioPlayer, { audioUrl: audioUrl, partName: partName, onEnded: onAudioEnded, hideAudio: hideAudioBar, onPlayingChange: onAudioPlayingChange })), _jsxs("div", { className: layoutStyles.examContentSpace, children: [headerRight && (_jsx("div", { className: "absolute top-2 right-6 z-50", children: headerRight })), _jsx("div", { className: `w-full h-full flex flex-col items-center justify-center ${contentClassName}`, children: children })] }), recorder && (_jsxs("div", { className: layoutStyles.micWrapper, children: [_jsx("div", { className: "bg-white rounded-[100px] shadow-[0_4px_10px_rgba(0,0,0,0.1)] whitespace-nowrap mb-3 flex items-center justify-center", style: {
+                                                padding: '10px 30px',
+                                                color: isMicLocked
+                                                    ? '#888'
+                                                    : recorder.status === 'recording'
+                                                        ? '#FF4D4D'
+                                                        : ['recorded', 'uploading', 'uploaded'].includes(recorder.status)
+                                                            ? '#16CA3B'
+                                                            : '#343C55',
+                                                fontSize: '20px',
+                                                fontFamily: '"Quicksand", sans-serif',
+                                                fontWeight: 700,
+                                                lineHeight: '100%',
+                                                letterSpacing: '-0.01em',
+                                            }, children: isMicLocked
+                                                ? (micLockedText || 'Hãy chờ giáo viên hoàn thành hướng dẫn')
+                                                : recorder.status === 'recording'
+                                                    ? 'Ấn lần nữa để lưu kết quả'
+                                                    : ['recorded', 'uploading', 'uploaded'].includes(recorder.status)
+                                                        ? 'Câu trả lời đã được ghi nhận !'
+                                                        : 'Ấn biểu tượng Micro để trả lời' }), _jsxs("div", { className: "relative flex flex-col items-center", children: [recorder.status === 'recording' ? (_jsxs("div", { className: "relative flex flex-col justify-center items-center cursor-pointer drop-shadow-[0_0_15px_rgba(255,100,100,0.8)] transition-transform hover:scale-[1.05] active:scale-[0.95]", onClick: recorder.stopRecording, children: [_jsx(Image, { src: redCircleImg, alt: "stop audio", className: "animate-pulse", style: { width: '120px', height: '120px' } }), _jsxs("span", { className: "absolute text-white text-[16px] font-bold font-['Quicksand']", style: { bottom: '30px' }, children: [Math.floor(recorder.remainingSeconds / 60), ":", (recorder.remainingSeconds % 60).toString().padStart(2, '0')] })] })) : isMicLocked ? (_jsx(Image, { src: lockMicImg, alt: "micro locked", className: "opacity-80 cursor-not-allowed", style: { width: '120px', height: '120px' } })) : (_jsx(Image, { src: ['recorded', 'uploading', 'uploaded'].includes(recorder.status)
+                                                        ? (isPlayingBack ? pauseAudioImg : listenAudioImg)
+                                                        : microIcon, alt: "micro", className: "transition-transform cursor-pointer hover:scale-[1.05] active:scale-[0.95]", style: { width: '120px', height: '120px' }, onClick: () => {
+                                                        if (isMicLocked)
+                                                            return;
+                                                        if (recorder.status === 'idle' || recorder.status === 'error') {
+                                                            recorder.startRecording();
+                                                        }
+                                                        else if (['recorded', 'uploading', 'uploaded'].includes(recorder.status)) {
+                                                            if (playbackAudioRef.current) {
+                                                                if (isPlayingBack) {
+                                                                    playbackAudioRef.current.pause();
+                                                                }
+                                                                else {
+                                                                    playbackAudioRef.current.currentTime = 0;
+                                                                    playbackAudioRef.current.play().catch(console.error);
+                                                                }
+                                                            }
+                                                        }
+                                                    } })), recorder?.previewUrl && (_jsx("audio", { ref: playbackAudioRef, src: recorder.previewUrl })), recorder.status === 'recording' && (_jsx("div", { className: "absolute whitespace-nowrap text-center", style: {
+                                                        top: '100%',
+                                                        marginTop: '16px',
+                                                        color: '#FF4D4D',
+                                                        fontSize: '24px',
+                                                        fontFamily: '"Quicksand", sans-serif',
+                                                        fontWeight: 700,
+                                                        lineHeight: '100%',
+                                                        letterSpacing: '-0.01em',
+                                                        textShadow: '0 1px 3px rgba(0,0,0,0.15)',
+                                                    }, children: "\u0110ang ghi \u00E2m c\u00E2u h\u1ECFi . . ." })), ['recorded', 'uploading', 'uploaded'].includes(recorder.status) && (_jsx("div", { className: "absolute whitespace-nowrap text-center", style: {
+                                                        top: '100%',
+                                                        marginTop: '16px',
+                                                        color: '#343C55',
+                                                        fontSize: '24px',
+                                                        fontFamily: '"Quicksand", sans-serif',
+                                                        fontWeight: 700,
+                                                        lineHeight: '100%',
+                                                        letterSpacing: '-0.01em'
+                                                    }, children: isPlayingBack
+                                                        ? `${formatPlaybackTime(playbackTime)}/${playbackDuration ? formatPlaybackTime(playbackDuration) : '--:--'}`
+                                                        : 'Nghe đáp án' }))] })] }))] }), shouldShowNext && (_jsx("div", { className: layoutStyles.controlRight, style: { zIndex: 50 }, children: _jsx("div", { className: [
+                                    'transition-transform',
+                                    !canGoNext || isNavDisabled
+                                        ? 'cursor-not-allowed opacity-45 grayscale pointer-events-none'
+                                        : 'cursor-pointer hover:scale-[1.05] active:scale-[0.95]',
+                                ].join(' '), onClick: !canGoNext || isNavDisabled ? undefined : onNext, "aria-disabled": !canGoNext || isNavDisabled, title: !canGoNext || isNavDisabled ? 'Không thể chuyển câu khi đang ghi âm' : undefined, children: _jsx(Image, { src: nextQuestionImg, alt: "next" }) }) }))] }) }), shouldRenderTeacherGuide && (_jsx("div", { style: {
+                    position: 'fixed',
+                    bottom: 0,
+                    left: '1%',
+                    zIndex: 40,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                }, children: _jsxs("div", { style: { position: 'relative', width: '12vw' }, children: [shouldShowTeacherVideo && (_jsx("button", { onClick: () => {
+                                if (teacherVideoRef.current) {
+                                    teacherVideoRef.current.pause();
+                                }
+                                setTeacherVideoEnded(true);
+                                onTeacherVideoEnded?.();
+                            }, style: {
+                                position: 'absolute',
+                                top: '-40px',
+                                right: '0',
+                                zIndex: 50,
+                                backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                                color: '#343C55',
+                                border: '1px solid #E2E8F0',
+                                borderRadius: '20px',
+                                padding: '4px 12px',
+                                fontSize: '14px',
+                                fontWeight: 600,
+                                fontFamily: '"Quicksand", sans-serif',
+                                cursor: 'pointer',
+                                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '6px',
+                                whiteSpace: 'nowrap',
+                            }, className: "hover:bg-white hover:scale-105 active:scale-95 transition-all outline-none", children: "B\u1ECF qua \u23ED" })), teacherVideoUrl && (_jsx("video", { ref: teacherVideoRef, src: teacherVideoUrl, autoPlay: !skipTeacherVideo, playsInline: true, onEnded: () => {
+                                setTeacherVideoEnded(true);
+                                onTeacherVideoEnded?.();
+                            }, style: {
+                                width: '100%',
+                                height: 'auto',
+                                display: 'block',
+                                filter: 'drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2))',
+                                pointerEvents: 'none',
+                                opacity: shouldShowTeacherVideo ? 1 : 0,
+                                transition: 'opacity 0.6s ease-in-out',
+                            } })), _jsx("img", { src: "/speaking/image/teacher_ai_smile.png", alt: "AI Teacher", style: {
+                                position: teacherVideoUrl ? 'absolute' : 'relative',
+                                top: 0,
+                                left: 0,
+                                width: '100%',
+                                height: 'auto',
+                                display: 'block',
+                                filter: 'drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2))',
+                                pointerEvents: 'none',
+                                opacity: shouldShowTeacherSmileImage ? 1 : 0,
+                                transition: 'opacity 0.6s ease-in-out',
+                            } })] }) }))] }));
+}

package/dist/components/themes/summer-sky/SummerSkySubmitModal.js

@@ -1 +1,18 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import s from"next/image";import a from"./assets/images/background-noticesubmit.png";import n from"./assets/images/btn-notisubmid.png";import r from"./assets/images/x-noticesubmit.png.png";import i from"./assets/images/ong.png";import o from"./assets/images/title-notisubmit.png";export function SummerSkySubmitModal({onClose:l,onSubmit:c,isSubmitting:m}){return e("div",{className:"fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-sm",children:e("div",{className:"relative w-[450px] max-w-[85vw] flex flex-col items-center justify-center mt-6",children:t("div",{className:"relative w-full shadow-[0_15px_40px_rgba(0,0,0,0.4)] rounded-[20px]",children:[e(s,{src:a,alt:"Background",className:"w-full h-auto block rounded-[40px]"}),e("button",{onClick:l,className:"absolute top-[11%] right-[-9%] transition-transform hover:scale-110 active:scale-95 cursor-pointer z-50 border-none bg-transparent p-0",children:e(s,{src:r,alt:"Close",className:"w-[42px] h-auto object-contain drop-shadow-md"})}),e("div",{className:"absolute top-0 left-1/2 -translate-x-1/2 -translate-y-[40%] z-20 w-[55%] flex justify-center pointer-events-none",children:e(s,{src:o,alt:"Notice Title",className:"w-full h-auto"})}),e("div",{className:"absolute top-[-20%] left-[0%] z-30 pointer-events-none w-[15%]",children:e(s,{src:i,alt:"Bee Mascot",className:"w-full h-auto drop-shadow-xl"})}),e("div",{className:"absolute inset-0 flex flex-col items-center justify-center z-10 pt-[12%] pb-[10%] text-center ml-[8%] mr-[8%]",children:t("p",{className:"text-[#646464]",style:{fontFamily:'"SVN-Volte Rounded", sans-serif',fontWeight:600,fontSize:"18px",lineHeight:"24px",letterSpacing:"-0.01em",textAlign:"center"},children:["Bạn có chắc chắn muốn nộp bài không?",e("br",{}),"Sau khi nộp, bạn sẽ không thể thay đổi câu hỏi được nữa?"]})}),t("button",{onClick:c,disabled:m,className:"absolute bottom-[-8%] left-1/2 -translate-x-1/2 transition-transform hover:scale-105 active:scale-95 z-40 border-none bg-transparent p-0 w-[42%] flex items-center justify-center "+(m?"cursor-not-allowed opacity-70":"cursor-pointer"),children:[m?e("div",{className:"absolute inset-0 flex items-center justify-center z-50",children:e("div",{className:"h-8 w-8 animate-spin rounded-full border-4 border-white border-t-transparent"})}):null,e(s,{src:n,alt:"Submit Button",className:"w-full h-auto drop-shadow-xl"})]})]})})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import bgImg from './assets/images/background-noticesubmit.png';
+import btnImg from './assets/images/btn-notisubmid.png';
+import closeImg from './assets/images/x-noticesubmit.png.png';
+import mascotImg from './assets/images/ong.png';
+import titleImg from './assets/images/title-notisubmit.png';
+export function SummerSkySubmitModal({ onClose, onSubmit, isSubmitting }) {
+    return (_jsx("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-sm", children: _jsx("div", { className: "relative w-[450px] max-w-[85vw] flex flex-col items-center justify-center mt-6", children: _jsxs("div", { className: "relative w-full shadow-[0_15px_40px_rgba(0,0,0,0.4)] rounded-[20px]", children: [_jsx(Image, { src: bgImg, alt: "Background", className: "w-full h-auto block rounded-[40px]" }), _jsx("button", { onClick: onClose, className: "absolute top-[11%] right-[-9%] transition-transform hover:scale-110 active:scale-95 cursor-pointer z-50 border-none bg-transparent p-0", children: _jsx(Image, { src: closeImg, alt: "Close", className: "w-[42px] h-auto object-contain drop-shadow-md" }) }), _jsx("div", { className: "absolute top-0 left-1/2 -translate-x-1/2 -translate-y-[40%] z-20 w-[55%] flex justify-center pointer-events-none", children: _jsx(Image, { src: titleImg, alt: "Notice Title", className: "w-full h-auto" }) }), _jsx("div", { className: "absolute top-[-20%] left-[0%] z-30 pointer-events-none w-[15%]", children: _jsx(Image, { src: mascotImg, alt: "Bee Mascot", className: "w-full h-auto drop-shadow-xl" }) }), _jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center z-10 pt-[12%] pb-[10%] text-center ml-[8%] mr-[8%]", children: _jsxs("p", { className: "text-[#646464]", style: {
+                                fontFamily: '"SVN-Volte Rounded", sans-serif',
+                                fontWeight: 600,
+                                fontSize: '18px',
+                                lineHeight: '24px',
+                                letterSpacing: '-0.01em',
+                                textAlign: 'center'
+                            }, children: ["B\u1EA1n c\u00F3 ch\u1EAFc ch\u1EAFn mu\u1ED1n n\u1ED9p b\u00E0i kh\u00F4ng?", _jsx("br", {}), "Sau khi n\u1ED9p, b\u1EA1n s\u1EBD kh\u00F4ng th\u1EC3 thay \u0111\u1ED5i c\u00E2u h\u1ECFi \u0111\u01B0\u1EE3c n\u1EEFa?"] }) }), _jsxs("button", { onClick: onSubmit, disabled: isSubmitting, className: `absolute bottom-[-8%] left-1/2 -translate-x-1/2 transition-transform hover:scale-105 active:scale-95 z-40 border-none bg-transparent p-0 w-[42%] flex items-center justify-center ${isSubmitting ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'}`, children: [isSubmitting ? (_jsx("div", { className: "absolute inset-0 flex items-center justify-center z-50", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-white border-t-transparent" }) })) : null, _jsx(Image, { src: btnImg, alt: "Submit Button", className: "w-full h-auto drop-shadow-xl" })] })] }) }) }));
+}

package/dist/components/themes/summer-sky/SummerSkyWaitingRoom.js

@@ -1 +1,193 @@
-"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useState as i,useEffect as r,useRef as n}from"react";import a from"next/image";import{toast as o}from"sonner";import{SummerSkyLayout as s}from"./SummerSkyLayout";import{useSpeakingRecorder as c}from"../../../components/exams/take/hooks/useSpeakingRecorder";import l from"./assets/styles/SummerSkyWaitingRoom.module.css";import d from"./assets/images/instruction-step.png";import m from"./assets/images/oceanedu-mascot.png";import h from"./assets/images/radio-check.png";import p from"./assets/images/next-btn.png";import u from"./assets/images/start-exam.png";import g from"./assets/images/check-mic-btn.png";import v from"./assets/images/stop-mic.png";import y from"./assets/images/mic-icon.png";import f from"./assets/images/audio-icon.png";const x=1.25;export function SummerSkyWaitingRoom({room:N,onStart:w,isStarting:k,onExit:b}){const[I,S]=i("instructions"),[B,R]=i(0),C=n(null),[F,T]=i(!1),[U,A]=i(0),[M,E]=i(null),j=n(null),[D,P]=i(!1),V="true"===process.env.NEXT_PUBLIC_SKIP_WAITING_ROOM_AUDIO,W=D||V;r(()=>{const t=j.current;if(!t)return;t.muted=!1,t.playbackRate=x;const e=t.play();void 0!==e&&e.catch(()=>{if(j.current){j.current.muted=!0,j.current.playbackRate=x;const t=j.current.play();void 0!==t&&t.catch(()=>{P(!0)})}})},[I]),r(()=>{P(!1),j.current&&(j.current.currentTime=0,j.current.playbackRate=x)},[I]);const _=c({attemptId:"mock-attempt-speaking",questionId:"mock-question",maxDurationMs:1e4,onRecordingComplete:()=>{},onError:t=>o.error(t)});r(()=>{let t;if("recording"===_.status){const e=Date.now();t=setInterval(()=>{R(Date.now()-e)},50)}else R(0);return()=>clearInterval(t)},[_.status]);const H=N.exam?.name||"BÀI THI NÓI";return t(s,{onExit:b,partName:H,instruction:"",audioUrl:"",canGoPrev:!1,canGoNext:!1,onPrev:()=>{"mic-test"===I&&S("instructions")},onNext:()=>{"instructions"===I&&S("mic-test")},hideAudioBar:!0,hideFooterTitle:!0,questionNumber:1,recorder:null,headerRight:null,children:e("div",{className:l.waitingRoomContainer,children:[e("div",{className:l.teacherFloating,children:[t("div",{className:l.teacherGlow}),e("div",{style:{position:"relative"},children:[t("video",{ref:j,className:l.teacherVideo,src:"mic-test"===I?"/speaking/video/check_microphone.webm":"/speaking/video/instruction.webm",autoPlay:!0,muted:!0,playsInline:!0,onEnded:()=>P(!0),onError:()=>{P(!0)},style:{opacity:D?0:1,transition:"opacity 0.6s ease-in-out"}}),t("img",{className:l.teacherVideo,src:"/speaking/image/teacher_ai_smile.png",alt:"AI Teacher",style:{position:"absolute",top:0,left:0,opacity:D?1:0,transition:"opacity 0.6s ease-in-out"}})]})]}),"instructions"===I&&e("div",{className:l.introBoard,children:[t("h2",{className:l.title,children:"Hướng dẫn chung"}),t("div",{className:l.instructionIconsWrap,style:{display:"flex",justifyContent:"center",width:"100%",marginBottom:"48px",marginTop:"5%"},children:t(a,{src:d,alt:"Hướng dẫn các bước",style:{width:"75%",height:"auto",objectFit:"contain"}})}),e("div",{className:l.aiBanner,children:[t("div",{className:l.aiBannerIcon,children:t(a,{src:m,alt:"OceanEdu Mascot",width:100,height:100,style:{borderRadius:"50%",objectFit:"cover"}})}),e("div",{className:l.aiBannerContent,children:[t("p",{className:l.aiBannerTitle,children:"Yêu cầu Ocean Edu AI Chấm điểm"}),t("p",{className:l.aiBannerDesc,children:"Hệ thống AI chuyên gia sẽ tự động chấm điểm bài thi của bạn 1 cách chính xác và khách quan nhất."})]}),t("div",{className:l.aiBannerRadio,children:t(a,{src:h,alt:"Radio Check",width:56,height:56})})]}),t("div",{className:l.stepButtonContainer,children:t("div",{className:"transition-transform "+(W?"cursor-pointer hover:scale-[1.02] active:scale-[0.98]":"cursor-not-allowed opacity-50 grayscale"),tabIndex:W?0:-1,onClick:()=>{W&&S("mic-test")},children:t(a,{src:p,alt:"Bước tiếp theo",style:{width:"280px",height:"auto"}})})}),t("div",{className:l.spacer})]}),"mic-test"===I&&e("div",{className:l.introBoard,children:[t("h2",{className:l.title,style:{marginBottom:"40px"},children:"KIỂM TRA MIC"}),e("div",{className:l.micTestContainer,children:[e("div",{className:l.micTestInstructionWrap,style:{margin:"-100px auto 48px auto",width:"fit-content",textAlign:"left"},children:[t("h3",{style:{color:"#2C38B6",fontFamily:'"SVN-Volte Rounded", sans-serif',fontSize:"28px",fontWeight:700,lineHeight:"1.5",textTransform:"uppercase",marginBottom:"24px",letterSpacing:"-0.01em"},children:"HƯỚNG DẪN"}),e("ul",{style:{listStyle:"none",padding:0,margin:0,color:"#343A40",fontFamily:'"SVN-Volte Rounded", sans-serif',fontSize:"20px",fontWeight:600,lineHeight:"1.8",letterSpacing:"-0.01em"},children:[t("li",{children:"1. Nhấn nút Kiểm tra mic bên dưới"}),t("li",{children:"2. Chọn Cho Phép (Allow) khi trình duyệt yêu cầu quyền truy cập"}),t("li",{children:"3. Sau khi kiểm tra Micro thành công, nhấn nút Bắt đầu bài thi"})]})]}),e("div",{className:`transition-transform ${_.previewUrl?"cursor-pointer hover:scale-[1.02] active:scale-[0.98]":"cursor-default"} ${"recording"===_.status?"animate-pulse":""}`,style:{background:"#044E96",borderRadius:"28px",width:"700px",height:"56px",display:"flex",alignItems:"center",cursor:_.previewUrl?"pointer":"default",padding:"0 24px 0 2px",gap:"16px",margin:"0 auto"},onClick:t=>{_.previewUrl&&(t=>{t.stopPropagation(),C.current&&(F?(C.current.pause(),T(!1)):(C.current.play().catch(()=>{T(!1)}),T(!0)))})(t)},children:[_.previewUrl&&t("audio",{ref:C,src:_.previewUrl,onTimeUpdate:()=>{C.current&&C.current.duration&&A(C.current.currentTime/C.current.duration*100)},onEnded:()=>{T(!1),A(0)},onLoadedMetadata:t=>{E(Math.round(t.target.duration))},style:{display:"none"}}),_.previewUrl?t(a,{src:f,alt:"Phát âm thanh",style:{width:"72px",height:"72px",objectFit:"contain",marginLeft:"-16px"}}):t(a,{src:y,alt:"Microphone",style:{width:"72px",height:"72px",objectFit:"contain",marginLeft:"-16px"}}),t("div",{style:{flex:1,height:"12px",background:"#FFF",borderRadius:"6px",overflow:"hidden"},children:t("div",{style:{height:"100%",background:"#7DB5FA",width:_.previewUrl?`${U}%`:`${Math.min(B/1e4*100,100)}%`,transition:"width 0.1s linear"}})}),e("div",{style:{color:"#FFF",fontSize:"20px",fontWeight:600,fontFamily:'"SVN-Volte Rounded", sans-serif',width:"60px",textAlign:"right",letterSpacing:"1px"},children:["00:",(_.previewUrl?M||0:Math.min(Math.floor(B/1e3),10)).toString().padStart(2,"0")]})]})]}),t("div",{className:l.stepButtonContainer,children:_.previewUrl?t("div",{className:"transition-transform "+(!k&&W?"cursor-pointer hover:scale-[1.02] active:scale-[0.98]":"cursor-not-allowed opacity-70 grayscale"),tabIndex:!k&&W?0:-1,onClick:!k&&W?w:void 0,children:t(a,{src:u,alt:"Bắt đầu bài thi",style:{width:"280px",height:"auto"}})}):t("div",{className:"transition-transform "+(W?"cursor-pointer hover:scale-[1.02] active:scale-[0.98]":"cursor-not-allowed opacity-70 grayscale"),tabIndex:W?0:-1,onClick:W?"recording"===_.status?_.stopRecording:_.startRecording:void 0,children:t(a,{src:"recording"===_.status?v:g,alt:"recording"===_.status?"Dừng kiểm tra":"Kiểm tra mic",style:{width:"280px",height:"auto"}})})})]})]})})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import Image from 'next/image';
+import { toast } from 'sonner';
+import { SummerSkyLayout } from './SummerSkyLayout';
+import { useSpeakingRecorder } from '../../../components/exams/take/hooks/useSpeakingRecorder';
+import styles from './assets/styles/SummerSkyWaitingRoom.module.css';
+import instructionStepImg from './assets/images/instruction-step.png';
+import mascotImg from './assets/images/oceanedu-mascot.png';
+import radioCheckImg from './assets/images/radio-check.png';
+import nextBtnImg from './assets/images/next-btn.png';
+import startExamImg from './assets/images/start-exam.png';
+import checkMicBtnImg from './assets/images/check-mic-btn.png';
+import stopMicImg from './assets/images/stop-mic.png';
+import micIconImg from './assets/images/mic-icon.png';
+import audioIconImg from './assets/images/audio-icon.png';
+const INSTRUCTION_VIDEO_SRC = '/speaking/video/instruction.webm';
+const CHECK_MICROPHONE_VIDEO_SRC = '/speaking/video/check_microphone.webm';
+const TEACHER_VIDEO_PLAYBACK_RATE = 1.25;
+export function SummerSkyWaitingRoom({ room, onStart, isStarting, onExit }) {
+    const [step, setStep] = useState('instructions');
+    const [progressMs, setProgressMs] = useState(0);
+    // Playback state for after recording
+    const audioRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [playProgress, setPlayProgress] = useState(0);
+    const [totalDurationSec, setTotalDurationSec] = useState(null);
+    // Teacher video
+    const teacherVideoRef = useRef(null);
+    const [teacherVideoEnded, setTeacherVideoEnded] = useState(false);
+    const skipWaitingRoomAudio = process.env.NEXT_PUBLIC_SKIP_WAITING_ROOM_AUDIO === 'true';
+    const canProceed = teacherVideoEnded || skipWaitingRoomAudio;
+    useEffect(() => {
+        const video = teacherVideoRef.current;
+        if (!video)
+            return;
+        video.muted = false;
+        video.playbackRate = TEACHER_VIDEO_PLAYBACK_RATE;
+        const playPromise = video.play();
+        if (playPromise !== undefined) {
+            playPromise.catch(() => {
+                // Autoplay with sound blocked by browser — mute and retry.
+                if (teacherVideoRef.current) {
+                    teacherVideoRef.current.muted = true;
+                    teacherVideoRef.current.playbackRate = TEACHER_VIDEO_PLAYBACK_RATE;
+                    // Guard the retry: if the source is still unplayable (e.g. unsupported
+                    // codec), play() rejects again — swallow it so it never surfaces as an
+                    // unhandledrejection. The <video> onError handler lets the user proceed.
+                    const retryPromise = teacherVideoRef.current.play();
+                    if (retryPromise !== undefined) {
+                        retryPromise.catch(() => {
+                            setTeacherVideoEnded(true);
+                        });
+                    }
+                }
+            });
+        }
+    }, [step]);
+    // Reset video state when switching steps so new video plays
+    useEffect(() => {
+        setTeacherVideoEnded(false);
+        if (teacherVideoRef.current) {
+            teacherVideoRef.current.currentTime = 0;
+            teacherVideoRef.current.playbackRate = TEACHER_VIDEO_PLAYBACK_RATE;
+        }
+    }, [step]);
+    const recorder = useSpeakingRecorder({
+        attemptId: 'mock-attempt-speaking',
+        questionId: 'mock-question',
+        maxDurationMs: 10000,
+        onRecordingComplete: () => { },
+        onError: (msg) => toast.error(msg),
+    });
+    useEffect(() => {
+        let interval;
+        if (recorder.status === 'recording') {
+            const startTime = Date.now();
+            interval = setInterval(() => {
+                setProgressMs(Date.now() - startTime);
+            }, 50);
+        }
+        else {
+            setProgressMs(0);
+        }
+        return () => clearInterval(interval);
+    }, [recorder.status]);
+    const examName = room.exam?.name || 'BÀI THI NÓI';
+    const formatTime = (ms) => {
+        const totalSec = Math.floor(ms / 1000);
+        const min = Math.floor(totalSec / 60);
+        const sec = totalSec % 60;
+        return `${min}:${sec.toString().padStart(2, '0')} / 0:10`;
+    };
+    const togglePlayback = (e) => {
+        e.stopPropagation();
+        if (!audioRef.current)
+            return;
+        if (isPlaying) {
+            audioRef.current.pause();
+            setIsPlaying(false);
+        }
+        else {
+            audioRef.current.play().catch(() => {
+                // Source unplayable — keep UI consistent instead of throwing.
+                setIsPlaying(false);
+            });
+            setIsPlaying(true);
+        }
+    };
+    const handleAudioTimeUpdate = () => {
+        if (audioRef.current && audioRef.current.duration) {
+            setPlayProgress((audioRef.current.currentTime / audioRef.current.duration) * 100);
+        }
+    };
+    const handleAudioEnded = () => {
+        setIsPlaying(false);
+        setPlayProgress(0);
+    };
+    return (_jsx(SummerSkyLayout, { onExit: onExit, partName: examName, instruction: "", audioUrl: "", canGoPrev: false, canGoNext: false, onPrev: () => {
+            if (step === 'mic-test')
+                setStep('instructions');
+        }, onNext: () => {
+            if (step === 'instructions')
+                setStep('mic-test');
+        }, hideAudioBar: true, hideFooterTitle: true, questionNumber: 1, recorder: null, headerRight: null, children: _jsxs("div", { className: styles.waitingRoomContainer, children: [_jsxs("div", { className: styles.teacherFloating, children: [_jsx("div", { className: styles.teacherGlow }), _jsxs("div", { style: { position: 'relative' }, children: [_jsx("video", { ref: teacherVideoRef, className: styles.teacherVideo, src: step === 'mic-test' ? CHECK_MICROPHONE_VIDEO_SRC : INSTRUCTION_VIDEO_SRC, autoPlay: true, muted: true, playsInline: true, onEnded: () => setTeacherVideoEnded(true), onError: () => {
+                                        // If the video source fails to load/decode, treat it as ended so
+                                        // the student is never stuck in the waiting room.
+                                        setTeacherVideoEnded(true);
+                                    }, style: {
+                                        opacity: teacherVideoEnded ? 0 : 1,
+                                        transition: 'opacity 0.6s ease-in-out',
+                                    } }), _jsx("img", { className: styles.teacherVideo, src: "/speaking/image/teacher_ai_smile.png", alt: "AI Teacher", style: {
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: 0,
+                                        opacity: teacherVideoEnded ? 1 : 0,
+                                        transition: 'opacity 0.6s ease-in-out',
+                                    } })] })] }), step === 'instructions' && (_jsxs("div", { className: styles.introBoard, children: [_jsx("h2", { className: styles.title, children: "H\u01B0\u1EDBng d\u1EABn chung" }), _jsx("div", { className: styles.instructionIconsWrap, style: { display: 'flex', justifyContent: 'center', width: '100%', marginBottom: '48px', marginTop: '5%' }, children: _jsx(Image, { src: instructionStepImg, alt: "H\u01B0\u1EDBng d\u1EABn c\u00E1c b\u01B0\u1EDBc", style: { width: '75%', height: 'auto', objectFit: 'contain' } }) }), _jsxs("div", { className: styles.aiBanner, children: [_jsx("div", { className: styles.aiBannerIcon, children: _jsx(Image, { src: mascotImg, alt: "OceanEdu Mascot", width: 100, height: 100, style: { borderRadius: '50%', objectFit: 'cover' } }) }), _jsxs("div", { className: styles.aiBannerContent, children: [_jsx("p", { className: styles.aiBannerTitle, children: "Y\u00EAu c\u1EA7u Ocean Edu AI Ch\u1EA5m \u0111i\u1EC3m" }), _jsx("p", { className: styles.aiBannerDesc, children: "H\u1EC7 th\u1ED1ng AI chuy\u00EAn gia s\u1EBD t\u1EF1 \u0111\u1ED9ng ch\u1EA5m \u0111i\u1EC3m b\u00E0i thi c\u1EE7a b\u1EA1n 1 c\u00E1ch ch\u00EDnh x\u00E1c v\u00E0 kh\u00E1ch quan nh\u1EA5t." })] }), _jsx("div", { className: styles.aiBannerRadio, children: _jsx(Image, { src: radioCheckImg, alt: "Radio Check", width: 56, height: 56 }) })] }), _jsx("div", { className: styles.stepButtonContainer, children: _jsx("div", { className: `transition-transform ${canProceed ? 'cursor-pointer hover:scale-[1.02] active:scale-[0.98]' : 'cursor-not-allowed opacity-50 grayscale'}`, tabIndex: canProceed ? 0 : -1, onClick: () => {
+                                    if (!canProceed)
+                                        return;
+                                    setStep('mic-test');
+                                }, children: _jsx(Image, { src: nextBtnImg, alt: "B\u01B0\u1EDBc ti\u1EBFp theo", style: { width: '280px', height: 'auto' } }) }) }), _jsx("div", { className: styles.spacer })] })), step === 'mic-test' && (_jsxs("div", { className: styles.introBoard, children: [_jsx("h2", { className: styles.title, style: { marginBottom: '40px' }, children: "KI\u1EC2M TRA MIC" }), _jsxs("div", { className: styles.micTestContainer, children: [_jsxs("div", { className: styles.micTestInstructionWrap, style: { margin: '-100px auto 48px auto', width: 'fit-content', textAlign: 'left' }, children: [_jsx("h3", { style: {
+                                                color: '#2C38B6',
+                                                fontFamily: '"SVN-Volte Rounded", sans-serif',
+                                                fontSize: '28px',
+                                                fontWeight: 700,
+                                                lineHeight: '1.5',
+                                                textTransform: 'uppercase',
+                                                marginBottom: '24px',
+                                                letterSpacing: '-0.01em'
+                                            }, children: "H\u01AF\u1EDANG D\u1EAAN" }), _jsxs("ul", { style: {
+                                                listStyle: 'none',
+                                                padding: 0,
+                                                margin: 0,
+                                                color: '#343A40',
+                                                fontFamily: '"SVN-Volte Rounded", sans-serif',
+                                                fontSize: '20px',
+                                                fontWeight: 600,
+                                                lineHeight: '1.8',
+                                                letterSpacing: '-0.01em'
+                                            }, children: [_jsx("li", { children: "1. Nh\u1EA5n n\u00FAt Ki\u1EC3m tra mic b\u00EAn d\u01B0\u1EDBi" }), _jsx("li", { children: "2. Ch\u1ECDn Cho Ph\u00E9p (Allow) khi tr\u00ECnh duy\u1EC7t y\u00EAu c\u1EA7u quy\u1EC1n truy c\u1EADp" }), _jsx("li", { children: "3. Sau khi ki\u1EC3m tra Micro th\u00E0nh c\u00F4ng, nh\u1EA5n n\u00FAt B\u1EAFt \u0111\u1EA7u b\u00E0i thi" })] })] }), _jsxs("div", { className: `transition-transform ${recorder.previewUrl ? 'cursor-pointer hover:scale-[1.02] active:scale-[0.98]' : 'cursor-default'} ${recorder.status === 'recording' ? 'animate-pulse' : ''}`, style: {
+                                        background: '#044E96',
+                                        borderRadius: '28px',
+                                        width: '700px',
+                                        height: '56px',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        cursor: recorder.previewUrl ? 'pointer' : 'default',
+                                        padding: '0 24px 0 2px',
+                                        gap: '16px',
+                                        margin: '0 auto'
+                                    }, onClick: (e) => {
+                                        if (recorder.previewUrl) {
+                                            togglePlayback(e);
+                                        }
+                                    }, children: [recorder.previewUrl && (_jsx("audio", { ref: audioRef, src: recorder.previewUrl, onTimeUpdate: handleAudioTimeUpdate, onEnded: handleAudioEnded, onLoadedMetadata: (e) => {
+                                                setTotalDurationSec(Math.round(e.target.duration));
+                                            }, style: { display: 'none' } })), recorder.previewUrl ? (_jsx(Image, { src: audioIconImg, alt: "Ph\u00E1t \u00E2m thanh", style: { width: '72px', height: '72px', objectFit: 'contain', marginLeft: '-16px' } })) : (_jsx(Image, { src: micIconImg, alt: "Microphone", style: { width: '72px', height: '72px', objectFit: 'contain', marginLeft: '-16px' } })), _jsx("div", { style: { flex: 1, height: '12px', background: '#FFF', borderRadius: '6px', overflow: 'hidden' }, children: _jsx("div", { style: {
+                                                    height: '100%',
+                                                    background: '#7DB5FA',
+                                                    width: recorder.previewUrl ? `${playProgress}%` : `${Math.min((progressMs / 10000) * 100, 100)}%`,
+                                                    transition: 'width 0.1s linear'
+                                                } }) }), _jsxs("div", { style: {
+                                                color: '#FFF',
+                                                fontSize: '20px',
+                                                fontWeight: 600,
+                                                fontFamily: '"SVN-Volte Rounded", sans-serif',
+                                                width: '60px',
+                                                textAlign: 'right',
+                                                letterSpacing: '1px'
+                                            }, children: ["00:", (recorder.previewUrl ? (totalDurationSec || 0) : Math.min(Math.floor(progressMs / 1000), 10)).toString().padStart(2, '0')] })] })] }), _jsx("div", { className: styles.stepButtonContainer, children: recorder.previewUrl ? (_jsx("div", { className: `transition-transform ${(!isStarting && canProceed) ? 'cursor-pointer hover:scale-[1.02] active:scale-[0.98]' : 'cursor-not-allowed opacity-70 grayscale'}`, tabIndex: (!isStarting && canProceed) ? 0 : -1, onClick: (!isStarting && canProceed) ? onStart : undefined, children: _jsx(Image, { src: startExamImg, alt: "B\u1EAFt \u0111\u1EA7u b\u00E0i thi", style: { width: '280px', height: 'auto' } }) })) : (_jsx("div", { className: `transition-transform ${canProceed ? 'cursor-pointer hover:scale-[1.02] active:scale-[0.98]' : 'cursor-not-allowed opacity-70 grayscale'}`, tabIndex: canProceed ? 0 : -1, onClick: canProceed ? (recorder.status === 'recording' ? recorder.stopRecording : recorder.startRecording) : undefined, children: _jsx(Image, { src: recorder.status === 'recording' ? stopMicImg : checkMicBtnImg, alt: recorder.status === 'recording' ? "Dừng kiểm tra" : "Kiểm tra mic", style: { width: '280px', height: 'auto' } }) })) })] }))] }) }));
+}

package/dist/components/themes/types.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/components/ui/alert-dialog.js

@@ -1 +1,26 @@
-"use client";import{jsx as a,jsxs as e}from"react/jsx-runtime";import*as t from"react";import*as s from"@radix-ui/react-alert-dialog";import{cn as o}from"../../shared/lib/utils";import{buttonVariants as l}from"../../components/ui/button";const d=s.Root,i=s.Trigger,r=s.Portal,m=t.forwardRef(({className:e,...t},l)=>a(s.Overlay,{className:o("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",e),...t,ref:l}));m.displayName=s.Overlay.displayName;const n=t.forwardRef(({className:t,...l},d)=>e(r,{children:[a(m,{}),a(s.Content,{ref:d,className:o("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",t),...l})]}));n.displayName=s.Content.displayName;const c=({className:e,...t})=>a("div",{className:o("flex flex-col space-y-2 text-center sm:text-left",e),...t});c.displayName="AlertDialogHeader";const f=({className:e,...t})=>a("div",{className:o("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...t});f.displayName="AlertDialogFooter";const p=t.forwardRef(({className:e,...t},l)=>a(s.Title,{ref:l,className:o("text-lg font-semibold",e),...t}));p.displayName=s.Title.displayName;const N=t.forwardRef(({className:e,...t},l)=>a(s.Description,{ref:l,className:o("text-muted-foreground text-sm",e),...t}));N.displayName=s.Description.displayName;const u=t.forwardRef(({className:e,...t},d)=>a(s.Action,{ref:d,className:o(l(),e),...t}));u.displayName=s.Action.displayName;const x=t.forwardRef(({className:e,...t},d)=>a(s.Cancel,{ref:d,className:o(l({variant:"outline"}),"mt-2 sm:mt-0",e),...t}));x.displayName=s.Cancel.displayName;export{d as AlertDialog,r as AlertDialogPortal,m as AlertDialogOverlay,i as AlertDialogTrigger,n as AlertDialogContent,c as AlertDialogHeader,f as AlertDialogFooter,p as AlertDialogTitle,N as AlertDialogDescription,u as AlertDialogAction,x as AlertDialogCancel};
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cn } from '../../shared/lib/utils';
+import { buttonVariants } from '../../components/ui/button';
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Overlay, { className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className), ...props, ref: ref })));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg', className), ...props })] })));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+const AlertDialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-2 text-center sm:text-left', className), ...props }));
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+const AlertDialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold', className), ...props })));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Description, { ref: ref, className: cn('text-muted-foreground text-sm', className), ...props })));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Action, { ref: ref, className: cn(buttonVariants(), className), ...props })));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, className: cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className), ...props })));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/ui/alert.js

@@ -1 +1,22 @@
-import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{cva as r}from"class-variance-authority";import{cn as a}from"../../shared/lib/utils";const s=r("relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",{variants:{variant:{default:"bg-background text-foreground",destructive:"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"}},defaultVariants:{variant:"default"}}),i=t.forwardRef(({className:t,variant:r,...i},l)=>e("div",{ref:l,role:"alert",className:a(s({variant:r}),t),...i}));i.displayName="Alert";const l=t.forwardRef(({className:t,...r},s)=>e("h5",{ref:s,className:a("mb-1 font-medium leading-none tracking-tight",t),...r}));l.displayName="AlertTitle";const d=t.forwardRef(({className:t,...r},s)=>e("div",{ref:s,className:a("text-sm [&_p]:leading-relaxed",t),...r}));d.displayName="AlertDescription";export{i as Alert,l as AlertTitle,d as AlertDescription};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../shared/lib/utils";
+const alertVariants = cva("relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", {
+    variants: {
+        variant: {
+            default: "bg-background text-foreground",
+            destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (_jsx("div", { ref: ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props })));
+Alert.displayName = "Alert";
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h5", { ref: ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })));
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })));
+AlertDescription.displayName = "AlertDescription";
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/avatar.js

@@ -1 +1,12 @@
-"use client";import{jsx as a}from"react/jsx-runtime";import*as e from"react";import*as l from"@radix-ui/react-avatar";import{cn as s}from"../../shared/lib/utils";const r=e.forwardRef(({className:e,...r},m)=>a(l.Root,{ref:m,className:s("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",e),...r}));r.displayName=l.Root.displayName;const m=e.forwardRef(({className:e,...r},m)=>a(l.Image,{ref:m,className:s("aspect-square h-full w-full",e),...r}));m.displayName=l.Image.displayName;const t=e.forwardRef(({className:e,...r},m)=>a(l.Fallback,{ref:m,className:s("bg-muted flex h-full w-full items-center justify-center rounded-full",e),...r}));t.displayName=l.Fallback.displayName;export{r as Avatar,m as AvatarImage,t as AvatarFallback};
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '../../shared/lib/utils';
+const Avatar = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className), ...props })));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn('aspect-square h-full w-full', className), ...props })));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn('bg-muted flex h-full w-full items-center justify-center rounded-full', className), ...props })));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { Avatar, AvatarImage, AvatarFallback };