mediasfu-reactnative/dist/types/src/components/waitingComponents/WaitingModal.d.ts

MediaSFU Prebuilt React Native SDK

import React from 'react';
import { Socket } from 'socket.io-client';
import { RespondToWaitingType } from '../../methods/waitingMethods/respondToWaiting';
import { WaitingRoomParticipant } from '../../@types/types';
export interface WaitingRoomModalParameters {
    filteredWaitingRoomList: WaitingRoomParticipant[];
    /**
     * Function to get updated parameters, particularly the filtered waiting room list.
     */
    getUpdatedAllParams: () => WaitingRoomModalParameters;
    [key: string]: any;
}
export interface WaitingRoomModalOptions {
    /**
     * Flag to control the visibility of the modal.
     */
    isWaitingModalVisible: boolean;
    /**
     * Callback function to handle the closing of the modal.
     */
    onWaitingRoomClose: () => void;
    /**
     * Initial count of participants in the waiting room.
     */
    waitingRoomCounter: number;
    /**
     * Function to handle changes in the search input.
     */
    onWaitingRoomFilterChange: (filter: string) => void;
    /**
     * List of participants in the waiting room.
     */
    waitingRoomList: WaitingRoomParticipant[];
    /**
     * Function to update the waiting room list.
     */
    updateWaitingList: (updatedList: WaitingRoomParticipant[]) => void;
    /**
     * Name of the room.
     */
    roomName: string;
    /**
     * Socket instance for real-time communication.
     */
    socket: Socket;
    /**
     * Position of the modal on the screen.
     * Possible values: 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'center'.
     * Defaults to 'topRight'.
     */
    position?: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'center';
    /**
     * Background color of the modal.
     * Defaults to '#83c0e9'.
     */
    backgroundColor?: string;
    /**
     * Additional parameters for the modal.
     */
    parameters: WaitingRoomModalParameters;
    /**
     * Function to handle participant item press.
     * Defaults to respondToWaiting.
     */
    onWaitingRoomItemPress?: RespondToWaitingType;
}
export type WaitingRoomModalType = (options: WaitingRoomModalOptions) => JSX.Element;
/**
 * WaitingRoomModal is a React Native functional component that displays a modal containing a list of participants who are waiting to join a room. Users can filter, accept, or reject participants from the waiting list.
 *
 * @component
 * @param {WaitingRoomModalOptions} props - The properties for the WaitingRoomModal component.
 * @returns {JSX.Element} The rendered WaitingRoomModal component.
 *
 * @example
 * ```tsx
 * import React from 'react';
 * import { WaitingRoomModal } from 'mediasfu-reactnative';
 *
 * function App() {
 *   const waitingRoomList = [
 *     { id: 1, name: 'John Doe' },
 *     { id: 2, name: 'Jane Smith' },
 *   ];
 *
 *   const handleWaitingRoomItemPress = ({ participantId, type }) => {
 *     console.log(`Participant ID ${participantId} was ${type ? 'accepted' : 'rejected'}`);
 *   };
 *
 *   return (
 *     <WaitingRoomModal
 *       isWaitingModalVisible={true}
 *       onWaitingRoomClose={() => console.log('Modal closed')}
 *       waitingRoomCounter={waitingRoomList.length}
 *       onWaitingRoomFilterChange={(filter) => console.log('Filter applied:', filter)}
 *       waitingRoomList={waitingRoomList}
 *       updateWaitingList={(updatedList) => console.log('Updated list:', updatedList)}
 *       roomName="Main Room"
 *       socket={socketInstance}
 *       onWaitingRoomItemPress={handleWaitingRoomItemPress}
 *       backgroundColor="#83c0e9"
 *       position="topRight"
 *       parameters={{
 *         getUpdatedAllParams: () => ({ filteredWaitingRoomList: waitingRoomList }),
 *       }}
 *     />
 *   );
 * }
 * export default App;
 * ```
 */
declare const WaitingRoomModal: React.FC<WaitingRoomModalOptions>;
export default WaitingRoomModal;