Interface ParticipantsModalOptions

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?: string;
    title?: ReactNode;
    overlayProps?: HTMLAttributes<HTMLDivElement>;
    contentProps?: HTMLAttributes<HTMLDivElement>;
    headerProps?: HTMLAttributes<HTMLDivElement>;
    titleProps?: HTMLAttributes<HTMLDivElement>;
    badgeWrapperProps?: HTMLAttributes<HTMLDivElement>;
    badgeProps?: HTMLAttributes<HTMLSpanElement>;
    closeButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
    closeIconComponent?: ReactNode;
    bodyProps?: HTMLAttributes<HTMLDivElement>;
    searchWrapperProps?: HTMLAttributes<HTMLDivElement>;
    searchInputProps?: InputHTMLAttributes<HTMLInputElement>;
    listsWrapperProps?: HTMLAttributes<HTMLDivElement>;
    moderatorListProps?: HTMLAttributes<HTMLDivElement>;
    attendeeListProps?: HTMLAttributes<HTMLDivElement>;
    emptyState?: ReactNode | ((context: {
        counter: number;
    }) => ReactNode);
    renderHeader?: ((options: {
        defaultHeader: ReactNode;
        counter: number;
        onClose: (() => void);
    }) => ReactNode);
    renderSearch?: ((options: {
        defaultSearch: ReactNode;
        onFilter: ((value: string) => void);
    }) => ReactNode);
    renderLists?: ((options: {
        defaultLists: ReactNode;
        participants: Participant[];
        hasModeratorControls: boolean;
    }) => ReactNode);
    renderBody?: ((options: {
        defaultBody: ReactNode;
        counter: number;
    }) => ReactNode);
    renderContent?: ((options: {
        defaultContent: ReactNode;
        counter: number;
    }) => ReactNode);
}

Properties

isParticipantsModalVisible onParticipantsClose onParticipantsFilterChange participantsCounter onMuteParticipants? onMessageParticipants? onRemoveParticipants? RenderParticipantList? RenderParticipantListOthers? parameters backgroundColor? position? title? overlayProps? contentProps? headerProps? titleProps? badgeWrapperProps? badgeProps? closeButtonProps? closeIconComponent? bodyProps? searchWrapperProps? searchInputProps? listsWrapperProps? moderatorListProps? attendeeListProps? emptyState? renderHeader? renderSearch? renderLists? renderBody? renderContent?

Properties

isParticipantsModalVisible

isParticipantsModalVisible: boolean

onParticipantsClose

onParticipantsClose: (() => void)

onParticipantsFilterChange

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

participantsCounter

participantsCounter: number

OptionalonMuteParticipants

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

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)

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

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>

OptionalRenderParticipantListOthers

RenderParticipantListOthers?: ComponentType<any>

parameters

parameters: ParticipantsModalParameters

OptionalbackgroundColor

backgroundColor?: string

Optionalposition

position?: string

Optionaltitle

title?: ReactNode

OptionaloverlayProps

overlayProps?: HTMLAttributes<HTMLDivElement>

OptionalcontentProps

contentProps?: HTMLAttributes<HTMLDivElement>

OptionalheaderProps

headerProps?: HTMLAttributes<HTMLDivElement>

OptionaltitleProps

titleProps?: HTMLAttributes<HTMLDivElement>

OptionalbadgeWrapperProps

badgeWrapperProps?: HTMLAttributes<HTMLDivElement>

OptionalbadgeProps

badgeProps?: HTMLAttributes<HTMLSpanElement>

OptionalcloseButtonProps

closeButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>

OptionalcloseIconComponent

closeIconComponent?: ReactNode

OptionalbodyProps

bodyProps?: HTMLAttributes<HTMLDivElement>

OptionalsearchWrapperProps

searchWrapperProps?: HTMLAttributes<HTMLDivElement>

OptionalsearchInputProps

searchInputProps?: InputHTMLAttributes<HTMLInputElement>

OptionallistsWrapperProps

listsWrapperProps?: HTMLAttributes<HTMLDivElement>

OptionalmoderatorListProps

moderatorListProps?: HTMLAttributes<HTMLDivElement>

OptionalattendeeListProps

attendeeListProps?: HTMLAttributes<HTMLDivElement>

OptionalemptyState

emptyState?: ReactNode | ((context: {
    counter: number;
}) => ReactNode)

OptionalrenderHeader

renderHeader?: ((options: {
    defaultHeader: ReactNode;
    counter: number;
    onClose: (() => void);
}) => ReactNode)

OptionalrenderSearch

renderSearch?: ((options: {
    defaultSearch: ReactNode;
    onFilter: ((value: string) => void);
}) => ReactNode)

OptionalrenderLists

renderLists?: ((options: {
    defaultLists: ReactNode;
    participants: Participant[];
    hasModeratorControls: boolean;
}) => ReactNode)

OptionalrenderBody

renderBody?: ((options: {
    defaultBody: ReactNode;
    counter: number;
}) => ReactNode)

OptionalrenderContent

renderContent?: ((options: {
    defaultContent: ReactNode;
    counter: number;
}) => ReactNode)

Settings

Member Visibility

On This Page

Properties