@stream-io/video-react-native-sdk 0.0.1-alpha.176 → 0.0.1-alpha.178

package/src/utils/push/utils.ts

@@ -0,0 +1,255 @@
+import { StreamVideoClient } from '@stream-io/video-client';
+import notifee, { EventType, Event } from '@notifee/react-native';
+import { Platform } from 'react-native';
+import {
+  FirebaseMessagingTypes,
+  getCallKeepLib,
+  getFirebaseMessagingLib,
+  RNCallKeepType,
+} from './libs';
+import {
+  pushAcceptedIncomingCallCId$,
+  pushRejectedIncomingCallCId$,
+} from './rxSubjects';
+import type { StreamVideoConfig } from '../StreamVideoRN/types';
+
+// const options: Parameters<RNCallKeepType['setup']>[0] = {
+//   ios: {
+//     appName: 'ReactNativeStreamDogFood',
+//     supportsVideo: true,
+//   },
+//   android: {
+//     alertTitle: 'Permissions Required',
+//     alertDescription:
+//       'This application needs to access your phone calling accounts to make calls',
+//     cancelButton: 'Cancel',
+//     okButton: 'ok',
+//     additionalPermissions: [],
+//     // Required to get audio in background when using Android 11
+//     // foregroundService: {
+//     //   channelId: 'com.company.my',
+//     //   channelName: 'Foreground service for my app',
+//     //   notificationTitle: 'My app is running on background',
+//     //   notificationIcon: 'Path to the resource icon of the notification',
+//     // },
+//   },
+// };
+
+const ACCEPT_CALL_ACTION_ID = 'accept';
+const DECLINE_CALL_ACTION_ID = 'decline';
+
+type PushConfig = NonNullable<StreamVideoConfig['push']>;
+
+export async function setupCallkeep(pushConfig: PushConfig) {
+  const callkeep = getCallKeepLib();
+  const options: Parameters<RNCallKeepType['setup']>[0] = {
+    ios: {
+      appName: pushConfig.ios.appName,
+      supportsVideo: true,
+    },
+    android: {
+      ...pushConfig.android.phoneCallingAccountPermissionTexts,
+      additionalPermissions: [],
+    },
+  };
+  if (Platform.OS !== 'ios') {
+    return;
+  }
+  return callkeep.setup(options).then((accepted) => {
+    if (accepted) {
+      callkeep.setAvailable(true);
+    }
+  });
+}
+
+/** Setup Firebase push message handler **/
+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
+  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);
+  });
+}
+
+/** Send token to stream, create notification channel,  */
+export async function initAndroidPushTokenAndAskPermissions(
+  client: StreamVideoClient,
+  pushConfig: PushConfig,
+) {
+  if (Platform.OS !== 'android') {
+    return;
+  }
+  const messaging = getFirebaseMessagingLib();
+  const token = await messaging().getToken();
+  const push_provider_name = pushConfig.android.pushProviderName;
+  await client.addDevice(token, 'firebase', push_provider_name);
+  await notifee.requestPermission();
+}
+
+const firebaseMessagingOnMessageHandler = async (
+  message: FirebaseMessagingTypes.RemoteMessage,
+  pushConfig: PushConfig,
+) => {
+  if (Platform.OS !== 'android') {
+    return;
+  }
+  /* Example data from firebase
+    "message": {
+        "data": {
+          call_cid: 'audio_room:dcc1638c-e90d-4dcb-bf3b-8fa7767bfbb0',
+          call_display_name: '',
+          created_by_display_name: 'tommaso',
+          created_by_id: 'tommaso-03dcddb7-e9e2-42ec-b2f3-5043aac666ee',
+          receiver_id: 'martin-21824f17-319b-401b-a61b-fcab646f0d3f',
+          sender: 'stream.video',
+          type: 'call.live_started',
+          version: 'v2'
+        },
+        // 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,
+          },
+        },
+        {
+          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
+    },
+  });
+  // const callkeep = getCallKeepLib();
+  // const uuid = message.data.call_cid;
+  // const localizedCallerName = message.data.created_by_display_name;
+  // const handle = 'handle'; // Phone number of the caller // TODO: unclear what this is used for?!
+  // callkeep.displayIncomingCall(uuid, handle, localizedCallerName);
+};
+
+const onNotifeeEvent = async (event: Event, pushConfig: PushConfig) => {
+  const { type, detail } = event;
+  const { notification, pressAction } = detail;
+  const notificationId = notification?.id;
+  const data = notification?.data;
+  if (
+    !data ||
+    !pressAction ||
+    !notificationId ||
+    data.sender !== 'stream.video'
+  ) {
+    return;
+  }
+
+  // we can safely cast to string because the data is from "stream.video"
+  const call_cid = data.call_cid as string;
+
+  // 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);
+    pushConfig.navigateAcceptCall();
+    // 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);
+    const hasObservers =
+      pushAcceptedIncomingCallCId$.observed &&
+      pushRejectedIncomingCallCId$.observed;
+    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;
+    }
+    // call has been declined from the notification
+    // we need to create a new client and connect the user to decline the call
+    // this is because the app is in background state and we don't have a client to decline the call
+    let videoClient: StreamVideoClient | undefined;
+
+    try {
+      videoClient = await pushConfig.createStreamVideoClient();
+      if (!videoClient) {
+        return;
+      }
+      await videoClient.connectUser();
+      await processCallFromPush(videoClient, call_cid, 'decline');
+    } catch (e) {
+      console.log('failed to create video client and connect user', e);
+    }
+  }
+};
+
+/**
+ * This function is used process the call from push notifications due to incoming call
+ * 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. Join or leave the call based on the user's action.
+ */
+export const processCallFromPush = async (
+  client: StreamVideoClient,
+  call_cid: string,
+  action: 'accept' | 'decline',
+) => {
+  // if the we find the call and is already ringing, we don't need create a new call
+  // as client would have received the call.ring state because the app had WS alive when receiving push notifications
+  let callFromPush = client.readOnlyStateStore.calls.find(
+    (call) => call.cid === call_cid && call.ringing,
+  );
+  if (!callFromPush) {
+    // 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, true);
+    await callFromPush.get();
+  }
+  try {
+    if (action === 'accept') {
+      await callFromPush.join();
+    } else {
+      await callFromPush.leave({ reject: true });
+    }
+  } catch (e) {
+    console.log('failed to process call from push notification', e, action);
+  }
+};

package/src/utils/verifyAndroidBluetoothPermissions.ts

@@ -2,7 +2,9 @@ import { Platform, PermissionsAndroid } from 'react-native';
 
 export const verifyAndroidBluetoothPermissions = async () => {
   const shouldCheckForPermissions = Number(Platform.Version) >= 31;
-  if (!shouldCheckForPermissions) return true;
+  if (!shouldCheckForPermissions) {
+    return true;
+  }
   const getCheckPermissionPromise = () => {
     return PermissionsAndroid.check(
       PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT,

package/dist/src/hooks/useCallKeep.d.ts

@@ -1,11 +0,0 @@
-/**
- *
- * @returns
- *
- * @category Call Operations
- *
- */
-export declare const useCallKeep: () => {
-    startCall: () => Promise<void>;
-    endCall: () => Promise<void>;
-};

package/dist/src/hooks/useCallKeep.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCallKeep = void 0;
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const utils_1 = require("../utils");
-const video_react_bindings_1 = require("@stream-io/video-react-bindings");
-let RNCallKeep;
-try {
-    RNCallKeep = require('react-native-callkeep').default;
-}
-catch (e) { }
-/**
- *
- * @returns
- *
- * @category Call Operations
- *
- */
-const useCallKeep = () => {
-    const activeCall = (0, video_react_bindings_1.useCall)();
-    if (!RNCallKeep) {
-        throw Error("react-native-callkeep library is not installed. Please install it using 'yarn add react-native-callkeep' or 'npm install react-native-callkeep'");
-    }
-    const users = activeCall?.state.getCurrentValue(activeCall.state.members$);
-    const userIds = (0, react_1.useMemo)(() => Object.keys(users || {}), [users]);
-    const callTitle = (0, utils_1.generateCallTitle)(userIds);
-    const startCall = (0, react_1.useCallback)(async () => {
-        if (react_native_1.Platform.OS === 'ios' && activeCall) {
-            await RNCallKeep?.startCall(activeCall.id, callTitle, userIds.join(','), 'generic');
-        }
-    }, [activeCall, callTitle, userIds]);
-    const endCall = (0, react_1.useCallback)(async () => {
-        if (react_native_1.Platform.OS === 'ios' && activeCall) {
-            await RNCallKeep?.endCall(activeCall.id);
-        }
-    }, [activeCall]);
-    return { startCall, endCall };
-};
-exports.useCallKeep = useCallKeep;
-//# sourceMappingURL=useCallKeep.js.map

package/dist/src/hooks/useCallKeep.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCallKeep.js","sourceRoot":"","sources":["../../../src/hooks/useCallKeep.tsx"],"names":[],"mappings":";;;AAAA,iCAA6C;AAC7C,+CAAwC;AACxC,oCAA6C;AAC7C,0EAA0D;AAI1D,IAAI,UAAsC,CAAC;AAE3C,IAAI;IACF,UAAU,GAAG,OAAO,CAAC,uBAAuB,CAAC,CAAC,OAAO,CAAC;CACvD;AAAC,OAAO,CAAC,EAAE,GAAE;AAEd;;;;;;GAMG;AACI,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,UAAU,GAAG,IAAA,8BAAO,GAAE,CAAC;IAC7B,IAAI,CAAC,UAAU,EAAE;QACf,MAAM,KAAK,CACT,iJAAiJ,CAClJ,CAAC;KACH;IAED,MAAM,KAAK,GAAG,UAAU,EAAE,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC3E,MAAM,OAAO,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACjE,MAAM,SAAS,GAAG,IAAA,yBAAiB,EAAC,OAAO,CAAC,CAAC;IAE7C,MAAM,SAAS,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QACvC,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,UAAU,EAAE;YACvC,MAAM,UAAU,EAAE,SAAS,CACzB,UAAU,CAAC,EAAE,EACb,SAAS,EACT,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EACjB,SAAS,CACV,CAAC;SACH;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAErC,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QACrC,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,UAAU,EAAE;YACvC,MAAM,UAAU,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;SAC1C;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAChC,CAAC,CAAC;AA9BW,QAAA,WAAW,eA8BtB"}

package/dist/src/utils/StreamVideoRN.d.ts

@@ -1,25 +0,0 @@
-import { StreamReaction } from '@stream-io/video-client';
-type StreamReactionType = StreamReaction & {
-    icon: string | JSX.Element;
-};
-type StreamVideoConfig = {
-    /**
-     * Reactions that are to be supported in the app.
-     *
-     * Note: This is an array of reactions that is rendered in the Reaction list.
-     */
-    supportedReactions: StreamReactionType[];
-};
-export declare class StreamVideoRN {
-    /**
-     * Global config for StreamVideoRN.
-     */
-    static config: StreamVideoConfig;
-    /**
-     * Set global config for StreamVideoRN allows you to set wished CDN hosts for resizing images.
-     * This function accepts an config object that will be merged with the default config.
-     * @example StreamVideoRN.setConfig({ onOpenCallParticipantsInfoView: () => {} });
-     */
-    static setConfig(config: Partial<StreamVideoConfig>): void;
-}
-export {};

package/dist/src/utils/StreamVideoRN.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StreamVideoRN = void 0;
-const constants_1 = require("../constants");
-const DEFAULT_STREAM_VIDEO_CONFIG = {
-    supportedReactions: constants_1.defaultEmojiReactions,
-};
-class StreamVideoRN {
-    /**
-     * Global config for StreamVideoRN.
-     */
-    static config = DEFAULT_STREAM_VIDEO_CONFIG;
-    /**
-     * Set global config for StreamVideoRN allows you to set wished CDN hosts for resizing images.
-     * This function accepts an config object that will be merged with the default config.
-     * @example StreamVideoRN.setConfig({ onOpenCallParticipantsInfoView: () => {} });
-     */
-    static setConfig(config) {
-        this.config = { ...this.config, ...config };
-    }
-}
-exports.StreamVideoRN = StreamVideoRN;
-//# sourceMappingURL=StreamVideoRN.js.map

package/dist/src/utils/StreamVideoRN.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StreamVideoRN.js","sourceRoot":"","sources":["../../../src/utils/StreamVideoRN.ts"],"names":[],"mappings":";;;AACA,4CAAqD;AAerD,MAAM,2BAA2B,GAAG;IAClC,kBAAkB,EAAE,iCAAqB;CAC1C,CAAC;AAEF,MAAa,aAAa;IACxB;;OAEG;IACH,MAAM,CAAC,MAAM,GAAsB,2BAA2B,CAAC;IAE/D;;;;OAIG;IACH,MAAM,CAAC,SAAS,CAAC,MAAkC;QACjD,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAC9C,CAAC;;AAbH,sCAcC"}

package/src/hooks/useCallKeep.tsx

@@ -1,51 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { Platform } from 'react-native';
-import { generateCallTitle } from '../utils';
-import { useCall } from '@stream-io/video-react-bindings';
-
-type RNCallKeepType = typeof import('react-native-callkeep').default;
-
-let RNCallKeep: RNCallKeepType | undefined;
-
-try {
-  RNCallKeep = require('react-native-callkeep').default;
-} catch (e) {}
-
-/**
- *
- * @returns
- *
- * @category Call Operations
- *
- */
-export const useCallKeep = () => {
-  const activeCall = useCall();
-  if (!RNCallKeep) {
-    throw Error(
-      "react-native-callkeep library is not installed. Please install it using 'yarn add react-native-callkeep' or 'npm install react-native-callkeep'",
-    );
-  }
-
-  const users = activeCall?.state.getCurrentValue(activeCall.state.members$);
-  const userIds = useMemo(() => Object.keys(users || {}), [users]);
-  const callTitle = generateCallTitle(userIds);
-
-  const startCall = useCallback(async () => {
-    if (Platform.OS === 'ios' && activeCall) {
-      await RNCallKeep?.startCall(
-        activeCall.id,
-        callTitle,
-        userIds.join(','),
-        'generic',
-      );
-    }
-  }, [activeCall, callTitle, userIds]);
-
-  const endCall = useCallback(async () => {
-    if (Platform.OS === 'ios' && activeCall) {
-      await RNCallKeep?.endCall(activeCall.id);
-    }
-  }, [activeCall]);
-
-  return { startCall, endCall };
-};

package/src/utils/StreamVideoRN.ts

@@ -1,35 +0,0 @@
-import { StreamReaction } from '@stream-io/video-client';
-import { defaultEmojiReactions } from '../constants';
-
-type StreamReactionType = StreamReaction & {
-  icon: string | JSX.Element;
-};
-
-type StreamVideoConfig = {
-  /**
-   * Reactions that are to be supported in the app.
-   *
-   * Note: This is an array of reactions that is rendered in the Reaction list.
-   */
-  supportedReactions: StreamReactionType[];
-};
-
-const DEFAULT_STREAM_VIDEO_CONFIG = {
-  supportedReactions: defaultEmojiReactions,
-};
-
-export class StreamVideoRN {
-  /**
-   * Global config for StreamVideoRN.
-   */
-  static config: StreamVideoConfig = DEFAULT_STREAM_VIDEO_CONFIG;
-
-  /**
-   * Set global config for StreamVideoRN allows you to set wished CDN hosts for resizing images.
-   * This function accepts an config object that will be merged with the default config.
-   * @example StreamVideoRN.setConfig({ onOpenCallParticipantsInfoView: () => {} });
-   */
-  static setConfig(config: Partial<StreamVideoConfig>) {
-    this.config = { ...this.config, ...config };
-  }
-}