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

    Interface LocalVideoTileProps

    Props for the LocalVideoTile component. Displays the local user's video with controls and status indicators.

    The localVideoElementId is required for Hiyve client integration. The client library needs this ID to attach the local video stream.

    // Basic usage
    <LocalVideoTile
      localVideoElementId="local-video"
      userName="Me"
    />

    // Full featured with recording
    <LocalVideoTile
      localVideoElementId="local-video"
      userName="John Doe"
      showFlip={true}
      showZoom={true}
      showTimer={true}
      roomStartTime={new Date('2024-01-15T10:00:00Z')}
      isRecording={true}
      isMuted={{ audio: false, video: false }}
      labelPosition="bottom-left"
      indicatorPosition="top-left"
      timerPosition="top-right"
    />
    interface LocalVideoTileProps {
        colors?: Partial<LocalVideoTileColors>;
        controlPosition?: OverlayPosition;
        controlsLayout?: "icons" | "menu";
        engagementPosition?: OverlayPosition;
        icons?: Partial<LocalVideoTileIcons>;
        indicatorPosition?: OverlayPosition;
        isLocalTileHidden?: boolean;
        isMuted?: MuteStatus;
        isRaisedHand?: boolean;
        isRecording?: boolean;
        isStreaming?: boolean;
        labelPosition?: OverlayPosition;
        labels?: Partial<LocalVideoTileLabels>;
        localVideoElementId: string;
        moodData?: MoodData;
        moodPosition?: OverlayPosition;
        onAspectChange?: (aspect: number) => void;
        onClick?: () => void;
        onError?: (error: Error) => void;
        onToggleAudio?: () => void;
        onToggleHideSelf?: () => void;
        onToggleVideo?: () => void;
        overlayOrder?: LocalVideoTileOverlayElement[];
        renderProps?: LocalVideoTileRenderProps;
        roomStartTime?: string | Date;
        showEngagement?: boolean;
        showFit?: boolean;
        showFlip?: boolean;
        showHideSelf?: boolean;
        showMood?: boolean;
        showMuteAudio?: boolean;
        showMuteIndicators?: boolean;
        showMuteVideo?: boolean;
        showRecordingIndicator?: boolean;
        showTimer?: boolean;
        showZoom?: boolean;
        statusPosition?: OverlayPosition;
        styles?: Partial<LocalVideoTileStyles>;
        sx?: SxProps<Theme>;
        timerPosition?: OverlayPosition;
        userId?: string;
        userName?: string;
    }
    Index

    Properties

    colors? controlPosition? controlsLayout? engagementPosition? icons? indicatorPosition? isLocalTileHidden? isMuted? isRaisedHand? isRecording? isStreaming? labelPosition? labels? localVideoElementId moodData? moodPosition? onAspectChange? onClick? onError? onToggleAudio? onToggleHideSelf? onToggleVideo? overlayOrder? renderProps? roomStartTime? showEngagement? showFit? showFlip? showHideSelf? showMood? showMuteAudio? showMuteIndicators? showMuteVideo? showRecordingIndicator? showTimer? showZoom? statusPosition? styles? sx? timerPosition? userId? userName?

    Properties

    colors?: Partial<LocalVideoTileColors>

    Custom colors for theming

    controlPosition?: OverlayPosition

    Position of control buttons (flip, zoom)

    'bottom-right'
    controlsLayout?: "icons" | "menu"

    How the tile's control buttons (flip / 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 that opens a menu listing the same actions. Status indicators (mute, hand-raise) are not affected.
    'icons'
    engagementPosition?: OverlayPosition

    Position of the engagement indicator

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

    Custom icons to replace defaults

    indicatorPosition?: OverlayPosition

    Position of recording/streaming indicator

    'top-left'
    isLocalTileHidden?: boolean

    Whether the local tile is currently hidden in the parent layout. Drives the menu label between "Hide self" and "Show self".

    false
    isMuted?: MuteStatus

    Current audio/video mute status

    isRaisedHand?: boolean

    Whether local user has hand raised

    isRecording?: boolean

    Whether room is currently being recorded

    isStreaming?: boolean

    Whether room is currently being live streamed

    labelPosition?: OverlayPosition

    Position of the name label overlay

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

    Custom labels for internationalization support

    localVideoElementId: string

    HTML element ID for the video element. Required for Hiyve client to attach the local stream.

    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

    onToggleAudio?: () => void

    Toggle the local user's audio mute. Required when showMuteAudio is on.

    onToggleHideSelf?: () => void

    Toggle whether the local tile is hidden. Required when showHideSelf is on.

    onToggleVideo?: () => void

    Toggle the local user's video mute. Required when showMuteVideo is on.

    overlayOrder?: LocalVideoTileOverlayElement[]

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

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

    // Mood appears before engagement
    <LocalVideoTile overlayOrder={['indicator', 'timer', 'mood', 'engagement', 'name', 'status', 'controls']} />
    renderProps?: LocalVideoTileRenderProps

    Render props for advanced customization

    roomStartTime?: string | Date

    Room start time for duration timer (ISO string or Date object)

    showEngagement?: boolean

    Whether to show engagement indicator (colored dot)

    false
    showFit?: boolean

    Show fit/fill toggle button

    false
    showFlip?: boolean

    Show flip/mirror video button

    true
    showHideSelf?: boolean

    Show the "Hide self / Show self" menu item. Requires onToggleHideSelf. The tile is hidden by the parent (typically VideoGrid via its hideLocalTile prop), so the toggle just reports the user's intent — the parent owns the actual visibility.

    false
    showMood?: boolean

    Whether to show mood indicator

    false
    showMuteAudio?: boolean

    Show the "Mute / Unmute audio" menu item. Requires onToggleAudio. Mirrors the mute toggle in ControlBar's media controls so consumers can offer the same action from the tile's overflow menu.

    false
    showMuteIndicators?: boolean

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

    true
    showMuteVideo?: boolean

    Show the "Mute / Unmute video" menu item. Requires onToggleVideo. Mirrors the camera-menu toggle in ControlBar (muteVideo / unmuteVideo) — same callback semantics, same labels.

    false
    showRecordingIndicator?: boolean

    Show recording/streaming indicator dot

    true
    showTimer?: boolean

    Show room duration timer

    false
    showZoom?: boolean

    Show fullscreen/zoom button

    false
    statusPosition?: OverlayPosition

    Position of mute status indicators

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

    Custom style values

    sx?: SxProps<Theme>

    MUI sx styling prop for additional customization

    timerPosition?: OverlayPosition

    Position of timer display

    'top-right'
    userId?: string

    Unique identifier for the local user. Required for mood analysis registration.

    userName?: string

    Display name for the local user

    Settings

    Member Visibility

    On This Page

    Properties