Skip to main content

RtkParticipantTile

A component which plays a participants video and allows for placement of components like rtk-name-tag, rtk-audio-visualizer or any other component.

<RtkParticipantTile participant={meeting.self}>
  <RtkNameTag participant={meeting.self}>
    <RtkAudioVisualizer slot="start" />
  </RtkNameTag>
</RtkParticipantTile>

You can change the name-tag-position to any of the supported values and change the placement of audio-visualizer in name-tag as well.

<RtkParticipantTile participant={meeting.self} nameTagPosition="bottom-center">
  <RtkNameTag participant={meeting.self}>
    <RtkAudioVisualizer />
  </RtkNameTag>
</RtkParticipantTile>

It also has a few variants.

<RtkParticipantTile
  participant={meeting.self}
  nameTagPosition="bottom-center"
>
  <RtkNameTag participant={meeting.self}>
    <RtkAudioVisualizer />
  </RtkNameTag>
</RtkParticipantTile>

Props​

participant

required

Participant object

config

Config object

Default
defaultConfig

iconPack

Icon pack

Default
defaultIconPack

isPreview

Whether tile is used for preview

Default
false
Type
boolean

meeting

Meeting object

nameTagPosition

Position of name tag

Default
'bottom-left'
Type
"bottom-center" | "bottom-left" | "bottom-right" | "top-center" | "top-left" | "top-right"

size

Size

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

states

States object

Type
States

t

Language

Default
useLanguage()

variant

Variant

Default
'solid'
Type
"gradient" | "solid"