feat: improve calendar integration and meeting UI

- Refactor ICS sync tasks to use @asynctask decorator for cleaner async handling
- Extract meeting creation logic into reusable function
- Improve meeting selection UI with distinct current/upcoming sections
- Add early join functionality for upcoming meetings within 5-minute window
- Simplify non-ICS room workflow with direct Whereby embed
- Fix import paths and component organization

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

server/reflector/worker/ics_sync.py

@@ -4,7 +4,9 @@ import structlog
 from celery import shared_task
 from celery.utils.log import get_task_logger
 
+from reflector.asynctask import asynctask
 from reflector.db import get_database
+from reflector.db.calendar_events import calendar_events_controller
 from reflector.db.meetings import meetings_controller
 from reflector.db.rooms import rooms, rooms_controller
 from reflector.services.ics_sync import ics_sync_service
@@ -14,11 +16,8 @@ logger = structlog.wrap_logger(get_task_logger(__name__))
 
 
 @shared_task
-def sync_room_ics(room_id: str):
+@asynctask
-    asynctask(_sync_room_ics_async(room_id))
+async def sync_room_ics(room_id: str):
-
-
-async def _sync_room_ics_async(room_id: str):
     try:
         room = await rooms_controller.get_by_id(room_id)
         if not room:
@@ -55,11 +54,8 @@ async def _sync_room_ics_async(room_id: str):
 
 
 @shared_task
-def sync_all_ics_calendars():
+@asynctask
-    asynctask(_sync_all_ics_calendars_async())
+async def sync_all_ics_calendars():
-
-
-async def _sync_all_ics_calendars_async():
     try:
         logger.info("Starting sync for all ICS-enabled rooms")
 
@@ -99,43 +95,14 @@ def _should_sync(room) -> bool:
     return time_since_sync.total_seconds() >= room.ics_fetch_interval
 
 
-@shared_task
+async def create_upcoming_meetings_for_event(event, create_window, room_id, room):
-def pre_create_upcoming_meetings():
+    if event.start_time <= create_window:
-    asynctask(_pre_create_upcoming_meetings_async())
+        return
+    existing_meeting = await meetings_controller.get_by_calendar_event(event.id)
 
+    if existing_meeting:
+        return
 
-async def _pre_create_upcoming_meetings_async():
-    try:
-        logger.info("Starting pre-creation of upcoming meetings")
-
-        from reflector.db.calendar_events import calendar_events_controller
-
-        # Get ALL rooms with ICS enabled
-        query = rooms.select().where(
-            rooms.c.ics_enabled == True, rooms.c.ics_url != None
-        )
-        all_rooms = await get_database().fetch_all(query)
-        now = datetime.now(timezone.utc)
-        pre_create_window = now + timedelta(minutes=1)
-
-        for room_data in all_rooms:
-            room_id = room_data["id"]
-            room = await rooms_controller.get_by_id(room_id)
-
-            if not room:
-                continue
-
-            events = await calendar_events_controller.get_upcoming(
-                room_id, minutes_ahead=2
-            )
-
-            for event in events:
-                if event.start_time <= pre_create_window:
-                    existing_meeting = await meetings_controller.get_by_calendar_event(
-                        event.id
-                    )
-
-                    if not existing_meeting:
     logger.info(
         "Pre-creating meeting for calendar event",
         room_id=room_id,
@@ -144,30 +111,22 @@ async def _pre_create_upcoming_meetings_async():
     )
 
     try:
-                            end_date = event.end_time or (
+        end_date = event.end_time or (event.start_time + timedelta(hours=1))
-                                event.start_time + timedelta(hours=1)
-                            )
 
         whereby_meeting = await create_meeting(
             event.title or "Scheduled Meeting",
             end_date=end_date,
             room=room,
         )
-                            await upload_logo(
+        await upload_logo(whereby_meeting["roomName"], "./images/logo.png")
-                                whereby_meeting["roomName"], "./images/logo.png"
-                            )
 
         meeting = await meetings_controller.create(
             id=whereby_meeting["meetingId"],
             room_name=whereby_meeting["roomName"],
             room_url=whereby_meeting["roomUrl"],
             host_room_url=whereby_meeting["hostRoomUrl"],
-                                start_date=datetime.fromisoformat(
+            start_date=datetime.fromisoformat(whereby_meeting["startDate"]),
-                                    whereby_meeting["startDate"]
+            end_date=datetime.fromisoformat(whereby_meeting["endDate"]),
-                                ),
-                                end_date=datetime.fromisoformat(
-                                    whereby_meeting["endDate"]
-                                ),
             user_id=room.user_id,
             room=room,
             calendar_event_id=event.id,
@@ -192,18 +151,36 @@ async def _pre_create_upcoming_meetings_async():
             error=str(e),
         )
 
