Render participant videos
To display the videos of all participants you need to show on the screen, you can either render each participant tile manually or choose from our pre built video tile grid components
Render each participant manually
But in the real world, a video tile grid is more complex, it is responsive, tile sizes are dynamic, there are different layouts, the grid handles screensharing etc.
Dyte has ready to use grid components, that you can use out of the box
There are two types of grid components, so that the grid can be easily extended and modularized.
- Parent Grid component -
- Child Grid components each having a different layour -
Parent Grid Component
DyteGrid component is a monolith component which handles all grid related
events and data on it's own and passes the following props to it's children.
|Participants who are screen sharing|
These props are passed to it's children which it computes from the UI Config which is passed to it. By default it will use the default UI Config.
Try editing the
Normal Grid Components
These components just accept the props mentioned above and render the UI.
Read more about them in their Reference pages.
This grid renders just the ParticipantTiles of the participants you pass to it.
It also brings
pinnedParticipants to the start of the grid.
This grid renders the ParticipantTiles of the participants and pinnedParticipants in separate grids.
Pinned participants are in spotlight area, i.e; larger grid.
This grid renders screenshares as well as plugins in the main larger view and renders a smaller grid on the right side which is configurable via the UI Config. You can use SimleGrid or SpotlightGrid here.
If you just want to render
self twice in a SimpleGrid: