diff --git a/.changeset/tasty-dogs-relate.md b/.changeset/tasty-dogs-relate.md new file mode 100644 index 000000000..1c0dab827 --- /dev/null +++ b/.changeset/tasty-dogs-relate.md @@ -0,0 +1,5 @@ +--- +"@livekit/components-react": patch +--- + +Forward disconnectReason to onDisconnected callback diff --git a/packages/core/etc/components-core.api.md b/packages/core/etc/components-core.api.md index 0d854846f..869248941 100644 --- a/packages/core/etc/components-core.api.md +++ b/packages/core/etc/components-core.api.md @@ -106,7 +106,7 @@ export function connectedParticipantsObserver(room: Room, options?: ConnectedPar export function connectionStateObserver(room: Room): Observable; // @public (undocumented) -export function createActiveDeviceObservable(room: Room, kind: MediaDeviceKind): Observable; +export function createActiveDeviceObservable(room: Room, kind: MediaDeviceKind): Observable; // @public (undocumented) export function createChatObserver(room: Room): Observable<[message: ChatMessage, participant?: LocalParticipant | RemoteParticipant | undefined]>; diff --git a/packages/react/etc/components-react.api.md b/packages/react/etc/components-react.api.md index 0a8d894fd..01c37d8a5 100644 --- a/packages/react/etc/components-react.api.md +++ b/packages/react/etc/components-react.api.md @@ -11,6 +11,7 @@ import { ConnectionQuality } from 'livekit-client'; import { ConnectionState as ConnectionState_2 } from 'livekit-client'; import { CreateLocalTracksOptions } from 'livekit-client'; import { DataPublishOptions } from 'livekit-client'; +import { DisconnectReason } from 'livekit-client'; import { HTMLAttributes } from 'react'; import { LocalAudioTrack } from 'livekit-client'; import { LocalParticipant } from 'livekit-client'; @@ -368,7 +369,7 @@ export interface LiveKitRoomProps extends Omit void; // (undocumented) - onDisconnected?: () => void; + onDisconnected?: (reason?: DisconnectReason) => void; // (undocumented) onEncryptionError?: (error: Error) => void; // (undocumented) diff --git a/packages/react/src/components/LiveKitRoom.tsx b/packages/react/src/components/LiveKitRoom.tsx index 71f89415e..8624ca457 100644 --- a/packages/react/src/components/LiveKitRoom.tsx +++ b/packages/react/src/components/LiveKitRoom.tsx @@ -1,5 +1,6 @@ import type { AudioCaptureOptions, + DisconnectReason, RoomConnectOptions, RoomOptions, ScreenShareCaptureOptions, @@ -64,7 +65,7 @@ export interface LiveKitRoomProps extends Omit void; - onDisconnected?: () => void; + onDisconnected?: (reason?: DisconnectReason) => void; onError?: (error: Error) => void; onMediaDeviceFailure?: (failure?: MediaDeviceFailure) => void; onEncryptionError?: (error: Error) => void; diff --git a/packages/react/src/hooks/useLiveKitRoom.ts b/packages/react/src/hooks/useLiveKitRoom.ts index 7a0a4437b..680ea4f83 100644 --- a/packages/react/src/hooks/useLiveKitRoom.ts +++ b/packages/react/src/hooks/useLiveKitRoom.ts @@ -1,5 +1,6 @@ import { log, setupLiveKitRoom } from '@livekit/components-core'; -import { Room, MediaDeviceFailure, RoomEvent, ConnectionState } from 'livekit-client'; +import type { DisconnectReason } from 'livekit-client'; +import { Room, MediaDeviceFailure, RoomEvent } from 'livekit-client'; import * as React from 'react'; import type { HTMLAttributes } from 'react'; @@ -89,18 +90,39 @@ export function useLiveKitRoom( const handleEncryptionError = (e: Error) => { onEncryptionError?.(e); }; + const handleDisconnected = (reason?: DisconnectReason) => { + onDisconnected?.(reason); + }; + const handleConnected = () => { + onConnected?.(); + }; + room .on(RoomEvent.SignalConnected, onSignalConnected) .on(RoomEvent.MediaDevicesError, handleMediaDeviceError) - .on(RoomEvent.EncryptionError, handleEncryptionError); + .on(RoomEvent.EncryptionError, handleEncryptionError) + .on(RoomEvent.Disconnected, handleDisconnected) + .on(RoomEvent.Connected, handleConnected); return () => { room .off(RoomEvent.SignalConnected, onSignalConnected) .off(RoomEvent.MediaDevicesError, handleMediaDeviceError) - .off(RoomEvent.EncryptionError, handleEncryptionError); + .off(RoomEvent.EncryptionError, handleEncryptionError) + .off(RoomEvent.Disconnected, handleDisconnected) + .off(RoomEvent.Connected, handleConnected); }; - }, [room, audio, video, screen, onError, onEncryptionError, onMediaDeviceFailure]); + }, [ + room, + audio, + video, + screen, + onError, + onEncryptionError, + onMediaDeviceFailure, + onConnected, + onDisconnected, + ]); React.useEffect(() => { if (!room) return; @@ -151,27 +173,6 @@ export function useLiveKitRoom( simulateParticipants, ]); - React.useEffect(() => { - if (!room) return; - const connectionStateChangeListener = (state: ConnectionState) => { - switch (state) { - case ConnectionState.Disconnected: - if (onDisconnected) onDisconnected(); - break; - case ConnectionState.Connected: - if (onConnected) onConnected(); - break; - - default: - break; - } - }; - room.on(RoomEvent.ConnectionStateChanged, connectionStateChangeListener); - return () => { - room.off(RoomEvent.ConnectionStateChanged, connectionStateChangeListener); - }; - }, [token, onConnected, onDisconnected, room]); - React.useEffect(() => { if (!room) return; return () => {