+
+@shared_task
+@asynctask
+async def create_upcoming_meetings():
+    try:
+        logger.info("Starting creation of upcoming meetings")
+
+        # Get ALL rooms with ICS enabled
+        query = rooms.select().where(
+            rooms.c.ics_enabled == True, rooms.c.ics_url != None
+        )
+        all_rooms = await get_database().fetch_all(query)
+        now = datetime.now(timezone.utc)
+        create_window = now - timedelta(minutes=6)
+
+        for room_data in all_rooms:
+            room_id = room_data["id"]
+            room = await rooms_controller.get_by_id(room_id)
+
+            if not room:
+                continue
+
+            events = await calendar_events_controller.get_upcoming(
+                room_id,
+                minutes_ahead=7,
+            )
+
+            for event in events:
+                await create_upcoming_meetings_for_event(event)
         logger.info("Completed pre-creation check for upcoming meetings")
 
     except Exception as e:
-        logger.error("Error in pre_create_upcoming_meetings", error=str(e))
+        logger.error("Error in create_upcoming_meetings", error=str(e))
-
-
-def asynctask(coro):
-    import asyncio
-
-    loop = asyncio.new_event_loop()
-    asyncio.set_event_loop(loop)
-    try:
-        return loop.run_until_complete(coro)
-    finally:
-        loop.close()

www/app/[roomName]/MeetingSelection.tsx

