SpeakerStage — LevelChat Docs

SpeakerStage renders one large hero VideoTile with the remaining participants in a horizontal scrollable filmstrip. The hero auto-follows the dominant speaker; clicking a thumbnail pins focus on that participant until the next dominant change.

Install

pnpm add @levelchat/react-components @levelchat/web

Basic usage

import { SpeakerStage } from '@levelchat/react-components';

export function WebinarStage() {
  return <SpeakerStage />;
}

Hero fallback

When the active-speaker id is stale (a brief gap between SDK dominant-speaker events) or absent, the hero falls back to the first participant in the roster. The surface never goes blank. Pass renderTile to fully customize the hero + filmstrip tiles.

Props

Prop	Type	Default	Notes
`filmstripMax`	`number`	`8`	Filmstrip cap; participants beyond this are trimmed from the strip.
`includeLocalInFilmstrip`	`boolean`	—	Show the local participant in the filmstrip alongside remotes.
`cornerRadius`	`number`	—	Corner radius applied to the hero + filmstrip tiles.
`renderTile`	`(p, isActive, index) => ReactNode`	—	Custom render for each tile (hero + filmstrip).
`className`	`string`	—	Container override.