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

package/src/hooks/push/useInitAndroidTokenAndRest.ts

@@ -7,7 +7,7 @@ import { StreamVideoRN } from '../../utils';
 import { initAndroidPushToken } from '../../utils/push/android';
 
 /**
- * This hook is used to initialize the push token for Android and ask notification permissions.
+ * This hook is used to initialize the push token for Android.
  */
 export const useInitAndroidTokenAndRest = () => {
   const client = useStreamVideoClient();
@@ -18,6 +18,12 @@ export const useInitAndroidTokenAndRest = () => {
     if (!client || !connectedUserId || !pushConfig) {
       return;
     }
-    initAndroidPushToken(client, pushConfig);
+    let unsubscribe = () => {};
+    initAndroidPushToken(client, pushConfig, (unsubscribeListener) => {
+      unsubscribe = unsubscribeListener;
+    });
+    return () => {
+      unsubscribe();
+    };
   }, [client, connectedUserId]);
 };

package/src/hooks/push/useIosInitRemoteNotifications.ts

@@ -0,0 +1,29 @@
+import {
+  useConnectedUser,
+  useStreamVideoClient,
+} from '@stream-io/video-react-bindings';
+import { useEffect } from 'react';
+import { StreamVideoRN } from '../../utils';
+import { initIosNonVoipToken } from '../../utils/push/ios';
+
+/**
+ * This hook is used to initialize the push token for iOS.
+ */
+export const useIosInitRemoteNotifications = () => {
+  const client = useStreamVideoClient();
+  const connectedUserId = useConnectedUser()?.id;
+  useEffect(() => {
+    const pushConfig = StreamVideoRN.getConfig().push;
+    // NOTE: we need to wait for user to be connected before we can send the push token
+    if (!client || !connectedUserId || !pushConfig) {
+      return;
+    }
+    let unsubscribe = () => {};
+    initIosNonVoipToken(client, pushConfig, (unsubscribeListener) => {
+      unsubscribe = unsubscribeListener;
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [client, connectedUserId]);
+};

package/src/hooks/push/useIosVoipPushEventsSetupEffect.ts

@@ -5,6 +5,9 @@ import { Platform } from 'react-native';
 import { StreamVideoRN } from '../../utils';
 import { useStreamVideoClient } from '@stream-io/video-react-bindings';
 import { voipPushNotificationCallCId$ } from '../../utils/push/rxSubjects';
+import { setPushLogoutCallback } from '../../utils/internal/pushLogoutCallback';
+
+let lastVoipToken: string | undefined = '';
 
 /**
  * This hook is used to do the initial setup of listeners
@@ -17,14 +20,35 @@ export const useIosVoipPushEventsSetupEffect = () => {
     if (Platform.OS !== 'ios' || !pushConfig || !client) {
       return;
     }
+    if (lastVoipToken) {
+      // send token to stream (userId might have switched on the same device)
+      const push_provider_name = pushConfig.ios.pushProviderName;
+      if (!push_provider_name) {
+        return;
+      }
+      client
+        .addVoipDevice(lastVoipToken, 'apn', push_provider_name)
+        .catch((err) => {
+          console.warn('Failed to send voip token to stream', err);
+        });
+    }
     const voipPushNotification = getVoipPushNotificationLib();
-
     const onTokenReceived = (token: string) => {
       // send token to stream
+      lastVoipToken = token;
       const push_provider_name = pushConfig.ios.pushProviderName;
+      if (!push_provider_name) {
+        return;
+      }
       client.addVoipDevice(token, 'apn', push_provider_name).catch((err) => {
         console.warn('Failed to send voip token to stream', err);
       });
+      // set the logout callback
+      setPushLogoutCallback(() => {
+        client.removeDevice(token).catch((err) => {
+          console.warn('Failed to remove voip token from stream', err);
+        });
+      });
     };
     // fired when PushKit give us the latest token
     voipPushNotification.addEventListener('register', (token) => {
@@ -68,9 +92,32 @@ export const useIosVoipPushEventsSetupEffect = () => {
 };
 
 const onNotificationReceived = (notification: any) => {
+  /* --- Example payload ---
+  {
+    "aps": {
+      "alert": {
+        "body": "",
+        "title": "Vishal Narkhede is calling you"
+      },
+      "badge": 0,
+      "category": "stream.video",
+      "mutable-content": 1
+    },
+    "stream": {
+      "call_cid": "default:ixbm7y0k74pbjnq",
+      "call_display_name": "",
+      "created_by_display_name": "Vishal Narkhede",
+      "created_by_id": "vishalexpo",
+      "receiver_id": "santhoshexpo",
+      "sender": "stream.video",
+      "type": "call.ring",
+      "version": "v2"
+    }
+  } */
   const sender = notification?.stream?.sender;
-  // do not process any other notifications other than stream.video
-  if (sender !== 'stream.video') {
+  const type = notification?.stream?.type;
+  // do not process any other notifications other than stream.video or ringing
+  if (sender !== 'stream.video' && type !== 'call.ring') {
     return;
   }
   const call_cid = notification?.stream?.call_cid;

package/src/hooks/push/useProcessPushNonRingingCallEffect.ts

@@ -0,0 +1,44 @@
+import { pushNonRingingCallData$ } from '../../utils/push/rxSubjects';
+import { useEffect } from 'react';
+import { StreamVideoRN } from '../../utils';
+import {
+  useConnectedUser,
+  useStreamVideoClient,
+} from '@stream-io/video-react-bindings';
+import { filter } from 'rxjs/operators';
+import { processNonIncomingCallFromPush } from '../../utils/push/utils';
+
+/**
+ * This hook is used to process the non ringing call data via push notifications using the relevant rxjs subject
+ * 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 useProcessPushNonRingingCallEffect = () => {
+  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;
+    }
+
+    const subscription = pushNonRingingCallData$
+      .pipe(filter(NotUndefined))
+      .subscribe(async ({ cid, type }) => {
+        await processNonIncomingCallFromPush(client, cid, type);
+        pushNonRingingCallData$.next(undefined); // remove the current data to avoid processing again
+      });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [client, connectedUserId]);
+};
+
+/**
+ * A type guard to check if the data is not undefined
+ */
+function NotUndefined<T>(data: T | undefined): data is T {
+  return data !== undefined;
+}

package/src/utils/StreamVideoRN/index.ts

@@ -1,6 +1,11 @@
 import { AndroidImportance } from '@notifee/react-native';
 import { setupFirebaseHandlerAndroid } from '../push/android';
 import { StreamVideoConfig } from './types';
+import pushLogoutCallbacks from '../internal/pushLogoutCallback';
+import { setupRemoteNotificationsHandleriOS } from '../push/ios';
+import newNotificationCallbacks, {
+  NewCallNotificationCallback,
+} from '../internal/newNotificationCallbacks';
 
 const DEFAULT_STREAM_VIDEO_CONFIG: StreamVideoConfig = {
   foregroundService: {
@@ -58,9 +63,40 @@ export class StreamVideoRN {
     this.config.push = pushConfig;
     // After getting the config we should setup callkeep events, firebase handler asap to handle incoming calls from a dead state
     setupFirebaseHandlerAndroid(pushConfig);
+    // setup ios handler for non-voip push notifications asap
+    setupRemoteNotificationsHandleriOS(pushConfig);
   }
 
   static getConfig() {
     return this.config;
   }
+
+  /**
+   * This is the function to be called when the push token must be removed.
+   * Typically used on user logout.
+   */
+  static onPushLogout() {
+    if (pushLogoutCallbacks.current) {
+      pushLogoutCallbacks.current.forEach((callback) => callback());
+    }
+  }
+
+  /**
+   * This function is used to add a callback to be called when a new call notification is received.
+   * @param callback
+   * @returns Unsubscribe function
+   */
+  static addOnNewCallNotificationListener(
+    callback: NewCallNotificationCallback,
+  ) {
+    if (!newNotificationCallbacks.current) {
+      newNotificationCallbacks.current = [callback];
+    } else {
+      newNotificationCallbacks.current.push(callback);
+    }
+    return () => {
+      newNotificationCallbacks.current =
+        newNotificationCallbacks.current?.filter((cb) => cb !== callback);
+    };
+  }
 }

package/src/utils/StreamVideoRN/types.ts

@@ -1,6 +1,8 @@
 import { StreamVideoClient } from '@stream-io/video-client';
 import { AndroidChannel } from '@notifee/react-native';
 
+export type NonRingingPushEvent = 'call.live_started' | 'call.notification';
+
 export type StreamVideoConfig = {
   /**
    * The configuration to be used for push notifications.
@@ -8,14 +10,32 @@ export type StreamVideoConfig = {
    * @default undefined
    */
   push?: {
+    isExpo?: boolean;
     ios: {
       /**
        * The name for the alias of push provider used for iOS
+       * Pass undefined if you will not be using stream's push notifications but still want to use the functionality of the SDK
        * @example "production-apn-video" or "staging-apn-video" based on the environment
        */
-      pushProviderName: string;
+      pushProviderName?: string;
     };
     android: {
+      /**
+       * The name for the alias of push provider used for Android
+       * Pass undefined if you will not be using stream's push notifications but still want to use the functionality of the SDK
+       * @example "production-fcm-video" or "staging-fcm-video" based on the environment
+       */
+      pushProviderName?: string;
+      /**
+       * The notification channel to be used for non ringing calls for Android.
+       * @example
+       * {
+       *  id: 'stream_call_notifications',
+       *  name: 'Call notifications',
+       *  importance: AndroidImportance.HIGH
+       * }
+       */
+      callChannel?: AndroidChannel;
       /**
        * The notification channel to be used for incoming calls for Android.
        * @example
@@ -25,7 +45,7 @@ export type StreamVideoConfig = {
        *  importance: AndroidImportance.HIGH
        * }
        */
-      incomingCallChannel: AndroidChannel;
+      incomingCallChannel?: AndroidChannel;
       /**
        * Functions to create the texts shown in the notification for incoming calls in Android.
        * @example
@@ -34,15 +54,31 @@ export type StreamVideoConfig = {
        *  body: (createdUserName: string) => `Tap to answer the call`
        * }
        */
-      incomingCallNotificationTextGetters: {
+      incomingCallNotificationTextGetters?: {
         getTitle: (createdUserName: string) => string;
         getBody: (createdUserName: string) => string;
       };
       /**
-       * The name for the alias of push provider used for Android
-       * @example "production-fcm-video" or "staging-fcm-video" based on the environment
+       * Functions to create the texts shown in the notification for non ringing calls in Android.
+       * @example
+       *  getTitle(type, createdUserName) {
+            if (type === 'call.live_started') {
+              return `Call went live, it was started by ${createdUserName}`;
+            } else {
+              return `${createdUserName} is notifying you about a call`;
+            }
+          },
+          getBody(_type, createdUserName) {
+            return 'Tap to open the call';
+          },
        */
-      pushProviderName: string;
+      callNotificationTextGetters?: {
+        getTitle: (
+          type: NonRingingPushEvent,
+          createdUserName: string,
+        ) => string;
+        getBody: (type: NonRingingPushEvent, createdUserName: string) => string;
+      };
     };
     /**
      * This function is used to create a custom video client.
@@ -66,6 +102,11 @@ export type StreamVideoConfig = {
     navigateAcceptCall: () => void;
     /** The callback that is called when a push notification is tapped but user did not press accept or decline, used for navigation */
     navigateToIncomingCall: () => void;
+    /** Callback that is called when a non ringing push notification was tapped */
+    onTapNonRingingCallNotification?: (
+      call_cid: string,
+      type: NonRingingPushEvent,
+    ) => void;
   };
   foregroundService: {
     android: {

package/src/utils/internal/newNotificationCallbacks.ts

@@ -0,0 +1,29 @@
+import { Call } from '@stream-io/video-client';
+import { NonRingingPushEvent } from '../StreamVideoRN/types';
+
+export type NewCallNotificationCallback = (
+  call: Call,
+  notificationType: NonRingingPushEvent,
+) => void;
+
+type NewNotificationCallbacks = {
+  current?: NewCallNotificationCallback[];
+};
+
+let lastCid = '';
+
+const newNotificationCallbacks: NewNotificationCallbacks = {};
+
+export const onNewCallNotification: NewCallNotificationCallback = (
+  call,
+  notificationType,
+) => {
+  if (newNotificationCallbacks.current && lastCid !== call.cid) {
+    newNotificationCallbacks.current.forEach((callback) =>
+      callback(call, notificationType),
+    );
+    lastCid = call.cid;
+  }
+};
+
+export default newNotificationCallbacks;

package/src/utils/internal/pushLogoutCallback.ts

@@ -0,0 +1,17 @@
+type Callback = () => void;
+
+type PushLogoutCallbacks = {
+  current?: Callback[];
+};
+
+let pushLogoutCallbacks: PushLogoutCallbacks = {};
+
+export const setPushLogoutCallback = (callback: () => void) => {
+  if (!pushLogoutCallbacks.current) {
+    pushLogoutCallbacks.current = [callback];
+  } else {
+    pushLogoutCallbacks.current.push(callback);
+  }
+};
+
+export default pushLogoutCallbacks;