Function ParticipantsModal

ParticipantsModal - Comprehensive participant management interface

A feature-rich modal for viewing and managing meeting participants with search, filtering, and moderator controls. Displays separate lists for moderators and attendees with role-based actions (mute, message, remove).

Features:

• Real-time participant count badge
• Search/filter functionality for large participant lists
• Separate moderator and attendee sections
• Role-based action buttons (mute, message, remove)
• Co-host permission controls
• Direct messaging initiation
• Custom render hooks for complete UI flexibility
• Responsive positioning (topRight, topLeft, etc.)

import React, { useState } from 'react';
import { ParticipantsModal } from 'mediasfu-reactjs';

function Meeting({ parameters }) {
  const [isVisible, setIsVisible] = useState(false);
  const [filter, setFilter] = useState('');

  return (
    <>
      <button onClick={() => setIsVisible(true)}>
        Show Participants ({parameters.participants.length})
      </button>
      <ParticipantsModal
        isParticipantsModalVisible={isVisible}
        onParticipantsClose={() => setIsVisible(false)}
        onParticipantsFilterChange={setFilter}
        participantsCounter={parameters.participants.length}
        parameters={parameters}
        backgroundColor="#0f172a"
        position="topRight"
      />
    </>
  );
}
Copy

import { ParticipantsModal } from 'mediasfu-reactjs';

function BrandedParticipants({ isVisible, onClose, parameters, participantCount }) {
  return (
    <ParticipantsModal
      isParticipantsModalVisible={isVisible}
      onParticipantsClose={onClose}
      onParticipantsFilterChange={(filter) => console.log('Filter:', filter)}
      participantsCounter={participantCount}
      parameters={parameters}
      backgroundColor="#1e3a8a"
      position="topLeft"
      contentProps={{
        style: {
          borderRadius: 20,
          border: '2px solid #3b82f6',
          boxShadow: '0 20px 60px rgba(59,130,246,0.3)',
        },
      }}
      badgeProps={{
        style: {
          backgroundColor: '#22c55e',
          color: 'white',
          fontWeight: 700,
          padding: '4px 12px',
          borderRadius: 12,
        },
      }}
      searchInputProps={{
        placeholder: 'Search by name...',
        style: {
          borderRadius: 12,
          padding: '12px 16px',
          border: '2px solid #3b82f6',
          fontSize: 14,
        },
      }}
    />
  );
}
Copy

import { ParticipantsModal } from 'mediasfu-reactjs';

function AnalyticsParticipants({ parameters, isVisible, onClose }) {
  return (
    <ParticipantsModal
      isParticipantsModalVisible={isVisible}
      onParticipantsClose={onClose}
      onParticipantsFilterChange={(filter) => {
        analytics.track('participant_search', { query: filter });
      }}
      participantsCounter={parameters.participants.length}
      parameters={parameters}
      onMuteParticipants={async (options) => {
        analytics.track('participant_muted', { participantId: options.participant.id });
        return muteParticipants(options);
      }}
      onMessageParticipants={async (options) => {
        analytics.track('direct_message_initiated', { participantId: options.participant.id });
        return messageParticipants(options);
      }}
      renderHeader={({ defaultHeader, counter }) => (
        <div style={{
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          padding: 20,
          borderRadius: '16px 16px 0 0',
        }}>
          {defaultHeader}
          <p style={{ color: '#e2e8f0', fontSize: 12, marginTop: 8 }}>
            {counter} active participant{counter !== 1 ? 's' : ''}
          </p>
        </div>
      )}
    />
  );
}
Copy

import { MediasfuGeneric, ParticipantsModal } from 'mediasfu-reactjs';

const uiOverrides = {
  participantsModal: {
    component: (props) => (
      <ParticipantsModal
        {...props}
        backgroundColor="#0f172a"
        position="topRight"
        contentProps={{
          style: {
            maxHeight: '80vh',
            borderRadius: 20,
            border: '2px solid #3b82f6',
          },
        }}
        searchInputProps={{
          placeholder: 'Filter participants...',
          style: {
            borderRadius: 12,
            border: '1px solid #3b82f6',
            padding: '10px 14px',
          },
        }}
      />
    ),
  },
};

<MediasfuGeneric uiOverrides={uiOverrides} />;
Copy