Updated the yarn version and recorder

2023-06-14 13:28:28 +01:00
parent efaa32cd68
commit 31e2e56833
8 changed files with 26724 additions and 3833 deletions
--- a/src/pages/test.tsx
+++ b/src/pages/test.tsx
@@ -0,0 +1,70 @@
+/* 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 {ReactMediaRecorder} from "react-media-recorder";
+
+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"});
+
+	return (
+		<>
+			<Head>
+				<title>Exam | IELTS GPT</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
+			{user && (
+				<main className="w-full h-[100vh] flex flex-col bg-mti-gray-smoke">
+					<Navbar user={user} />
+					<div className="h-full w-full flex py-4 pb-8 gap-2">
+						<Sidebar path="/exam" />
+						<div className="w-5/6 h-full mr-8 bg-white shadow-md rounded-2xl p-12 flex flex-col gap-12">
+							<ReactMediaRecorder
+								audio
+								askPermissionOnMount
+								render={({status, startRecording, stopRecording, mediaBlobUrl}) => (
+									<div>
+										<p>{status}</p>
+										<button onClick={startRecording}>Start Recording</button>
+										<button onClick={stopRecording}>Stop Recording</button>
+										<audio src={mediaBlobUrl} controls autoPlay loop />
+									</div>
+								)}
+							/>
+						</div>
+					</div>
+				</main>
+			)}
+		</>
+	);
+}