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;
        controlsLayout?: "icons" | "menu";
        engagementPosition?: OverlayPosition;
        icons?: Partial<VideoTileIcons>;
        isDominant?: boolean;
        isMuted?: MuteStatus;
        isRaisedHand?: boolean;
        labelPosition?: OverlayPosition;
        labels?: Partial<VideoTileLabels>;
        moodData?: MoodData;
        moodPosition?: OverlayPosition;
        onAspectChange?: (aspect: number) => void;
        onClick?: () => void;
        onError?: (error: Error) => void;
        onMuteAudio?: () => void;
        onMuteVideo?: () => void;
        overlayOrder?: VideoTileOverlayElement[];
        renderProps?: VideoTileRenderProps;
        showEngagement?: boolean;
        showFit?: boolean;
        showMood?: boolean;
        showMuteAudio?: boolean;
        showMuteIndicators?: boolean;
        showMuteVideo?: 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? controlsLayout? engagementPosition? icons? isDominant? isMuted? isRaisedHand? labelPosition? labels? moodData? moodPosition? onAspectChange? onClick? onError? onMuteAudio? onMuteVideo? overlayOrder? renderProps? showEngagement? showFit? showMood? showMuteAudio? showMuteIndicators? showMuteVideo? 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'
    controlsLayout?: "icons" | "menu"

    How the tile's control buttons (zoom / fit) are presented.

    • 'icons' (default) keeps each control as its own IconButton in the controls overlay — current behavior.
    • 'menu' collapses every visible control into a single overflow IconButton. Clicking it opens a menu listing the same actions, with the same labels/icons. Useful on tight layouts (small tiles, mobile) where the icon row would crowd the overlay. Status indicators (mute, hand-raise) are not affected — they remain inline.
    'icons'
    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'
    onAspectChange?: (aspect: number) => void

    Fires whenever the underlying <video> element's intrinsic dimensions change — on stream attach, when the encoder negotiates a new resolution, and when a mobile participant rotates their device. Receives videoWidth / videoHeight. Used by VideoGrid to size sidebar / overlay / filmstrip slots so a portrait stream doesn't get cropped into a landscape tile.

    onClick?: () => void

    Click handler for the tile

    onError?: (error: Error) => void

    Callback when an error occurs during video rendering or stream attachment

    onMuteAudio?: () => void

    Called when the mute-audio menu item is clicked. The label / icon flip based on isMuted.audio, so the consumer should implement this as a toggle (e.g., remoteMuteAudio(userId, !muted)). Required when showMuteAudio is on.

    onMuteVideo?: () => void

    Called when the mute-video menu item is clicked. Toggle semantics — see onMuteAudio. Required when showMuteVideo is on.

    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
    showMuteAudio?: boolean

    Show the "Mute / Unmute audio" menu item for this remote participant. Requires onMuteAudio. Intended for room owners (teachers) — the SDK does not gate visibility itself; the consumer decides whether to pass the prop.

    false
    showMuteIndicators?: boolean

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

    true
    showMuteVideo?: boolean

    Show the "Mute / Unmute video" menu item for this remote participant. Requires onMuteVideo. Intended for room owners.

    false
    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