@stream-io/video-react-native-sdk 1.28.1 → 1.29.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.28.1",
+  "version": "1.29.0-beta.0",
   "description": "Stream Video SDK for React Native",
   "author": "https://getstream.io",
   "homepage": "https://getstream.io/video/docs/react-native/",
@@ -65,6 +65,7 @@
     "@react-native-firebase/app": ">=17.5.0",
     "@react-native-firebase/messaging": ">=17.5.0",
     "@stream-io/noise-cancellation-react-native": ">=0.1.0",
+    "@stream-io/react-native-callingx": ">=0.1.0",
     "@stream-io/react-native-webrtc": ">=137.1.0",
     "@stream-io/video-filters-react-native": ">=0.1.0",
     "expo": ">=47.0.0",
@@ -72,11 +73,9 @@
     "expo-notifications": "*",
     "react": ">=17.0.0",
     "react-native": ">=0.73.0",
-    "react-native-callkeep": ">=4.3.11",
     "react-native-gesture-handler": ">=2.8.0",
     "react-native-reanimated": ">=2.7.0",
-    "react-native-svg": ">=13.6.0",
-    "react-native-voip-push-notification": ">=3.3.1"
+    "react-native-svg": ">=13.6.0"
   },
   "peerDependenciesMeta": {
     "@notifee/react-native": {
@@ -94,6 +93,9 @@
     "@stream-io/noise-cancellation-react-native": {
       "optional": true
     },
+    "@stream-io/react-native-callingx": {
+      "optional": true
+    },
     "@stream-io/video-filters-react-native": {
       "optional": true
     },
@@ -106,17 +108,11 @@
     "expo-notifications": {
       "optional": true
     },
-    "react-native-callkeep": {
-      "optional": true
-    },
     "react-native-gesture-handler": {
       "optional": true
     },
     "react-native-reanimated": {
       "optional": true
-    },
-    "react-native-voip-push-notification": {
-      "optional": true
     }
   },
   "devDependencies": {
@@ -130,9 +126,10 @@
     "@react-native-firebase/app": "^23.4.0",
     "@react-native-firebase/messaging": "^23.4.0",
     "@react-native/babel-preset": "^0.81.5",
-    "@stream-io/noise-cancellation-react-native": "^0.5.0",
+    "@stream-io/noise-cancellation-react-native": "0.5.0",
+    "@stream-io/react-native-callingx": "0.1.0-beta.0",
     "@stream-io/react-native-webrtc": "137.1.0",
-    "@stream-io/video-filters-react-native": "^0.10.0",
+    "@stream-io/video-filters-react-native": "0.10.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "13.3.3",
     "@tsconfig/node18": "^18.2.4",
@@ -148,11 +145,9 @@
     "react": "19.1.0",
     "react-native": "^0.81.5",
     "react-native-builder-bob": "~0.23",
-    "react-native-callkeep": "^4.3.16",
     "react-native-gesture-handler": "^2.28.0",
     "react-native-reanimated": "~4.1.2",
     "react-native-svg": "^15.14.0",
-    "react-native-voip-push-notification": "3.3.3",
     "react-native-worklets": "^0.5.0",
     "react-test-renderer": "19.1.0",
     "rimraf": "^6.0.1",
@@ -167,4 +162,4 @@
       "typescript"
     ]
   }
-}
+}

package/src/hooks/push/useCallingExpWithCallingStateEffect.ts

