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

    Function VideoTile

    • VideoTile displays a remote participant's video and audio stream.

      Parameters

      Returns ReactElement

      The rendered VideoTile component

      Use VideoTile for remote participants - it handles both video display and audio playback (via a hidden audio element). For the local user's video, use LocalVideoTile instead.

      When to use VideoTile vs LocalVideoTile:

      • Use VideoTile for remote participants (receives video/audio streams)
      • Use LocalVideoTile for the local user (attaches to Hiyve client via element ID)

      When to use VideoTile directly vs VideoGrid:

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

      Key Features:

      • Video display with auto-play
      • Separate audio playback (hidden audio element for remote sound)
      • Avatar fallback when video is off (shows initials with consistent color)
      • Mute status indicators (audio/video/output)
      • Raised hand indicator
      • Dominant speaker highlight (colored border)
      • Fullscreen/zoom functionality
      • Mood analysis integration (optional)
      • Configurable overlay positions for all UI elements
      • Full customization: labels, icons, colors, styles, and render props

      Audio Handling: The component uses a separate hidden audio element for audio playback. The video element is always muted to prevent echo - audio comes from the separate audio element.

      Basic usage:

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

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

      Audio-only participant (no video):

      <VideoTile
        userId="participant-123"
        videoStream={null}
        audioStream={participant.audioStream}
        audioOnly={true}
        userName="John Doe"
      />

      With all status indicators:

      <VideoTile
        userId="participant-123"
        videoStream={participant.videoStream}
        audioStream={participant.audioStream}
        userName="John Doe"
        showMuteIndicators={true}
        showName={true}
        isMuted={{ audio: true, video: false }}
        isRaisedHand={true}
        isDominant={activeSpeakerId === "participant-123"}
      />

      Full customization:

      <VideoTile
        userId="participant-123"
        videoStream={participant.videoStream}
        audioStream={participant.audioStream}
        userName="John Doe"
        showMuteIndicators={true}
        showZoom={true}
        isDominant={true}
        labelPosition="bottom-left"
        statusPosition="top-right"
        controlPosition="bottom-right"
        colors={{
          dominantBorder: '#00ff00',
          avatarPalette: ['#ff6b6b', '#4ecdc4', '#45b7d1'],
        }}
        renderProps={{
          renderOverlay: () => <CustomBadge />,
          renderAvatar: (userId, name, color) => <CustomAvatar name={name} />,
        }}
        onClick={() => handleParticipantClick("participant-123")}
      />

    Settings

    Member Visibility