MediaSFU React Native
    Preparing search index...

    Interface ParticipantsModalOptions

    Configuration options for the ParticipantsModal component.

    ParticipantsModalOptions

    Modal 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?: StyleProp<ViewStyle>;
        renderContent?: (
            options: {
                defaultContent: Element;
                dimensions: { width: number; height: number };
            },
        ) => Element;
        renderContainer?: (
            options: {
                defaultContainer: Element;
                dimensions: { width: number; height: number };
            },
        ) => Element;
    }
    Index

    Properties

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

    Properties

    isParticipantsModalVisible: boolean

    Controls visibility.

    onParticipantsClose: () => void

    Invoked when the modal should close.

    Participant Tools:

    onParticipantsFilterChange: (filter: string) => void

    Updates the search query.

    participantsCounter: number

    Initial count badge displayed in the header.

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

    Custom handler for muting selected participants.

    Type Declaration

      • (options: MuteParticipantsOptions): Promise<void>

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

        Parameters

        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

    Custom direct message handler.

    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.

          • coHostResponsibility: 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>

    Custom removal handler.

    Render Overrides:

    Type Declaration

      • (options: RemoveParticipantsOptions): Promise<void>

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

        Parameters

        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>

    Component used for main participant rendering.

    RenderParticipantListOthers?: ComponentType<any>

    Component for overflow/other participants.

    State Parameters:

    parameters: ParticipantsModalParameters

    Parameter bundle providing helpers and state access.

    Customization:

    backgroundColor?: string

    Modal surface color.

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

    Anchor position.

    style?: StyleProp<ViewStyle>

    Additional styling applied to modal container.

    Advanced Render Overrides:

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

    Override to replace the default modal body content.

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

    Override to replace the modal container wrapper.

    Settings

    Member Visibility

    On This Page

    Properties