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

    Interface VideoTileProps

    Props for the VideoTile component. Displays a remote participant's video stream with status indicators.

    // Basic usage
    <VideoTile
      userId="user-123"
      videoStream={participant.videoStream}
      audioStream={participant.audioStream}
      userName="John Doe"
    />

    // Full featured
    <VideoTile
      userId="user-123"
      videoStream={participant.videoStream}
      audioStream={participant.audioStream}
      userName="John Doe"
      isMuted={{ audio: true, video: false }}
      isRaisedHand={true}
      isDominant={true}
      showZoom={true}
      labelPosition="bottom-left"
      statusPosition="top-right"
      colors={{ dominantBorder: '#00ff00' }}
    />
    interface VideoTileProps {
        audioOnly?: boolean;
        audioStream: MediaStream | null;
        colors?: Partial<VideoTileColors>;
        controlPosition?: OverlayPosition;
        engagementPosition?: OverlayPosition;
        icons?: Partial<VideoTileIcons>;
        isDominant?: boolean;
        isMuted?: MuteStatus;
        isRaisedHand?: boolean;
        labelPosition?: OverlayPosition;
        labels?: Partial<VideoTileLabels>;
        moodData?: MoodData;
        moodPosition?: OverlayPosition;
        onClick?: () => void;
        onError?: (error: Error) => void;
        overlayOrder?: VideoTileOverlayElement[];
        renderProps?: VideoTileRenderProps;
        showEngagement?: boolean;
        showFit?: boolean;
        showMood?: boolean;
        showMuteIndicators?: boolean;
        showName?: boolean;
        showZoom?: boolean;
        statusPosition?: OverlayPosition;
        styles?: Partial<VideoTileStyles>;
        sx?: SxProps<Theme>;
        userId: string;
        userName?: string;
        videoStream: MediaStream | null;
    }
    Index

    Properties

    audioOnly? audioStream colors? controlPosition? engagementPosition? icons? isDominant? isMuted? isRaisedHand? labelPosition? labels? moodData? moodPosition? onClick? onError? overlayOrder? renderProps? showEngagement? showFit? showMood? showMuteIndicators? showName? showZoom? statusPosition? styles? sx? userId userName? videoStream

    Properties

    audioOnly?: boolean

    Whether participant is audio-only mode (no camera available)

    audioStream: MediaStream | null

    Audio MediaStream from the participant (null if audio is off)

    colors?: Partial<VideoTileColors>

    Custom colors for theming

    controlPosition?: OverlayPosition

    Position of control buttons (zoom)

    'bottom-right'
    engagementPosition?: OverlayPosition

    Position of the engagement indicator

    'top-left' (next to mood)
    icons?: Partial<VideoTileIcons>

    Custom icons to replace defaults

    isDominant?: boolean

    Highlight tile as dominant/active speaker with border

    isMuted?: MuteStatus

    Current audio/video mute status

    isRaisedHand?: boolean

    Whether participant has hand raised

    labelPosition?: OverlayPosition

    Position of the name label overlay

    'bottom-left'
    labels?: Partial<VideoTileLabels>

    Custom labels for internationalization support

    moodData?: MoodData

    Current mood data from mood analysis (when mood analysis is active)

    moodPosition?: OverlayPosition

    Position of the mood indicator

    'top-left'
    onClick?: () => void

    Click handler for the tile

    onError?: (error: Error) => void

    Callback when an error occurs during video rendering or stream attachment

    overlayOrder?: VideoTileOverlayElement[]

    Render order for overlay elements when they share the same position. Elements listed first appear first (leftmost for horizontal layouts).

    ['engagement', 'mood', 'name', 'status', 'controls']

    // Mood appears before engagement
    <VideoTile overlayOrder={['mood', 'engagement', 'name', 'status', 'controls']} />
    renderProps?: VideoTileRenderProps

    Render props for advanced customization

    showEngagement?: boolean

    Whether to show engagement indicator (colored dot)

    false
    showFit?: boolean

    Show fit/fill toggle button

    false
    showMood?: boolean

    Whether to show mood indicator

    false
    showMuteIndicators?: boolean

    Show mute status indicators (mic off, camera off icons)

    true
    showName?: boolean

    Show participant name overlay

    true
    showZoom?: boolean

    Show fullscreen/zoom button

    false
    statusPosition?: OverlayPosition

    Position of status indicators (mute icons, hand raised)

    'top-right'
    styles?: Partial<VideoTileStyles>

    Custom style values

    sx?: SxProps<Theme>

    MUI sx styling prop for additional customization

    userId: string

    Unique identifier for the participant

    userName?: string

    Display name for the participant

    videoStream: MediaStream | null

    Video MediaStream from the participant (null if video is off)

    Settings

    Member Visibility

    On This Page

    Properties