MediaSFU React Native (Expo)
    Preparing search index...

    Interface ParticipantsModalOptions

    Interface defining the options for the ParticipantsModal component.

    ParticipantsModalOptions

    Display Control:

    interface ParticipantsModalOptions {
        isParticipantsModalVisible: boolean;
        onParticipantsClose: () => void;
        onParticipantsFilterChange: (filter: string) => void;
        participantsCounter: number;
        onMuteParticipants?: (options: MuteParticipantsOptions) => Promise<void>;
        onMessageParticipants?: (options: MessageParticipantsOptions) => void;
        onRemoveParticipants?: (
            options: RemoveParticipantsOptions,
        ) => Promise<void>;
        RenderParticipantList?: ComponentType<any>;
        RenderParticipantListOthers?: ComponentType<any>;
        parameters: ParticipantsModalParameters;
        backgroundColor?: string;
        position?: "center" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
        style?: object;
        renderContent?: (
            options: {
                defaultContent: Element;
                dimensions: { width: number; height: number };
            },
        ) => Element;
        renderContainer?: (
            options: {
                defaultContainer: Element;
                dimensions: { width: number; height: number };
            },
        ) => ReactNode;
    }
    Index

    Properties

    isParticipantsModalVisible onParticipantsClose onParticipantsFilterChange participantsCounter onMuteParticipants? onMessageParticipants? onRemoveParticipants? RenderParticipantList? RenderParticipantListOthers? parameters backgroundColor? position? style? renderContent? renderContainer?

    Properties

    isParticipantsModalVisible: boolean

    Whether the modal is currently visible

    onParticipantsClose: () => void

    Callback when modal is closed

    onParticipantsFilterChange: (filter: string) => void

    Callback for search/filter changes

    participantsCounter: number

    Total participant count for display

    Action Handlers:

    onMuteParticipants?: (options: MuteParticipantsOptions) => Promise<void>

    Function to mute participants (default: muteParticipants)

    Type Declaration

      • (options: MuteParticipantsOptions): Promise<void>

      • Mutes a participant in a media session if the current member has the necessary permissions.

        Parameters

        • options: MuteParticipantsOptions

          The options for muting participants.

          • socket: Socket
          • OptionalcoHostResponsibility?: CoHostResponsibility[]
          • participant: Participant
          • member: string
          • islevel: string
          • OptionalshowAlert?: ShowAlert
          • coHost: string
          • roomName: string

        Returns Promise<void>

        muteParticipants({
          socket,
          coHostResponsibility: [{ name: "media", value: true }],
          participant: { id: "123", name: "John Doe", muted: false, islevel: "1" },
          member: "currentMember",
          islevel: "2",
          showAlert: (alert) => console.log(alert.message),
          coHost: "coHostMember",
          roomName: "room1",
        });
    onMessageParticipants?: (options: MessageParticipantsOptions) => void

    Function to message participants (default: messageParticipants)

    Type Declaration

      • (options: MessageParticipantsOptions): void

      • Sends a direct message to a participant if the current member has the necessary permissions.

        Parameters

        • options: MessageParticipantsOptions

          The options for messaging participants.

          • OptionalcoHostResponsibility?: CoHostResponsibility[]
          • participant: Participant
          • member: string
          • islevel: string
          • OptionalshowAlert?: ShowAlert
          • coHost: string
          • updateIsMessagesModalVisible: (isVisible: boolean) => void
          • updateDirectMessageDetails: (participant: Participant) => void
          • updateStartDirectMessage: (start: boolean) => void

        Returns void

        messageParticipants({
          coHostResponsibility: [{ name: "chat", value: true }],
          participant: { name: "John Doe", islevel: "1" },
          member: "currentMember",
          islevel: "2",
          showAlert: (alert) => console.log(alert.message),
          coHost: "coHostMember",
          updateIsMessagesModalVisible: (isVisible) => setMessagesModalVisible(isVisible),
          updateDirectMessageDetails: (participant) => setDirectMessageDetails(participant),
          updateStartDirectMessage: (start) => setStartDirectMessage(start),
        });
    onRemoveParticipants?: (options: RemoveParticipantsOptions) => Promise<void>

    Function to remove participants (default: removeParticipants)

    Custom Renderers:

    Type Declaration

      • (options: RemoveParticipantsOptions): Promise<void>

      • Removes a participant from the room if the user has the necessary permissions.

        Parameters

        • options: RemoveParticipantsOptions

          The options for removing a participant.

          • coHostResponsibility: CoHostResponsibility[]
          • participant: Participant
          • member: string
          • islevel: string
          • OptionalshowAlert?: ShowAlert
          • coHost: string
          • participants: Participant[]
          • socket: Socket
          • roomName: string
          • updateParticipants: (participants: Participant[]) => void

        Returns Promise<void>

        removeParticipants({
          coHostResponsibility: [{ name: "participants", value: true }],
          participant: { id: "123", name: "John Doe", islevel: "1" },
          member: "currentMember",
          islevel: "2",
          showAlert: (alert) => console.log(alert.message),
          coHost: "coHostMember",
          participants: [{ id: "123", name: "John Doe", islevel: "1" }],
          socket,
          roomName: "room1",
          updateParticipants: (updatedParticipants) => console.log(updatedParticipants),
        });
    RenderParticipantList?: ComponentType<any>

    Custom component for main participant list

    RenderParticipantListOthers?: ComponentType<any>

    Custom component for other participants list

    State Parameters:

    parameters: ParticipantsModalParameters

    State and context parameters

    Advanced Render Overrides:

    backgroundColor?: string

    Modal background color

    Participant Management:

    position?: "center" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight"

    Modal position

    style?: object

    Custom styles for modal container

    renderContent?: (
        options: {
            defaultContent: Element;
            dimensions: { width: number; height: number };
        },
    ) => Element

    Function to wrap or replace modal content

    renderContainer?: (
        options: {
            defaultContainer: Element;
            dimensions: { width: number; height: number };
        },
    ) => ReactNode

    Function to wrap or replace modal container

    Settings

    Member Visibility

    On This Page

    Properties