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);
}

Properties

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

Properties

isParticipantsModalVisible

isParticipantsModalVisible: boolean

Whether the modal is currently visible

onParticipantsClose

onParticipantsClose: (() => void)

Callback when modal is closed

onParticipantsFilterChange

onParticipantsFilterChange: ((filter: string) => void)

Callback for search/filter changes

participantsCounter

participantsCounter: number

Total participant count for display

Action Handlers:

OptionalonMuteParticipants

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

Function to mute participants (default: muteParticipants)

Type declaration

    • (options): Promise<void>

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

      Parameters

      Returns Promise<void>

      Example

      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",
      });

OptionalonMessageParticipants

onMessageParticipants?: ((options: MessageParticipantsOptions) => void)

Function to message participants (default: messageParticipants)

Type declaration

    • (options): void

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

      Parameters

      Returns void

      Example

      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),
      });

OptionalonRemoveParticipants

onRemoveParticipants?: ((options: RemoveParticipantsOptions) => Promise<void>)

Function to remove participants (default: removeParticipants)

Custom Renderers:

Type declaration

    • (options): Promise<void>

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

      Parameters

      Returns Promise<void>

      Example

      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),
      });

OptionalRenderParticipantList

RenderParticipantList?: ComponentType<any>

Custom component for main participant list

OptionalRenderParticipantListOthers

RenderParticipantListOthers?: ComponentType<any>

Custom component for other participants list

State Parameters:

parameters

parameters: ParticipantsModalParameters

State and context parameters

Advanced Render Overrides:

OptionalbackgroundColor

backgroundColor?: string

Modal background color

Participant Management:

Optionalposition

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

Modal position

Optionalstyle

style?: object

Custom styles for modal container

OptionalrenderContent

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

Function to wrap or replace modal content

OptionalrenderContainer

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

Function to wrap or replace modal container

Settings

Member Visibility

On This Page

Properties