Prejoin

Check your name, mic and camera before you go into a call.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import {  Button,  Prejoin,  Row,  Stack,  Text} from '@kerf-js/veneer'export function IncidentCall() {  const joining = state(false)  const joined = state('')  const said = state('')  const join = async (name: string) => {    joining.value = true    await pause(1200)    joining.value = false    joined.value = name  }  return (    <>      {joined.value ? (        <Row gap="related">          <Text>{joined.value} is in the call.</Text>          <Button            emphasis="outline"            tone="neutral"            size="sm"            onClick={() => (joined.value = '')}          >            Go back          </Button>        </Row>      ) : (        <Stack gap="related">          <Prejoin            name="Priya Raman"            devices={CALL_DEVICES}            level={0.4}            joining={joining.value}            onJoin={(n) => void join(n)}            onTestSound={() =>              (said.value = 'Test sound played')            }          />          {said.value && (            <Text              role="caption"              subtle            >              {said.value}            </Text>          )}        </Stack>      )}    </>  )}const CALL_DEVICES = {  mics: [    { value: 'mbp', label: 'MacBook Pro Microphone' },    { value: 'pods', label: 'AirPods Pro' },  ],  cameras: [{ value: 'hd', label: 'FaceTime HD Camera' }],  speakers: [    { value: 'pods', label: 'AirPods Pro' },    { value: 'mbp', label: 'MacBook Pro Speakers' },  ],}const pause = (ms: number) =>  new Promise((done) => {    setTimeout(done, ms)  })

Installation

npm install @kerf-js/veneer

Usage

tsx

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

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`name`	`string`	—	Fills the name field.
`preview`	`(() => unknown)`	—	Your `<video>`.
`level`	`number`	—	The mic level, 0 to 1.
`mic`	`boolean`	`false`	Whether your mic starts on.
`camera`	`boolean`	`false`	Whether your camera starts on.
`devices`	`PrejoinDevices`	—	The microphones, cameras and speakers to list.
`joining`	`boolean`	`false`	Join is under way.
`joinLabel`	`string`	—	The join button's words. Default "Join now".

Event	Type	Default	Description
`onMic`	`((on: boolean) => void)`	—	Called with the mic toggle's new state.
`onCamera`	`((on: boolean) => void)`	—	Called with the camera toggle's new state.
`onDevice`	`((kind: "camera" \| "mic" \| "speaker", id: string) => void)`	—	A device was picked.
`onTestSound`	`(() => void)`	—	Adds Play test sound.
`onJoin`	`((name: string) => void)`	—	Gets the name.

Parts

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

layoutstack

RelatedLobby Meeting room