@stream-io/video-react-native-sdk 1.29.4-beta.0 → 1.30.0

package/src/components/Call/CallLayout/CallParticipantsGrid.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
-import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { debounceTime } from 'rxjs';
 import {
   CallParticipantsList as DefaultCallParticipantsList,
   type CallParticipantsListComponentProps,
@@ -49,19 +49,33 @@ export const CallParticipantsGrid = ({
   const {
     theme: { colors, callParticipantsGrid },
   } = useTheme();
-  const {
-    useRemoteParticipants,
-    useParticipants,
-    useLocalParticipant,
-    useDominantSpeaker,
-  } = useCallStateHooks();
-  const _remoteParticipants = useRemoteParticipants();
+  const call = useCall();
+  const { useLocalParticipant, useDominantSpeaker } = useCallStateHooks();
   const localParticipant = useLocalParticipant();
-  const _allParticipants = useParticipants();
   const dominantSpeaker = useDominantSpeaker();
-  // we debounce the participants arrays to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
-  const remoteParticipants = useDebouncedValue(_remoteParticipants, 300);
-  const allParticipants = useDebouncedValue(_allParticipants, 300);
+  const [remoteParticipants, setRemoteParticipants] = useState<
+    StreamVideoParticipant[]
+  >(() => call?.state.remoteParticipants ?? []);
+  const [allParticipants, setAllParticipants] = useState<
+    StreamVideoParticipant[]
+  >(() => call?.state.participants ?? []);
+  useEffect(() => {
+    if (!call) {
+      setRemoteParticipants([]);
+      setAllParticipants([]);
+      return;
+    }
+    const sub1 = call.state.remoteParticipants$
+      .pipe(debounceTime(300))
+      .subscribe(setRemoteParticipants);
+    const sub2 = call.state.participants$
+      .pipe(debounceTime(300))
+      .subscribe(setAllParticipants);
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+    };
+  }, [call]);
   const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };

package/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx

@@ -1,11 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   hasScreenShare,
-  speakerLayoutSortPreset,
+  type StreamVideoParticipant,
 } from '@stream-io/video-client';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCall } from '@stream-io/video-react-bindings';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
