Fix connection leaks: Ensure that any pending connection open are cancelled/undo when ActiveCall is unmounted (#3255)

* Better logs for connection/component lifecycle

* fix: `AudioCaptureOptions` was causing un-necessary effect render

AudioCaptureOptions was a different object but with same internal values, use directly deviceId so that Object.is works properly

* fix: Livekit openned connection leaks

* review: rename to AbortHandles

* review: rename variable

---------

Co-authored-by: Timo <toger5@hotmail.de>

src/room/InCallView.tsx

@@ -132,10 +132,23 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const [vm, setVm] = useState<CallViewModel | null>(null);
 
   useEffect(() => {
+    logger.info(
+      `[Lifecycle] InCallView Component mounted, livekitroom state ${livekitRoom?.state}`,
+    );
     return (): void => {
-      livekitRoom?.disconnect().catch((e) => {
-        logger.error("Failed to disconnect from livekit room", e);
-      });
+      logger.info(
+        `[Lifecycle] InCallView Component unmounted, livekitroom state ${livekitRoom?.state}`,
+      );
+      livekitRoom
+        ?.disconnect()
+        .then(() => {
+          logger.info(
+            `[Lifecycle] Disconnected from livekite room, state:${livekitRoom?.state}`,
+          );
+        })
+        .catch((e) => {
+          logger.error("[Lifecycle] Failed to disconnect from livekit room", e);
+        });
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);