Hiyve Components - v1.0.0
    Preparing search index...

    Interface ParticipantListProps

    Props for the ParticipantList component.

    The ParticipantList displays all participants in a video room with their status indicators (mute state, hand raised, speaking, owner badge). It supports owner controls for muting and removing participants.

    Requirement: Must be used inside a <HiyveProvider> component.

    The component automatically derives participant data and owner status from the HiyveProvider context. All mute/unmute operations are handled internally.

    Sorting: Participants are automatically sorted with local user first, then the room owner, then alphabetically by name.

    Basic usage inside HiyveProvider:

    import { HiyveProvider } from '@hiyve/react';
    import { ParticipantList } from '@hiyve/react-ui';

    function VideoRoom() {
      return (
        <HiyveProvider client={client} roomName={roomName} userId={userId}>
          <VideoGrid />
          <ParticipantList
            localUserName="John Doe"
            maxHeight={400}
          />
        </HiyveProvider>
      );
    }

    With custom styling and labels:

    <ParticipantList
      localUserName={userName}
      title="Meeting Participants"
      labels={{
        localUserSuffix: '(me)',
        roomOwner: 'Host',
        emptyState: 'Waiting for others to join...',
      }}
      colors={{
        headerBackground: '#1a1a2e',
        containerBackground: '#16213e',
      }}
      styles={{
        avatarSize: 48,
        borderRadius: 12,
      }}
      maxHeight={500}
    />

    With render props for custom rendering:

    <ParticipantList
      localUserName={userName}
      renderProps={{
        renderParticipant: (participant, isLocal, defaultContent) => (
          <Box sx={{ opacity: participant.isSpeaking ? 1 : 0.8 }}>
            {defaultContent}
          </Box>
        ),
        renderEmptyState: () => (
          <Box sx={{ p: 4, textAlign: 'center' }}>
            <Typography>No one else has joined yet</Typography>
            <Button onClick={copyInviteLink}>Copy Invite Link</Button>
          </Box>
        ),
      }}
      onParticipantClick={(userId) => openUserProfile(userId)}
    />
    interface ParticipantListProps {
        colors?: Partial<ParticipantListColors>;
        enableDominantClick?: boolean;
        icons?: Partial<ParticipantListIcons>;
        labels?: Partial<ParticipantListLabels>;
        localUserName?: string;
        maxHeight?: string | number;
        onError?: (error: Error) => void;
        onParticipantClick?: (userId: string) => void;
        onRemoveParticipant?: (userId: string) => void;
        renderProps?: ParticipantListRenderProps;
        showHeader?: boolean;
        showMuteStatus?: boolean;
        showOutputMute?: boolean;
        showOwnerBadge?: boolean;
        showRaisedHand?: boolean;
        showSpeakingIndicator?: boolean;
        styles?: Partial<ParticipantListStyles>;
        sx?: SxProps<Theme>;
        title?: string;
    }
    Index

    Properties

    colors? enableDominantClick? icons? labels? localUserName? maxHeight? onError? onParticipantClick? onRemoveParticipant? renderProps? showHeader? showMuteStatus? showOutputMute? showOwnerBadge? showRaisedHand? showSpeakingIndicator? styles? sx? title?

    Properties

    colors?: Partial<ParticipantListColors>

    Custom colors for styling.

    enableDominantClick?: boolean

    Enable click-to-set-dominant functionality for room owners.

    When enabled (default: true), clicking a participant will set them as the dominant speaker. The dominant speaker is featured prominently in speaker/sidebar video layouts. Clicking the same participant again will clear the dominant selection.

    This feature is owner-only - non-owners will not see any click interaction even if this prop is set to true.

    The dominant speaker change is automatically broadcast to all participants via the HiyveProvider's data messaging system.

    true
    icons?: Partial<ParticipantListIcons>

    Custom icons to replace default MUI icons.

    labels?: Partial<ParticipantListLabels>

    Custom labels for i18n support. Partially override default labels.

    localUserName?: string

    Display name for the local user.

    This is shown in the participant list next to "(You)" suffix. Falls back to localUserId if not provided.

    maxHeight?: string | number

    Maximum height before the list becomes scrollable.

    onError?: (error: Error) => void

    Callback when an error occurs

    onParticipantClick?: (userId: string) => void

    Callback when a participant item is clicked.

    Type Declaration

      • (userId: string): void

      • Parameters

        • userId: string

          The clicked participant's user ID

        Returns void

    This callback is for notification purposes. When enableDominantClick is enabled (default), clicking also toggles the dominant speaker for owners. This callback is called in addition to that internal behavior.

    onRemoveParticipant?: (userId: string) => void

    Callback when remove button is clicked (owner controls only).

    Type Declaration

      • (userId: string): void

      • Parameters

        • userId: string

          The target participant's user ID

        Returns void

    This is a notification callback - the remove operation should be implemented by your application (e.g., client.removeParticipant(userId)).

    renderProps?: ParticipantListRenderProps

    Render props for advanced customization.

    ParticipantListRenderProps

    showHeader?: boolean

    Show the header with participant count.

    true
    showMuteStatus?: boolean

    Show mute status indicators (mic/camera icons).

    true
    showOutputMute?: boolean

    Show output mute button for remote participants (owner only). This allows muting a participant's audio locally (only you can't hear them).

    true
    showOwnerBadge?: boolean

    Show owner badge (star icon) next to room owner.

    true
    showRaisedHand?: boolean

    Show hand raised indicator.

    true
    showSpeakingIndicator?: boolean

    Show speaking indicator (voice activity).

    true
    styles?: Partial<ParticipantListStyles>

    Custom styles for sizing and spacing.

    ParticipantListStyles

    sx?: SxProps<Theme>

    MUI sx styling prop for the container.

    title?: string

    Title for the list header.

    'Participants' (from labels.title)

    Settings

    Member Visibility

    On This Page

    Properties