mirror of
https://github.com/Monadical-SAS/reflector.git
synced 2025-12-22 21:29:05 +00:00
feat: implement frontend for calendar integration (Phase 3 & 4)
- Created MeetingSelection component for choosing between multiple active meetings
- Shows both active meetings and upcoming calendar events (30 min ahead)
- Displays meeting metadata with privacy controls (owner-only details)
- Supports creation of unscheduled meetings alongside calendar meetings
- Added waiting page for users joining before scheduled start time
- Shows countdown timer until meeting begins
- Auto-transitions to meeting when calendar event becomes active
- Handles early joining with proper routing
- Created collapsible info panel showing meeting details
- Displays calendar metadata (title, description, attendees)
- Shows participant count and duration
- Privacy-aware: sensitive info only visible to room owners
- Integrated ICS settings into room configuration dialog
- Test connection functionality with immediate feedback
- Manual sync trigger with detailed results
- Shows last sync time and ETag for monitoring
- Configurable sync intervals (1 min to 1 hour)
- New /room/{roomName} route for meeting selection
- Waiting room at /room/{roomName}/wait?eventId={id}
- Classic room page at /{roomName} with meeting info
- Uses sessionStorage to pass selected meeting between pages
- Added new endpoints for active/upcoming meetings
- Regenerated TypeScript client with latest OpenAPI spec
- Proper error handling and loading states
- Auto-refresh every 30 seconds for live updates
- Color-coded badges for meeting status
- Attendee status indicators (accepted/declined/tentative)
- Responsive design with Chakra UI components
- Clear visual hierarchy between active and upcoming meetings
- Smart truncation for long attendee lists
This completes the frontend implementation for calendar integration,
enabling users to seamlessly join scheduled meetings from their
calendar applications.
This commit is contained in:
147
www/app/room/[roomName]/page.tsx
Normal file
147
www/app/room/[roomName]/page.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Box, Spinner, VStack, Text } from "@chakra-ui/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import useApi from "../../lib/useApi";
|
||||
import useSessionStatus from "../../lib/useSessionStatus";
|
||||
import MeetingSelection from "../../[roomName]/MeetingSelection";
|
||||
import { Meeting, Room } from "../../api";
|
||||
|
||||
interface RoomPageProps {
|
||||
params: {
|
||||
roomName: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function RoomPage({ params }: RoomPageProps) {
|
||||
const { roomName } = params;
|
||||
const router = useRouter();
|
||||
const api = useApi();
|
||||
const { data: session } = useSessionStatus();
|
||||
|
||||
const [room, setRoom] = useState<Room | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [checkingMeetings, setCheckingMeetings] = useState(false);
|
||||
|
||||
const isOwner = session?.user?.id === room?.user_id;
|
||||
|
||||
useEffect(() => {
|
||||
if (!api) return;
|
||||
|
||||
const fetchRoom = async () => {
|
||||
try {
|
||||
// Get room details
|
||||
const roomData = await api.v1RoomsRetrieve({ roomName });
|
||||
setRoom(roomData);
|
||||
|
||||
// Check if we should show meeting selection
|
||||
if (roomData.ics_enabled) {
|
||||
setCheckingMeetings(true);
|
||||
|
||||
// Check for active meetings
|
||||
const activeMeetings = await api.v1RoomsListActiveMeetings({
|
||||
roomName,
|
||||
});
|
||||
|
||||
// Check for upcoming meetings
|
||||
const upcomingEvents = await api.v1RoomsListUpcomingMeetings({
|
||||
roomName,
|
||||
minutesAhead: 30,
|
||||
});
|
||||
|
||||
// If there's only one active meeting and no upcoming, auto-join
|
||||
if (activeMeetings.length === 1 && upcomingEvents.length === 0) {
|
||||
handleMeetingSelect(activeMeetings[0]);
|
||||
} else if (
|
||||
activeMeetings.length === 0 &&
|
||||
upcomingEvents.length === 0
|
||||
) {
|
||||
// No meetings, create unscheduled
|
||||
handleCreateUnscheduled();
|
||||
}
|
||||
// Otherwise, show selection UI (handled by render)
|
||||
} else {
|
||||
// ICS not enabled, use traditional flow
|
||||
handleCreateUnscheduled();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch room:", err);
|
||||
// Room not found or error
|
||||
router.push("/rooms");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setCheckingMeetings(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchRoom();
|
||||
}, [api, roomName]);
|
||||
|
||||
const handleMeetingSelect = (meeting: Meeting) => {
|
||||
// Navigate to the classic room page with the meeting
|
||||
// Store meeting in session storage for the classic page to use
|
||||
sessionStorage.setItem(`meeting_${roomName}`, JSON.stringify(meeting));
|
||||
router.push(`/${roomName}`);
|
||||
};
|
||||
|
||||
const handleCreateUnscheduled = async () => {
|
||||
if (!api) return;
|
||||
|
||||
try {
|
||||
// Create a new unscheduled meeting
|
||||
const meeting = await api.v1RoomsCreateMeeting({ roomName });
|
||||
handleMeetingSelect(meeting);
|
||||
} catch (err) {
|
||||
console.error("Failed to create meeting:", err);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading || checkingMeetings) {
|
||||
return (
|
||||
<Box
|
||||
minH="100vh"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
bg="gray.50"
|
||||
>
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="blue.500" />
|
||||
<Text>{loading ? "Loading room..." : "Checking meetings..."}</Text>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (!room) {
|
||||
return (
|
||||
<Box
|
||||
minH="100vh"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
bg="gray.50"
|
||||
>
|
||||
<Text fontSize="lg">Room not found</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Show meeting selection if ICS is enabled and we have multiple options
|
||||
if (room.ics_enabled) {
|
||||
return (
|
||||
<Box minH="100vh" bg="gray.50">
|
||||
<MeetingSelection
|
||||
roomName={roomName}
|
||||
isOwner={isOwner}
|
||||
onMeetingSelect={handleMeetingSelect}
|
||||
onCreateUnscheduled={handleCreateUnscheduled}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// Should not reach here - redirected above
|
||||
return null;
|
||||
}
|
||||
277
www/app/room/[roomName]/wait/page.tsx
Normal file
277
www/app/room/[roomName]/wait/page.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Box,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Spinner,
|
||||
Progress,
|
||||
Card,
|
||||
CardBody,
|
||||
Button,
|
||||
Icon,
|
||||
} from "@chakra-ui/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { FaClock, FaArrowLeft } from "react-icons/fa";
|
||||
import useApi from "../../../lib/useApi";
|
||||
import { CalendarEventResponse } from "../../../api";
|
||||
|
||||
interface WaitingPageProps {
|
||||
params: {
|
||||
roomName: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function WaitingPage({ params }: WaitingPageProps) {
|
||||
const { roomName } = params;
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const eventId = searchParams.get("eventId");
|
||||
|
||||
const [event, setEvent] = useState<CalendarEventResponse | null>(null);
|
||||
const [timeRemaining, setTimeRemaining] = useState<number>(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [checkingMeeting, setCheckingMeeting] = useState(false);
|
||||
const api = useApi();
|
||||
|
||||
useEffect(() => {
|
||||
if (!api || !eventId) return;
|
||||
|
||||
const fetchEvent = async () => {
|
||||
try {
|
||||
const events = await api.v1RoomsListUpcomingMeetings({
|
||||
roomName,
|
||||
minutesAhead: 60,
|
||||
});
|
||||
|
||||
const targetEvent = events.find((e) => e.id === eventId);
|
||||
if (targetEvent) {
|
||||
setEvent(targetEvent);
|
||||
} else {
|
||||
// Event not found or already started
|
||||
router.push(`/room/${roomName}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch event:", err);
|
||||
router.push(`/room/${roomName}`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchEvent();
|
||||
}, [api, eventId, roomName]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!event) return;
|
||||
|
||||
const updateCountdown = () => {
|
||||
const now = new Date();
|
||||
const start = new Date(event.start_time);
|
||||
const diff = Math.max(0, start.getTime() - now.getTime());
|
||||
|
||||
setTimeRemaining(diff);
|
||||
|
||||
// Check if meeting has started
|
||||
if (diff <= 0) {
|
||||
checkForActiveMeeting();
|
||||
}
|
||||
};
|
||||
|
||||
const checkForActiveMeeting = async () => {
|
||||
if (!api || checkingMeeting) return;
|
||||
|
||||
setCheckingMeeting(true);
|
||||
try {
|
||||
// Check for active meetings
|
||||
const activeMeetings = await api.v1RoomsListActiveMeetings({
|
||||
roomName,
|
||||
});
|
||||
|
||||
// Find meeting for this calendar event
|
||||
const calendarMeeting = activeMeetings.find(
|
||||
(m) => m.calendar_event_id === eventId,
|
||||
);
|
||||
|
||||
if (calendarMeeting) {
|
||||
// Meeting is now active, join it
|
||||
const meeting = await api.v1RoomsJoinMeeting({
|
||||
roomName,
|
||||
meetingId: calendarMeeting.id,
|
||||
});
|
||||
|
||||
// Navigate to the meeting room
|
||||
router.push(`/${roomName}?meetingId=${meeting.id}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to check for active meeting:", err);
|
||||
} finally {
|
||||
setCheckingMeeting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Update countdown every second
|
||||
const interval = setInterval(updateCountdown, 1000);
|
||||
|
||||
// Check for meeting every 10 seconds when close to start time
|
||||
let checkInterval: NodeJS.Timeout | null = null;
|
||||
if (timeRemaining < 60000) {
|
||||
// Less than 1 minute
|
||||
checkInterval = setInterval(checkForActiveMeeting, 10000);
|
||||
}
|
||||
|
||||
updateCountdown(); // Initial update
|
||||
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
if (checkInterval) clearInterval(checkInterval);
|
||||
};
|
||||
}, [event, api, eventId, roomName, checkingMeeting]);
|
||||
|
||||
const formatTime = (ms: number) => {
|
||||
const totalSeconds = Math.floor(ms / 1000);
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds
|
||||
.toString()
|
||||
.padStart(2, "0")}`;
|
||||
}
|
||||
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
||||
};
|
||||
|
||||
const getProgressValue = () => {
|
||||
if (!event) return 0;
|
||||
|
||||
const now = new Date();
|
||||
const created = new Date(event.created_at);
|
||||
const start = new Date(event.start_time);
|
||||
const totalTime = start.getTime() - created.getTime();
|
||||
const elapsed = now.getTime() - created.getTime();
|
||||
|
||||
return Math.min(100, (elapsed / totalTime) * 100);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box
|
||||
minH="100vh"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
bg="gray.50"
|
||||
>
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="blue.500" />
|
||||
<Text>Loading meeting details...</Text>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (!event) {
|
||||
return (
|
||||
<Box
|
||||
minH="100vh"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
bg="gray.50"
|
||||
>
|
||||
<VStack spacing={4}>
|
||||
<Text fontSize="lg">Meeting not found</Text>
|
||||
<Button
|
||||
leftIcon={<FaArrowLeft />}
|
||||
onClick={() => router.push(`/room/${roomName}`)}
|
||||
>
|
||||
Back to Room
|
||||
</Button>
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
minH="100vh"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
bg="gray.50"
|
||||
>
|
||||
<Card maxW="lg" width="100%" mx={4}>
|
||||
<CardBody>
|
||||
<VStack spacing={6} py={4}>
|
||||
<Icon as={FaClock} boxSize={16} color="blue.500" />
|
||||
|
||||
<VStack spacing={2}>
|
||||
<Text fontSize="2xl" fontWeight="bold">
|
||||
{event.title || "Scheduled Meeting"}
|
||||
</Text>
|
||||
<Text color="gray.600" textAlign="center">
|
||||
The meeting will start automatically when it's time
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<Box width="100%">
|
||||
<Text
|
||||
fontSize="4xl"
|
||||
fontWeight="bold"
|
||||
textAlign="center"
|
||||
color="blue.600"
|
||||
>
|
||||
{formatTime(timeRemaining)}
|
||||
</Text>
|
||||
<Progress
|
||||
value={getProgressValue()}
|
||||
colorScheme="blue"
|
||||
size="sm"
|
||||
mt={4}
|
||||
borderRadius="full"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{event.description && (
|
||||
<Box width="100%" p={4} bg="gray.100" borderRadius="md">
|
||||
<Text fontSize="sm" fontWeight="semibold" mb={1}>
|
||||
Meeting Description
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.700">
|
||||
{event.description}
|
||||
</Text>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<VStack spacing={3} width="100%">
|
||||
<Text fontSize="sm" color="gray.500">
|
||||
Scheduled for {new Date(event.start_time).toLocaleString()}
|
||||
</Text>
|
||||
|
||||
{checkingMeeting && (
|
||||
<HStack spacing={2}>
|
||||
<Spinner size="sm" color="blue.500" />
|
||||
<Text fontSize="sm" color="blue.600">
|
||||
Checking if meeting has started...
|
||||
</Text>
|
||||
</HStack>
|
||||
)}
|
||||
</VStack>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
leftIcon={<FaArrowLeft />}
|
||||
onClick={() => router.push(`/room/${roomName}`)}
|
||||
width="100%"
|
||||
>
|
||||
Back to Meeting Selection
|
||||
</Button>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user