@@ -17,7 +17,6 @@ import { LuX } from "react-icons/lu";
 import type { components } from "../reflector-api";
 import {
   useRoomActiveMeetings,
-  useRoomUpcomingMeetings,
   useRoomJoinMeeting,
   useMeetingDeactivate,
   useRoomGetByName,
@@ -31,13 +30,16 @@ import {
 } from "../lib/timeUtils";
 import MinimalHeader from "../components/MinimalHeader";
 
+// Meeting join settings
+const EARLY_JOIN_MINUTES = 5; // Allow joining 5 minutes before meeting starts
+
 type Meeting = components["schemas"]["Meeting"];
-type CalendarEventResponse = components["schemas"]["CalendarEventResponse"];
 
 interface MeetingSelectionProps {
   roomName: string;
   isOwner: boolean;
   isSharedRoom: boolean;
+  authLoading: boolean;
   onMeetingSelect: (meeting: Meeting) => void;
   onCreateUnscheduled: () => void;
 }
@@ -46,6 +48,7 @@ export default function MeetingSelection({
   roomName,
   isOwner,
   isSharedRoom,
+  authLoading,
   onMeetingSelect,
   onCreateUnscheduled,
 }: MeetingSelectionProps) {
@@ -54,20 +57,36 @@ export default function MeetingSelection({
   // Use React Query hooks for data fetching
   const roomQuery = useRoomGetByName(roomName);
   const activeMeetingsQuery = useRoomActiveMeetings(roomName);
-  const upcomingMeetingsQuery = useRoomUpcomingMeetings(roomName);
   const joinMeetingMutation = useRoomJoinMeeting();
   const deactivateMeetingMutation = useMeetingDeactivate();
 
   const room = roomQuery.data;
+  const allMeetings = activeMeetingsQuery.data || [];
 
-  const activeMeetings = activeMeetingsQuery.data || [];
+  // Separate current ongoing meetings from upcoming meetings (created by worker, within 5 minutes)
-  const upcomingEvents = upcomingMeetingsQuery.data || [];
+  const now = new Date();
-  const loading =
+  const currentMeetings = allMeetings.filter((meeting) => {
-    roomQuery.isLoading ||
+    const startTime = new Date(meeting.start_date);
-    activeMeetingsQuery.isLoading ||
+    // Meeting is ongoing if it started and participants have joined or it's been running for a while
-    upcomingMeetingsQuery.isLoading;
+    return (
-  const error =
+      meeting.num_clients > 0 || now.getTime() - startTime.getTime() > 60000
-    roomQuery.error || activeMeetingsQuery.error || upcomingMeetingsQuery.error;
+    ); // 1 minute threshold
+  });
+
+  const upcomingMeetings = allMeetings.filter((meeting) => {
+    const startTime = new Date(meeting.start_date);
+    const minutesUntilStart = Math.floor(
+      (startTime.getTime() - now.getTime()) / (1000 * 60),
+    );
+    // Show meetings that start within 5 minutes and haven't started yet
+    return (
+      minutesUntilStart <= EARLY_JOIN_MINUTES &&
+      minutesUntilStart > 0 &&
+      meeting.num_clients === 0
+    );
+  });
+  const loading = roomQuery.isLoading || activeMeetingsQuery.isLoading;
+  const error = roomQuery.error || activeMeetingsQuery.error;
 
   const handleJoinMeeting = async (meetingId: string) => {
     try {
@@ -86,9 +105,26 @@ export default function MeetingSelection({
     }
   };
 
-  const handleJoinUpcoming = async (event: CalendarEventResponse) => {
+  const handleJoinUpcoming = async (meeting: Meeting) => {
-    // Create an unscheduled meeting for this calendar event
+    // Join the upcoming meeting directly
-    onCreateUnscheduled();
+    try {
+      await joinMeetingMutation.mutateAsync({
+        params: {
+          path: {
+            room_name: roomName,
+            meeting_id: meeting.id,
+          },
+        },
+      });
+      handleJoinDirect(meeting.room_url);
+    } catch (err) {
+      console.error("Failed to join upcoming meeting:", err);
+    }
+  };
+
+  const handleJoinDirect = (roomUrl: string) => {
+    // Go directly to the meeting URL (Whereby/etc)
+    window.open(roomUrl, "_blank");
   };
 
   const handleEndMeeting = async (meetingId: string) => {
@@ -158,73 +194,93 @@ export default function MeetingSelection({
         px={6}
         py={8}
         flex="1"
+        gap={6}
       >
-        {/* Active Meetings */}
+        {/* Current Ongoing Meetings - BIG DISPLAY */}
-        {activeMeetings.length > 0 && (
+        {currentMeetings.length > 0 && (
-          <VStack align="stretch" gap={4} mb={6}>
+          <VStack align="stretch" gap={6} mb={8}>
-            <Text fontSize="md" fontWeight="semibold" color="gray.700">
+            <Text fontSize="xl" fontWeight="bold" color="gray.800">
-              Active Meetings
+              Live Meeting{currentMeetings.length > 1 ? "s" : ""}
             </Text>
-            {activeMeetings.map((meeting) => (
+            {currentMeetings.map((meeting) => (
               <Box
                 key={meeting.id}
                 width="100%"
-                bg="white"
+                bg="blue.50"
-                border="1px solid"
+                border="3px solid"
-                borderColor="gray.200"
+                borderColor="blue.300"
-                borderRadius="md"
+                borderRadius="xl"
-                p={4}
+                p={8}
-                _hover={{ borderColor: "gray.300" }}
+                _hover={{ borderColor: "blue.400", bg: "blue.100" }}
+                transition="all 0.2s"
+                shadow="lg"
               >
                 <HStack justify="space-between" align="start">
-                  <VStack align="start" gap={2} flex={1}>
+                  <VStack align="start" gap={4} flex={1}>
                     <HStack>
-                      <Icon as={FaCalendarAlt} color="blue.500" />
+                      <Icon
-                      <Text fontWeight="semibold">
+                        as={FaCalendarAlt}
-                        {(meeting.calendar_metadata as any)?.title || "Meeting"}
+                        color="blue.600"
+                        boxSize="24px"
+                      />
+                      <Text fontSize="2xl" fontWeight="bold" color="blue.800">
+                        {(meeting.calendar_metadata as any)?.title ||
+                          "Live Meeting"}
                       </Text>
+                      <Badge colorScheme="blue" fontSize="lg" px={4} py={2}>
+                        LIVE
+                      </Badge>
                     </HStack>
 
                     {isOwner &&
                       (meeting.calendar_metadata as any)?.description && (
-                        <Text fontSize="sm" color="gray.600">
+                        <Text fontSize="lg" color="gray.700">
                           {(meeting.calendar_metadata as any).description}
                         </Text>
                       )}
 
-                    <HStack gap={4} fontSize="sm" color="gray.500">
+                    <HStack gap={8} fontSize="md" color="gray.600">
                       <HStack>
-                        <Icon as={FaUsers} />
+                        <Icon as={FaUsers} boxSize="20px" />
-                        <Text>{meeting.num_clients} participants</Text>
+                        <Text fontWeight="medium">
+                          {meeting.num_clients} participants
+                        </Text>
                       </HStack>
                       <HStack>
-                        <Icon as={FaClock} />
+                        <Icon as={FaClock} boxSize="20px" />
                         <Text>
-                          Started {formatDateTime(meeting.start_date)}
+                          Started {formatStartedAgo(meeting.start_date)}
                         </Text>
                       </HStack>
                     </HStack>
 
                     {isOwner &&
                       (meeting.calendar_metadata as any)?.attendees && (
-                        <HStack gap={2} flexWrap="wrap">
+                        <HStack gap={3} flexWrap="wrap">
                           {(meeting.calendar_metadata as any).attendees
-                            .slice(0, 3)
+                            .slice(0, 4)
                             .map((attendee: any, idx: number) => (
                               <Badge
                                 key={idx}
-                                colorScheme="green"
+                                colorScheme="blue"
-                                fontSize="xs"
+                                fontSize="sm"
+                                px={3}
+                                py={1}
                               >
                                 {attendee.name || attendee.email}
                               </Badge>
                             ))}
                           {(meeting.calendar_metadata as any).attendees.length >
-                            3 && (
+                            4 && (
-                            <Badge colorScheme="gray" fontSize="xs">
+                            <Badge
+                              colorScheme="gray"
+                              fontSize="sm"
+                              px={3}
+                              py={1}
+                            >
                               +
                               {(meeting.calendar_metadata as any).attendees
-                                .length - 3}{" "}
+                                .length - 4}{" "}
                               more
                             </Badge>
                           )}
@@ -232,11 +288,15 @@ export default function MeetingSelection({
                       )}
                   </VStack>
 
-                  <HStack gap={2}>
+                  <VStack gap={3}>
                     <Button
                       colorScheme="blue"
-                      size="md"
+                      size="xl"
-                      onClick={() => handleJoinMeeting(meeting.id)}
+                      fontSize="lg"
+                      px={8}
+                      py={6}
+                      onClick={() => handleJoinDirect(meeting.room_url)}
+                      leftIcon={<Icon as={FaUsers} boxSize="20px" />}
                     >
                       Join Now
                     </Button>
@@ -247,113 +307,76 @@ export default function MeetingSelection({
                         size="md"
                         onClick={() => handleEndMeeting(meeting.id)}
                         isLoading={deactivateMeetingMutation.isPending}
+                        leftIcon={<Icon as={LuX} />}
                       >
-                        <Icon as={LuX} />
                         End Meeting
                       </Button>
                     )}
-                  </HStack>
+                  </VStack>
                 </HStack>
               </Box>
             ))}
           </VStack>
         )}
 
-        {/* Upcoming Meetings */}
+        {/* Upcoming Meetings - SMALLER ASIDE DISPLAY */}
-        {upcomingEvents.length > 0 && (
+        {upcomingMeetings.length > 0 && (
           <VStack align="stretch" gap={4} mb={6}>
-            <Text fontSize="md" fontWeight="semibold" color="gray.700">
+            <Text fontSize="lg" fontWeight="semibold" color="gray.700">
-              Upcoming Meetings
+              Starting Soon
             </Text>
-            {upcomingEvents.map((event) => {
+            <HStack gap={4} flexWrap="wrap">
+              {upcomingMeetings.map((meeting) => {
                 const now = new Date();
-              const startTime = new Date(event.start_time);
+                const startTime = new Date(meeting.start_date);
-              const endTime = new Date(event.end_time);
-              const isOngoing = startTime <= now && now <= endTime;
                 const minutesUntilStart = Math.floor(
                   (startTime.getTime() - now.getTime()) / (1000 * 60),
                 );
-              const canJoinEarly = minutesUntilStart <= 5; // Allow joining 5 minutes before
 
                 return (
                   <Box
-                  key={event.id}
+                    key={meeting.id}
-                  width="100%"
                     bg="white"
-                  border="1px solid"
+                    border="2px solid"
-                  borderColor="gray.200"
+                    borderColor="orange.200"
-                  borderRadius="md"
+                    borderRadius="lg"
                     p={4}
-                  _hover={{ borderColor: "gray.300" }}
+                    minW="300px"
+                    maxW="400px"
+                    _hover={{ borderColor: "orange.300", bg: "orange.50" }}
+                    transition="all 0.2s"
                   >
-                  <HStack justify="space-between" align="start">
+                    <VStack align="start" gap={3}>
-                    <VStack align="start" gap={2} flex={1}>
                       <HStack>
-                        <Icon
+                        <Icon as={FaCalendarAlt} color="orange.500" />
-                          as={FaCalendarAlt}
+                        <Text fontWeight="semibold" fontSize="md">
-                          color={isOngoing ? "blue.500" : "orange.500"}
+                          {(meeting.calendar_metadata as any)?.title ||
-                        />
+                            "Upcoming Meeting"}
-                        <Text fontWeight="semibold">
-                          {event.title || "Scheduled Meeting"}
                         </Text>
-                        <Badge
-                          colorScheme={isOngoing ? "blue" : "orange"}
-                          fontSize="xs"
-                        >
-                          {isOngoing
-                            ? formatStartedAgo(event.start_time)
-                            : formatCountdown(event.start_time)}
-                        </Badge>
                       </HStack>
 
-                      {isOwner && event.description && (
+                      <Badge colorScheme="orange" fontSize="sm" px={2} py={1}>
+                        in {minutesUntilStart} minute
+                        {minutesUntilStart !== 1 ? "s" : ""}
+                      </Badge>
+
                       <Text fontSize="sm" color="gray.600">
-                          {event.description}
+                        Starts: {formatDateTime(meeting.start_date)}
                       </Text>
-                      )}
-
-                      <HStack gap={4} fontSize="sm" color="gray.500">
-                        <Text>
-                          {formatDateTime(event.start_time)} -{" "}
-                          {formatDateTime(event.end_time)}
-                        </Text>
-                      </HStack>
-
-                      {isOwner && event.attendees && (
-                        <HStack gap={2} flexWrap="wrap">
-                          {event.attendees
-                            .slice(0, 3)
-                            .map((attendee: any, idx: number) => (
-                              <Badge
-                                key={idx}
-                                colorScheme="purple"
-                                fontSize="xs"
-                              >
-                                {attendee.name || attendee.email}
-                              </Badge>
-                            ))}
-                          {event.attendees.length > 3 && (
-                            <Badge colorScheme="gray" fontSize="xs">
-                              +{event.attendees.length - 3} more
-                            </Badge>
-                          )}
-                        </HStack>
-                      )}
-                    </VStack>
 
                       <Button
-                      variant="outline"
+                        colorScheme="orange"
-                      colorScheme={isOngoing || canJoinEarly ? "blue" : "gray"}
+                        size="sm"
-                      size="md"
+                        width="full"
-                      onClick={() => handleJoinUpcoming(event)}
+                        onClick={() => handleJoinUpcoming(meeting)}
-                      isDisabled={!isOngoing && !canJoinEarly}
                       >
-                      Join
+                        Join Early
                       </Button>
-                  </HStack>
+                    </VStack>
                   </Box>
                 );
               })}
+            </HStack>
           </VStack>
         )}
 
@@ -374,8 +397,8 @@ export default function MeetingSelection({
           </Box>
         )}
 
-        {/* Message for non-owners of private rooms */}
+        {/* Message for non-owners of private rooms - only show when auth is not loading */}
-        {!isOwner && !isSharedRoom && (
+        {!authLoading && !isOwner && !isSharedRoom && (
           <Box
             width="100%"
             bg="gray.50"

www/app/[roomName]/RoomClient.tsx

@@ -12,6 +12,12 @@ import {
 import type { components } from "../reflector-api";
 import MeetingSelection from "./MeetingSelection";
 import { useAuth } from "../lib/AuthProvider";
+import useRoomMeeting from "./useRoomMeeting";
+import dynamic from "next/dynamic";
+
+const WherebyEmbed = dynamic(() => import("../lib/WherebyWebinarEmbed"), {
+  ssr: false,
+});
 
 type Meeting = components["schemas"]["Meeting"];
 
@@ -36,11 +42,20 @@ export default function RoomClient({ params }: RoomClientProps) {
   const activeMeetings = activeMeetingsQuery.data || [];
   const upcomingMeetings = upcomingMeetingsQuery.data || [];
 
-  const isOwner =
+  // For non-ICS rooms, create a meeting and get Whereby URL
-    auth.status === "authenticated" ? auth.user?.id === room?.user_id : false;
+  const roomMeeting = useRoomMeeting(
+    room && !room.ics_enabled ? roomName : null,
+  );
+  const roomUrl =
+    roomMeeting?.response?.host_room_url || roomMeeting?.response?.room_url;
 
   const isLoading = auth.status === "loading" || roomQuery.isLoading;
 
+  const isOwner =
+    auth.status === "authenticated" && room
+      ? auth.user?.id === room.user_id
+      : false;
+
   const handleMeetingSelect = (selectedMeeting: Meeting) => {
     // Navigate to specific meeting using path segment
     router.push(`/${roomName}/${selectedMeeting.id}`);
@@ -60,14 +75,6 @@ export default function RoomClient({ params }: RoomClientProps) {
     }
   };
 
-  // For non-ICS rooms, automatically create and join meeting
-  useEffect(() => {
-    if (!room || isLoading || room.ics_enabled) return;
-
-    // Non-ICS room: create meeting automatically
-    handleCreateUnscheduled();
-  }, [room, isLoading]);
-
   // Handle room not found
   useEffect(() => {
     if (roomQuery.isError) {
@@ -105,20 +112,26 @@ export default function RoomClient({ params }: RoomClientProps) {
     );
   }
 
-  // For ICS-enabled rooms, ALWAYS show meeting selection (no auto-redirect)
+  // For ICS-enabled rooms, show meeting selection
   if (room.ics_enabled) {
     return (
       <MeetingSelection
         roomName={roomName}
         isOwner={isOwner}
         isSharedRoom={room?.is_shared || false}
+        authLoading={["loading", "refreshing"].includes(auth.status)}
         onMeetingSelect={handleMeetingSelect}
         onCreateUnscheduled={handleCreateUnscheduled}
       />
     );
   }
 
-  // Non-ICS rooms will auto-redirect via useEffect above
+  // For non-ICS rooms, show Whereby embed directly
+  if (roomUrl) {
+    return <WherebyEmbed roomUrl={roomUrl} />;
+  }
+
+  // Loading state for non-ICS rooms while creating meeting
   return (
     <Box
       display="flex"

www/app/[roomName]/useRoomMeeting.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
-import { useError } from "../../../(errors)/errorContext";
+import { useError } from "../(errors)/errorContext";
-import type { components } from "../../../reflector-api";
+import type { components } from "../reflector-api";
-import { shouldShowError } from "../../../lib/errorUtils";
+import { shouldShowError } from "../lib/errorUtils";
 
 type Meeting = components["schemas"]["Meeting"];
-import { useRoomsCreateMeeting } from "../../../lib/apiHooks";
+import { useRoomsCreateMeeting } from "../lib/apiHooks";
 import { notFound } from "next/navigation";
 
 type ErrorMeeting = {

www/app/lib/WherebyWebinarEmbed.tsx

@@ -7,12 +7,14 @@ import { toaster } from "../components/ui/toaster";
 interface WherebyEmbedProps {
   roomUrl: string;
   onLeave?: () => void;
+  isWebinar?: boolean;
 }
 
-// currently used for webinars only
+// used for both webinars and meetings
 export default function WherebyWebinarEmbed({
   roomUrl,
   onLeave,
+  isWebinar = false,
 }: WherebyEmbedProps) {
   const wherebyRef = useRef<HTMLElement>(null);
 
@@ -26,7 +28,8 @@ export default function WherebyWebinarEmbed({
           <Box p={4} bg="white" borderRadius="md" boxShadow="md">
             <HStack justifyContent="space-between" alignItems="center">
               <Text>
-                This webinar is being recorded. By continuing, you agree to our{" "}
+                This {isWebinar ? "webinar" : "meeting"} is being recorded. By
+                continuing, you agree to our{" "}
                 <Link
                   href="https://monadical.com/privacy"
                   color="blue.600"

www/app/webinars/[title]/page.tsx

@@ -150,7 +150,15 @@ export default function WebinarPage(details: WebinarDetails) {
 
   if (status === WebinarStatus.Live) {
     return (
-      <>{roomUrl && <WherebyEmbed roomUrl={roomUrl} onLeave={handleLeave} />}</>
+      <>
+        {roomUrl && (
+          <WherebyEmbed
+            roomUrl={roomUrl}
+            onLeave={handleLeave}
+            isWebinar={true}
+          />
+        )}
+      </>
     );
   }
   if (status === WebinarStatus.Ended) {