self-pr review

This commit is contained in:
Igor Loskutov
2025-09-12 18:34:56 -04:00
parent 1f41448e1c
commit 5d53c53db2
14 changed files with 486 additions and 886 deletions

View File

@@ -82,6 +82,9 @@ def _should_sync(room) -> bool:
return time_since_sync.total_seconds() >= room.ics_fetch_interval return time_since_sync.total_seconds() >= room.ics_fetch_interval
MEETING_DEFAULT_DURATION = timedelta(hours=1)
async def create_upcoming_meetings_for_event(event, create_window, room_id, room): async def create_upcoming_meetings_for_event(event, create_window, room_id, room):
if event.start_time <= create_window: if event.start_time <= create_window:
return return
@@ -98,7 +101,7 @@ async def create_upcoming_meetings_for_event(event, create_window, room_id, room
) )
try: try:
end_date = event.end_time or (event.start_time + timedelta(hours=1)) end_date = event.end_time or (event.start_time + MEETING_DEFAULT_DURATION)
whereby_meeting = await create_meeting( whereby_meeting = await create_meeting(
event.title or "Scheduled Meeting", event.title or "Scheduled Meeting",

View File

@@ -67,9 +67,7 @@ export default function ICSSettings({
eventsUpdated: number; eventsUpdated: number;
} | null>(null); } | null>(null);
// React Query hooks
const syncMutation = useRoomIcsSync(); const syncMutation = useRoomIcsSync();
const statusQuery = useRoomIcsStatus(roomName || null);
const fetchIntervalCollection = createListCollection({ const fetchIntervalCollection = createListCollection({
items: fetchIntervalOptions, items: fetchIntervalOptions,

View File

@@ -21,6 +21,7 @@ type Room = components["schemas"]["Room"];
type Meeting = components["schemas"]["Meeting"]; type Meeting = components["schemas"]["Meeting"];
type CalendarEventResponse = components["schemas"]["CalendarEventResponse"]; type CalendarEventResponse = components["schemas"]["CalendarEventResponse"];
import { RoomActionsMenu } from "./RoomActionsMenu"; import { RoomActionsMenu } from "./RoomActionsMenu";
import { MEETING_DEFAULT_TIME_MINUTES } from "../../../[roomName]/[meetingId]/constants";
interface RoomTableProps { interface RoomTableProps {
rooms: Room[]; rooms: Room[];
@@ -113,7 +114,9 @@ function MeetingStatus({ roomName }: { roomName: string }) {
return ( return (
<VStack gap={1} alignItems="start"> <VStack gap={1} alignItems="start">
<Badge colorScheme="orange" size="sm"> <Badge colorScheme="orange" size="sm">
{diffMinutes < 60 ? `In ${diffMinutes}m` : "Upcoming"} {diffMinutes < MEETING_DEFAULT_TIME_MINUTES
? `In ${diffMinutes}m`
: "Upcoming"}
</Badge> </Badge>
<Text fontSize="xs" color="gray.600" lineHeight={1}> <Text fontSize="xs" color="gray.600" lineHeight={1}>
{event.title || "Scheduled Meeting"} {event.title || "Scheduled Meeting"}

View File

@@ -1,5 +1,6 @@
"use client"; "use client";
import * as R from "remeda";
import { import {
Box, Box,
VStack, VStack,
@@ -22,16 +23,9 @@ import {
useRoomGetByName, useRoomGetByName,
} from "../lib/apiHooks"; } from "../lib/apiHooks";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import Link from "next/link"; import { formatDateTime, formatStartedAgo } from "../lib/timeUtils";
import {
formatDateTime,
formatCountdown,
formatStartedAgo,
} from "../lib/timeUtils";
import MeetingMinimalHeader from "../components/MeetingMinimalHeader"; import MeetingMinimalHeader from "../components/MeetingMinimalHeader";
import { MEETING_DEFAULT_TIME_MINUTES } from "./[meetingId]/constants";
// Meeting join settings
const EARLY_JOIN_MINUTES = 5; // Allow joining 5 minutes before meeting starts
type Meeting = components["schemas"]["Meeting"]; type Meeting = components["schemas"]["Meeting"];
@@ -48,13 +42,11 @@ export default function MeetingSelection({
roomName, roomName,
isOwner, isOwner,
isSharedRoom, isSharedRoom,
authLoading,
onMeetingSelect, onMeetingSelect,
onCreateUnscheduled, onCreateUnscheduled,
}: MeetingSelectionProps) { }: MeetingSelectionProps) {
const router = useRouter(); const router = useRouter();
// Use React Query hooks for data fetching
const roomQuery = useRoomGetByName(roomName); const roomQuery = useRoomGetByName(roomName);
const activeMeetingsQuery = useRoomActiveMeetings(roomName); const activeMeetingsQuery = useRoomActiveMeetings(roomName);
const joinMeetingMutation = useRoomJoinMeeting(); const joinMeetingMutation = useRoomJoinMeeting();
@@ -63,48 +55,23 @@ export default function MeetingSelection({
const room = roomQuery.data; const room = roomQuery.data;
const allMeetings = activeMeetingsQuery.data || []; const allMeetings = activeMeetingsQuery.data || [];
// Separate current ongoing meetings from upcoming meetings (created by worker, within 5 minutes)
const now = new Date(); const now = new Date();
const currentMeetings = allMeetings.filter((meeting) => { const [currentMeetings, upcomingMeetings] = R.pipe(
const startTime = new Date(meeting.start_date); allMeetings,
// Meeting is ongoing if it started and participants have joined or it's been running for a while R.partition((meeting) => {
return ( const startTime = new Date(meeting.start_date);
meeting.num_clients > 0 || now.getTime() - startTime.getTime() > 60000 // Meeting is ongoing if it started and participants have joined or it's been running for a while
); // 1 minute threshold return (
}); meeting.num_clients > 0 ||
now.getTime() - startTime.getTime() >
MEETING_DEFAULT_TIME_MINUTES * 1000
);
}),
);
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 loading = roomQuery.isLoading || activeMeetingsQuery.isLoading;
const error = roomQuery.error || activeMeetingsQuery.error; const error = roomQuery.error || activeMeetingsQuery.error;
const handleJoinMeeting = async (meetingId: string) => {
try {
const meeting = await joinMeetingMutation.mutateAsync({
params: {
path: {
room_name: roomName,
meeting_id: meetingId,
},
},
});
onMeetingSelect(meeting);
} catch (err) {
console.error("Failed to join meeting:", err);
// Handle error appropriately since we don't have setError anymore
}
};
const handleJoinUpcoming = async (meeting: Meeting) => { const handleJoinUpcoming = async (meeting: Meeting) => {
// Join the upcoming meeting and navigate to local meeting page // Join the upcoming meeting and navigate to local meeting page
try { try {
@@ -167,13 +134,6 @@ export default function MeetingSelection({
); );
} }
// Generate display name for room
const displayName = room?.name || roomName;
const roomTitle =
displayName.endsWith("'s") || displayName.endsWith("s")
? `${displayName} Room`
: `${displayName}'s Room`;
const handleLeaveMeeting = () => { const handleLeaveMeeting = () => {
router.push("/"); router.push("/");
}; };
@@ -244,7 +204,8 @@ export default function MeetingSelection({
<HStack> <HStack>
<Icon as={FaClock} boxSize="20px" /> <Icon as={FaClock} boxSize="20px" />
<Text> <Text>
Started {formatStartedAgo(meeting.start_date)} Started{" "}
{formatStartedAgo(new Date(meeting.start_date))}
</Text> </Text>
</HStack> </HStack>
</HStack> </HStack>
@@ -356,7 +317,7 @@ export default function MeetingSelection({
</Badge> </Badge>
<Text fontSize="sm" color="gray.600"> <Text fontSize="sm" color="gray.600">
Starts: {formatDateTime(meeting.start_date)} Starts: {formatDateTime(new Date(meeting.start_date))}
</Text> </Text>
<Button <Button

View File

@@ -0,0 +1 @@
export const MEETING_DEFAULT_TIME_MINUTES = 60;

View File

@@ -1,366 +1,3 @@
"use client"; import Room from "../room";
import { useCallback, useEffect, useRef, useState } from "react"; export default Room;
import {
Box,
Button,
HStack,
Icon,
Spinner,
Text,
VStack,
} from "@chakra-ui/react";
import { useRouter } from "next/navigation";
import {
useRoomGetByName,
useRoomJoinMeeting,
useMeetingAudioConsent,
} from "../../lib/apiHooks";
import { useRecordingConsent } from "../../recordingConsentContext";
import { toaster } from "../../components/ui/toaster";
import { FaBars } from "react-icons/fa6";
import MeetingMinimalHeader from "../../components/MeetingMinimalHeader";
import type { components } from "../../reflector-api";
type Meeting = components["schemas"]["Meeting"];
// next throws even with "use client"
const useWhereby = () => {
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;
};
// Consent functionality from main branch
const useConsentWherebyFocusManagement = (
acceptButtonRef: React.RefObject<HTMLButtonElement>,
wherebyRef: React.RefObject<HTMLElement>,
) => {
const currentFocusRef = useRef<HTMLElement | null>(null);
useEffect(() => {
if (acceptButtonRef.current) {
acceptButtonRef.current.focus();
} else {
console.error(
"accept button ref not available yet for focus management - seems to be illegal state",
);
}
const handleWherebyReady = () => {
console.log("whereby ready - refocusing consent button");
currentFocusRef.current = document.activeElement as HTMLElement;
if (acceptButtonRef.current) {
acceptButtonRef.current.focus();
}
};
if (wherebyRef.current) {
wherebyRef.current.addEventListener("ready", handleWherebyReady);
} else {
console.warn(
"whereby ref not available yet for focus management - seems to be illegal state. not waiting, focus management off.",
);
}
return () => {
wherebyRef.current?.removeEventListener("ready", handleWherebyReady);
currentFocusRef.current?.focus();
};
}, []);
};
const useConsentDialog = (
meetingId: string,
wherebyRef: React.RefObject<HTMLElement>,
) => {
const { state: consentState, touch, hasConsent } = useRecordingConsent();
const [modalOpen, setModalOpen] = useState(false);
const audioConsentMutation = useMeetingAudioConsent();
const handleConsent = useCallback(
async (meetingId: string, given: boolean) => {
try {
await audioConsentMutation.mutateAsync({
params: {
path: {
meeting_id: meetingId,
},
},
body: {
consent_given: given,
},
});
touch(meetingId);
} catch (error) {
console.error("Error submitting consent:", error);
}
},
[audioConsentMutation, touch],
);
const showConsentModal = useCallback(() => {
if (modalOpen) return;
setModalOpen(true);
const toastId = toaster.create({
placement: "top",
duration: null,
render: ({ dismiss }) => {
const AcceptButton = () => {
const buttonRef = useRef<HTMLButtonElement>(null);
useConsentWherebyFocusManagement(buttonRef, wherebyRef);
return (
<Button
ref={buttonRef}
colorPalette="primary"
size="sm"
onClick={() => {
handleConsent(meetingId, true).then(() => {
/*signifies it's ok to now wait here.*/
});
dismiss();
}}
>
Yes, store the audio
</Button>
);
};
return (
<Box
p={6}
bg="rgba(255, 255, 255, 0.7)"
borderRadius="lg"
boxShadow="lg"
maxW="md"
mx="auto"
>
<VStack gap={4} alignItems="center">
<Text fontSize="md" textAlign="center" fontWeight="medium">
Can we have your permission to store this meeting's audio
recording on our servers?
</Text>
<HStack gap={4} justifyContent="center">
<Button
variant="ghost"
size="sm"
onClick={() => {
handleConsent(meetingId, false).then(() => {
/*signifies it's ok to now wait here.*/
});
dismiss();
}}
>
No, delete after transcription
</Button>
<AcceptButton />
</HStack>
</VStack>
</Box>
);
},
});
// Set modal state when toast is dismissed
toastId.then((id) => {
const checkToastStatus = setInterval(() => {
if (!toaster.isActive(id)) {
setModalOpen(false);
clearInterval(checkToastStatus);
}
}, 100);
});
// Handle escape key to close the toast
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") {
toastId.then((id) => toaster.dismiss(id));
}
};
document.addEventListener("keydown", handleKeyDown);
const cleanup = () => {
toastId.then((id) => toaster.dismiss(id));
document.removeEventListener("keydown", handleKeyDown);
};
return cleanup;
}, [meetingId, handleConsent, wherebyRef, modalOpen]);
return {
showConsentModal,
consentState,
hasConsent,
consentLoading: audioConsentMutation.isPending,
};
};
function ConsentDialogButton({
meetingId,
wherebyRef,
}: {
meetingId: string;
wherebyRef: React.RefObject<HTMLElement>;
}) {
const { showConsentModal, consentState, hasConsent, consentLoading } =
useConsentDialog(meetingId, wherebyRef);
if (!consentState.ready || hasConsent(meetingId) || consentLoading) {
return null;
}
return (
<Button
position="absolute"
top="56px"
left="8px"
zIndex={1000}
colorPalette="blue"
size="sm"
onClick={showConsentModal}
>
Meeting is being recorded
<Icon as={FaBars} ml={2} />
</Button>
);
}
const recordingTypeRequiresConsent = (
recordingType: NonNullable<Meeting["recording_type"]>,
) => {
return recordingType === "cloud";
};
interface MeetingPageProps {
params: {
roomName: string;
meetingId: string;
};
}
export default function MeetingPage({ params }: MeetingPageProps) {
const { roomName, meetingId } = params;
const router = useRouter();
const [attemptedJoin, setAttemptedJoin] = useState(false);
const wherebyLoaded = useWhereby();
const wherebyRef = useRef<HTMLElement>(null);
// Fetch room data
const roomQuery = useRoomGetByName(roomName);
const joinMeetingMutation = useRoomJoinMeeting();
const room = roomQuery.data;
const isLoading =
roomQuery.isLoading ||
(!attemptedJoin && room && !joinMeetingMutation.data);
// Try to join the meeting when room is loaded
useEffect(() => {
if (room && !attemptedJoin && !joinMeetingMutation.isPending) {
setAttemptedJoin(true);
joinMeetingMutation.mutate({
params: {
path: {
room_name: roomName,
meeting_id: meetingId,
},
},
});
}
}, [room, attemptedJoin, joinMeetingMutation, roomName, meetingId]);
// Redirect to room lobby if meeting join fails (meeting finished/not found)
useEffect(() => {
if (joinMeetingMutation.isError || roomQuery.isError) {
router.push(`/${roomName}`);
}
}, [joinMeetingMutation.isError, roomQuery.isError, router, roomName]);
// Get meeting data from join response
const meeting = joinMeetingMutation.data;
const roomUrl = meeting?.host_room_url || meeting?.room_url;
const recordingType = meeting?.recording_type;
const handleLeave = useCallback(() => {
router.push(`/${roomName}`);
}, [router, roomName]);
useEffect(() => {
if (!isLoading && !roomUrl && !wherebyLoaded) return;
wherebyRef.current?.addEventListener("leave", handleLeave);
return () => {
wherebyRef.current?.removeEventListener("leave", handleLeave);
};
}, [handleLeave, roomUrl, isLoading, wherebyLoaded]);
if (isLoading) {
return (
<Box display="flex" flexDirection="column" minH="100vh">
<MeetingMinimalHeader
roomName={roomName}
displayName={room?.name}
showLeaveButton={false}
/>
<Box
display="flex"
justifyContent="center"
alignItems="center"
flex="1"
bg="gray.50"
p={4}
>
<VStack gap={4}>
<Spinner color="blue.500" size="xl" />
<Text fontSize="lg">Loading meeting...</Text>
</VStack>
</Box>
</Box>
);
}
// If we have a successful meeting join with room URL, show Whereby embed
if (meeting && roomUrl && wherebyLoaded) {
return (
<>
<whereby-embed
ref={wherebyRef}
room={roomUrl}
style={{ width: "100vw", height: "100vh" }}
/>
{recordingType && recordingTypeRequiresConsent(recordingType) && (
<ConsentDialogButton meetingId={meetingId} wherebyRef={wherebyRef} />
)}
</>
);
}
// This return should not be reached normally since we redirect on errors
// But keeping it as a fallback
return (
<Box display="flex" flexDirection="column" minH="100vh">
<MeetingMinimalHeader roomName={roomName} displayName={room?.name} />
<Box
display="flex"
justifyContent="center"
alignItems="center"
flex="1"
bg="gray.50"
p={4}
>
<Text fontSize="lg">Meeting not available</Text>
</Box>
</Box>
);
}

View File

@@ -1,410 +1,3 @@
"use client"; import Room from "./room";
import { export default Room;
useCallback,
useEffect,
useRef,
useState,
useContext,
RefObject,
use,
} from "react";
import {
Box,
Button,
Text,
VStack,
HStack,
Spinner,
Icon,
} from "@chakra-ui/react";
import { toaster } from "../components/ui/toaster";
import { useRouter } from "next/navigation";
import { notFound } from "next/navigation";
import { useRecordingConsent } from "../recordingConsentContext";
import {
useMeetingAudioConsent,
useRoomGetByName,
useRoomActiveMeetings,
useRoomUpcomingMeetings,
useRoomsCreateMeeting,
} from "../lib/apiHooks";
import type { components } from "../reflector-api";
import MeetingSelection from "./MeetingSelection";
import useRoomMeeting from "./useRoomMeeting";
type Meeting = components["schemas"]["Meeting"];
import { FaBars } from "react-icons/fa6";
import { useAuth } from "../lib/AuthProvider";
export type RoomDetails = {
params: Promise<{
roomName: string;
}>;
};
// stages: we focus on the consent, then whereby steals focus, then we focus on the consent again, then return focus to whoever stole it initially
const useConsentWherebyFocusManagement = (
acceptButtonRef: RefObject<HTMLButtonElement>,
wherebyRef: RefObject<HTMLElement>,
) => {
const currentFocusRef = useRef<HTMLElement | null>(null);
useEffect(() => {
if (acceptButtonRef.current) {
acceptButtonRef.current.focus();
} else {
console.error(
"accept button ref not available yet for focus management - seems to be illegal state",
);
}
const handleWherebyReady = () => {
console.log("whereby ready - refocusing consent button");
currentFocusRef.current = document.activeElement as HTMLElement;
if (acceptButtonRef.current) {
acceptButtonRef.current.focus();
}
};
if (wherebyRef.current) {
wherebyRef.current.addEventListener("ready", handleWherebyReady);
} else {
console.warn(
"whereby ref not available yet for focus management - seems to be illegal state. not waiting, focus management off.",
);
}
return () => {
wherebyRef.current?.removeEventListener("ready", handleWherebyReady);
currentFocusRef.current?.focus();
};
}, []);
};
const useConsentDialog = (
meetingId: string,
wherebyRef: RefObject<HTMLElement> /*accessibility*/,
) => {
const { state: consentState, touch, hasConsent } = useRecordingConsent();
// toast would open duplicates, even with using "id=" prop
const [modalOpen, setModalOpen] = useState(false);
const audioConsentMutation = useMeetingAudioConsent();
const handleConsent = useCallback(
async (meetingId: string, given: boolean) => {
try {
await audioConsentMutation.mutateAsync({
params: {
path: {
meeting_id: meetingId,
},
},
body: {
consent_given: given,
},
});
touch(meetingId);
} catch (error) {
console.error("Error submitting consent:", error);
}
},
[audioConsentMutation, touch],
);
const showConsentModal = useCallback(() => {
if (modalOpen) return;
setModalOpen(true);
const toastId = toaster.create({
placement: "top",
duration: null,
render: ({ dismiss }) => {
const AcceptButton = () => {
const buttonRef = useRef<HTMLButtonElement>(null);
useConsentWherebyFocusManagement(buttonRef, wherebyRef);
return (
<Button
ref={buttonRef}
colorPalette="primary"
size="sm"
onClick={() => {
handleConsent(meetingId, true).then(() => {
/*signifies it's ok to now wait here.*/
});
dismiss();
}}
>
Yes, store the audio
</Button>
);
};
return (
<Box
p={6}
bg="rgba(255, 255, 255, 0.7)"
borderRadius="lg"
boxShadow="lg"
maxW="md"
mx="auto"
>
<VStack gap={4} alignItems="center">
<Text fontSize="md" textAlign="center" fontWeight="medium">
Can we have your permission to store this meeting's audio
recording on our servers?
</Text>
<HStack gap={4} justifyContent="center">
<Button
variant="ghost"
size="sm"
onClick={() => {
handleConsent(meetingId, false).then(() => {
/*signifies it's ok to now wait here.*/
});
dismiss();
}}
>
No, delete after transcription
</Button>
<AcceptButton />
</HStack>
</VStack>
</Box>
);
},
});
// Set modal state when toast is dismissed
toastId.then((id) => {
const checkToastStatus = setInterval(() => {
if (!toaster.isActive(id)) {
setModalOpen(false);
clearInterval(checkToastStatus);
}
}, 100);
});
// Handle escape key to close the toast
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") {
toastId.then((id) => toaster.dismiss(id));
}
};
document.addEventListener("keydown", handleKeyDown);
const cleanup = () => {
toastId.then((id) => toaster.dismiss(id));
document.removeEventListener("keydown", handleKeyDown);
};
return cleanup;
}, [meetingId, handleConsent, wherebyRef, modalOpen]);
return {
showConsentModal,
consentState,
hasConsent,
consentLoading: audioConsentMutation.isPending,
};
};
function ConsentDialogButton({
meetingId,
wherebyRef,
}: {
meetingId: string;
wherebyRef: React.RefObject<HTMLElement>;
}) {
const { showConsentModal, consentState, hasConsent, consentLoading } =
useConsentDialog(meetingId, wherebyRef);
if (!consentState.ready || hasConsent(meetingId) || consentLoading) {
return null;
}
return (
<Button
position="absolute"
top="56px"
left="8px"
zIndex={1000}
colorPalette="blue"
size="sm"
onClick={showConsentModal}
>
Meeting is being recorded
<Icon as={FaBars} ml={2} />
</Button>
);
}
const recordingTypeRequiresConsent = (
recordingType: NonNullable<Meeting["recording_type"]>,
) => {
return recordingType === "cloud";
};
// next throws even with "use client"
const useWhereby = () => {
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 params = use(details.params);
const wherebyLoaded = useWhereby();
const wherebyRef = useRef<HTMLElement>(null);
const roomName = params.roomName;
const meeting = useRoomMeeting(roomName);
const router = useRouter();
const auth = useAuth();
const status = auth.status;
const isAuthenticated = status === "authenticated";
// Fetch room details using React Query
const roomQuery = useRoomGetByName(roomName);
const activeMeetingsQuery = useRoomActiveMeetings(roomName);
const upcomingMeetingsQuery = useRoomUpcomingMeetings(roomName);
const createMeetingMutation = useRoomsCreateMeeting();
const room = roomQuery.data;
const activeMeetings = activeMeetingsQuery.data || [];
const upcomingMeetings = upcomingMeetingsQuery.data || [];
// For non-ICS rooms, create a meeting and get Whereby URL
const roomMeeting = useRoomMeeting(
room && !room.ics_enabled ? roomName : null,
);
const roomUrl =
roomMeeting?.response?.host_room_url || roomMeeting?.response?.room_url;
const isLoading =
status === "loading" || roomQuery.isLoading || roomMeeting?.loading;
const isOwner =
isAuthenticated && room ? auth.user?.id === room.user_id : false;
const meetingId = roomMeeting?.response?.id;
const recordingType = roomMeeting?.response?.recording_type;
const handleMeetingSelect = (selectedMeeting: Meeting) => {
// Navigate to specific meeting using path segment
router.push(`/${roomName}/${selectedMeeting.id}`);
};
const handleCreateUnscheduled = async () => {
try {
// Create a new unscheduled meeting
const newMeeting = await createMeetingMutation.mutateAsync({
params: {
path: { room_name: roomName },
},
});
handleMeetingSelect(newMeeting);
} catch (err) {
console.error("Failed to create meeting:", err);
}
};
const handleLeave = useCallback(() => {
router.push("/browse");
}, [router]);
useEffect(() => {
if (
!isLoading &&
(roomQuery.isError || roomMeeting?.error) &&
"status" in (roomQuery.error || roomMeeting?.error || {}) &&
(roomQuery.error as any)?.status === 404
) {
notFound();
}
}, [isLoading, roomQuery.error, roomMeeting?.error]);
useEffect(() => {
if (isLoading || !isAuthenticated || !roomUrl || !wherebyLoaded) return;
wherebyRef.current?.addEventListener("leave", handleLeave);
return () => {
wherebyRef.current?.removeEventListener("leave", handleLeave);
};
}, [handleLeave, roomUrl, isLoading, isAuthenticated, wherebyLoaded]);
if (isLoading) {
return (
<Box
display="flex"
justifyContent="center"
alignItems="center"
height="100vh"
bg="gray.50"
p={4}
>
<Spinner color="blue.500" size="xl" />
</Box>
);
}
if (!room) {
return (
<Box
display="flex"
justifyContent="center"
alignItems="center"
height="100vh"
bg="gray.50"
p={4}
>
<Text fontSize="lg">Room not found</Text>
</Box>
);
}
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}
/>
);
}
// For non-ICS rooms, show Whereby embed directly
return (
<>
{roomUrl && meetingId && wherebyLoaded && (
<>
<whereby-embed
ref={wherebyRef}
room={roomUrl}
style={{ width: "100vw", height: "100vh" }}
/>
{recordingType && recordingTypeRequiresConsent(recordingType) && (
<ConsentDialogButton
meetingId={meetingId}
wherebyRef={wherebyRef}
/>
)}
</>
)}
</>
);
}

390
www/app/[roomName]/room.tsx Normal file
View File

@@ -0,0 +1,390 @@
"use client";
import {
useCallback,
useEffect,
useRef,
useState,
useContext,
RefObject,
use,
} from "react";
import {
Box,
Button,
Text,
VStack,
HStack,
Spinner,
Icon,
} from "@chakra-ui/react";
import { toaster } from "../components/ui/toaster";
import { useRouter } from "next/navigation";
import { notFound } from "next/navigation";
import { useRecordingConsent } from "../recordingConsentContext";
import {
useMeetingAudioConsent,
useRoomGetByName,
useRoomActiveMeetings,
useRoomUpcomingMeetings,
useRoomsCreateMeeting,
} from "../lib/apiHooks";
import type { components } from "../reflector-api";
import MeetingSelection from "./MeetingSelection";
import useRoomMeeting from "./useRoomMeeting";
type Meeting = components["schemas"]["Meeting"];
import { FaBars } from "react-icons/fa6";
import { useAuth } from "../lib/AuthProvider";
import { useWhereby } from "../lib/wherebyClient";
export type RoomDetails = {
params: Promise<{
roomName: string;
}>;
};
// stages: we focus on the consent, then whereby steals focus, then we focus on the consent again, then return focus to whoever stole it initially
const useConsentWherebyFocusManagement = (
acceptButtonRef: RefObject<HTMLButtonElement>,
wherebyRef: RefObject<HTMLElement>,
) => {
const currentFocusRef = useRef<HTMLElement | null>(null);
useEffect(() => {
if (acceptButtonRef.current) {
acceptButtonRef.current.focus();
} else {
console.error(
"accept button ref not available yet for focus management - seems to be illegal state",
);
}
const handleWherebyReady = () => {
console.log("whereby ready - refocusing consent button");
currentFocusRef.current = document.activeElement as HTMLElement;
if (acceptButtonRef.current) {
acceptButtonRef.current.focus();
}
};
if (wherebyRef.current) {
wherebyRef.current.addEventListener("ready", handleWherebyReady);
} else {
console.warn(
"whereby ref not available yet for focus management - seems to be illegal state. not waiting, focus management off.",
);
}
return () => {
wherebyRef.current?.removeEventListener("ready", handleWherebyReady);
currentFocusRef.current?.focus();
};
}, []);
};
const useConsentDialog = (
meetingId: string,
wherebyRef: RefObject<HTMLElement> /*accessibility*/,
) => {
const { state: consentState, touch, hasConsent } = useRecordingConsent();
// toast would open duplicates, even with using "id=" prop
const [modalOpen, setModalOpen] = useState(false);
const audioConsentMutation = useMeetingAudioConsent();
const handleConsent = useCallback(
async (meetingId: string, given: boolean) => {
try {
await audioConsentMutation.mutateAsync({
params: {
path: {
meeting_id: meetingId,
},
},
body: {
consent_given: given,
},
});
touch(meetingId);
} catch (error) {
console.error("Error submitting consent:", error);
}
},
[audioConsentMutation, touch],
);
const showConsentModal = useCallback(() => {
if (modalOpen) return;
setModalOpen(true);
const toastId = toaster.create({
placement: "top",
duration: null,
render: ({ dismiss }) => {
const AcceptButton = () => {
const buttonRef = useRef<HTMLButtonElement>(null);
useConsentWherebyFocusManagement(buttonRef, wherebyRef);
return (
<Button
ref={buttonRef}
colorPalette="primary"
size="sm"
onClick={() => {
handleConsent(meetingId, true).then(() => {
/*signifies it's ok to now wait here.*/
});
dismiss();
}}
>
Yes, store the audio
</Button>
);
};
return (
<Box
p={6}
bg="rgba(255, 255, 255, 0.7)"
borderRadius="lg"
boxShadow="lg"
maxW="md"
mx="auto"
>
<VStack gap={4} alignItems="center">
<Text fontSize="md" textAlign="center" fontWeight="medium">
Can we have your permission to store this meeting's audio
recording on our servers?
</Text>
<HStack gap={4} justifyContent="center">
<Button
variant="ghost"
size="sm"
onClick={() => {
handleConsent(meetingId, false).then(() => {
/*signifies it's ok to now wait here.*/
});
dismiss();
}}
>
No, delete after transcription
</Button>
<AcceptButton />
</HStack>
</VStack>
</Box>
);
},
});
// Set modal state when toast is dismissed
toastId.then((id) => {
const checkToastStatus = setInterval(() => {
if (!toaster.isActive(id)) {
setModalOpen(false);
clearInterval(checkToastStatus);
}
}, 100);
});
// Handle escape key to close the toast
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape") {
toastId.then((id) => toaster.dismiss(id));
}
};
document.addEventListener("keydown", handleKeyDown);
const cleanup = () => {
toastId.then((id) => toaster.dismiss(id));
document.removeEventListener("keydown", handleKeyDown);
};
return cleanup;
}, [meetingId, handleConsent, wherebyRef, modalOpen]);
return {
showConsentModal,
consentState,
hasConsent,
consentLoading: audioConsentMutation.isPending,
};
};
function ConsentDialogButton({
meetingId,
wherebyRef,
}: {
meetingId: string;
wherebyRef: React.RefObject<HTMLElement>;
}) {
const { showConsentModal, consentState, hasConsent, consentLoading } =
useConsentDialog(meetingId, wherebyRef);
if (!consentState.ready || hasConsent(meetingId) || consentLoading) {
return null;
}
return (
<Button
position="absolute"
top="56px"
left="8px"
zIndex={1000}
colorPalette="blue"
size="sm"
onClick={showConsentModal}
>
Meeting is being recorded
<Icon as={FaBars} ml={2} />
</Button>
);
}
const recordingTypeRequiresConsent = (
recordingType: NonNullable<Meeting["recording_type"]>,
) => {
return recordingType === "cloud";
};
export default function Room(details: RoomDetails) {
const params = use(details.params);
const wherebyLoaded = useWhereby();
const wherebyRef = useRef<HTMLElement>(null);
const roomName = params.roomName;
useRoomMeeting(roomName);
const router = useRouter();
const auth = useAuth();
const status = auth.status;
const isAuthenticated = status === "authenticated";
const roomQuery = useRoomGetByName(roomName);
const createMeetingMutation = useRoomsCreateMeeting();
const room = roomQuery.data;
// For non-ICS rooms, create a meeting and get Whereby URL
const roomMeeting = useRoomMeeting(
room && !room.ics_enabled ? roomName : null,
);
const roomUrl =
roomMeeting?.response?.host_room_url || roomMeeting?.response?.room_url;
const isLoading =
status === "loading" || roomQuery.isLoading || roomMeeting?.loading;
const isOwner =
isAuthenticated && room ? auth.user?.id === room.user_id : false;
const meetingId = roomMeeting?.response?.id;
const recordingType = roomMeeting?.response?.recording_type;
const handleMeetingSelect = (selectedMeeting: Meeting) => {
router.push(`/${roomName}/${selectedMeeting.id}`);
};
const handleCreateUnscheduled = async () => {
try {
// Create a new unscheduled meeting
const newMeeting = await createMeetingMutation.mutateAsync({
params: {
path: { room_name: roomName },
},
});
handleMeetingSelect(newMeeting);
} catch (err) {
console.error("Failed to create meeting:", err);
}
};
const handleLeave = useCallback(() => {
router.push("/browse");
}, [router]);
useEffect(() => {
if (
!isLoading &&
(roomQuery.isError || roomMeeting?.error) &&
"status" in (roomQuery.error || roomMeeting?.error || {}) &&
(roomQuery.error as any)?.status === 404
) {
notFound();
}
}, [isLoading, roomQuery.error, roomMeeting?.error]);
useEffect(() => {
if (isLoading || !isAuthenticated || !roomUrl || !wherebyLoaded) return;
wherebyRef.current?.addEventListener("leave", handleLeave);
return () => {
wherebyRef.current?.removeEventListener("leave", handleLeave);
};
}, [handleLeave, roomUrl, isLoading, isAuthenticated, wherebyLoaded]);
if (isLoading) {
return (
<Box
display="flex"
justifyContent="center"
alignItems="center"
height="100vh"
bg="gray.50"
p={4}
>
<Spinner color="blue.500" size="xl" />
</Box>
);
}
if (!room) {
return (
<Box
display="flex"
justifyContent="center"
alignItems="center"
height="100vh"
bg="gray.50"
p={4}
>
<Text fontSize="lg">Room not found</Text>
</Box>
);
}
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}
/>
);
}
// For non-ICS rooms, show Whereby embed directly
return (
<>
{roomUrl && meetingId && wherebyLoaded && (
<>
<whereby-embed
ref={wherebyRef}
room={roomUrl}
style={{ width: "100vw", height: "100vh" }}
/>
{recordingType && recordingTypeRequiresConsent(recordingType) && (
<ConsentDialogButton
meetingId={meetingId}
wherebyRef={wherebyRef}
/>
)}
</>
)}
</>
);
}

View File

@@ -30,7 +30,6 @@ type SuccessMeeting = {
const useRoomMeeting = ( const useRoomMeeting = (
roomName: string | null | undefined, roomName: string | null | undefined,
meetingId?: string,
): ErrorMeeting | LoadingMeeting | SuccessMeeting => { ): ErrorMeeting | LoadingMeeting | SuccessMeeting => {
const [response, setResponse] = useState<Meeting | null>(null); const [response, setResponse] = useState<Meeting | null>(null);
const [reload, setReload] = useState(0); const [reload, setReload] = useState(0);
@@ -42,8 +41,6 @@ const useRoomMeeting = (
if (!roomName) return; if (!roomName) return;
// For any case where we need a meeting (with or without meetingId), // For any case where we need a meeting (with or without meetingId),
// we create a new meeting. The meetingId parameter can be used for
// additional logic in the future if needed (e.g., fetching existing meetings)
const createMeeting = async () => { const createMeeting = async () => {
try { try {
const result = await createMeetingMutation.mutateAsync({ const result = await createMeetingMutation.mutateAsync({
@@ -67,8 +64,8 @@ const useRoomMeeting = (
} }
}; };
createMeeting(); createMeeting().then(() => {});
}, [roomName, meetingId, reload]); }, [roomName, reload]);
const loading = createMeetingMutation.isPending && !response; const loading = createMeetingMutation.isPending && !response;
const error = createMeetingMutation.error as Error | null; const error = createMeetingMutation.error as Error | null;

View File

@@ -102,7 +102,7 @@ export function useTranscriptGet(transcriptId: string | null) {
{ {
params: { params: {
path: { path: {
transcript_id: transcriptId || "", transcript_id: transcriptId!,
}, },
}, },
}, },
@@ -120,7 +120,7 @@ export function useRoomGet(roomId: string | null) {
"/v1/rooms/{room_id}", "/v1/rooms/{room_id}",
{ {
params: { params: {
path: { room_id: roomId || "" }, path: { room_id: roomId! },
}, },
}, },
{ {
@@ -327,7 +327,7 @@ export function useTranscriptTopics(transcriptId: string | null) {
"/v1/transcripts/{transcript_id}/topics", "/v1/transcripts/{transcript_id}/topics",
{ {
params: { params: {
path: { transcript_id: transcriptId || "" }, path: { transcript_id: transcriptId! },
}, },
}, },
{ {
@@ -344,7 +344,7 @@ export function useTranscriptTopicsWithWords(transcriptId: string | null) {
"/v1/transcripts/{transcript_id}/topics/with-words", "/v1/transcripts/{transcript_id}/topics/with-words",
{ {
params: { params: {
path: { transcript_id: transcriptId || "" }, path: { transcript_id: transcriptId! },
}, },
}, },
{ {
@@ -365,8 +365,8 @@ export function useTranscriptTopicsWithWordsPerSpeaker(
{ {
params: { params: {
path: { path: {
transcript_id: transcriptId || "", transcript_id: transcriptId!,
topic_id: topicId || "", topic_id: topicId!,
}, },
}, },
}, },
@@ -384,7 +384,7 @@ export function useTranscriptParticipants(transcriptId: string | null) {
"/v1/transcripts/{transcript_id}/participants", "/v1/transcripts/{transcript_id}/participants",
{ {
params: { params: {
path: { transcript_id: transcriptId || "" }, path: { transcript_id: transcriptId! },
}, },
}, },
{ {
@@ -569,23 +569,18 @@ export function useMeetingDeactivate() {
const { setError } = useError(); const { setError } = useError();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
return $api.useMutation("patch", "/v1/meetings/{meeting_id}/deactivate", { return $api.useMutation("patch", `/v1/meetings/{meeting_id}/deactivate`, {
onError: (error) => { onError: (error) => {
setError(error as Error, "Failed to end meeting"); setError(error as Error, "Failed to end meeting");
}, },
onSuccess: () => { onSuccess: () => {
// Invalidate all meeting-related queries to refresh the UI
queryClient.invalidateQueries({ queryClient.invalidateQueries({
predicate: (query) => { predicate: (query) => {
const key = query.queryKey; const key = query.queryKey;
return ( return key.some(
Array.isArray(key) && (k) =>
key.some( typeof k === "string" &&
(k) => !!MEETING_LIST_PATH_PARTIALS.find((e) => k.includes(e)),
typeof k === "string" &&
(k.includes("/meetings/active") ||
k.includes("/meetings/upcoming")),
)
); );
}, },
}); });
@@ -646,7 +641,7 @@ export function useRoomGetByName(roomName: string | null) {
"/v1/rooms/name/{room_name}", "/v1/rooms/name/{room_name}",
{ {
params: { params: {
path: { room_name: roomName || "" }, path: { room_name: roomName! },
}, },
}, },
{ {
@@ -660,10 +655,10 @@ export function useRoomUpcomingMeetings(roomName: string | null) {
return $api.useQuery( return $api.useQuery(
"get", "get",
"/v1/rooms/{room_name}/meetings/upcoming", "/v1/rooms/{room_name}/meetings/upcoming" satisfies `/v1/rooms/{room_name}/${typeof MEETINGS_UPCOMING_PATH_PARTIAL}`,
{ {
params: { params: {
path: { room_name: roomName || "" }, path: { room_name: roomName! },
}, },
}, },
{ {
@@ -672,15 +667,24 @@ export function useRoomUpcomingMeetings(roomName: string | null) {
); );
} }
const MEETINGS_PATH_PARTIAL = "meetings" as const;
const MEETINGS_ACTIVE_PATH_PARTIAL = `${MEETINGS_PATH_PARTIAL}/active` as const;
const MEETINGS_UPCOMING_PATH_PARTIAL =
`${MEETINGS_PATH_PARTIAL}/upcoming` as const;
const MEETING_LIST_PATH_PARTIALS = [
MEETINGS_ACTIVE_PATH_PARTIAL,
MEETINGS_UPCOMING_PATH_PARTIAL,
];
export function useRoomActiveMeetings(roomName: string | null) { export function useRoomActiveMeetings(roomName: string | null) {
const { isAuthenticated } = useAuthReady(); const { isAuthenticated } = useAuthReady();
return $api.useQuery( return $api.useQuery(
"get", "get",
"/v1/rooms/{room_name}/meetings/active", "/v1/rooms/{room_name}/meetings/active" satisfies `/v1/rooms/{room_name}/${typeof MEETINGS_ACTIVE_PATH_PARTIAL}`,
{ {
params: { params: {
path: { room_name: roomName || "" }, path: { room_name: roomName! },
}, },
}, },
{ {
@@ -721,7 +725,7 @@ export function useRoomIcsStatus(roomName: string | null) {
"/v1/rooms/{room_name}/ics/status", "/v1/rooms/{room_name}/ics/status",
{ {
params: { params: {
path: { room_name: roomName || "" }, path: { room_name: roomName! },
}, },
}, },
{ {
@@ -738,7 +742,7 @@ export function useRoomCalendarEvents(roomName: string | null) {
"/v1/rooms/{room_name}/meetings", "/v1/rooms/{room_name}/meetings",
{ {
params: { params: {
path: { room_name: roomName || "" }, path: { room_name: roomName! },
}, },
}, },
{ {

View File

@@ -1,5 +1,4 @@
export const formatDateTime = (date: string | Date): string => { export const formatDateTime = (d: Date): string => {
const d = new Date(date);
return d.toLocaleString("en-US", { return d.toLocaleString("en-US", {
month: "short", month: "short",
day: "numeric", day: "numeric",
@@ -8,26 +7,11 @@ export const formatDateTime = (date: string | Date): string => {
}); });
}; };
export const formatCountdown = (startTime: string | Date): string => { export const formatStartedAgo = (
const now = new Date(); startTime: Date,
const start = new Date(startTime); now: Date = new Date(),
const diff = start.getTime() - now.getTime(); ): string => {
const diff = now.getTime() - startTime.getTime();
if (diff <= 0) return "Starting now";
const minutes = Math.floor(diff / 60000);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);
if (days > 0) return `Starts in ${days}d ${hours % 24}h ${minutes % 60}m`;
if (hours > 0) return `Starts in ${hours}h ${minutes % 60}m`;
return `Starts in ${minutes} minutes`;
};
export const formatStartedAgo = (startTime: string | Date): string => {
const now = new Date();
const start = new Date(startTime);
const diff = now.getTime() - start.getTime();
if (diff <= 0) return "Starting now"; if (diff <= 0) return "Starting now";

View File

@@ -0,0 +1,15 @@
import { useEffect, useState } from "react";
export const useWhereby = () => {
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;
};

View File

@@ -45,6 +45,7 @@
"react-qr-code": "^2.0.12", "react-qr-code": "^2.0.12",
"react-select-search": "^4.1.7", "react-select-search": "^4.1.7",
"redlock": "5.0.0-beta.2", "redlock": "5.0.0-beta.2",
"remeda": "^2.31.1",
"sass": "^1.63.6", "sass": "^1.63.6",
"simple-peer": "^9.11.1", "simple-peer": "^9.11.1",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",

13
www/pnpm-lock.yaml generated
View File

@@ -106,6 +106,9 @@ importers:
redlock: redlock:
specifier: 5.0.0-beta.2 specifier: 5.0.0-beta.2
version: 5.0.0-beta.2 version: 5.0.0-beta.2
remeda:
specifier: ^2.31.1
version: 2.31.1
sass: sass:
specifier: ^1.63.6 specifier: ^1.63.6
version: 1.90.0 version: 1.90.0
@@ -7645,6 +7648,12 @@ packages:
integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==, integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==,
} }
remeda@2.31.1:
resolution:
{
integrity: sha512-FRZefcuXbmCoYt8hAITAzW4t8i/RERaGk/+GtRN90eV3NHxsnRKCDIOJVrwrQ6zz77TG/Xyi9mGRfiJWT7DK1g==,
}
require-directory@2.1.1: require-directory@2.1.1:
resolution: resolution:
{ {
@@ -14510,6 +14519,10 @@ snapshots:
unified: 11.0.5 unified: 11.0.5
vfile: 6.0.3 vfile: 6.0.3
remeda@2.31.1:
dependencies:
type-fest: 4.41.0
require-directory@2.1.1: {} require-directory@2.1.1: {}
require-from-string@2.0.2: {} require-from-string@2.0.2: {}