-import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { debounceTime } from 'rxjs';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import {
   CallParticipantsList as DefaultCallParticipantsList,
@@ -56,15 +56,24 @@ export const CallParticipantsSpotlight = ({
     theme: { callParticipantsSpotlight, variants },
   } = useTheme();
   const styles = useStyles();
-  const { useParticipants } = useCallStateHooks();
-  const _allParticipants = useParticipants({
-    sortBy: speakerLayoutSortPreset,
-  });
-  const allParticipants = useDebouncedValue(_allParticipants, 300); // we debounce the participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
+  const call = useCall();
+  const [allParticipants, setAllParticipants] = useState<
+    StreamVideoParticipant[]
+  >(() => call?.state.participants ?? []);
+  useEffect(() => {
+    if (!call) {
+      setAllParticipants([]);
+      return;
+    }
+    const sub = call.state.participants$
+      .pipe(debounceTime(300))
+      .subscribe(setAllParticipants);
+    return () => sub.unsubscribe();
+  }, [call]);
   const [participantInSpotlight, ...otherParticipants] = allParticipants;
   const isScreenShareOnSpotlight =
     participantInSpotlight && hasScreenShare(participantInSpotlight);
-  const isUserAloneInCall = _allParticipants?.length === 1;
+  const isUserAloneInCall = allParticipants.length === 1;
 
   const isInPiP = useIsInPiPMode();
 

package/src/components/Call/CallParticipantsList/CallParticipantsList.tsx

@@ -1,7 +1,7 @@
 import React, {
   useCallback,
+  useEffect,
   useMemo,
-  useReducer,
   useRef,
   useState,
 } from 'react';
@@ -17,7 +17,7 @@ import {
   type StreamVideoParticipantPatches,
   VisibilityState,
 } from '@stream-io/video-client';
-import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { Subject, debounceTime } from 'rxjs';
 import { useCall } from '@stream-io/video-react-bindings';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import {
@@ -104,9 +104,24 @@ export const CallParticipantsList = ({
   // we use a HashSet to track the currently viewable participants
   // and a separate force update state to rerender the component to inform that the HashSet has changed
   // NOTE: we use set instead of array or object for O(1) lookup, add and delete
-  const viewableParticipantSessionIds = useRef<Set<string>>(new Set());
-  const [_forceUpdateValue, forceUpdate] = useReducer((x) => x + 1, 0);
-  const forceUpdateValue = useDebouncedValue(_forceUpdateValue, 500); // we debounce forced value to avoid multiple viewability change continuous rerenders due to callbacks that occurs simultaneously during a large list scroll or when scrolling is completed
+  // Lazy ref init: avoids recreating instances on every render (useRef doesn't support initializer fns)
+  const viewableParticipantSessionIds = useRef<Set<string>>(null!);
+  if (!viewableParticipantSessionIds.current) {
+    viewableParticipantSessionIds.current = new Set();
+  }
+  const forceUpdate$Ref = useRef<Subject<void>>(null!);
+  if (!forceUpdate$Ref.current) {
+    forceUpdate$Ref.current = new Subject<void>();
+  }
+  const forceUpdate$ = forceUpdate$Ref.current;
+  const [forceUpdateValue, setForceUpdateValue] = useState(0);
+  useEffect(() => {
+    const sub = forceUpdate$.pipe(debounceTime(500)).subscribe(() => {
+      setForceUpdateValue((v) => v + 1);
+    });
+    return () => sub.unsubscribe();
+  }, [forceUpdate$]);
+  const forceUpdate = useCallback(() => forceUpdate$.next(), [forceUpdate$]);
 
   // we use a ref to store the active call object
   // so that it can be used in the onViewableItemsChanged callback

package/src/hooks/push/index.ts

@@ -1,4 +1,5 @@
 import { useIosVoipPushEventsSetupEffect } from './useIosVoipPushEventsSetupEffect';
+import { useProcessPushCallEffect } from './useProcessPushCallEffect';
 import { useInitAndroidTokenAndRest } from './useInitAndroidTokenAndRest';
 import { useIosInitRemoteNotifications } from './useIosInitRemoteNotifications';
 import { useProcessPushNonRingingCallEffect } from './useProcessPushNonRingingCallEffect';
@@ -11,5 +12,6 @@ export const usePushRegisterEffect = () => {
   useIosInitRemoteNotifications();
   useIosVoipPushEventsSetupEffect();
   useProcessPushNonRingingCallEffect();
+  useProcessPushCallEffect();
   useInitAndroidTokenAndRest();
 };

package/src/hooks/push/useIosCallkeepWithCallingStateEffect.ts

@@ -0,0 +1,235 @@
+import {
+  CallingState,
+  RxUtils,
+  videoLoggerSystem,
+} from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { NativeModules, Platform } from 'react-native';
+import { useEffect, useState } from 'react';
+import { StreamVideoRN } from '../../utils';
+import { getCallKeepLib } from '../../utils/push/libs';
+import {
+  voipCallkeepAcceptedCallOnNativeDialerMap$,
+  voipCallkeepCallOnForegroundMap$,
+  voipPushNotificationCallCId$,
+} from '../../utils/push/internal/rxSubjects';
+
+const isNonActiveCallingState = (callingState: CallingState) => {
+  return (
+    callingState === CallingState.IDLE ||
+    callingState === CallingState.UNKNOWN ||
+    callingState === CallingState.LEFT
+  );
+};
+
+const isAcceptedCallingState = (callingState: CallingState) => {
+  return (
+    callingState === CallingState.JOINING ||
+    callingState === CallingState.JOINED
+  );
+};
+
+const unsubscribeCallkeepEvents = async (activeCallCid: string | undefined) => {
+  const voipPushNotificationCallCId = RxUtils.getCurrentValue(
+    voipPushNotificationCallCId$,
+  );
+  if (activeCallCid && activeCallCid === voipPushNotificationCallCId) {
+    // callkeep events should not be listened anymore so clear the call cid
+    voipPushNotificationCallCId$.next(undefined);
+  }
+  return await NativeModules.StreamVideoReactNative?.removeIncomingCall(
+    activeCallCid,
+  );
+};
+
+const logger = videoLoggerSystem.getLogger(
+  'useIosCallkeepWithCallingStateEffect',
+);
+const log = (message: string) => {
+  logger.warn(message);
+};
+
+/**
+ * This hook is used to inform the callkeep library that the call has been joined or ended.
+ */
+export const useIosCallkeepWithCallingStateEffect = () => {
+  const activeCall = useCall();
+  const { useCallCallingState } = useCallStateHooks();
+  const callingState = useCallCallingState();
+  const [acceptedForegroundCallkeepMap, setAcceptedForegroundCallkeepMap] =
+    useState<{
+      uuid: string;
+      cid: string;
+    }>();
+
+  useEffect(() => {
+    return () => {
+      const pushConfig = StreamVideoRN.getConfig().push;
+      if (
+        Platform.OS !== 'ios' ||
+        !pushConfig ||
+        !pushConfig.ios?.pushProviderName
+      ) {
+        return;
+      }
+      if (!pushConfig.android.incomingCallChannel) {
+        // TODO: remove this check and find a better way once we have telecom integration for android
+        return;
+      }
+
+      const callkeep = getCallKeepLib();
+      // if the component is unmounted and the callID was not reported to callkeep, then report it now
+      if (acceptedForegroundCallkeepMap) {
+        log(
+          `Ending call in callkeep: ${acceptedForegroundCallkeepMap.cid}, reason: component unmounted and call was present in acceptedForegroundCallkeepMap`,
+        );
+        unsubscribeCallkeepEvents(acceptedForegroundCallkeepMap.cid).then(() =>
+          callkeep.endCall(acceptedForegroundCallkeepMap.uuid),
+        );
+      }
+    };
+  }, [acceptedForegroundCallkeepMap]);
+
+  const activeCallCid = activeCall?.cid;
+
+  useEffect(() => {
+    return () => {
+      const pushConfig = StreamVideoRN.getConfig().push;
+      if (
+        Platform.OS !== 'ios' ||
+        !pushConfig ||
+        !pushConfig.ios?.pushProviderName ||
+        !activeCallCid
+      ) {
+        return;
+      }
+      if (!pushConfig.android.incomingCallChannel) {
+        // TODO: remove this check and find a better way once we have telecom integration for android
+        return;
+      }
+      const nativeDialerAcceptedCallMap = RxUtils.getCurrentValue(
+        voipCallkeepAcceptedCallOnNativeDialerMap$,
+      );
+      const foregroundIncomingCallkeepMap = RxUtils.getCurrentValue(
+        voipCallkeepCallOnForegroundMap$,
+      );
+      const callkeep = getCallKeepLib();
+      if (activeCallCid === nativeDialerAcceptedCallMap?.cid) {
+        log(
+          `Ending call in callkeep: ${activeCallCid}, reason: activeCallCid changed or was removed and call was present in nativeDialerAcceptedCallMap`,
+        );
+        unsubscribeCallkeepEvents(activeCallCid).then(() =>
+          callkeep.endCall(nativeDialerAcceptedCallMap.uuid),
+        );
+        // no need to keep this reference anymore
+        voipCallkeepAcceptedCallOnNativeDialerMap$.next(undefined);
+      } else if (activeCallCid === foregroundIncomingCallkeepMap?.cid) {
+        log(
+          `Ending call in callkeep: ${activeCallCid}, reason: activeCallCid changed or was removed and call was present in foregroundIncomingCallkeepMap`,
+        );
+        unsubscribeCallkeepEvents(activeCallCid).then(() =>
+          callkeep.endCall(foregroundIncomingCallkeepMap.uuid),
+        );
+      }
+    };
+  }, [activeCallCid]);
+
+  const pushConfig = StreamVideoRN.getConfig().push;
+  if (
+    Platform.OS !== 'ios' ||
+    !pushConfig ||
+    !pushConfig.ios.pushProviderName ||
+    !activeCallCid
+  ) {
+    return;
+  }
+  if (!pushConfig.android.incomingCallChannel) {
+    // TODO: remove this check and find a better way once we have telecom integration for android
+    return;
+  }
+
+  /**
+   * Check if current call is still needed to be accepted in callkeep
+   */
+  if (
+    isAcceptedCallingState(callingState) &&
+    acceptedForegroundCallkeepMap?.cid !== activeCallCid
+  ) {
+    const callkeep = getCallKeepLib();
+    // push notification was displayed
+    // but the call has been accepted through the app and not through the native dialer
+    const foregroundCallkeepMap = RxUtils.getCurrentValue(
+      voipCallkeepCallOnForegroundMap$,
+    );
+    if (foregroundCallkeepMap && foregroundCallkeepMap.cid === activeCallCid) {
+      log(
+        // @ts-expect-error - types issue
+        `Accepting call in callkeep: ${activeCallCid}, reason: callingstate went to ${CallingState[callingState]} and call was present in foregroundCallkeepMap`,
+      );
+      // no need to keep this reference anymore
+      voipCallkeepCallOnForegroundMap$.next(undefined);
+      NativeModules.StreamVideoReactNative?.removeIncomingCall(
+        activeCallCid,
+      ).then(() => callkeep.answerIncomingCall(foregroundCallkeepMap.uuid));
+      // this call should be accepted in callkeep
+      setAcceptedForegroundCallkeepMap(foregroundCallkeepMap);
+    }
+  }
+
+  /**
+   * Check if current call is still needed to be ended in callkeep
+   */
+  if (isNonActiveCallingState(callingState)) {
+    const callkeep = getCallKeepLib();
+
+    // this was a previously joined call which had push notification displayed
+    // the call was accepted through the app and not through native dialer
+    // the call was left using the leave button in the app and not through native dialer
+    if (activeCallCid === acceptedForegroundCallkeepMap?.cid) {
+      log(
+        // @ts-expect-error - types issue
+        `Ending call in callkeep: ${activeCallCid}, reason: callingstate went to ${CallingState[callingState]} and call was present in acceptedForegroundCallkeepMap`,
+      );
+      unsubscribeCallkeepEvents(activeCallCid).then(() =>
+        callkeep.endCall(acceptedForegroundCallkeepMap.uuid),
+      );
+      setAcceptedForegroundCallkeepMap(undefined);
+      return;
+    }
+    // this was a call which had push notification displayed but never joined
+    // the user rejected in the app and not from native dialer
+    const foregroundIncomingCallkeepMap = RxUtils.getCurrentValue(
+      voipCallkeepCallOnForegroundMap$,
+    );
+    if (activeCallCid === foregroundIncomingCallkeepMap?.cid) {
+      log(
+        // @ts-expect-error - types issue
+        `Ending call in callkeep: ${activeCallCid}, reason: callingstate went to ${CallingState[callingState]} and call was present in foregroundIncomingCallkeepMap`,
+      );
+      unsubscribeCallkeepEvents(activeCallCid).then(() =>
+        callkeep.endCall(foregroundIncomingCallkeepMap.uuid),
+      );
+      // no need to keep this reference anymore
+      voipCallkeepCallOnForegroundMap$.next(undefined);
+      return;
+    }
+    // this was a previously joined call
+    // it was an accepted call from native dialer and not from the app
+    // the user left using the leave button in the app
+    const nativeDialerAcceptedCallMap = RxUtils.getCurrentValue(
+      voipCallkeepAcceptedCallOnNativeDialerMap$,
+    );
+    if (activeCallCid === nativeDialerAcceptedCallMap?.cid) {
+      log(
+        // @ts-expect-error - types issue
+        `Ending call in callkeep: ${activeCallCid}, reason: callingstate went to ${CallingState[callingState]} and call was present in nativeDialerAcceptedCallMap`,
+      );
+      unsubscribeCallkeepEvents(activeCallCid).then(() =>
+        callkeep.endCall(nativeDialerAcceptedCallMap.uuid),
+      );
+      // no need to keep this reference anymore
+      voipCallkeepAcceptedCallOnNativeDialerMap$.next(undefined);
+      return;
+    }
+  }
+};

package/src/hooks/push/useIosVoipPushEventsSetupEffect.ts

@@ -1,4 +1,6 @@
 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';
@@ -8,7 +10,6 @@ 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');
 
@@ -27,7 +28,6 @@ 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,12 +89,24 @@ export const useIosVoipPushEventsSetupEffect = () => {
   useEffect(() => {
     const pushConfig = StreamVideoRN.getConfig().push;
     const pushProviderName = pushConfig?.ios.pushProviderName;
-    const callingx = getCallingxLibIfAvailable();
-
-    if (Platform.OS !== 'ios' || !client || !pushProviderName || !callingx) {
+    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',
+      );
       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) {
@@ -133,24 +145,24 @@ export const useIosVoipPushEventsSetupEffect = () => {
         });
     };
     // fired when PushKit give us the latest token
-    const voipRegisterListener = callingx.addEventListener(
-      'voipNotificationsRegistered',
-      ({ token }) => {
-        onTokenReceived(token);
-      },
-    );
+    voipPushNotification.addEventListener('register', (token) => {
+      onTokenReceived(token);
+    });
 
-    // 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);
+    // 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);
+        }
       }
     });
-
-    callingx.registerVoipToken();
-
     lastListener.count += 1;
     const currentListenerCount = lastListener.count;
 
@@ -163,7 +175,8 @@ export const useIosVoipPushEventsSetupEffect = () => {
         return;
       }
       logger.debug(`Voip event listeners are removed for user: ${userId}`);
-      voipRegisterListener.remove();
+      voipPushNotification.removeEventListener('didLoadWithEvents');
+      voipPushNotification.removeEventListener('register');
     };
   }, [client]);
 };

