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;
        engagementPosition?: OverlayPosition;
        icons?: Partial<LocalVideoTileIcons>;
        indicatorPosition?: OverlayPosition;
        isMuted?: MuteStatus;
        isRaisedHand?: boolean;
        isRecording?: boolean;
        isStreaming?: boolean;
        labelPosition?: OverlayPosition;
        labels?: Partial<LocalVideoTileLabels>;
        localVideoElementId: string;
        moodData?: MoodData;
        moodPosition?: OverlayPosition;
        onClick?: () => void;
        onError?: (error: Error) => void;
        overlayOrder?: LocalVideoTileOverlayElement[];
        renderProps?: LocalVideoTileRenderProps;
        roomStartTime?: string | Date;
        showEngagement?: boolean;
        showFit?: boolean;
        showFlip?: boolean;
        showMood?: boolean;
        showMuteIndicators?: 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? engagementPosition? icons? indicatorPosition? isMuted? isRaisedHand? isRecording? isStreaming? labelPosition? labels? localVideoElementId moodData? moodPosition? onClick? onError? overlayOrder? renderProps? roomStartTime? showEngagement? showFit? showFlip? showMood? showMuteIndicators? 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'
    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'
    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'
    onClick?: () => void

    Click handler for the tile

    onError?: (error: Error) => void

    Callback when an error occurs during video rendering or stream attachment

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

    Whether to show mood indicator

    false
    showMuteIndicators?: boolean

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

    true
    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