Forward disconnectReason to onDisconnected callback (#1031)

Author: lukasIO

.changeset/tasty-dogs-relate.md

@@ -0,0 +1,5 @@
+---
+"@livekit/components-react": patch
+---
+
+Forward disconnectReason to onDisconnected callback

packages/core/etc/components-core.api.md

@@ -106,7 +106,7 @@ export function connectedParticipantsObserver(room: Room, options?: ConnectedPar
 export function connectionStateObserver(room: Room): Observable<ConnectionState>;
 
 // @public (undocumented)
-export function createActiveDeviceObservable(room: Room, kind: MediaDeviceKind): Observable<string | undefined>;
+export function createActiveDeviceObservable(room: Room, kind: MediaDeviceKind): Observable<string>;
 
 // @public (undocumented)
 export function createChatObserver(room: Room): Observable<[message: ChatMessage, participant?: LocalParticipant | RemoteParticipant | undefined]>;

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<React_2.HTMLAttributes<HTMLDivEle
     // (undocumented)
     onConnected?: () => void;
     // (undocumented)
-    onDisconnected?: () => void;
+    onDisconnected?: (reason?: DisconnectReason) => void;
     // (undocumented)
     onEncryptionError?: (error: Error) => void;
     // (undocumented)

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<React.HTMLAttributes<HTMLDivEleme
    */
   connectOptions?: RoomConnectOptions;
   onConnected?: () => void;
-  onDisconnected?: () => void;
+  onDisconnected?: (reason?: DisconnectReason) => void;
   onError?: (error: Error) => void;
   onMediaDeviceFailure?: (failure?: MediaDeviceFailure) => void;
   onEncryptionError?: (error: Error) => void;

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<T extends HTMLElement>(
     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<T extends HTMLElement>(
     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 () => {