@tinyweb_dev/oe-exam-sdk 0.1.0 → 0.1.2

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

@@ -1,171 +1 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useEffect, useState, useCallback } from 'react';
-import { usePresignedFileUrl } from '../../../shared/lib/hooks/usePresignedFileUrl';
-import { useDelayedAutoPlay } from '../../../shared/lib/hooks/useDelayedAutoPlay';
-import layoutStyles from './assets/styles/SummerSkyLayout.module.css';
-import Image from 'next/image';
-import backgroundTitleImg from './assets/images/background_title.png';
-import titleTableImg from './assets/images/title_table.png';
-import { Play, Pause } from 'lucide-react';
-export function SummerSkyAudioPlayer({ audioUrl, partName = 'PART 1', onEnded, hideAudio, onPlayingChange }) {
-    const audioRef = useRef(null);
-    const { previewUrl: resolvedAudioUrl } = usePresignedFileUrl(audioUrl || undefined);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
-    const formatTime = 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')}`;
-    }, []);
-    useEffect(() => {
-        const audio = audioRef.current;
-        if (!audio)
-            return;
-        const handleEnded = () => {
-            setIsPlaying(false);
-            onPlayingChange?.(false);
-            onEnded?.();
-        };
-        const handlePlay = () => { setIsPlaying(true); onPlayingChange?.(true); };
-        const handlePause = () => { setIsPlaying(false); onPlayingChange?.(false); };
-        const handleTimeUpdate = () => {
-            setCurrentTime(audio.currentTime);
-            if (audio.duration && isFinite(audio.duration)) {
-                setDuration(audio.duration);
-            }
-        };
-        const handleLoaded = () => {
-            if (audio.duration && isFinite(audio.duration)) {
-                setDuration(audio.duration);
-            }
-        };
-        audio.addEventListener('ended', handleEnded);
-        audio.addEventListener('play', handlePlay);
-        audio.addEventListener('pause', handlePause);
-        audio.addEventListener('timeupdate', handleTimeUpdate);
-        audio.addEventListener('loadedmetadata', handleLoaded);
-        audio.addEventListener('durationchange', handleLoaded);
-        return () => {
-            audio.removeEventListener('ended', handleEnded);
-            audio.removeEventListener('play', handlePlay);
-            audio.removeEventListener('pause', handlePause);
-            audio.removeEventListener('timeupdate', handleTimeUpdate);
-            audio.removeEventListener('loadedmetadata', handleLoaded);
-            audio.removeEventListener('durationchange', handleLoaded);
-        };
-    }, [resolvedAudioUrl, onEnded]);
-    // Auto-play with a brief prep delay when a new question audio URL is loaded.
-    // Delay duration and retry-on-interaction behavior live in the shared hook.
-    useDelayedAutoPlay({ audioRef, audioUrl: resolvedAudioUrl });
-    const handlePlayPause = () => {
-        const audio = audioRef.current;
-        if (!audio)
-            return;
-        if (isPlaying) {
-            audio.pause();
-        }
-        else {
-            audio.play().catch(() => { });
-        }
-    };
-    const handleSeek = (e) => {
-        const audio = audioRef.current;
-        if (!audio)
-            return;
-        const val = parseFloat(e.target.value);
-        audio.currentTime = val;
-        setCurrentTime(val);
-    };
-    const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: layoutStyles.examAudioContainer, children: [!hideAudio && (_jsx("audio", { ref: audioRef, ...(resolvedAudioUrl ? { src: resolvedAudioUrl } : {}), preload: "metadata" })), _jsxs("div", { style: {
-                            position: 'relative',
-                            display: 'inline-block',
-                            transform: 'translateY(15px)',
-                        }, children: [_jsx(Image, { src: titleTableImg, alt: "title decoration", style: { width: '550px', height: 'auto', display: 'block', transform: 'translateY(-45px)' }, priority: true }), _jsx("div", { style: {
-                                    position: 'absolute',
-                                    top: '50%',
-                                    left: '50%',
-                                    transform: 'translate(-50%, -55%)',
-                                    zIndex: 1,
-                                    display: 'inline-block',
-                                    color: '#FFE341',
-                                    fontSize: '32px',
-                                    fontWeight: 900,
-                                    fontFamily: '"Nunito", "Open Sans", system-ui, sans-serif',
-                                    textShadow: '2px 4px 0px rgba(11, 76, 142, 0.8)',
-                                    textTransform: 'uppercase',
-                                    letterSpacing: '1.5px',
-                                    padding: '15px 80px 30px',
-                                    whiteSpace: 'nowrap',
-                                    lineHeight: 1.25,
-                                    backgroundImage: `url(${backgroundTitleImg.src})`,
-                                    backgroundSize: '100% 100%',
-                                    backgroundRepeat: 'no-repeat',
-                                    backgroundPosition: 'center center',
-                                }, children: partName })] })] }), !hideAudio && resolvedAudioUrl && (_jsxs("div", { style: {
-                    position: 'absolute',
-                    top: '50px',
-                    left: '50%',
-                    transform: 'translateX(-50%)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '10px',
-                    padding: '8px 24px',
-                    background: 'rgba(255, 255, 255, 0.95)',
-                    backdropFilter: 'blur(6px)',
-                    borderRadius: '40px',
-                    zIndex: 50,
-                    minWidth: '450px',
-                    border: '2px solid #E2E8F0',
-                }, children: [_jsx("button", { type: "button", onClick: handlePlayPause, style: {
-                            width: '32px',
-                            height: '32px',
-                            border: 'none',
-                            background: 'transparent',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            cursor: 'pointer',
-                            flexShrink: 0,
-                            padding: 0,
-                            transition: 'transform 0.15s ease',
-                        }, className: "hover:scale-110 active:scale-95", children: isPlaying ? (_jsx(Pause, { fill: "#FF6B6B", stroke: "#FF6B6B", size: 26, style: { transform: 'translateX(0px)' } })) : (_jsx(Play, { fill: "#4A90D9", stroke: "#4A90D9", size: 26, style: { transform: 'translateX(2px)' } })) }), _jsxs("div", { style: { flex: 1, position: 'relative', height: '8px' }, children: [_jsx("div", { style: {
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    right: 0,
-                                    height: '8px',
-                                    borderRadius: '0px',
-                                    background: '#E0E6ED',
-                                } }), _jsx("div", { style: {
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    height: '8px',
-                                    borderRadius: '0px',
-                                    width: `${progressPercent}%`,
-                                    background: 'linear-gradient(90deg, #4A90D9, #357ABD)',
-                                    transition: 'width 0.1s linear',
-                                } }), _jsx("input", { type: "range", min: 0, max: duration || 0, step: 0.1, value: currentTime, onChange: handleSeek, style: {
-                                    position: 'absolute',
-                                    top: '-6px',
-                                    left: 0,
-                                    width: '100%',
-                                    height: '20px',
-                                    opacity: 0,
-                                    cursor: 'pointer',
-                                    margin: 0,
-                                } })] }), _jsxs("span", { style: {
-                            fontSize: '14px',
-                            fontWeight: 700,
-                            fontFamily: '"Quicksand", sans-serif',
-                            color: '#8B95A5',
-                            minWidth: '85px',
-                            textAlign: 'right',
-                        }, children: [_jsx("span", { style: { color: '#343C55' }, children: formatTime(currentTime) }), ' / ', formatTime(duration)] })] }))] }));
-}
-//# sourceMappingURL=SummerSkyAudioPlayer.js.map
+"use client";import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useRef as i,useEffect as n,useState as a,useCallback as o}from"react";import{usePresignedFileUrl as s}from"../../../shared/lib/hooks/usePresignedFileUrl";import{useDelayedAutoPlay as d}from"../../../shared/lib/hooks/useDelayedAutoPlay";import l from"./assets/styles/SummerSkyLayout.module.css";import p from"next/image";import u from"./assets/images/background_title.png";import c from"./assets/images/title_table.png";import{Play as m,Pause as g}from"lucide-react";export function SummerSkyAudioPlayer({audioUrl:h,partName:x="PART 1",onEnded:f,hideAudio:y,onPlayingChange:v}){const b=i(null),{previewUrl:k}=s(h||void 0),[E,F]=a(!1),[S,L]=a(0),[A,w]=a(0),z=o(e=>{if(!isFinite(e)||isNaN(e))return"00:00";const t=Math.floor(e/60),r=Math.floor(e%60);return`${t.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`},[]);n(()=>{const e=b.current;if(!e)return;const t=()=>{F(!1),v?.(!1),f?.()},r=()=>{F(!0),v?.(!0)},i=()=>{F(!1),v?.(!1)},n=()=>{L(e.currentTime),e.duration&&isFinite(e.duration)&&w(e.duration)},a=()=>{e.duration&&isFinite(e.duration)&&w(e.duration)};return e.addEventListener("ended",t),e.addEventListener("play",r),e.addEventListener("pause",i),e.addEventListener("timeupdate",n),e.addEventListener("loadedmetadata",a),e.addEventListener("durationchange",a),()=>{e.removeEventListener("ended",t),e.removeEventListener("play",r),e.removeEventListener("pause",i),e.removeEventListener("timeupdate",n),e.removeEventListener("loadedmetadata",a),e.removeEventListener("durationchange",a)}},[k,f]),d({audioRef:b,audioUrl:k});const B=A>0?S/A*100:0;return t(r,{children:[t("div",{className:l.examAudioContainer,children:[!y&&e("audio",{ref:b,...k?{src:k}:{},preload:"metadata"}),t("div",{style:{position:"relative",display:"inline-block",transform:"translateY(15px)"},children:[e(p,{src:c,alt:"title decoration",style:{width:"550px",height:"auto",display:"block",transform:"translateY(-45px)"},priority:!0}),e("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -55%)",zIndex:1,display:"inline-block",color:"#FFE341",fontSize:"32px",fontWeight:900,fontFamily:'"Nunito", "Open Sans", system-ui, sans-serif',textShadow:"2px 4px 0px rgba(11, 76, 142, 0.8)",textTransform:"uppercase",letterSpacing:"1.5px",padding:"15px 80px 30px",whiteSpace:"nowrap",lineHeight:1.25,backgroundImage:`url(${u.src})`,backgroundSize:"100% 100%",backgroundRepeat:"no-repeat",backgroundPosition:"center center"},children:x})]})]}),!y&&k&&t("div",{style:{position:"absolute",top:"50px",left:"50%",transform:"translateX(-50%)",display:"flex",alignItems:"center",gap:"10px",padding:"8px 24px",background:"rgba(255, 255, 255, 0.95)",backdropFilter:"blur(6px)",borderRadius:"40px",zIndex:50,minWidth:"450px",border:"2px solid #E2E8F0"},children:[e("button",{type:"button",onClick:()=>{const e=b.current;e&&(E?e.pause():e.play().catch(()=>{}))},style:{width:"32px",height:"32px",border:"none",background:"transparent",display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer",flexShrink:0,padding:0,transition:"transform 0.15s ease"},className:"hover:scale-110 active:scale-95",children:E?e(g,{fill:"#FF6B6B",stroke:"#FF6B6B",size:26,style:{transform:"translateX(0px)"}}):e(m,{fill:"#4A90D9",stroke:"#4A90D9",size:26,style:{transform:"translateX(2px)"}})}),t("div",{style:{flex:1,position:"relative",height:"8px"},children:[e("div",{style:{position:"absolute",top:0,left:0,right:0,height:"8px",borderRadius:"0px",background:"#E0E6ED"}}),e("div",{style:{position:"absolute",top:0,left:0,height:"8px",borderRadius:"0px",width:`${B}%`,background:"linear-gradient(90deg, #4A90D9, #357ABD)",transition:"width 0.1s linear"}}),e("input",{type:"range",min:0,max:A||0,step:.1,value:S,onChange:e=>{const t=b.current;if(!t)return;const r=parseFloat(e.target.value);t.currentTime=r,L(r)},style:{position:"absolute",top:"-6px",left:0,width:"100%",height:"20px",opacity:0,cursor:"pointer",margin:0}})]}),t("span",{style:{fontSize:"14px",fontWeight:700,fontFamily:'"Quicksand", sans-serif',color:"#8B95A5",minWidth:"85px",textAlign:"right"},children:[e("span",{style:{color:"#343C55"},children:z(S)})," / ",z(A)]})]})]})}

package/dist/components/themes/summer-sky/SummerSkyLayout.d.ts

@@ -1,3 +1,2 @@
 import type { SpeakingLayoutProps } from '../types';
 export declare 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, }: SpeakingLayoutProps): import("react").JSX.Element;
-//# sourceMappingURL=SummerSkyLayout.d.ts.map

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

@@ -1,222 +1 @@
-'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',
-                            } })] }) }))] }));
-}
-//# sourceMappingURL=SummerSkyLayout.js.map
+"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"}})]})})]})}

package/dist/components/themes/summer-sky/SummerSkySubmitModal.d.ts

@@ -6,4 +6,3 @@ interface SummerSkySubmitModalProps {
 }
 export declare function SummerSkySubmitModal({ onClose, onSubmit, isSubmitting }: SummerSkySubmitModalProps): React.JSX.Element;
 export {};
-//# sourceMappingURL=SummerSkySubmitModal.d.ts.map

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

@@ -1,19 +1 @@
-'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" })] })] }) }) }));
-}
-//# sourceMappingURL=SummerSkySubmitModal.js.map
+"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"})]})]})})})}

package/dist/components/themes/summer-sky/SummerSkyWaitingRoom.d.ts

@@ -7,4 +7,3 @@ interface SummerSkyWaitingRoomProps {
 }
 export declare function SummerSkyWaitingRoom({ room, onStart, isStarting, onExit }: SummerSkyWaitingRoomProps): import("react").JSX.Element;
 export {};
-//# sourceMappingURL=SummerSkyWaitingRoom.d.ts.map