diff --git a/.changeset/lemon-geese-exercise.md b/.changeset/lemon-geese-exercise.md new file mode 100644 index 000000000..4d3992349 --- /dev/null +++ b/.changeset/lemon-geese-exercise.md @@ -0,0 +1,6 @@ +--- +"@livekit/components-core": patch +"@livekit/components-react": patch +--- + +Add useIsRecording hook diff --git a/packages/core/etc/components-core.api.md b/packages/core/etc/components-core.api.md index ed2ec16ce..8160da519 100644 --- a/packages/core/etc/components-core.api.md +++ b/packages/core/etc/components-core.api.md @@ -415,6 +415,9 @@ export type ReceivedTranscriptionSegment = TranscriptionSegment & { receivedAt: number; }; +// @public (undocumented) +export function recordingStatusObservable(room: Room): Observable; + // @public (undocumented) export type RequireOnlyOne = Pick> & { [K in Keys]-?: Required> & Partial, undefined>>; diff --git a/packages/core/src/observables/room.ts b/packages/core/src/observables/room.ts index f1e17fd8c..4cd5401b3 100644 --- a/packages/core/src/observables/room.ts +++ b/packages/core/src/observables/room.ts @@ -261,3 +261,10 @@ export function encryptionStatusObservable(room: Room, participant: Participant) ), ); } + +export function recordingStatusObservable(room: Room) { + return roomEventSelector(room, RoomEvent.RecordingStatusChanged).pipe( + map(([recording]) => recording), + startWith(room.isRecording), + ); +} diff --git a/packages/react/src/hooks/useIsRecording.ts b/packages/react/src/hooks/useIsRecording.ts new file mode 100644 index 000000000..f4e8a5c76 --- /dev/null +++ b/packages/react/src/hooks/useIsRecording.ts @@ -0,0 +1,22 @@ +import { recordingStatusObservable } from '@livekit/components-core'; +import * as React from 'react'; +import { useRoomContext } from '../context'; +import { useObservableState } from './internal'; +import { useConnectionState } from './useConnectionStatus'; + +/** + * The `useIsRecording` hook returns a `boolean` that indicates if the room is currently being recorded. + * @example + * ```tsx + * const isRecording = useIsRecording(); + * ``` + * @public + */ +export function useIsRecording() { + const room = useRoomContext(); + const connectionState = useConnectionState(room); + const observable = React.useMemo(() => recordingStatusObservable(room), [room, connectionState]); + const isRecording = useObservableState(observable, room.isRecording); + + return isRecording; +}