Add a useEventEmitterThree for livekit's event emitters and use it

src/room/InCallView.tsx

@@ -84,6 +84,7 @@ import { useFullscreen } from "./useFullscreen";
 import { useLayoutStates } from "../video-grid/Layout";
 import { useSFUConfig } from "../livekit/OpenIDLoader";
 import { E2EELock } from "../E2EELock";
+import { useEventEmitterThree } from "../useEvents";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -204,13 +205,7 @@ export function InCallView({
     onLeave();
   }, [onLeave]);
 
-  useEffect(() => {
+  useEventEmitterThree(livekitRoom, RoomEvent.Disconnected, onDisconnected);
-    livekitRoom.on(RoomEvent.Disconnected, onDisconnected);
-
-    return () => {
-      livekitRoom.off(RoomEvent.Disconnected, onDisconnected);
-    };
-  }, [onDisconnected, livekitRoom]);
 
   useEffect(() => {
     widget?.api.transport.send(

src/useEvents.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import { useEffect } from "react";
+import EventEmitter from "eventemitter3";
 
 import type {
   Listener,
@@ -59,3 +60,20 @@ export const useTypedEventEmitter = <
     };
   }, [emitter, eventType, listener]);
 };
+
+// Shortcut for registering a listener on an eventemitter3 EventEmitter (ie. what the LiveKit SDK uses)
+export const useEventEmitterThree = <
+  EventType extends EventEmitter.ValidEventTypes,
+  T extends EventEmitter.EventNames<EventType>
+>(
+  emitter: EventEmitter<EventType>,
+  eventType: T,
+  listener: EventEmitter.EventListener<EventType, T>
+) => {
+  useEffect(() => {
+    emitter.on(eventType, listener);
+    return () => {
+      emitter.off(eventType, listener);
+    };
+  }, [emitter, eventType, listener]);
+};