MediaSFU ReactJS
    Preparing search index...

    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;
        isDarkMode?: boolean;
        enableGlassmorphism?: boolean;
        renderMode?: ModalRenderMode;
        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;
    }
    Index

    Properties

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

    Properties

    isParticipantsModalVisible: boolean
    onParticipantsClose: () => void
    onParticipantsFilterChange: (filter: string) => void
    participantsCounter: number
    onMuteParticipants?: (options: MuteParticipantsOptions) => Promise<void>

    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

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

    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>
    RenderParticipantListOthers?: ComponentType<any>
    parameters: ParticipantsModalParameters
    backgroundColor?: string
    position?: string
    isDarkMode?: boolean

    Theme control - whether dark mode is active

    enableGlassmorphism?: boolean

    Enable glassmorphism effects (modern UI)

    renderMode?: ModalRenderMode

    Render mode: modal (default overlay), sidebar (inline for desktop), inline (no wrapper)

    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

    Settings

    Member Visibility

    On This Page

    Properties