diff --git a/www/app/[roomName]/page.tsx b/www/app/[roomName]/page.tsx index b6d5cf40..d8386834 100644 --- a/www/app/[roomName]/page.tsx +++ b/www/app/[roomName]/page.tsx @@ -1,6 +1,5 @@ "use client"; -import "@whereby.com/browser-sdk/embed"; import { useCallback, useEffect, useRef, useState, useContext, RefObject } from "react"; import { Box, Button, Text, VStack, HStack, Spinner, useToast } from "@chakra-ui/react"; import useRoomMeeting from "./useRoomMeeting"; @@ -153,7 +152,21 @@ const recordingTypeRequiresConsent = (recordingType: NonNullable { + const [wherebyLoaded, setWherebyLoaded] = useState(false); + useEffect(() => { + if (typeof window !== 'undefined') { + import("@whereby.com/browser-sdk/embed").then(() => { + setWherebyLoaded(true); + }).catch(console.error.bind(console)); + } + }, []); + return wherebyLoaded; +} + export default function Room(details: RoomDetails) { + const wherebyLoaded = useWhereby(); const wherebyRef = useRef(null); const roomName = details.params.roomName; const meeting = useRoomMeeting(roomName); @@ -186,17 +199,10 @@ export default function Room(details: RoomDetails) { useEffect(() => { if (isLoading || !isAuthenticated || !roomUrl) return; - // accessibility: whereby grabs focus after its interface is loaded => we lose "esc" and keyboard control over the consent popup - const handleReady = (event: any) => { - console.log("whereby-embed ready event:", event); - }; - wherebyRef.current?.addEventListener("leave", handleLeave); - wherebyRef.current?.addEventListener("ready", handleReady); return () => { wherebyRef.current?.removeEventListener("leave", handleLeave); - wherebyRef.current?.removeEventListener("ready", handleReady); }; }, [handleLeave, roomUrl, isLoading, isAuthenticated]); @@ -224,7 +230,7 @@ export default function Room(details: RoomDetails) { return ( <> - {roomUrl && meetingId && ( + {roomUrl && meetingId && wherebyLoaded && ( <> { setResponse(result); setLoading(false); - console.debug("Meeting Loaded:", result); }) .catch((error) => { const shouldShowHuman = shouldShowError(error); diff --git a/www/app/recordingConsentContext.tsx b/www/app/recordingConsentContext.tsx index 4c2e16ad..80cf042a 100644 --- a/www/app/recordingConsentContext.tsx +++ b/www/app/recordingConsentContext.tsx @@ -36,7 +36,9 @@ export const RecordingConsentProvider: React.FC = const safeWriteToStorage = (meetingIds: string[]): void => { try { - localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(meetingIds)); + if (typeof window !== 'undefined' && window.localStorage) { + localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(meetingIds)); + } } catch (error) { console.error("Failed to save consent data to localStorage:", error); } @@ -69,6 +71,11 @@ export const RecordingConsentProvider: React.FC = // initialize on mount useEffect(() => { try { + if (typeof window === 'undefined' || !window.localStorage) { + setState({ ready: true, consentAnsweredForMeetings: new Set() }); + return; + } + const stored = localStorage.getItem(LOCAL_STORAGE_KEY); if (!stored) { setState({ ready: true, consentAnsweredForMeetings: new Set() });