From ed616f8f63fe23465f0c16d8ccedcff0d80ab760 Mon Sep 17 00:00:00 2001
From: lukasIO <mail@lukasseiler.de>
Date: Thu, 21 Nov 2024 13:02:04 +0100
Subject: [PATCH] Forward disconnectReason to onDisconnected callback

---
 packages/react/src/components/LiveKitRoom.tsx |  3 +-
 packages/react/src/hooks/useLiveKitRoom.ts    | 39 +++++++------------
 2 files changed, 17 insertions(+), 25 deletions(-)

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<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;
diff --git a/packages/react/src/hooks/useLiveKitRoom.ts b/packages/react/src/hooks/useLiveKitRoom.ts
index 7a0a4437b..752e0ccd0 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,16 +90,27 @@ 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]);
 
@@ -151,27 +163,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 () => {