fix: set outgoing call active from callingstate (#2172)

### 💡 Overview

Outgoing call can start with ways 

1. getOrCreate( ring: true )
2. join(ring: true)

we have to start reporting in callkit on 1 itself.. we did only on 2..
this PR fixes that

and also we now report that connection is done only after join.. so that
we get correct time in callkit

Author: santhoshvai

packages/client/src/Call.ts

@@ -484,6 +484,10 @@ export class Call {
     const receiver_id = this.clientStore.connectedUser?.id;
     const ended_at = callSession?.ended_at;
     const created_by_id = this.state.createdBy?.id;
+
+    if (created_by_id === this.currentUserId) {
+      globalThis.streamRNVideoSDK?.callingX?.registerOutgoingCall(this);
+    }
     const rejected_by = callSession?.rejected_by;
     const accepted_by = callSession?.accepted_by;
     let leaveCallIdle = false;
@@ -944,7 +948,7 @@ export class Call {
     const callingX = globalThis.streamRNVideoSDK?.callingX;
     if (callingX) {
       // for Android/iOS, we need to start the call in the callingx library as soon as possible
-      await callingX.startCall(this, this.clientStore.calls);
+      await callingX.joinCall(this, this.clientStore.calls);
     }
 
     await this.setup();

packages/client/src/types.ts

@@ -425,11 +425,12 @@ type StreamRNVideoSDKEndCallReason =
   | 'unknown';
 
 type StreamRNVideoSDKCallingX = {
-  startCall: (call: Call, activeCalls: Call[]) => Promise<void>;
+  joinCall: (call: Call, activeCalls: Call[]) => Promise<void>;
   endCall: (
     call: Call,
     reason?: StreamRNVideoSDKEndCallReason,
   ) => Promise<void>;
+  registerOutgoingCall: (call: Call) => Promise<void>;
 };
 
 export type StreamRNVideoSDKGlobals = {

packages/react-native-sdk/src/hooks/push/useCallingExpWithCallingStateEffect.ts

@@ -1,6 +1,7 @@
-import { videoLoggerSystem } from '@stream-io/video-client';
+import { Call, CallingState, videoLoggerSystem } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useEffect, useMemo } from 'react';
+import { filter, take } from 'rxjs/operators';
 import { getCallDisplayName } from '../../utils/internal/callingx/callingx';
 import { getCallingxLibIfAvailable } from '../../utils/push/libs/callingx';
 
@@ -26,6 +27,40 @@ export const useCallingExpWithCallingStateEffect = () => {
     [callMembers, participants, currentUserId],
   );
 
+  useEffect(() => {
+    const callingx = getCallingxLibIfAvailable();
+    if (!callingx?.isSetup || !activeCall) {
+      return;
+    }
+    // need to capture RINGING -> Joining -> Joined state change for the first time
+    // and inform callingx that the call is active
+    const shouldMakeCallActive = (call: Call): boolean => {
+      // only for outgoing calls or non-ringing ongoing calls in callingx
+      // Note: incoming calls are handled by callingx pending states instead
+      return (
+        (call.ringing && call.isCreatedByMe) ||
+        (!call.ringing && callingx.isOngoingCallsEnabled)
+      );
+    };
+    const subscription = activeCall.state.callingState$
+      .pipe(
+        filter(
+          (callingState) =>
+            shouldMakeCallActive(activeCall) &&
+            callingState === CallingState.JOINED &&
+            callingx.isCallTracked(activeCall.cid),
+        ),
+        take(1), // only need to capture the first joined state for outgoing calls
+        // then subscription completes and is automatically unsubscribed
+      )
+      .subscribe(() => {
+        callingx.setCurrentCallActive(activeCall.cid);
+      });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [activeCall]);
+
   useEffect(() => {
     return () => {
       const callingx = getCallingxLibIfAvailable();

packages/react-native-sdk/src/utils/internal/callingx/callingx.ts

@@ -21,7 +21,7 @@ export function getCallDisplayName(
   callMembers: MemberResponse[] | undefined,
   participants: StreamVideoParticipant[] | undefined,
   currentUserId: string | undefined,
-) {
+): string {
   if (!callMembers || !participants || !currentUserId) {
     return 'Call';
   }
@@ -53,6 +53,42 @@ export function getCallDisplayName(
   return names.sort().join(', ');
 }
 
+function getCallDisplayNameFromCall(call: Call): string {
+  return getCallDisplayName(
+    call.state.members,
+    call.state.participants,
+    call.currentUserId,
+  );
+}
+
+export async function registerOutgoingCall(call: Call) {
+  if (!CallingxModule || !CallingxModule.isSetup) {
+    return;
+  }
+
+  const isOutcomingCall = call.ringing && call.isCreatedByMe;
+  if (!isOutcomingCall) {
+    return;
+  }
+
+  const logger = videoLoggerSystem.getLogger('callingx');
+
+  try {
+    logger.debug(`registerOutgoingCall: Registering outgoing call ${call.cid}`);
+    await CallingxModule.startCall(
+      call.cid, // unique id for call
+      call.id, // phone number for display in dialer (we use call id as phone number)
+      getCallDisplayNameFromCall(call), // display name for display in call screen
+      call.state.settings?.video?.enabled ?? false, // is video call?
+    );
+  } catch (error) {
+    logger.error(
+      `registerOutgoingCall: Error registering outgoing call in callingx: ${call.cid}`,
+      error,
+    );
+  }
+}
+
 /**
  * Starts the call in the callingx library.
  * It is done by client on every join
@@ -61,7 +97,7 @@ export function getCallDisplayName(
  * 2. Displays the incoming call in the callingx library
  * 3. Optionally for non-ringing calls also when ongoing calls are enabled.
  */
-export async function startCallingxCall(call: Call, activeCalls: Call[]) {
+export async function joinCallingxCall(call: Call, activeCalls: Call[]) {
   if (!CallingxModule || !CallingxModule.isSetup) {
     return;
   }
@@ -70,38 +106,31 @@ export async function startCallingxCall(call: Call, activeCalls: Call[]) {
   const isOutcomingCall = call.ringing && call.isCreatedByMe;
   const isIncomingCall = call.ringing && !call.isCreatedByMe;
 
-  const callDisplayName = getCallDisplayName(
-    call.state.members,
-    call.state.participants,
-    call.currentUserId,
-  );
-
   if (
-    !CallingxModule.isCallTracked(call.cid) &&
-    (isOutcomingCall || (!call.ringing && CallingxModule.isOngoingCallsEnabled))
+    isOutcomingCall ||
+    (!call.ringing && CallingxModule.isOngoingCallsEnabled)
   ) {
+    logger.debug(`joinCallingxCall: Joining call ${call.cid}`);
     try {
       await CallingxModule.startCall(
         call.cid, // unique id for call
         call.id, // phone number for display in dialer (we use call id as phone number)
-        callDisplayName, // display name for display in call screen
+        getCallDisplayNameFromCall(call), // display name for display in call screen
         call.state.settings?.video?.enabled ?? false, // is video call?
       );
 
       // Wait for audio session activation on iOS only
       if (Platform.OS === 'ios') {
         await waitForAudioSessionActivation();
       }
-
-      // TODO: this must be done after join call is complete
-      CallingxModule.setCurrentCallActive(call.cid);
     } catch (error) {
       logger.error(
         `startCallingxCall: Error starting call in callingx: ${call.cid}`,
         error,
       );
     }
   } else if (isIncomingCall) {
+    logger.debug(`joinCallingxCall: Joining incoming call ${call.cid}`);
     try {
       // Leave any existing active ringing calls before joining a new ringing call
       const activeCallsToLeave = activeCalls.filter(
@@ -125,7 +154,7 @@ export async function startCallingxCall(call: Call, activeCalls: Call[]) {
       await CallingxModule.displayIncomingCall(
         call.cid, // unique id for call
         call.id, // phone number for display in dialer (we use call id as phone number)
-        callDisplayName, // display name for display in call screen
+        getCallDisplayNameFromCall(call), // display name for display in call screen
         call.state.settings?.video?.enabled ?? false, // is video call?
       );
 
@@ -152,14 +181,14 @@ export async function endCallingxCall(call: Call, reason?: EndCallReason) {
     return;
   }
 
+  const logger = videoLoggerSystem.getLogger('callingx');
   try {
+    logger.debug(`endCallingxCall: Ending call ${call.cid}`);
     await CallingxModule.endCallWithReason(call.cid, reason ?? 'local');
   } catch (error) {
-    videoLoggerSystem
-      .getLogger('callingx')
-      .error(
-        `endCallingxCall: Error ending call in callingx: ${call.cid}`,
-        error,
-      );
+    logger.error(
+      `endCallingxCall: Error ending call in callingx: ${call.cid}`,
+      error,
+    );
   }
 }

packages/react-native-sdk/src/utils/internal/registerSDKGlobals.ts

@@ -1,7 +1,11 @@
 import { StreamRNVideoSDKGlobals } from '@stream-io/video-client';
 import { NativeModules, PermissionsAndroid, Platform } from 'react-native';
 import { getCallingxLibIfAvailable } from '../push/libs/callingx';
-import { endCallingxCall, startCallingxCall } from './callingx/callingx';
+import {
+  endCallingxCall,
+  registerOutgoingCall,
+  joinCallingxCall,
+} from './callingx/callingx';
 
 const StreamInCallManagerNativeModule = NativeModules.StreamInCallManager;
 const StreamVideoReactNativeModule = NativeModules.StreamVideoReactNative as {
@@ -38,8 +42,9 @@ const shouldBypassForCallKit = ({
 
 const streamRNVideoSDKGlobals: StreamRNVideoSDKGlobals = {
   callingX: {
-    startCall: startCallingxCall,
+    joinCall: joinCallingxCall,
     endCall: endCallingxCall,
+    registerOutgoingCall: registerOutgoingCall,
   },
   callManager: {
     setup: ({ defaultDevice, isRingingTypeCall }) => {