import { Head, router } from '@inertiajs/react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Spinner } from '@/components/ui/spinner'; import { useState } from 'react'; type Meeting = { uuid: string; title: string; }; type Me = { meeting: string; user: string; name: string; role: 'MODERATOR' | 'VIEWER'; }; type Attendee = { userId: string; fullName: string; role: string; }; type Props = { meeting: Meeting; me: Me; attendees: Attendee[]; }; function getInitials(name: string): string { return name .split(' ') .map((n) => n[0]) .join('') .toUpperCase() .slice(0, 2); } function getRoleColor( role: string, ): 'default' | 'secondary' | 'outline' | 'destructive' { if (role === 'MODERATOR' || role === 'moderator') { return 'default'; } return 'secondary'; } function getRoleLabel(role: string): string { if (role === 'MODERATOR' || role === 'moderator') { return 'Docente'; } return 'Partecipante'; } export default function BbbRoom({ meeting, me, attendees }: Props) { const [isLeavingRoom, setIsLeavingRoom] = useState(false); const [isEndingSession, setIsEndingSession] = useState(false); const handleLeaveRoom = async () => { setIsLeavingRoom(true); try { router.post('/dev/bbb/room/leave', me); } finally { setIsLeavingRoom(false); } }; const handleEndSession = async () => { setIsEndingSession(true); try { router.post('/dev/bbb/room/end', { meeting: me.meeting, }); } finally { setIsEndingSession(false); } }; const handleRefreshAttendees = () => { router.reload(); }; return ( <>

{/* Header Banner */}

Aula BigBlueButton simulata (BBB_DRIVER=fake)

{meeting.title}

{/* Main Content */}

{/* Attendees Grid */}

Partecipanti ({attendees.length})

{attendees.map((attendee) => (

{/* Avatar */}

{getInitials(attendee.fullName)}

{/* Name */}

{attendee.fullName}

{/* Role Badge */} {getRoleLabel(attendee.role)}

))}

{attendees.length === 0 && (

Nessun partecipante connesso

)}

{/* Controls */}

{me.role === 'MODERATOR' && ( )}

); }