mediasfu-reactnative
Version:
MediaSFU Prebuilt React Native SDK
95 lines (94 loc) • 3.9 kB
TypeScript
import React from 'react';
import { Socket } from 'socket.io-client';
import { muteParticipants } from '../../methods/participantsMethods/muteParticipants';
import { messageParticipants } from '../../methods/participantsMethods/messageParticipants';
import { removeParticipants } from '../../methods/participantsMethods/removeParticipants';
import { CoHostResponsibility, EventType, Participant, ShowAlert } from '../../@types/types';
export interface ParticipantsModalParameters {
position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'center';
backgroundColor?: string;
coHostResponsibility: CoHostResponsibility[];
coHost: string;
member: string;
islevel: string;
participants: Participant[];
eventType: EventType;
filteredParticipants: Participant[];
socket: Socket;
showAlert?: ShowAlert;
roomName: string;
updateIsMessagesModalVisible: (isVisible: boolean) => void;
updateDirectMessageDetails: (participant: Participant | null) => void;
updateStartDirectMessage: (start: boolean) => void;
updateParticipants: (participants: Participant[]) => void;
getUpdatedAllParams: () => ParticipantsModalParameters;
[key: string]: any;
}
export interface ParticipantsModalOptions {
isParticipantsModalVisible: boolean;
onParticipantsClose: () => void;
onParticipantsFilterChange: (filter: string) => void;
participantsCounter: number;
onMuteParticipants?: typeof muteParticipants;
onMessageParticipants?: typeof messageParticipants;
onRemoveParticipants?: typeof removeParticipants;
RenderParticipantList?: React.ComponentType<any>;
RenderParticipantListOthers?: React.ComponentType<any>;
parameters: ParticipantsModalParameters;
backgroundColor?: string;
position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'center';
}
export type ParticipantsModalType = (options: ParticipantsModalOptions) => JSX.Element;
/**
* ParticipantsModal displays a list of participants in a modal, with options for filtering, muting, messaging, or removing participants based on user permissions and event type.
*
* @component
* @param {ParticipantsModalOptions} props - The properties for the ParticipantsModal component.
* @returns {JSX.Element} The rendered ParticipantsModal component.
*
* @example
* ```tsx
* import React, { useState } from 'react';
* import { ParticipantsModal } from 'mediasfu-reactnative';
*
* function App() {
* const [isModalVisible, setIsModalVisible] = useState(false);
* const participantsParameters = {
* position: 'topRight',
* backgroundColor: '#83c0e9',
* coHostResponsibility: [{ name: 'participants', value: true }],
* coHost: 'JaneDoe',
* member: 'JohnDoe',
* islevel: '2',
* participants: [
* { name: 'Alice', id: '1', islevel: '1', muted: false },
* { name: 'Bob', id: '2', islevel: '1', muted: true },
* ],
* eventType: 'webinar',
* filteredParticipants: [],
* socket: socketInstance,
* showAlert: showAlertFunction,
* roomName: 'MainRoom',
* updateIsMessagesModalVisible: setIsMessagesModalVisible,
* updateDirectMessageDetails: setDirectMessageDetails,
* updateStartDirectMessage: setStartDirectMessage,
* updateParticipants: setParticipants,
* getUpdatedAllParams: () => participantsParameters,
* };
*
* return (
* <ParticipantsModal
* isParticipantsModalVisible={isModalVisible}
* onParticipantsClose={() => setIsModalVisible(false)}
* onParticipantsFilterChange={(filter) => handleFilterChange(filter)}
* participantsCounter={participantsParameters.participants.length}
* parameters={participantsParameters}
* />
* );
* }
*
* export default App;
* ```
*/
declare const ParticipantsModal: React.FC<ParticipantsModalOptions>;
export default ParticipantsModal;