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

    Interface VideoGridProps

    Props for the VideoGrid component.

    interface VideoGridProps {
        dominantUserId?: string | null;
        gap?: number;
        isLocalAudioMuted?: boolean;
        isLocalVideoMuted?: boolean;
        layout?: "overlay" | "grid";
        localDisplayName?: string;
        localStream: MediaStream | null;
        localUserId: string | null;
        maxColumns?: number;
        muteIcon?: ReactNode;
        participants: Participant[];
        tileColors?: Partial<VideoTileColors>;
    }
    Index

    Properties

    dominantUserId? gap? isLocalAudioMuted? isLocalVideoMuted? layout? localDisplayName? localStream localUserId maxColumns? muteIcon? participants tileColors?

    Properties

    dominantUserId?: string | null

    User ID of the participant shown fullscreen in overlay mode. Falls back to the first remote participant, or the local user if alone. Ignored in grid mode.

    gap?: number

    Spacing between tiles in pixels.

    4

    isLocalAudioMuted?: boolean

    Whether the local user's microphone is muted. Shows a mute badge on the local tile when true.

    false

    isLocalVideoMuted?: boolean

    Whether the local user's camera is off. Shows an avatar on the local tile when true.

    false

    layout?: "overlay" | "grid"

    Layout mode.

    • 'grid' (default): Equal-sized tiles in a grid.
    • 'overlay': Fullscreen dominant speaker with floating mini-tiles in the top-right corner (FaceTime-style).

    'grid'

    localDisplayName?: string

    Display name shown on the local user's tile. Falls back to the user ID.

    localStream: MediaStream | null

    Local camera MediaStream from useLocalMedia. Pass null when the camera is not yet available.

    localUserId: string | null

    Local user's identifier, used for avatar color generation. Typically from useParticipants().localUserId.

    maxColumns?: number

    Maximum number of columns in the grid layout. Tiles wrap to additional rows when this limit is reached.

    2

    muteIcon?: ReactNode

    Custom React element rendered inside the mute badge on every tile instead of the default "MIC OFF" text.

    participants: Participant[]

    Array of remote participants. Each participant's video stream, mute state, and display name are passed to individual tiles.

    tileColors?: Partial<VideoTileColors>

    Color overrides applied to every tile in the grid. See VideoTileColors.

    Settings

    Member Visibility

    On This Page

    Properties