Skip to main content

dyte-spotlight-grid

A grid component that renders two lists of participants: pinnedParticipants and participants.

You can customize the layout to a column view, by default is is row.

  • Participants from pinnedParticipants[] are rendered inside a larger grid.
  • Participants from participants[] array are rendered in a smaller grid.
<dyte-spotlight-grid class="dyte-el"></dyte-spotlight-grid>
<dyte-spotlight-grid layout="column" class="dyte-el"></dyte-spotlight-grid>

<script>
  const elements = document.getElementsByClassName('dyte-el');
  for (const el of elements) {
    el.participants = [meeting.self];
    el.pinnedParticipants = [meeting.self];
  }
</script>

<style>
  dyte-spotlight-grid {
    height: 360px;
    width: 100%;
  }
</style>

Props​

aspectRatio

Aspect Ratio of participant tile Format: `width:height`

Default
'16:9'
Type
string

config

UI Config

Default
defaultConfig

gap

Gap between participant tiles

Default
8
Type
number

gridSize

Grid size

Default
defaultGridSize
Type
GridSize

iconPack

Icon Pack

Default
defaultIconPack

layout

Grid Layout

Default
'row'
Type
"column" | "row"

meeting

Meeting object

participants

Participants

Default
[]

pinnedParticipants

Pinned Participants

Default
[]

size

Size

Type
"lg" | "md" | "sm" | "xl"

states

States object

Type
States

t

Language

Default
useLanguage()