RenderRequestComponent class

A stateless widget rendering a single participant permission request item.

Displays participant name, request type icon, and accept/reject action buttons. Handles real-time request responses via socket events and local state updates.

Rendering Structure:

Row
  ├─ Expanded (flex: 5) - Participant Name
  │  └─ Text (request.name)
  ├─ Expanded (flex: 2) - Request Type Icon
  │  └─ Icon (24px, _getIconData(request.icon))
  ├─ Expanded (flex: 2) - Accept Button
  │  └─ IconButton
  │     ├─ icon: Icons.check (green, 24px)
  │     └─ onPressed: handleRequestAction('accepted')
  ├─ Expanded (flex: 2) - Reject Button
  │  └─ IconButton
  │     ├─ icon: Icons.close (red, 24px)
  │     └─ onPressed: handleRequestAction('rejected')
  └─ Expanded (flex: 1) - Spacer

Icon Mapping (_getIconData):

• "fa-microphone" → Icons.mic (audio request)
• "fa-desktop" → Icons.desktop_windows (screenshare request)
• "fa-video" → Icons.videocam (video request)
• "fa-comments" → Icons.comment (chat request)
• Default: Icons.error (unknown request type)

Request Flow:

1. User clicks accept (✓) or reject (✕) button
2. handleRequestAction('accepted'|'rejected') invoked
3. Calls onRequestItemPress(RespondToRequestsOptions(...))
4. Default handler respondToRequests:
   • Emits socket event: socket.emit('updateRequests', {action, requestId, roomName})
   • Removes request from local requestList
   • Invokes updateRequestList(filteredList) to update parent state
5. RequestsModal re-renders with updated list

Common Use Cases:

1. Microphone Request:

   RenderRequestComponent(
     options: RenderRequestComponentOptions(
       request: Request(
         id: 'mic_req_001',
         name: 'Bob Smith',
         icon: 'fa-microphone',
       ),
       requestList: allRequests,
       updateRequestList: (newList) => setState(() => requests = newList),
       roomName: parameters.roomName,
       socket: parameters.socket,
     ),
   )
   // Shows: "Bob Smith" | 🎤 | ✓ | ✕
   

2. Screenshare Request:

   RenderRequestComponent(
     options: RenderRequestComponentOptions(
       request: Request(
         id: 'screen_req_002',
         name: 'Carol Davis',
         icon: 'fa-desktop',
       ),
       requestList: pendingRequests,
       updateRequestList: (list) {
         setState(() {
           pendingRequests = list;
           parameters.updateRequestList(list);
         });
       },
       roomName: 'webinar-room-123',
       socket: socketClient,
     ),
   )
   // Shows: "Carol Davis" | 🖥️ | ✓ | ✕
   

3. Video Request (Custom Handler):

   RenderRequestComponent(
     options: RenderRequestComponentOptions(
       request: Request(
         id: 'video_req_003',
         name: 'David Lee',
         icon: 'fa-video',
       ),
       requestList: requestQueue,
       updateRequestList: (list) => updateQueue(list),
       roomName: conferenceRoomName,
       socket: conferenceSocket,
       onRequestItemPress: (options) {
         // Custom approval logic
         if (options.action == 'accepted') {
           logApproval(options.request);
           showNotification('${options.request.name} video approved');
         } else {
           logRejection(options.request);
         }
         // Emit socket event
         respondToRequests(options);
       },
     ),
   )
   // Shows: "David Lee" | 📹 | ✓ | ✕
   // Adds custom logging and notifications before standard socket emit
   

4. Chat Request:

   RenderRequestComponent(
     options: RenderRequestComponentOptions(
       request: Request(
         id: 'chat_req_004',
         name: 'Eva Martinez',
         icon: 'fa-comments',
       ),
       requestList: chatRequests,
       updateRequestList: (list) => setState(() => chatRequests = list),
       roomName: 'webinar-chat',
       socket: chatSocket,
     ),
   )
   // Shows: "Eva Martinez" | 💬 | ✓ | ✕
   

Action Handling:

• Accept (✓): Calls handleRequestAction('accepted')

  • Emits: socket.emit('updateRequests', {action: 'accepted', ...})
  • Server grants permission (e.g., unmutes participant, allows video)
  • Removes request from local list

• Reject (✕): Calls handleRequestAction('rejected')

  • Emits: socket.emit('updateRequests', {action: 'rejected', ...})
  • Server notifies participant of denial
  • Removes request from local list

State Management:

• Request list filtering happens in respondToRequests:

  final filteredList = requestList.where((r) => r.id != request.id).toList();
  updateRequestList(filteredList);
  

• Parent component (RequestsModal) manages master requestList state
• updateRequestList callback synchronizes parent state after each action

Socket Event Payload:

{
  'action': 'accepted', // or 'rejected'
  'requestId': 'req123',
  'roomName': 'conference-room-456',
}

Flex Layout:

• Name: 5 units (41.7% width)
• Icon: 2 units (16.7% width)
• Accept button: 2 units (16.7% width)
• Reject button: 2 units (16.7% width)
• Spacer: 1 unit (8.3% width)
• Total: 12 units

Accessibility:

• IconButton provides touch targets (min 48x48 logical pixels)
• Green check and red X provide color-coded visual feedback
• Participant name displayed as text label

Typical Usage Context:

• RequestsModal list rendering
• ListView.builder item renderer for requestList
• Host/co-host permission management interface