Events and programmatic control

The Recorder widget reports its state through four composed events, exposes three methods for driving it from outside, and moves a visitor through three routes over the course of a recording. The React component surfaces the same events as props, with the same payloads.

Events

Composed, bubbling custom events dispatched on the Custom Element. The React component fires the equivalent prop instead of an event, with the same detail shape. An InitError — the payload of livstick:error — is { code: string, message: string, details?: string, status?: number, source: "client" | "server" }.

Name	Type	Description
`livstick:ready`	`CustomEvent<ReadyEventDetail>`	Dispatched once the widget has initialized. React prop: onReady. Detail: { instanceId, uid }.
`livstick:route-change`	`CustomEvent<RouteChangeEventDetail>`	Dispatched whenever the widget moves to a different route of the record flow. React prop: onRouteChange. Detail: { instanceId, route }, where route is one of the flow routes listed below.
`livstick:recorded`	`CustomEvent<RecordedEventDetail>`	Dispatched once a recording has been uploaded and a message created. React prop: onRecorded. Detail: { instanceId, uid, messageId }.
`livstick:error`	`CustomEvent<ErrorEventDetail>`	Dispatched when the widget fails to initialize or to complete an operation. React prop: onError. Detail: { instanceId, error }, where error is an InitError.

Methods

Exposed on the Custom Element instance — call them after it is connected to the document. The React component exposes the same three through a ref handle.

Name	Type	Description
`record()`	`() => void`	Starts recording programmatically, without a visitor interacting with the widget's own controls.
`reset()`	`() => void`	Resets the widget back to its initial state.
`cancelUpload()`	`() => void`	Cancels an upload in progress.

Flow routes

The values carried by the route field of a livstick:route-change event.

Name	Type	Description
`record`	`string`	The recording screen: capture starts here.
`loading`	`string`	The screen shown while a recording uploads.
`finish`	`string`	The screen shown once a message has been created.