Tile

One person in a call: their video or avatar, name and status.

SourcePackage @weft-js/warp

Preview

tsx

import { Tile } from '@weft-js/warp'import type { Participant } from '@weft-js/warp'export function WithCamera() {  return (    <div style="block-size:220px;inline-size:320px;display:grid">      <Tile p={CALL_SELF} self video={() => <img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect width='16' height='9' fill='%23345'/%3E%3Ccircle cx='8' cy='4' r='2' fill='%2389a'/%3E%3C/svg%3E" />} />    </div>  )}const CALL_SELF: Participant = { id: 'priya', name: 'Priya Raman' }

Installation

npm install @weft-js/warp

Usage

tsx

import { Tile } from '@weft-js/warp'<div style="block-size:220px;inline-size:320px;display:grid">  <Tile p={CALL_SELF} self video={() => <img alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Crect width='16' height='9' fill='%23345'/%3E%3Ccircle cx='8' cy='4' r='2' fill='%2389a'/%3E%3C/svg%3E" />} /></div>

States

Speaking, muted, hand raised, poor connection and camera off. Give tiles a height.

tsx

import { Grid, Tile } from '@weft-js/warp'import type { Participant } from '@weft-js/warp'export function States() {  return (    <Grid cols={3} gap="related" style="grid-auto-rows:168px;inline-size:100%">      {TILES.map(p => <Tile key={p.id} p={p} />)}    </Grid>  )}const TILES: Participant[] = [  { id: 'sam', name: 'Sam Okafor', role: 'host', isSpeaking: true },  { id: 'jun', name: 'Jun Tanaka', isMuted: true },  { id: 'mara', name: 'Mara Lindqvist', handRaised: true },  { id: 'lena', name: 'Lena Fischer', network: 'poor' },  { id: 'tomas', name: 'Tomás Oliveira', isCamOn: false },  { id: 'ines', name: 'Inés Vidal' },]

Accessibility

The state is in its name: "Mara Lindqvist, hand raised".
Set --level on the tile for the audio bars. Nothing re-renders.

API Reference

Prop	Type	Default	Description
`p`	`Participant`	—	The participant.
`self`	`boolean`	`false`	Shows You.
`video`	`Video`	—	Return the video element.
`role`	`string`	`'group'`	The tile's role. Default `group`; inside a list, `listitem`.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="tile"] [data-part="video"]

videoflagsflagnamelevel

RelatedMeeting room