Function ParticipantsModal

ParticipantsModal - Participant list with search, filtering, and management actions

ParticipantsModal is a comprehensive React Native modal for viewing and managing session participants. It provides search/filter functionality, participant lists (segmented by role/type), and action buttons for muting, messaging, or removing participants based on user permissions.

Key Features:

• Real-time participant list with count display
• Search/filter functionality for finding participants
• Segmented lists (main participants vs. others)
• Permission-based actions (mute, message, remove)
• Role-based visibility (host, co-host, participant)
• Custom renderers for participant list items
• Responsive design with flexible positioning

UI Customization: This component can be replaced via uiOverrides.participantsModalComponent to provide a completely custom participants modal implementation.

// Basic usage - Display participants modal with default settings
import React, { useState } from 'react';
import { ParticipantsModal } from 'mediasfu-reactnative-expo';
import { Socket } from 'socket.io-client';

function MeetingControls() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [participants, setParticipants] = useState([
    { name: 'Alice', id: '1', islevel: '1', muted: false },
    { name: 'Bob', id: '2', islevel: '1', muted: true },
  ]);
  
  const participantsParameters = {
    position: 'topRight',
    backgroundColor: '#83c0e9',
    coHostResponsibility: [{ name: 'participants', value: true }],
    coHost: 'JaneDoe',
    member: 'JohnDoe',
    islevel: '2',
    participants,
    eventType: 'conference',
    filteredParticipants: participants,
    socket: socketInstance,
    roomName: 'MainRoom',
    updateIsMessagesModalVisible: (visible) => console.log('Messages:', visible),
    updateDirectMessageDetails: (participant) => console.log('DM:', participant),
    updateStartDirectMessage: (start) => console.log('Start DM:', start),
    updateParticipants: setParticipants,
    getUpdatedAllParams: () => participantsParameters,
  };

  return (
    <>
      <Button title="Participants" onPress={() => setIsModalVisible(true)} />
      <ParticipantsModal
        isParticipantsModalVisible={isModalVisible}
        onParticipantsClose={() => setIsModalVisible(false)}
        onParticipantsFilterChange={(filter) => console.log('Filter:', filter)}
        participantsCounter={participants.length}
        parameters={participantsParameters}
      />
    </>
  );
}
Copy

// With custom action handlers and positioning
<ParticipantsModal
  isParticipantsModalVisible={showParticipants}
  onParticipantsClose={() => setShowParticipants(false)}
  onParticipantsFilterChange={(filter) => handleFilterChange(filter)}
  participantsCounter={filteredParticipants.length}
  onMuteParticipants={async (options) => {
    console.log('Custom mute logic');
    await muteParticipants(options);
  }}
  onMessageParticipants={(options) => {
    console.log('Messaging participant:', options.participant.name);
    messageParticipants(options);
  }}
  onRemoveParticipants={async (options) => {
    if (confirm('Remove participant?')) {
      await removeParticipants(options);
    }
  }}
  parameters={{
    ...participantsParameters,
    position: 'center',
    backgroundColor: '#1a1a2e',
  }}
  backgroundColor="#1a1a2e"
  position="center"
/>
Copy

// Using uiOverrides for complete modal replacement
import { MyCustomParticipantsModal } from './MyCustomParticipantsModal';

const sessionConfig = {
  credentials: { apiKey: 'your-api-key' },
  uiOverrides: {
    participantsModalComponent: {
      component: MyCustomParticipantsModal,
      injectedProps: {
        theme: 'compact',
        showAvatars: true,
      },
    },
  },
};

// MyCustomParticipantsModal.tsx
export const MyCustomParticipantsModal = (props: ParticipantsModalOptions & { theme: string; showAvatars: boolean }) => {
  return (
    <Modal visible={props.isParticipantsModalVisible} onRequestClose={props.onParticipantsClose}>
      <View>
        <Text>Participants ({props.participantsCounter})</Text>
        {props.parameters.participants.map(p => (
          <View key={p.id}>
            {props.showAvatars && <Image source={{ uri: p.avatar }} />}
            <Text>{p.name}</Text>
          </View>
        ))}
      </View>
    </Modal>
  );
};
Copy