Tile

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

SourcePackage @kerf-js/veneer

Preview

tsx

import { Tile } from '@kerf-js/veneer'import type { Participant } from '@kerf-js/veneer'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' fi" +            "ll='%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 @kerf-js/veneer

Usage

tsx

import { Tile } from '@kerf-js/veneer'

States

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

tsx

import { Grid, Tile } from '@kerf-js/veneer'import type { Participant } from '@kerf-js/veneer'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