Prejoin

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

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Button, Prejoin, Row, Stack, Text } from '@weft-js/warp'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 @weft-js/warp

Usage

tsx

import { Prejoin } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp'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`	`'Join now'`	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"]

layoutstackpreviewvideonamepreview-controlsmeter

RelatedLobby Meeting room