/* eslint-disable @next/next/no-img-element */ import Head from "next/head"; import Navbar from "@/components/Navbar"; import {ToastContainer} from "react-toastify"; import {withIronSessionSsr} from "iron-session/next"; import {sessionOptions} from "@/lib/session"; import useUser from "@/hooks/useUser"; import Sidebar from "@/components/Sidebar"; import dynamic from "next/dynamic"; import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPauseFill, BsPlayCircle, BsPlayFill, BsTrashFill} from "react-icons/bs"; import {useEffect, useState} from "react"; import Layout from "@/components/High/Layout"; const Waveform = dynamic(() => import("../components/Waveform"), {ssr: false}); const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), { ssr: false, }); export const getServerSideProps = withIronSessionSsr(({req, res}) => { const user = req.session.user; if (!user) { res.setHeader("location", "/login"); res.statusCode = 302; res.end(); return { props: { user: null, }, }; } return { props: {user: req.session.user}, }; }, sessionOptions); export default function Page() { const {user} = useUser({redirectTo: "/login"}); const [recordingDuration, setRecordingDuration] = useState(0); const [isRecording, setIsRecording] = useState(false); const [mediaBlob, setMediaBlob] = useState(); useEffect(() => { let recordingInterval: NodeJS.Timer | undefined = undefined; if (isRecording) { recordingInterval = setInterval(() => setRecordingDuration((prev) => prev + 1), 1000); } else if (recordingInterval) { clearInterval(recordingInterval); } return () => { if (recordingInterval) clearInterval(recordingInterval); }; }, [isRecording]); return ( <> Exam | IELTS GPT {user && ( setMediaBlob(blob)} render={({status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl}) => (

Record your answer:

{status === "idle" && ( <>
{status === "idle" && ( { setRecordingDuration(0); startRecording(); setIsRecording(true); }} className="h-5 w-5 text-mti-gray-cool cursor-pointer" /> )} )} {status === "recording" && ( <>
{Math.round(recordingDuration / 60) .toString(10) .padStart(2, "0")} : {Math.round(recordingDuration % 60) .toString(10) .padStart(2, "0")}
{ setIsRecording(false); pauseRecording(); }} className="text-red-500 w-8 h-8 cursor-pointer" /> { setIsRecording(false); stopRecording(); }} className="text-mti-green-light w-8 h-8 cursor-pointer" />
)} {status === "paused" && ( <>
{Math.floor(recordingDuration / 60) .toString(10) .padStart(2, "0")} : {Math.floor(recordingDuration % 60) .toString(10) .padStart(2, "0")}
{ setIsRecording(true); resumeRecording(); }} className="text-mti-green-light w-8 h-8 cursor-pointer" /> { setIsRecording(false); stopRecording(); }} className="text-mti-green-light w-8 h-8 cursor-pointer" />
)} {status === "stopped" && mediaBlobUrl && ( <>
{ setRecordingDuration(0); clearBlobUrl(); }} /> { clearBlobUrl(); setRecordingDuration(0); startRecording(); setIsRecording(true); }} className="h-5 w-5 text-mti-gray-cool cursor-pointer" />
)}
)} /> )} ); }