@stream-io/video-react-native-sdk 0.1.2 → 0.1.4

package/src/utils/push/android.ts

@@ -2,14 +2,23 @@ import notifee, { EventType, Event } from '@notifee/react-native';
 import { FirebaseMessagingTypes } from '@react-native-firebase/messaging';
 import { StreamVideoClient } from '@stream-io/video-client';
 import { Platform } from 'react-native';
-import type { StreamVideoConfig } from '../StreamVideoRN/types';
-import { getFirebaseMessagingLib } from './libs';
+import type {
+  NonRingingPushEvent,
+  StreamVideoConfig,
+} from '../StreamVideoRN/types';
+import {
+  getFirebaseMessagingLib,
+  getExpoNotificationsLib,
+  getExpoTaskManagerLib,
+} from './libs';
 import {
   pushAcceptedIncomingCallCId$,
   pushRejectedIncomingCallCId$,
   pushTappedIncomingCallCId$,
+  pushNonRingingCallData$,
 } from './rxSubjects';
 import { processCallFromPushInBackground } from './utils';
+import { setPushLogoutCallback } from '../internal/pushLogoutCallback';
 
 const ACCEPT_CALL_ACTION_ID = 'accept';
 const DECLINE_CALL_ACTION_ID = 'decline';
@@ -21,17 +30,59 @@ export function setupFirebaseHandlerAndroid(pushConfig: PushConfig) {
   if (Platform.OS !== 'android') {
     return;
   }
-  const messaging = getFirebaseMessagingLib();
-  messaging().setBackgroundMessageHandler(
-    async (msg) => await firebaseMessagingOnMessageHandler(msg, pushConfig),
-  );
-  // messaging().onMessage(firebaseMessagingOnMessageHandler); // this is to listen to foreground messages, which we dont need for now
+  if (pushConfig.isExpo) {
+    const Notifications = getExpoNotificationsLib();
+    const TaskManager = getExpoTaskManagerLib();
+    const BACKGROUND_NOTIFICATION_TASK =
+      'STREAM-VIDEO-SDK-INTERNAL-BACKGROUND-NOTIFICATION-TASK';
+
+    TaskManager.defineTask(BACKGROUND_NOTIFICATION_TASK, ({ data, error }) => {
+      if (error) {
+        return;
+      }
+      // @ts-ignore
+      const dataToProcess = data.notification?.data;
+      firebaseMessagingOnMessageHandler(dataToProcess, pushConfig);
+    });
+    // background handler
+    Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK);
+    // foreground handler
+    Notifications.setNotificationHandler({
+      handleNotification: async (notification) => {
+        // @ts-ignore
+        const trigger = notification?.request?.trigger;
+        if (trigger.type === 'push') {
+          const data = trigger?.remoteMessage?.data;
+          if (data?.sender === 'stream.video') {
+            await firebaseMessagingOnMessageHandler(data, pushConfig);
+            return {
+              shouldShowAlert: false,
+              shouldPlaySound: false,
+              shouldSetBadge: false,
+            };
+          }
+        }
+        return {
+          shouldShowAlert: true,
+          shouldPlaySound: false,
+          shouldSetBadge: false,
+        };
+      },
+    });
+  } else {
+    const messaging = getFirebaseMessagingLib();
+    messaging().setBackgroundMessageHandler(
+      async (msg) =>
+        await firebaseMessagingOnMessageHandler(msg.data, pushConfig),
+    );
+    messaging().onMessage((msg) =>
+      firebaseMessagingOnMessageHandler(msg.data, pushConfig),
+    ); // this is to listen to foreground messages, which we dont need for now
+  }
   notifee.onBackgroundEvent(async (event) => {
-    // NOTE: When app was opened from a quit state, we will never hit this when on accept event as app will open and the click event will go to foreground
     await onNotifeeEvent(event, pushConfig);
   });
   notifee.onForegroundEvent((event) => {
-    // NOTE: When app was opened from a quit state, we will never hit this when on accept event as app will open and go to foreground immediately
     onNotifeeEvent(event, pushConfig);
   });
 }