@@ -0,0 +1,361 @@
+import {
+  CallingState,
+  MemberResponse,
+  StreamVideoParticipant,
+  videoLoggerSystem,
+} from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useEffect, useMemo, useRef } from 'react';
+import { getCallingxLibIfAvailable } from '../../utils/push/libs/callingx';
+
+const logger = videoLoggerSystem.getLogger(
+  'useCallingExpWithCallingStateEffect',
+);
+
+//calling state methods are not exhaustive, so we need to add more methods to cover different cases
+const canAcceptIncomingCall = (
+  prevState: CallingState | undefined,
+  currentState: CallingState | undefined,
+) => {
+  if (!prevState && !currentState) {
+    return false;
+  }
+
+  const isJoined = (state: CallingState | undefined) => {
+    if (!state) {
+      return false;
+    }
+
+    return state === CallingState.JOINING || state === CallingState.JOINED;
+  };
+
+  return (
+    (!isJoined(prevState) && isJoined(currentState)) ||
+    (prevState === CallingState.JOINING && currentState === CallingState.JOINED)
+  );
+};
+
+const canEndCall = (
+  prevState: CallingState | undefined,
+  currentState: CallingState | undefined,
+) => {
+  if (!prevState && !currentState) {
+    return false;
+  }
+
+  return (
+    (prevState === CallingState.JOINED ||
+      prevState === CallingState.JOINING ||
+      prevState === CallingState.RINGING ||
+      prevState === CallingState.RECONNECTING ||
+      prevState === CallingState.MIGRATING ||
+      prevState === CallingState.OFFLINE) &&
+    (currentState === CallingState.LEFT ||
+      currentState === CallingState.RECONNECTING_FAILED ||
+      currentState === CallingState.IDLE)
+  );
+};
+
+const canStartCall = (
+  prevState: CallingState | undefined,
+  currentState: CallingState | undefined,
+) => {
+  if (!prevState && !currentState) {
+    return false;
+  }
+
+  return (
+    (!prevState ||
+      prevState === CallingState.IDLE ||
+      prevState === CallingState.UNKNOWN) &&
+    (currentState === CallingState.JOINED ||
+      currentState === CallingState.JOINING ||
+      currentState === CallingState.RINGING)
+  );
+};
+
+function getCallDisplayName(
+  callMembers: MemberResponse[] | undefined,
+  participants: StreamVideoParticipant[] | undefined,
+  currentUserId: string | undefined,
+) {
+  if (!callMembers || !participants || !currentUserId) {
+    return 'Call';
+  }
+
+  let names: string[] = [];
+
+  if (callMembers.length > 0) {
+    names = callMembers
+      .filter((member) => member.user.id !== currentUserId)
+      .map((member) => member.user.name)
+      .filter((name): name is string => name !== undefined);
+  } else if (participants.length > 0) {
+    names = participants
+      .filter((participant) => participant.userId !== currentUserId)
+      .map((participant) => participant.name)
+      .filter(Boolean);
+  }
+
+  return names.length > 0 ? names.sort().join(', ') : 'Call';
+}
+
+/**
+ * This hook is used to inform sync call state with CallKit/Telecom (i.e. start call, end call, mute/unmute call).
+ */
+export const useCallingExpWithCallingStateEffect = () => {
+  const {
+    useCallCallingState,
+    // useMicrophoneState,
+    useParticipants,
+    useCallMembers,
+  } = useCallStateHooks();
+
+  const activeCall = useCall();
+  const callingState = useCallCallingState();
+  // const { isMute, microphone } = useMicrophoneState();
+  const callMembers = useCallMembers();
+  const participants = useParticipants();
+
+  const prevState = useRef<CallingState | undefined>(undefined);
+
+  const activeCallCid = activeCall?.cid;
+  const isIncomingCall = activeCall?.ringing && !activeCall?.isCreatedByMe;
+  const isOutcomingCall = activeCall?.ringing && activeCall?.isCreatedByMe;
+  const currentUserId = activeCall?.currentUserId;
+  const isVideoCall = activeCall?.state.settings?.video?.enabled ?? false;
+
+  const callDisplayName = useMemo(
+    () => getCallDisplayName(callMembers, participants, currentUserId),
+    [callMembers, participants, currentUserId],
+  );
+
+  useEffect(() => {
+    return () => {
+      const callingx = getCallingxLibIfAvailable();
+      if (!callingx?.isSetup || !activeCallCid) {
+        return;
+      }
+
+      const isCallRegistered = callingx.isCallRegistered(activeCallCid);
+      if (!isCallRegistered) {
+        logger.debug(
+          `No active call cid to end in calling exp: ${activeCallCid} isCallRegistered: ${isCallRegistered}`,
+        );
+        return;
+      }
+      //if incoming stream call was unmounted, we need to end the call in CallKit/Telecom
+      logger.debug(`Ending call in calling exp: ${activeCallCid}`);
+      callingx
+        .endCallWithReason(activeCallCid, 'local')
+        .catch((error: unknown) => {
+          logger.error(
+            `Error ending call in calling exp: ${activeCallCid}`,
+            error,
+          );
+        });
+    };
+  }, [activeCallCid]);
+
+  useEffect(() => {
+    const callingx = getCallingxLibIfAvailable();
+    if (
+      !callingx?.isSetup ||
+      !activeCallCid ||
+      prevState.current === callingState
+    ) {
+      return;
+    }
+
+    //tells if call is registered in CallKit/Telecom
+    const isCallRegistered = callingx.isCallRegistered(activeCallCid);
+    logger.debug(
+      `useEffect: ${activeCallCid} isCallRegistered: ${isCallRegistered} 
+      isIncomingCall: ${isIncomingCall} isOutcomingCall: ${isOutcomingCall} 
+      prevState: ${prevState.current}, currentState: ${callingState} 
+      isOngoingCallsEnabled: ${callingx.isOngoingCallsEnabled}`,
+    );
+
+    if (
+      isIncomingCall &&
+      isCallRegistered &&
+      canAcceptIncomingCall(prevState.current, callingState)
+    ) {
+      logger.debug(`Should accept call in callkeep: ${activeCallCid}`);
+      callingx.answerIncomingCall(activeCallCid).catch((error: unknown) => {
+        logger.error(
+          `Error answering call in calling exp: ${activeCallCid}`,
+          error,
+        );
+      });
+    } else if (
+      (isOutcomingCall ||
+        (!isIncomingCall && callingx.isOngoingCallsEnabled)) && //we register call in case if is outcoming ringing call or it is non-ringing call and ongoing calls are enabled
+      !isCallRegistered &&
+      canStartCall(prevState.current, callingState)
+    ) {
+      logger.debug(`Should register call in callkeep: ${activeCallCid}`);
+      //we request start call action from CallKit/Telecom, next step is to make call active when we receive call started event
+      callingx
+        .startCall(activeCallCid, activeCallCid, callDisplayName, isVideoCall)
+        .catch((error: unknown) => {
+          logger.error(
+            `Error starting call in calling exp: ${activeCallCid}`,
+            error,
+          );
+        });
+    } else if (
+      isCallRegistered &&
+      canEndCall(prevState.current, callingState)
+    ) {
+      //in case call was registered as incoming and state changed to "not joined", we need to end the call and clear rxjs subject
+      logger.debug(`Should end call in callkeep: ${activeCallCid}`);
+      //TODO: think about sending appropriate reason for end call
+      callingx
+        .endCallWithReason(activeCallCid, 'local')
+        .catch((error: unknown) => {
+          logger.error(
+            `Error ending call in calling exp: ${activeCallCid}`,
+            error,
+          );
+        });
+    }
+
+    prevState.current = callingState;
+  }, [
+    activeCallCid,
+    callingState,
+    callDisplayName,
+    isIncomingCall,
+    isOutcomingCall,
+    isVideoCall,
+  ]);
+
+  useEffect(() => {
+    const callingx = getCallingxLibIfAvailable();
+    if (!callingx?.isSetup || !activeCallCid) {
+      logger.debug(
+        `No active call cid to listen to start call action in calling exp: ${activeCallCid} callingx is not setup`,
+      );
+      return;
+    }
+
+    if (
+      !isOutcomingCall &&
+      !(!isIncomingCall && callingx.isOngoingCallsEnabled)
+    ) {
+      logger.debug(
+        `Call is not outcoming or ongoing calls are not enabled for non-ringing calls`,
+      );
+      return;
+    }
+
+    //listen to start call action from CallKit/Telecom and set the current call active
+    const subscription = callingx.addEventListener(
+      'didReceiveStartCallAction',
+      ({ callId }: { callId: string }) => {
+        if (callId === activeCallCid) {
+          logger.debug(`Received start call action for call: ${activeCallCid}`);
+          callingx
+            .setCurrentCallActive(activeCallCid)
+            .catch((error: unknown) => {
+              logger.error(
+                `Error answering call in calling exp: ${activeCallCid}`,
+                error,
+              );
+            });
+        }
+      },
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, [activeCallCid, isOutcomingCall, isIncomingCall]);
+
+  useEffect(() => {
+    const callingx = getCallingxLibIfAvailable();
+    if (!callingx?.isSetup || !activeCallCid) {
+      return;
+    }
+
+    const isCallRegistered = callingx.isCallRegistered(activeCallCid);
+    if (!isCallRegistered) {
+      logger.debug(
+        `No active call cid to update calling exp: ${activeCallCid} isCallRegistered: ${isCallRegistered}`,
+      );
+      return;
+    }
+
+    callingx.updateDisplay(activeCallCid, activeCallCid, callDisplayName);
+  }, [activeCallCid, callDisplayName]);
+
+  // useEffect(() => {
+  //   const callingx = getCallingxLibIfAvailable();
+  //   if (!callingx?.isSetup || !activeCallCid) {
+  //     return;
+  //   }
+
+  //   const isCallRegistered = callingx.isCallRegistered(activeCallCid);
+  //   if (!isCallRegistered) {
+  //     logger.debug(
+  //       `No active call cid to set muted in calling exp: ${activeCallCid} isCallRegistered: ${isCallRegistered}`,
+  //     );
+  //     return;
+  //   }
+
+  //   callingx.setMutedCall(activeCallCid, isMute);
+  // }, [activeCallCid, isMute]);
+
+  // useEffect(() => {
+  //   const callingx = getCallingxLibIfAvailable();
+  //   if (!callingx?.isSetup || !activeCallCid) {
+  //     return;
+  //   }
+
+  //   const isCallRegistered = callingx.isCallRegistered(activeCallCid);
+  //   if (!isCallRegistered) {
+  //     logger.debug(
+  //       `No active call cid to set muted in calling exp: ${activeCallCid} isCallRegistered: ${isCallRegistered}`,
+  //     );
+  //     return;
+  //   }
+
+  //   //listen to mic toggle events from CallKit/Telecom and update stream call microphone state
+  //   const subscription = callingx.addEventListener(
+  //     'didPerformSetMutedCallAction',
+  //     async (event: { callId: string; muted: boolean }) => {
+  //       const { callId, muted } = event;
+
+  //       if (callId === activeCallCid) {
+  //         const isCurrentlyMuted =
+  //           RxUtils.getCurrentValue(microphone.state.status$) === 'disabled';
+  //         if (isCurrentlyMuted === muted) {
+  //           logger.debug(
+  //             `Mic toggle is already in the desired state: ${muted} for call: ${activeCallCid}`,
+  //           );
+  //           //this check prevents mic toggle when state change was initiated from client and not from CallKit/Telecom
+  //           return;
+  //         }
+
+  //         try {
+  //           if (muted) {
+  //             await microphone.disable();
+  //           } else {
+  //             await microphone.enable();
+  //           }
+  //         } catch (error: unknown) {
+  //           logger.error(
+  //             `Error toggling mic in calling exp: ${activeCallCid}`,
+  //             error,
+  //           );
+  //         }
+  //       }
+  //     },
+  //   );
+
+  //   return () => {
+  //     subscription.remove();
+  //   };
+  // }, [activeCallCid, microphone, isOutcomingCall, isIncomingCall]);
+};

package/src/hooks/push/useIosVoipPushEventsSetupEffect.ts

@@ -1,6 +1,4 @@
 import { type MutableRefObject, useEffect, useRef, useState } from 'react';
-import { getVoipPushNotificationLib } from '../../utils/push/libs';
-
 import { Platform } from 'react-native';
 import { StreamVideoRN } from '../../utils';
 import { onVoipNotificationReceived } from '../../utils/push/internal/ios';
@@ -10,6 +8,7 @@ import {
 } from '@stream-io/video-react-bindings';
 import { setPushLogoutCallback } from '../../utils/internal/pushLogoutCallback';
 import { StreamVideoClient, videoLoggerSystem } from '@stream-io/video-client';
+import { getCallingxLibIfAvailable } from '../../utils/push/libs';
 
 const logger = videoLoggerSystem.getLogger('useIosVoipPushEventsSetupEffect');
 
@@ -28,6 +27,7 @@ function setLogoutCallback(
     lastVoipTokenRef.current = { token: '', userId: '' };
     try {
       await client.removeDevice(token);
+      logger.debug('PushLogoutCallback - Removed voip token', token);
     } catch (err) {
       logger.warn('PushLogoutCallback - Failed to remove voip token', err);
     }
@@ -89,24 +89,12 @@ export const useIosVoipPushEventsSetupEffect = () => {
   useEffect(() => {
     const pushConfig = StreamVideoRN.getConfig().push;
     const pushProviderName = pushConfig?.ios.pushProviderName;
-    if (Platform.OS !== 'ios' || !client || !pushProviderName) {
-      return;
-    }
-    if (!pushConfig.android.incomingCallChannel) {
-      // TODO: remove this check and find a better way once we have telecom integration for android
-      logger.debug(
-        'android incomingCallChannel is not defined, so skipping the useIosVoipPushEventsSetupEffect',
-      );
+    const callingx = getCallingxLibIfAvailable();
+
+    if (Platform.OS !== 'ios' || !client || !pushProviderName || !callingx) {
       return;
     }
 
-    const voipPushNotification = getVoipPushNotificationLib();
-
-    // even though we do this natively, we have to still register here again
-    // natively this will make sure "register" event for JS is sent with the last push token
-    // Necessary if client changed before we got the event here or user logged out and logged in again
-    voipPushNotification.registerVoipToken();
-
     const onTokenReceived = (token: string) => {
       const userId = client.streamClient._user?.id ?? '';
       if (client.streamClient.anonymous || !token || !userId) {
@@ -145,24 +133,24 @@ export const useIosVoipPushEventsSetupEffect = () => {
         });
     };
     // fired when PushKit give us the latest token
-    voipPushNotification.addEventListener('register', (token) => {
-      onTokenReceived(token);
-    });
+    const voipRegisterListener = callingx.addEventListener(
+      'voipNotificationsRegistered',
+      ({ token }) => {
+        onTokenReceived(token);
+      },
+    );
 
-    // this will fire when there are events occured before js bridge initialized
-    voipPushNotification.addEventListener('didLoadWithEvents', (events) => {
-      if (!events || !Array.isArray(events) || events.length < 1) {
-        return;
-      }
-      for (const voipPushEvent of events) {
-        const { name, data } = voipPushEvent;
-        if (name === 'RNVoipPushRemoteNotificationsRegisteredEvent') {
-          onTokenReceived(data);
-        } else if (name === 'RNVoipPushRemoteNotificationReceivedEvent') {
-          onVoipNotificationReceived(data, pushConfig);
-        }
+    // this will return events that were fired before js bridge initialized
+    callingx.getInitialVoipEvents().forEach(({ eventName, params }) => {
+      if (eventName === 'voipNotificationsRegistered' && 'token' in params) {
+        onTokenReceived(params.token);
+      } else if (eventName === 'voipNotificationReceived') {
+        onVoipNotificationReceived(params, pushConfig);
       }
     });
+
+    callingx.registerVoipToken();
+
     lastListener.count += 1;
     const currentListenerCount = lastListener.count;
 
@@ -175,8 +163,7 @@ export const useIosVoipPushEventsSetupEffect = () => {
         return;
       }
       logger.debug(`Voip event listeners are removed for user: ${userId}`);
-      voipPushNotification.removeEventListener('didLoadWithEvents');
-      voipPushNotification.removeEventListener('register');
+      voipRegisterListener.remove();
     };
   }, [client]);
 };