ScheduledLobby

A call that has not started yet: a countdown, with Join off until it is time.

SourcePackage @weft-js/warp

Preview

tsx

import { ScheduledLobby, Toaster, toast } from '@weft-js/warp'export function Review() {  const to = Date.now() + 8 * 60_000  return (    <>      <ScheduledLobby title="Incident review" to={to} onJoin={() => toast.show({ title: 'Joining' })} onAddToCalendar={() => toast.show({ title: 'Added to your calendar' })}>Join opens when the countdown ends.</ScheduledLobby>      <Toaster />    </>  )}

Installation

npm install @weft-js/warp

Usage

tsx

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

Open early

joinable lets people in now.

tsx

import { state } from '@weft-js/core'import { ScheduledLobby, Stack, Text } from '@weft-js/warp'export function Open() {  const to = Date.now() + 2 * 60_000  const joined = state(false)  return (    <Stack gap="related">      <ScheduledLobby title="Incident review" to={to} joinable onJoin={() => (joined.value = true)} />      {joined.value && <Text subtle>Joining the call.</Text>}    </Stack>  )}

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
`title`	`unknown`	—	The heading.
`children`	`unknown`	—	What it contains.
`to`	`number`	—	When it starts, in epoch ms.
`now`	`number`	—	The time now, to render on the server.
`joinable`	`boolean`	`false`	Turns Join on before the end.
`opensAt`	`string`	—	When Join opens, in words.

Event	Type	Default	Description
`onJoin`	`(() => void)`	—	Join was pressed.
`onAddToCalendar`	`(() => void)`	—	Adds Add to calendar.

RelatedCountdown Lobby