mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-20 20:29:06 +00:00
571 lines
20 KiB
TypeScript
571 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { partition } from "remeda";
|
|
import {
|
|
Box,
|
|
VStack,
|
|
HStack,
|
|
Text,
|
|
Button,
|
|
Spinner,
|
|
Badge,
|
|
Icon,
|
|
Flex,
|
|
} from "@chakra-ui/react";
|
|
import React from "react";
|
|
import { FaUsers, FaClock, FaCalendarAlt, FaPlus } from "react-icons/fa";
|
|
import { LuX } from "react-icons/lu";
|
|
import type { components } from "../reflector-api";
|
|
import {
|
|
useRoomActiveMeetings,
|
|
useRoomJoinMeeting,
|
|
useMeetingDeactivate,
|
|
useRoomGetByName,
|
|
} from "../lib/apiHooks";
|
|
import { useRouter } from "next/navigation";
|
|
import { formatDateTime, formatStartedAgo } from "../lib/timeUtils";
|
|
import MeetingMinimalHeader from "../components/MeetingMinimalHeader";
|
|
import { NonEmptyString } from "../lib/utils";
|
|
import { MeetingId } from "../lib/types";
|
|
|
|
type Meeting = components["schemas"]["Meeting"];
|
|
|
|
interface MeetingSelectionProps {
|
|
roomName: NonEmptyString;
|
|
isOwner: boolean;
|
|
isSharedRoom: boolean;
|
|
authLoading: boolean;
|
|
onMeetingSelect: (meeting: Meeting) => void;
|
|
onCreateUnscheduled: () => void;
|
|
isCreatingMeeting?: boolean;
|
|
}
|
|
|
|
export default function MeetingSelection({
|
|
roomName,
|
|
isOwner,
|
|
isSharedRoom,
|
|
onMeetingSelect,
|
|
onCreateUnscheduled,
|
|
isCreatingMeeting = false,
|
|
}: MeetingSelectionProps) {
|
|
const router = useRouter();
|
|
const roomQuery = useRoomGetByName(roomName);
|
|
const activeMeetingsQuery = useRoomActiveMeetings(roomName);
|
|
const joinMeetingMutation = useRoomJoinMeeting();
|
|
const deactivateMeetingMutation = useMeetingDeactivate();
|
|
|
|
const room = roomQuery.data;
|
|
const allMeetings = activeMeetingsQuery.data || [];
|
|
|
|
const now = new Date();
|
|
const [currentMeetings, nonCurrentMeetings] = partition(
|
|
allMeetings,
|
|
(meeting) => {
|
|
const startTime = new Date(meeting.start_date);
|
|
const endTime = new Date(meeting.end_date);
|
|
// Meeting is ongoing if current time is between start and end
|
|
return now >= startTime && now <= endTime;
|
|
},
|
|
);
|
|
|
|
const upcomingMeetings = nonCurrentMeetings.filter((meeting) => {
|
|
const startTime = new Date(meeting.start_date);
|
|
// Meeting is upcoming if it hasn't started yet
|
|
return now < startTime;
|
|
});
|
|
|
|
const loading = roomQuery.isLoading || activeMeetingsQuery.isLoading;
|
|
const error = roomQuery.error || activeMeetingsQuery.error;
|
|
|
|
const handleJoinUpcoming = async (meeting: Meeting) => {
|
|
// Join the upcoming meeting and navigate to local meeting page
|
|
try {
|
|
const joinedMeeting = await joinMeetingMutation.mutateAsync({
|
|
params: {
|
|
path: {
|
|
room_name: roomName,
|
|
meeting_id: meeting.id,
|
|
},
|
|
},
|
|
});
|
|
onMeetingSelect(joinedMeeting);
|
|
} catch (err) {
|
|
console.error("Failed to join upcoming meeting:", err);
|
|
}
|
|
};
|
|
|
|
const handleJoinDirect = (meeting: Meeting) => {
|
|
// Navigate to local meeting page instead of external URL
|
|
onMeetingSelect(meeting);
|
|
};
|
|
|
|
const handleEndMeeting = async (meetingId: MeetingId) => {
|
|
try {
|
|
await deactivateMeetingMutation.mutateAsync({
|
|
params: {
|
|
path: {
|
|
meeting_id: meetingId,
|
|
},
|
|
},
|
|
});
|
|
} catch (err) {
|
|
console.error("Failed to end meeting:", err);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<Box p={8} textAlign="center">
|
|
<Spinner size="lg" color="blue.500" />
|
|
<Text mt={4}>Loading meetings...</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<Box
|
|
p={4}
|
|
borderRadius="md"
|
|
bg="red.50"
|
|
borderLeft="4px solid"
|
|
borderColor="red.400"
|
|
>
|
|
<Text fontWeight="semibold" color="red.800">
|
|
Error
|
|
</Text>
|
|
<Text color="red.700">{"Failed to load meetings"}</Text>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const handleLeaveMeeting = () => {
|
|
router.push("/");
|
|
};
|
|
|
|
return (
|
|
<Flex flexDir="column" minH="100vh" position="relative">
|
|
{/* Loading overlay */}
|
|
{isCreatingMeeting && (
|
|
<Box
|
|
position="fixed"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
bottom={0}
|
|
bg="blackAlpha.600"
|
|
zIndex={9999}
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
<VStack gap={4} p={8} bg="white" borderRadius="lg" boxShadow="xl">
|
|
<Spinner size="lg" color="blue.500" />
|
|
<Text fontSize="lg" fontWeight="medium">
|
|
Creating meeting...
|
|
</Text>
|
|
</VStack>
|
|
</Box>
|
|
)}
|
|
|
|
<MeetingMinimalHeader
|
|
roomName={roomName}
|
|
displayName={room?.name}
|
|
showLeaveButton={true}
|
|
onLeave={handleLeaveMeeting}
|
|
showCreateButton={isOwner || isSharedRoom}
|
|
onCreateMeeting={onCreateUnscheduled}
|
|
isCreatingMeeting={isCreatingMeeting}
|
|
/>
|
|
|
|
<Flex
|
|
flexDir="column"
|
|
w="full"
|
|
maxW="800px"
|
|
mx="auto"
|
|
px={{ base: 4, md: 6 }}
|
|
py={{ base: 4, md: 8 }}
|
|
flex="1"
|
|
gap={{ base: 4, md: 6 }}
|
|
>
|
|
{/* Current Ongoing Meetings - BIG DISPLAY */}
|
|
{currentMeetings.length > 0 ? (
|
|
<VStack align="stretch" gap={6} mb={8}>
|
|
{currentMeetings.map((meeting) => (
|
|
<Box
|
|
key={meeting.id}
|
|
width="100%"
|
|
bg="gray.50"
|
|
borderRadius="xl"
|
|
p={{ base: 4, md: 8 }}
|
|
>
|
|
<Flex
|
|
direction={{ base: "column", md: "row" }}
|
|
justify="space-between"
|
|
align={{ base: "stretch", md: "start" }}
|
|
gap={{ base: 4, md: 6 }}
|
|
>
|
|
<VStack align="start" gap={{ base: 3, md: 4 }} flex={1}>
|
|
<HStack>
|
|
<Icon
|
|
as={FaCalendarAlt}
|
|
color="blue.600"
|
|
boxSize="24px"
|
|
/>
|
|
<Text
|
|
fontSize={{ base: "xl", md: "2xl" }}
|
|
fontWeight="bold"
|
|
color="blue.800"
|
|
>
|
|
{(meeting.calendar_metadata as any)?.title ||
|
|
"Live Meeting"}
|
|
</Text>
|
|
</HStack>
|
|
|
|
{isOwner &&
|
|
(meeting.calendar_metadata as any)?.description && (
|
|
<Text
|
|
fontSize={{ base: "md", md: "lg" }}
|
|
color="gray.700"
|
|
>
|
|
{(meeting.calendar_metadata as any).description}
|
|
</Text>
|
|
)}
|
|
|
|
<Flex
|
|
gap={{ base: 4, md: 8 }}
|
|
fontSize={{ base: "sm", md: "md" }}
|
|
color="gray.600"
|
|
flexWrap="wrap"
|
|
>
|
|
<HStack>
|
|
<Icon
|
|
as={FaUsers}
|
|
boxSize={{ base: "16px", md: "20px" }}
|
|
/>
|
|
<Text fontWeight="medium">
|
|
{meeting.num_clients || 0} participant
|
|
{meeting.num_clients !== 1 ? "s" : ""}
|
|
</Text>
|
|
</HStack>
|
|
<HStack>
|
|
<Icon
|
|
as={FaClock}
|
|
boxSize={{ base: "16px", md: "20px" }}
|
|
/>
|
|
<Text>
|
|
{formatStartedAgo(new Date(meeting.start_date))}
|
|
</Text>
|
|
</HStack>
|
|
</Flex>
|
|
|
|
{isOwner &&
|
|
(meeting.calendar_metadata as any)?.attendees && (
|
|
<HStack gap={3} flexWrap="wrap">
|
|
{(meeting.calendar_metadata as any).attendees
|
|
.slice(0, 4)
|
|
.map((attendee: any, idx: number) => (
|
|
<Badge
|
|
key={idx}
|
|
colorScheme="blue"
|
|
fontSize="sm"
|
|
px={3}
|
|
py={1}
|
|
>
|
|
{attendee.name || attendee.email}
|
|
</Badge>
|
|
))}
|
|
{(meeting.calendar_metadata as any).attendees.length >
|
|
4 && (
|
|
<Badge
|
|
colorScheme="gray"
|
|
fontSize="sm"
|
|
px={3}
|
|
py={1}
|
|
>
|
|
+
|
|
{(meeting.calendar_metadata as any).attendees
|
|
.length - 4}{" "}
|
|
more
|
|
</Badge>
|
|
)}
|
|
</HStack>
|
|
)}
|
|
</VStack>
|
|
|
|
<VStack gap={3} width={{ base: "full", md: "auto" }}>
|
|
<Button
|
|
colorScheme="blue"
|
|
size={{ base: "lg", md: "xl" }}
|
|
fontSize={{ base: "md", md: "lg" }}
|
|
px={{ base: 6, md: 8 }}
|
|
py={{ base: 4, md: 6 }}
|
|
width={{ base: "full", md: "auto" }}
|
|
onClick={() => handleJoinDirect(meeting)}
|
|
>
|
|
<Icon
|
|
as={FaUsers}
|
|
boxSize={{ base: "18px", md: "20px" }}
|
|
me={2}
|
|
/>
|
|
Join Now
|
|
</Button>
|
|
{isOwner && (
|
|
<Button
|
|
variant="outline"
|
|
colorScheme="red"
|
|
size="md"
|
|
onClick={() => handleEndMeeting(meeting.id)}
|
|
loading={deactivateMeetingMutation.isPending}
|
|
>
|
|
<Icon as={LuX} me={2} />
|
|
End Meeting
|
|
</Button>
|
|
)}
|
|
</VStack>
|
|
</Flex>
|
|
</Box>
|
|
))}
|
|
</VStack>
|
|
) : upcomingMeetings.length > 0 ? (
|
|
/* Upcoming Meetings - BIG DISPLAY when no ongoing meetings */
|
|
<VStack align="stretch" gap={6} mb={8}>
|
|
<Text fontSize="xl" fontWeight="bold" color="gray.800">
|
|
Upcoming Meeting{upcomingMeetings.length > 1 ? "s" : ""}
|
|
</Text>
|
|
{upcomingMeetings.map((meeting) => {
|
|
const now = new Date();
|
|
const startTime = new Date(meeting.start_date);
|
|
const minutesUntilStart = Math.floor(
|
|
(startTime.getTime() - now.getTime()) / (1000 * 60),
|
|
);
|
|
|
|
return (
|
|
<Box
|
|
key={meeting.id}
|
|
width="100%"
|
|
bg="orange.50"
|
|
borderRadius="xl"
|
|
p={{ base: 4, md: 8 }}
|
|
border="2px solid"
|
|
borderColor="orange.200"
|
|
>
|
|
<Flex
|
|
direction={{ base: "column", md: "row" }}
|
|
justify="space-between"
|
|
align={{ base: "stretch", md: "start" }}
|
|
gap={{ base: 4, md: 6 }}
|
|
>
|
|
<VStack align="start" gap={{ base: 3, md: 4 }} flex={1}>
|
|
<HStack>
|
|
<Icon
|
|
as={FaCalendarAlt}
|
|
color="orange.600"
|
|
boxSize="24px"
|
|
/>
|
|
<Text
|
|
fontSize={{ base: "xl", md: "2xl" }}
|
|
fontWeight="bold"
|
|
color="orange.800"
|
|
>
|
|
{(meeting.calendar_metadata as any)?.title ||
|
|
"Upcoming Meeting"}
|
|
</Text>
|
|
</HStack>
|
|
|
|
{isOwner &&
|
|
(meeting.calendar_metadata as any)?.description && (
|
|
<Text
|
|
fontSize={{ base: "md", md: "lg" }}
|
|
color="gray.700"
|
|
>
|
|
{(meeting.calendar_metadata as any).description}
|
|
</Text>
|
|
)}
|
|
|
|
<Flex
|
|
gap={{ base: 2, md: 8 }}
|
|
fontSize={{ base: "sm", md: "md" }}
|
|
color="gray.600"
|
|
flexWrap="wrap"
|
|
align="center"
|
|
>
|
|
<Badge
|
|
colorScheme="orange"
|
|
fontSize={{ base: "sm", md: "md" }}
|
|
px={3}
|
|
py={1}
|
|
>
|
|
Starts in {minutesUntilStart} minute
|
|
{minutesUntilStart !== 1 ? "s" : ""}
|
|
</Badge>
|
|
<Text>
|
|
{formatDateTime(new Date(meeting.start_date))}
|
|
</Text>
|
|
</Flex>
|
|
|
|
{isOwner &&
|
|
(meeting.calendar_metadata as any)?.attendees && (
|
|
<HStack gap={3} flexWrap="wrap">
|
|
{(meeting.calendar_metadata as any).attendees
|
|
.slice(0, 4)
|
|
.map((attendee: any, idx: number) => (
|
|
<Badge
|
|
key={idx}
|
|
colorScheme="orange"
|
|
fontSize="sm"
|
|
px={3}
|
|
py={1}
|
|
>
|
|
{attendee.name || attendee.email}
|
|
</Badge>
|
|
))}
|
|
{(meeting.calendar_metadata as any).attendees
|
|
.length > 4 && (
|
|
<Badge
|
|
colorScheme="gray"
|
|
fontSize="sm"
|
|
px={3}
|
|
py={1}
|
|
>
|
|
+
|
|
{(meeting.calendar_metadata as any).attendees
|
|
.length - 4}{" "}
|
|
more
|
|
</Badge>
|
|
)}
|
|
</HStack>
|
|
)}
|
|
</VStack>
|
|
|
|
<VStack gap={3} width={{ base: "full", md: "auto" }}>
|
|
<Button
|
|
colorScheme="orange"
|
|
size={{ base: "lg", md: "xl" }}
|
|
fontSize={{ base: "md", md: "lg" }}
|
|
px={{ base: 6, md: 8 }}
|
|
py={{ base: 4, md: 6 }}
|
|
width={{ base: "full", md: "auto" }}
|
|
onClick={() => handleJoinUpcoming(meeting)}
|
|
>
|
|
<Icon
|
|
as={FaClock}
|
|
boxSize={{ base: "18px", md: "20px" }}
|
|
me={2}
|
|
/>
|
|
Join Early
|
|
</Button>
|
|
{isOwner && (
|
|
<Button
|
|
variant="outline"
|
|
colorScheme="red"
|
|
size="md"
|
|
onClick={() => handleEndMeeting(meeting.id)}
|
|
loading={deactivateMeetingMutation.isPending}
|
|
>
|
|
<Icon as={LuX} me={2} />
|
|
Cancel Meeting
|
|
</Button>
|
|
)}
|
|
</VStack>
|
|
</Flex>
|
|
</Box>
|
|
);
|
|
})}
|
|
</VStack>
|
|
) : null}
|
|
|
|
{/* Upcoming Meetings - SMALLER ASIDE DISPLAY when there are ongoing meetings */}
|
|
{currentMeetings.length > 0 && upcomingMeetings.length > 0 && (
|
|
<VStack align="stretch" gap={4} mb={6}>
|
|
<Text fontSize="lg" fontWeight="semibold" color="gray.700">
|
|
Starting Soon
|
|
</Text>
|
|
<Flex
|
|
gap={4}
|
|
flexWrap="wrap"
|
|
direction={{ base: "column", sm: "row" }}
|
|
>
|
|
{upcomingMeetings.map((meeting) => {
|
|
const now = new Date();
|
|
const startTime = new Date(meeting.start_date);
|
|
const minutesUntilStart = Math.floor(
|
|
(startTime.getTime() - now.getTime()) / (1000 * 60),
|
|
);
|
|
|
|
return (
|
|
<Box
|
|
key={meeting.id}
|
|
bg="white"
|
|
border="2px solid"
|
|
borderColor="orange.200"
|
|
borderRadius="lg"
|
|
p={4}
|
|
minW={{ base: "100%", sm: "300px" }}
|
|
maxW={{ base: "100%", sm: "400px" }}
|
|
_hover={{ borderColor: "orange.300", bg: "orange.50" }}
|
|
transition="all 0.2s"
|
|
>
|
|
<VStack align="start" gap={3}>
|
|
<HStack>
|
|
<Icon as={FaCalendarAlt} color="orange.500" />
|
|
<Text fontWeight="semibold" fontSize="md">
|
|
{(meeting.calendar_metadata as any)?.title ||
|
|
"Upcoming Meeting"}
|
|
</Text>
|
|
</HStack>
|
|
|
|
<Badge colorScheme="orange" fontSize="sm" px={2} py={1}>
|
|
in {minutesUntilStart} minute
|
|
{minutesUntilStart !== 1 ? "s" : ""}
|
|
</Badge>
|
|
|
|
<Text fontSize="sm" color="gray.600">
|
|
Starts: {formatDateTime(new Date(meeting.start_date))}
|
|
</Text>
|
|
|
|
<Button
|
|
colorScheme="orange"
|
|
size="sm"
|
|
width="full"
|
|
onClick={() => handleJoinUpcoming(meeting)}
|
|
>
|
|
Join Early
|
|
</Button>
|
|
</VStack>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Flex>
|
|
</VStack>
|
|
)}
|
|
|
|
{/* No meetings message - show when no ongoing or upcoming meetings */}
|
|
{currentMeetings.length === 0 && upcomingMeetings.length === 0 && (
|
|
<Flex
|
|
width="100%"
|
|
flex="1"
|
|
justify="center"
|
|
align="center"
|
|
textAlign="center"
|
|
mb={6}
|
|
>
|
|
<VStack gap={4}>
|
|
<Icon as={FaCalendarAlt} boxSize="48px" color="gray.400" />
|
|
<VStack gap={2}>
|
|
<Text fontSize="xl" fontWeight="semibold" color="black">
|
|
No meetings right now
|
|
</Text>
|
|
<Text fontSize="md" color="gray.600" maxW="400px">
|
|
There are no ongoing or upcoming meetings in this room at the
|
|
moment.
|
|
</Text>
|
|
</VStack>
|
|
</VStack>
|
|
</Flex>
|
|
)}
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
}
|