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

    Function VideoGrid

    • VideoGrid displays all video tiles in an auto-layout container.

      Parameters

      Returns ReactElement

      The rendered VideoGrid component

      Requirement: Must be used inside a <HiyveProvider> component.

      Use VideoGrid when you want automatic layout management for all participants in a video call. It handles positioning, sizing, and transitions for you.

      When to use VideoGrid vs individual VideoTile components:

      • Use VideoGrid when you want automatic layout (recommended for most apps)
      • Use VideoTile/LocalVideoTile directly when you need full custom layout control

      Layout Modes:

      • grid: Equal-sized tiles in a responsive grid (default, good for discussions)
      • speaker: Large main video with filmstrip of other participants (good for presentations)
      • sidebar: Large main video with vertical sidebar (alternative presentation view)
      • unknown: Any unrecognized layout falls back to grid layout

      Key Features:

      • Three layout modes: grid, speaker, sidebar
      • Smooth CSS transitions when layout changes (no video remounting)
      • Responsive sizing - automatically adapts to container dimensions
      • Dominant speaker highlighting with colored border (from context)
      • Recording/streaming indicators (from context)
      • Room duration timer
      • Mood analysis integration (from MoodAnalysisProvider if available)
      • Full customization: colors, styles, labels, icons, and render props

      Component Composition: VideoGrid internally uses VideoTile for remote participants and LocalVideoTile for the local user, passing through configuration props.

      Basic usage inside HiyveProvider:

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

      function VideoRoom() {
        return (
          <HiyveProvider client={client} roomName={roomName} userId={userId}>
            <Box sx={{ width: '100%', height: '100vh' }}>
              <VideoGrid
                localVideoElementId="local-video"
                localUserName="Me"
              />
            </Box>
          </HiyveProvider>
        );
      }

      Speaker mode for presentations:

      <VideoGrid
        localVideoElementId="local-video"
        localUserName="Me"
        layout="speaker"
        styles={{ filmstripHeight: 150 }}
      />

      With timer enabled:

      <VideoGrid
        localVideoElementId="local-video"
        localUserName="Me"
        showTimer
      />

      Full customization:

      <VideoGrid
        localVideoElementId="local-video"
        localUserName="John"
        layout="sidebar"
        showLocalFlip={true}
        showZoom={true}
        showMuteIndicators={true}
        colors={{ dominantBorder: '#00ff00' }}
        styles={{ sidebarWidth: 250 }}
        tileColors={{ avatarPalette: ['#ff0000', '#00ff00', '#0000ff'] }}
        renderProps={{
          renderTileWrapper: (userId, isLocal, content) => (
            <Box onClick={() => handleTileClick(userId)}>{content}</Box>
          ),
          renderEmptyState: () => <Typography>Waiting for others...</Typography>,
        }}
        onParticipantClick={(userId) => setPinnedUser(userId)}
      />

    Settings

    Member Visibility