@@ -40,23 +91,47 @@ export function setupFirebaseHandlerAndroid(pushConfig: PushConfig) {
 export async function initAndroidPushToken(
   client: StreamVideoClient,
   pushConfig: PushConfig,
+  setUnsubscribeListener: (unsubscribe: () => void) => void,
 ) {
-  if (Platform.OS !== 'android') {
+  if (Platform.OS !== 'android' || !pushConfig.android.pushProviderName) {
     return;
   }
-  const messaging = getFirebaseMessagingLib();
-  const token = await messaging().getToken();
-  const push_provider_name = pushConfig.android.pushProviderName;
-  await client.addDevice(token, 'firebase', push_provider_name);
+  const setDeviceToken = async (token: string) => {
+    setPushLogoutCallback(() => {
+      client.removeDevice(token).catch((err) => {
+        console.warn('Failed to remove voip token from stream', err);
+      });
+    });
+    const push_provider_name = pushConfig.android.pushProviderName;
+    await client.addDevice(token, 'firebase', push_provider_name);
+  };
+  if (pushConfig.isExpo) {
+    const expoNotificationsLib = getExpoNotificationsLib();
+    const subscription = expoNotificationsLib.addPushTokenListener(
+      (devicePushToken) => {
+        setDeviceToken(devicePushToken.data);
+      },
+    );
+    setUnsubscribeListener(() => subscription.remove());
+    const devicePushToken =
+      await expoNotificationsLib.getDevicePushTokenAsync();
+    const token = devicePushToken.data;
+    await setDeviceToken(token);
+  } else {
+    const messaging = getFirebaseMessagingLib();
+    const unsubscribe = messaging().onTokenRefresh((refreshedToken) =>
+      setDeviceToken(refreshedToken),
+    );
+    setUnsubscribeListener(unsubscribe);
+    const token = await messaging().getToken();
+    await setDeviceToken(token);
+  }
 }
 
 const firebaseMessagingOnMessageHandler = async (
-  message: FirebaseMessagingTypes.RemoteMessage,
+  data: FirebaseMessagingTypes.RemoteMessage['data'],
   pushConfig: PushConfig,
 ) => {
-  if (Platform.OS !== 'android') {
-    return;
-  }
   /* Example data from firebase
     "message": {
         "data": {
@@ -72,43 +147,86 @@ const firebaseMessagingOnMessageHandler = async (
         // other stuff
     }
   */
-  const data = message.data;
   if (!data || data.sender !== 'stream.video') {
     return;
   }
-  await notifee.createChannel(pushConfig.android.incomingCallChannel);
-  const { getTitle, getBody } =
-    pushConfig.android.incomingCallNotificationTextGetters;
-  const channelId = pushConfig.android.incomingCallChannel.id;
-  const createdUserName = data.created_by_display_name;
-  await notifee.displayNotification({
-    title: getTitle(createdUserName),
-    body: getBody(createdUserName),
-    data,
-    android: {
-      channelId,
-      pressAction: {
-        id: 'default',
-        launchActivity: 'default', // open the app when the notification is pressed
-      },
-      actions: [
-        {
-          title: 'Decline',
-          pressAction: {
-            id: DECLINE_CALL_ACTION_ID,
-          },
+
+  if (data.type === 'call.ring') {
+    const incomingCallChannel = pushConfig.android.incomingCallChannel;
+    const incomingCallNotificationTextGetters =
+      pushConfig.android.incomingCallNotificationTextGetters;
+    if (!incomingCallChannel || !incomingCallNotificationTextGetters) {
+      console.debug(
+        "Can't show incoming call notification as either or both incomingCallChannel and was not provided",
+      );
+      return;
+    }
+    await notifee.createChannel(incomingCallChannel);
+    const { getTitle, getBody } = incomingCallNotificationTextGetters;
+    const createdUserName = data.created_by_display_name;
+
+    const channelId = incomingCallChannel.id;
+    await notifee.displayNotification({
+      title: getTitle(createdUserName),
+      body: getBody(createdUserName),
+      data,
+      android: {
+        channelId,
+        pressAction: {
+          id: 'default',
+          launchActivity: 'default', // open the app when the notification is pressed
         },
-        {
-          title: 'Accept',
-          pressAction: {
-            id: ACCEPT_CALL_ACTION_ID,
-            launchActivity: 'default', // open the app when the notification is pressed
+        actions: [
+          {
+            title: 'Decline',
+            pressAction: {
+              id: DECLINE_CALL_ACTION_ID,
+            },
           },
+          {
+            title: 'Accept',
+            pressAction: {
+              id: ACCEPT_CALL_ACTION_ID,
+              launchActivity: 'default', // open the app when the notification is pressed
+            },
+          },
+        ],
+        timeoutAfter: 60000, // 60 seconds, after which the notification will be dismissed automatically
+      },
+    });
+  } else {
+    // the other types are call.live_started and call.notification
+    const callChannel = pushConfig.android.callChannel;
+    const callNotificationTextGetters =
+      pushConfig.android.callNotificationTextGetters;
+    if (!callChannel || !callNotificationTextGetters) {
+      console.debug(
+        "Can't show call notification as either or both callChannel and callNotificationTextGetters is not provided",
+      );
+      return;
+    }
+    await notifee.createChannel(callChannel);
+    const channelId = callChannel.id;
+    const { getTitle, getBody } = callNotificationTextGetters;
+    const createdUserName = data.created_by_display_name;
+    // we can safely cast to string because the data is from "stream.video"
+    const type = data.type as NonRingingPushEvent;
+    await notifee.displayNotification({
+      title: getTitle(type, createdUserName),
+      body: getBody(type, createdUserName),
+      data,
+      android: {
+        channelId,
+        pressAction: {
+          id: 'default',
+          launchActivity: 'default', // open the app when the notification is pressed
         },
-      ],
-      timeoutAfter: 60000, // 60 seconds, after which the notification will be dismissed automatically
-    },
-  });
+        timeoutAfter: 60000, // 60 seconds, after which the notification will be dismissed automatically
+      },
+    });
+    const cid = data.call_cid;
+    pushNonRingingCallData$.next({ cid, type });
+  }
 };
 
 const onNotifeeEvent = async (event: Event, pushConfig: PushConfig) => {
@@ -128,32 +246,43 @@ const onNotifeeEvent = async (event: Event, pushConfig: PushConfig) => {
   // we can safely cast to string because the data is from "stream.video"
   const call_cid = data.call_cid as string;
 
-  // check if we have observers for the call cid (this means the app is in the foreground state)
-  const hasObservers =
-    pushAcceptedIncomingCallCId$.observed &&
-    pushRejectedIncomingCallCId$.observed;
+  if (data.type === 'call.ring') {
+    // check if we have observers for the call cid (this means the app is in the foreground state)
+    const hasObservers =
+      pushAcceptedIncomingCallCId$.observed &&
+      pushRejectedIncomingCallCId$.observed;
 
-  // Check if we need to decline the call
-  const didPressDecline =
-    type === EventType.ACTION_PRESS &&
-    pressAction.id === DECLINE_CALL_ACTION_ID;
-  const didDismiss = type === EventType.DISMISSED;
-  const mustDecline = didPressDecline || didDismiss;
-  // Check if we need to accept the call
-  const mustAccept =
-    type === EventType.ACTION_PRESS && pressAction.id === ACCEPT_CALL_ACTION_ID;
-  if (mustAccept) {
-    pushAcceptedIncomingCallCId$.next(call_cid);
-    // NOTE: accept will be handled by the app with rxjs observers as the app will go to foreground always
-  } else if (mustDecline) {
-    pushRejectedIncomingCallCId$.next(call_cid);
-    if (hasObservers) {
-      // if we had observers we can return here as the observers will handle the call as the app is in the foreground state
-      return;
+    // Check if we need to decline the call
+    const didPressDecline =
+      type === EventType.ACTION_PRESS &&
+      pressAction.id === DECLINE_CALL_ACTION_ID;
+    const didDismiss = type === EventType.DISMISSED;
+    const mustDecline = didPressDecline || didDismiss;
+    // Check if we need to accept the call
+    const mustAccept =
+      type === EventType.ACTION_PRESS &&
+      pressAction.id === ACCEPT_CALL_ACTION_ID;
+    if (mustAccept) {
+      pushAcceptedIncomingCallCId$.next(call_cid);
+      // NOTE: accept will be handled by the app with rxjs observers as the app will go to foreground always
+    } else if (mustDecline) {
+      pushRejectedIncomingCallCId$.next(call_cid);
+      if (hasObservers) {
+        // if we had observers we can return here as the observers will handle the call as the app is in the foreground state
+        return;
+      }
+      await processCallFromPushInBackground(pushConfig, call_cid, 'decline');
+    } else if (type === EventType.PRESS) {
+      pushTappedIncomingCallCId$.next(call_cid);
+      // pressed state will be handled by the app with rxjs observers as the app will go to foreground always
+    }
+  } else {
+    if (type === EventType.PRESS) {
+      pushTappedIncomingCallCId$.next(call_cid);
+      pushConfig.onTapNonRingingCallNotification?.(
+        call_cid,
+        data.type as NonRingingPushEvent,
+      );
     }
-    await processCallFromPushInBackground(pushConfig, call_cid, 'decline');
-  } else if (type === EventType.PRESS) {
-    pushTappedIncomingCallCId$.next(call_cid);
-    // pressed state will be handled by the app with rxjs observers as the app will go to foreground always
   }
 };

package/src/utils/push/ios.ts

@@ -1,14 +1,45 @@
-import type { StreamVideoConfig } from '../StreamVideoRN/types';
+import { Platform } from 'react-native';
+import type {
+  NonRingingPushEvent,
+  StreamVideoConfig,
+} from '../StreamVideoRN/types';
 import {
   pushAcceptedIncomingCallCId$,
   voipPushNotificationCallCId$,
   voipCallkeepCallOnForegroundMap$,
   voipCallkeepAcceptedCallOnNativeDialerMap$,
+  pushNonRingingCallData$,
 } from './rxSubjects';
 import { processCallFromPushInBackground } from './utils';
+import { getExpoNotificationsLib, getPushNotificationIosLib } from './libs';
+import { StreamVideoClient } from '@stream-io/video-client';
+import { setPushLogoutCallback } from '../internal/pushLogoutCallback';
+import notifee, { EventType } from '@notifee/react-native';
 
 type PushConfig = NonNullable<StreamVideoConfig['push']>;
 
+type StreamPayload =
+  | {
+      call_cid: string;
+      type: 'call.ring' | NonRingingPushEvent;
+      sender: string;
+    }
+  | undefined;
+
+function processNonRingingNotificationStreamPayload(
+  streamPayload: StreamPayload,
+) {
+  if (
+    streamPayload?.sender === 'stream.video' &&
+    streamPayload?.type !== 'call.ring'
+  ) {
+    const cid = streamPayload.call_cid;
+    const type = streamPayload.type;
+    pushNonRingingCallData$.next({ cid, type });
+    return { cid, type };
+  }
+}
+
 export const iosCallkeepAcceptCall = (
   call_cid: string | undefined,
   callUUIDFromCallkeep: string,
@@ -55,3 +86,91 @@ const shouldProcessCallFromCallkeep = (
   }
   return true;
 };
+
+export const setupRemoteNotificationsHandleriOS = (pushConfig: PushConfig) => {
+  if (Platform.OS !== 'ios') {
+    return;
+  }
+  notifee.onForegroundEvent(({ type, detail }) => {
+    if (type === EventType.PRESS) {
+      const streamPayload = detail.notification?.data?.stream as
+        | StreamPayload
+        | undefined;
+      const result = processNonRingingNotificationStreamPayload(streamPayload);
+      if (result) {
+        pushConfig.onTapNonRingingCallNotification?.(result.cid, result.type);
+      }
+    }
+  });
+  if (pushConfig.isExpo) {
+    const Notifications = getExpoNotificationsLib();
+
+    // foreground handler (just to show the notifications on foreground)
+    Notifications.setNotificationHandler({
+      handleNotification: async () => {
+        return {
+          shouldShowAlert: true,
+          shouldPlaySound: true,
+          shouldSetBadge: false,
+        };
+      },
+    });
+  }
+};
+
+/** Send token to stream */
+export async function initIosNonVoipToken(
+  client: StreamVideoClient,
+  pushConfig: PushConfig,
+  setUnsubscribeListener: (unsubscribe: () => void) => void,
+) {
+  if (Platform.OS !== 'ios' || !pushConfig.android.pushProviderName) {
+    return;
+  }
+  const setDeviceToken = async (token: string) => {
+    setPushLogoutCallback(() => {
+      client.removeDevice(token).catch((err) => {
+        console.warn('Failed to remove voip token from stream', err);
+      });
+    });
+    const push_provider_name = pushConfig.ios.pushProviderName;
+    await client.addDevice(token, 'apn', push_provider_name);
+  };
+  if (pushConfig.isExpo) {
+    const expoNotificationsLib = getExpoNotificationsLib();
+    const subscription = expoNotificationsLib.addPushTokenListener(
+      (devicePushToken) => {
+        setDeviceToken(devicePushToken.data);
+      },
+    );
+    const subscriptionForReceive =
+      expoNotificationsLib.addNotificationReceivedListener((event) => {
+        // listen to foreground notifications
+        if (event.request.trigger.type === 'push') {
+          const streamPayload = event.request.trigger.payload
+            ?.stream as StreamPayload;
+          processNonRingingNotificationStreamPayload(streamPayload);
+        }
+      });
+    setUnsubscribeListener(() => {
+      subscription.remove();
+      subscriptionForReceive.remove();
+    });
+  } else {
+    const pushNotificationIosLib = getPushNotificationIosLib();
+    pushNotificationIosLib.addEventListener('register', (token) => {
+      setDeviceToken(token);
+    });
+    pushNotificationIosLib.addEventListener('notification', (notification) => {
+      const data = notification.getData();
+      const streamPayload = data?.stream as StreamPayload;
+      // listen to foreground notifications
+      processNonRingingNotificationStreamPayload(streamPayload);
+      notification.finish(pushNotificationIosLib.FetchResult.NoData);
+    });
+    setUnsubscribeListener(() => {
+      pushNotificationIosLib.removeEventListener('register');
+      pushNotificationIosLib.removeEventListener('notification');
+    });
+  }
+}

package/src/utils/push/libs.ts

@@ -1,14 +1,20 @@
 export type { FirebaseMessagingTypes } from '@react-native-firebase/messaging';
-
 export type RNCallKeepType = typeof import('react-native-callkeep').default;
 export type FirebaseMessagingType =
   typeof import('@react-native-firebase/messaging').default;
 export type VoipPushNotificationType =
   typeof import('react-native-voip-push-notification').default;
+export type ExpoNotificationsLib = typeof import('expo-notifications');
+export type ExpoTaskManagerLib = typeof import('expo-task-manager');
+export type PushNotificationIosLib =
+  typeof import('@react-native-community/push-notification-ios').default;
 
 let callkeep: RNCallKeepType | undefined;
 let messaging: FirebaseMessagingType | undefined;
 let voipPushNotification: VoipPushNotificationType | undefined;
+let expoNotificationsLib: ExpoNotificationsLib | undefined;
+let expoTaskManagerLib: ExpoTaskManagerLib | undefined;
+let pushNotificationIosLib: PushNotificationIosLib | undefined;
 
 try {
   callkeep = require('react-native-callkeep').default;
@@ -22,6 +28,46 @@ try {
   voipPushNotification = require('react-native-voip-push-notification').default;
 } catch (e) {}
 
+try {
+  expoNotificationsLib = require('expo-notifications');
+} catch (e) {}
+
+try {
+  expoTaskManagerLib = require('expo-task-manager');
+} catch (e) {}
+
+try {
+  pushNotificationIosLib =
+    require('@react-native-community/push-notification-ios').default;
+} catch (e) {}
+
+export function getExpoNotificationsLib() {
+  if (!expoNotificationsLib) {
+    throw Error(
+      'expo-notifications library is not installed. Please see https://docs.expo.dev/versions/latest/sdk/notifications/ for installation instructions',
+    );
+  }
+  return expoNotificationsLib;
+}
+
+export function getExpoTaskManagerLib() {
+  if (!expoTaskManagerLib) {
+    throw Error(
+      'expo-task-manager library is not installed. Please see https://docs.expo.dev/versions/latest/sdk/task-manager/ for installation instructions',
+    );
+  }
+  return expoTaskManagerLib;
+}
+
+export function getPushNotificationIosLib() {
+  if (!pushNotificationIosLib) {
+    throw Error(
+      '@react-native-community/push-notification-ios library is not installed. Please install it using "yarn add @react-native-community/push-notification-ios" or "npm i @react-native-community/push-notification-ios --save"',
+    );
+  }
+  return pushNotificationIosLib;
+}
+
 export function getCallKeepLib() {
   if (!callkeep) {
     throw Error(
@@ -43,7 +89,7 @@ export function getFirebaseMessagingLib() {
 export function getVoipPushNotificationLib() {
   if (!voipPushNotification) {
     throw Error(
-      "react-native-voip-push-notification library is not installed. Please install it using 'yarn add react-native-voip-push-notification' or 'npm install react-native-voip-push-notification'",
+      "react-native-voip-push-notification library is not installed. Please install it using 'yarn add react-native-voip-push-notification' or 'npm i react-native-voip-push-notification --save'",
     );
   }
   return voipPushNotification;

package/src/utils/push/rxSubjects.ts

@@ -1,4 +1,13 @@
 import { BehaviorSubject } from 'rxjs';
+import { NonRingingPushEvent } from '../StreamVideoRN/types';
+
+/**
+ * This rxjs subject is used to store the call cid of the accepted incoming call from push notification
+ * Note: it is should be subscribed only when a user has connected to the websocket of Stream
+ */
+export const pushNonRingingCallData$ = new BehaviorSubject<
+  { cid: string; type: NonRingingPushEvent } | undefined
+>(undefined);
 
 /**
  * This rxjs subject is used to store the call cid of the accepted incoming call from push notification

package/src/utils/push/utils.ts

@@ -1,5 +1,9 @@
 import { Call, StreamVideoClient } from '@stream-io/video-client';
-import type { StreamVideoConfig } from '../StreamVideoRN/types';
+import type {
+  NonRingingPushEvent,
+  StreamVideoConfig,
+} from '../StreamVideoRN/types';
+import { onNewCallNotification } from '../internal/newNotificationCallbacks';
 
 type PushConfig = NonNullable<StreamVideoConfig['push']>;
 
@@ -56,3 +60,33 @@ export const processCallFromPush = async (
     console.log('failed to process call from push notification', e, action);
   }
 };
+
+/**
+ * This function is used process the call from push notifications due to non ringing calls
+ * It does the following steps:
+ * 1. Get the call from the client if present or create a new call
+ * 2. Fetch the latest state of the call from the server if its not already in ringing state
+ * 3. Call all the callbacks to inform the app about the call
+ */
+export const processNonIncomingCallFromPush = async (
+  client: StreamVideoClient,
+  call_cid: string,
+  nonRingingNotificationType: NonRingingPushEvent,
+) => {
+  let callFromPush: Call;
+  try {
+    const _callFromPush = client.state.calls.find((c) => c.cid === call_cid);
+    if (_callFromPush) {
+      callFromPush = _callFromPush;
+    } else {
+      // if not it means that WS is not alive when receiving the push notifications and we need to fetch the call
+      const [callType, callId] = call_cid.split(':');
+      callFromPush = client.call(callType, callId);
+      await callFromPush.get();
+    }
+  } catch (e) {
+    console.log('failed to fetch call from push notification', e);
+    return;
+  }
+  onNewCallNotification(callFromPush, nonRingingNotificationType);
+};

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.1.2';
+export const version = '0.1.4';