Opt out of recording

www/app/[roomName]/page.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import "@whereby.com/browser-sdk/embed";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Button, Text, VStack, HStack } from "@chakra-ui/react";
 import useRoomMeeting from "./useRoomMeeting";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
@@ -21,13 +22,19 @@ export default function Room(details: RoomDetails) {
   const sessionReady = status !== "loading";
   const isAuthenticated = status === "authenticated";
 
+  const [consentGiven, setConsentGiven] = useState<boolean | null>(null);
+
   const roomUrl = meeting?.response?.host_room_url
     ? meeting?.response?.host_room_url
     : meeting?.response?.room_url;
 
-  const handleLeave = useCallback((e) => {
+  const handleLeave = useCallback(() => {
     router.push("/browse");
-  }, []);
+  }, [router]);
+
+  const handleConsent = (consent: boolean) => {
+    setConsentGiven(consent);
+  };
 
   useEffect(() => {
     if (!sessionReady || !isAuthenticated || !roomUrl) return;
@@ -37,7 +44,53 @@ export default function Room(details: RoomDetails) {
     return () => {
       wherebyRef.current?.removeEventListener("leave", handleLeave);
     };
-  }, [handleLeave, roomUrl]);
+  }, [handleLeave, roomUrl, sessionReady, isAuthenticated]);
+
+  if (!isAuthenticated && !consentGiven) {
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        height="100vh"
+        bg="gray.50"
+        p={4}
+      >
+        <VStack
+          spacing={6}
+          p={10}
+          width="400px"
+          bg="white"
+          borderRadius="md"
+          shadow="md"
+          textAlign="center"
+        >
+          {consentGiven === null ? (
+            <>
+              <Text fontSize="lg" fontWeight="bold">
+                This meeting may be recorded. Do you consent to being recorded?
+              </Text>
+              <HStack spacing={4}>
+                <Button variant="outline" onClick={() => handleConsent(false)}>
+                  No, I do not consent
+                </Button>
+                <Button colorScheme="blue" onClick={() => handleConsent(true)}>
+                  Yes, I consent
+                </Button>
+              </HStack>
+            </>
+          ) : (
+            <>
+              <Text fontSize="lg" fontWeight="bold">
+                You cannot join the meeting without consenting to being
+                recorded.
+              </Text>
+            </>
+          )}
+        </VStack>
+      </Box>
+    );
+  }
 
   return (
     <>