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

    Function LocalVideoTile

    • LocalVideoTile displays the local user's video with controls and indicators.

      Parameters

      Returns ReactElement

      The rendered LocalVideoTile component

      Use LocalVideoTile for the local user's video - it provides the video element that the Hiyve client attaches to. For remote participants, use VideoTile.

      When to use LocalVideoTile vs VideoTile:

      • Use LocalVideoTile for the local user (provides element ID for client attachment)
      • Use VideoTile for remote participants (receives video/audio streams as props)

      When to use LocalVideoTile directly vs VideoGrid:

      • Use VideoGrid when you want automatic layout management (recommended)
      • Use LocalVideoTile directly when you need full custom layout control

      Key Features:

      • Video element with configurable ID for Hiyve client attachment
      • Flip/mirror toggle for selfie view (mirrored by default)
      • Fullscreen/zoom toggle
      • Room duration timer with customizable format
      • Recording and streaming indicators with pulsing animation
      • Mute status indicators (audio/video/output)
      • Mood analysis integration (optional)
      • Configurable overlay positions for all UI elements
      • Full customization: labels, icons, colors, styles, and render props

      Hiyve Client Integration: The localVideoElementId prop is required and must match the ID used when calling client.connectTransports({ localVideoElementId: '...' }). The Hiyve client will automatically attach the local video stream to this element.

      Basic usage:

      import { LocalVideoTile } from '@hiyve/react-ui';

      // The localVideoElementId must match what you pass to connectTransports
      <LocalVideoTile
        localVideoElementId="local-video"
        userName="Me"
      />

      // In your connection code:
      await client.connectTransports({ localVideoElementId: 'local-video' });

      With recording indicator and timer:

      <LocalVideoTile
        localVideoElementId="local-video"
        userName="Me"
        isRecording={true}
        showTimer={true}
        roomStartTime={roomStartedAt}
      />

      With flip and zoom controls:

      <LocalVideoTile
        localVideoElementId="local-video"
        userName="John Doe"
        showFlip={true}
        showZoom={true}
        isMuted={{ audio: isMicMuted, video: isCameraOff }}
      />

      Full customization:

      <LocalVideoTile
        localVideoElementId="local-video"
        userName="John Doe"
        showFlip={true}
        showZoom={true}
        showTimer={true}
        roomStartTime={new Date()}
        isRecording={true}
        isMuted={{ audio: false, video: false }}
        labelPosition="bottom-left"
        controlPosition="bottom-right"
        indicatorPosition="top-left"
        timerPosition="top-right"
        colors={{
          background: '#1a1a1a',
          recordingIndicator: '#ff0000',
        }}
        styles={{
          borderRadius: 12,
          controlButtonSize: 'medium',
        }}
        labels={{
          recording: '● REC',
          localUserSuffix: '(You)',
        }}
        renderProps={{
          formatDuration: (seconds) => `${Math.floor(seconds / 60)} min`,
          renderOverlay: () => <CustomBadge />,
        }}
      />

    Settings

    Member Visibility