package/src/hooks/push/useProcessPushCallEffect.ts

@@ -0,0 +1,108 @@
+import {
+  pushAcceptedIncomingCallCId$,
+  pushAndroidBackgroundDeliveredIncomingCallCId$,
+  pushRejectedIncomingCallCId$,
+  pushTappedIncomingCallCId$,
+} from '../../utils/push/internal/rxSubjects';
+import { useEffect } from 'react';
+import { StreamVideoRN } from '../../utils';
+import {
+  useConnectedUser,
+  useStreamVideoClient,
+} from '@stream-io/video-react-bindings';
+import { BehaviorSubject } from 'rxjs';
+import { distinctUntilChanged, filter } from 'rxjs/operators';
+import { processCallFromPush } from '../../utils/push/internal/utils';
+import { StreamVideoClient, videoLoggerSystem } from '@stream-io/video-client';
+import type { StreamVideoConfig } from '../../utils/StreamVideoRN/types';
+
+/**
+ * This hook is used to process the incoming call data via push notifications using the relevant rxjs subjects
+ * It either joins or leaves the call based on the user's action.
+ * Note: this effect cannot work when push notifications are received when the app is in quit state or in other words when the client is not connected with a websocket.
+ * So we essentially run this effect only when the client is connected with a websocket.
+ */
+export const useProcessPushCallEffect = () => {
+  const client = useStreamVideoClient();
+  const connectedUserId = useConnectedUser()?.id;
+  // The Effect to join/reject call automatically when incoming call was received and processed from push notification
+  useEffect(() => {
+    const pushConfig = StreamVideoRN.getConfig().push;
+    if (!pushConfig || !client || !connectedUserId) {
+      return;
+    }
+
+    videoLoggerSystem
+      .getLogger('useProcessPushCallEffect')
+      .debug(
+        `Adding subscriptions to process incoming call from push notification`,
+      );
+
+    // if the user accepts the call from push notification we join the call
+    const acceptedCallSubscription = createCallSubscription(
+      pushAcceptedIncomingCallCId$,
+      client,
+      pushConfig,
+      'accept',
+    );
+
+    // if the user rejects the call from push notification we leave the call
+    const declinedCallSubscription = createCallSubscription(
+      pushRejectedIncomingCallCId$,
+      client,
+      pushConfig,
+      'decline',
+    );
+
+    // if the user taps the call from push notification we do nothing as the only thing is to get the call which adds it to the client
+    const pressedCallSubscription = createCallSubscription(
+      pushTappedIncomingCallCId$,
+      client,
+      pushConfig,
+      'pressed',
+    );
+
+    const backgroundIncomingDeliveredCallSubscription = createCallSubscription(
+      pushAndroidBackgroundDeliveredIncomingCallCId$,
+      client,
+      pushConfig,
+      'backgroundDelivered',
+    );
+
+    return () => {
+      acceptedCallSubscription.unsubscribe();
+      declinedCallSubscription.unsubscribe();
+      pressedCallSubscription.unsubscribe();
+      backgroundIncomingDeliveredCallSubscription.unsubscribe();
+    };
+  }, [client, connectedUserId]);
+};
+
+/**
+ * A type guard to check if the cid is not undefined
+ */
+function cidIsNotUndefined(cid: string | undefined): cid is string {
+  return cid !== undefined;
+}
+
+/**
+ * The common logic to create a subscription for the given call cid and action
+ */
+const createCallSubscription = (
+  behaviourSubjectWithCallCid: BehaviorSubject<string | undefined>,
+  client: StreamVideoClient,
+  pushConfig: NonNullable<StreamVideoConfig['push']>,
+  action: 'accept' | 'decline' | 'pressed' | 'backgroundDelivered',
+) => {
+  return behaviourSubjectWithCallCid
+    .pipe(distinctUntilChanged(), filter(cidIsNotUndefined))
+    .subscribe(async (callCId) => {
+      videoLoggerSystem
+        .getLogger('useProcessPushCallEffect')
+        .debug(
+          `Processing call from push notification with action: ${action} and callCId: ${callCId}`,
+        );
+      await processCallFromPush(client, callCId, action, pushConfig);
+      behaviourSubjectWithCallCid.next(undefined); // remove the current call id to avoid processing again
+    });
+};