Layout calculation information
Record mapping user IDs to tile positions
Implement this function to create custom video grid layouts. The handler receives layout information and must return a record mapping user IDs (and 'local' for local tile) to their positions.
Important: The handler must return a position for the 'local' key and for each participant's userId.
// "Spotlight" layout - dominant speaker in center, others in corners
const spotlightLayout: CustomLayoutHandler = (info) => {
const { availableWidth, availableHeight, participants, isLocalDominant, dominantSpeaker, padding } = info;
const positions: Record<string, TilePosition> = {};
// Main spotlight area (80% of screen)
const mainWidth = availableWidth * 0.8;
const mainHeight = availableHeight * 0.8;
const mainLeft = padding + (availableWidth - mainWidth) / 2;
const mainTop = padding + (availableHeight - mainHeight) / 2;
if (isLocalDominant) {
positions['local'] = { left: mainLeft, top: mainTop, width: mainWidth, height: mainHeight };
} else {
positions[dominantSpeaker!] = { left: mainLeft, top: mainTop, width: mainWidth, height: mainHeight };
positions['local'] = { left: padding, top: padding, width: 150, height: 100 };
}
// Position others in corners...
return positions;
};
<VideoGrid
layout="spotlight"
customLayoutHandler={spotlightLayout}
/>
Custom layout handler function type.