@stream-io/video-react-native-sdk 0.8.9 → 0.9.1

package/src/components/Call/RingingCallContent/CallPreparingIndicator.tsx

@@ -0,0 +1,21 @@
+import { useI18n } from '@stream-io/video-react-bindings';
+import React from 'react';
+import {
+  TextBasedIndicator,
+  TextBasedIndicatorProps,
+} from './TextBasedIndicator';
+
+export type CallPreparingIndicatorProps = Pick<
+  TextBasedIndicatorProps,
+  'onBackPress'
+>;
+
+export const CallPreparingIndicator = (props: CallPreparingIndicatorProps) => {
+  const { t } = useI18n();
+  return (
+    <TextBasedIndicator
+      text={t('Preparing call')}
+      onBackPress={props.onBackPress}
+    />
+  );
+};

package/src/components/Call/RingingCallContent/RingingCallContent.tsx

@@ -15,7 +15,14 @@ import {
   OutgoingCall as DefaultOutgoingCall,
   OutgoingCallProps,
 } from './OutgoingCall';
-import { JoiningCallIndicator as DefaultJoiningCallIndicator } from './JoiningCallIndicator';
+import {
+  CallLeftIndicator as DefaultCallLeftIndicator,
+  CallLeftIndicatorProps,
+} from './CallLeftIndicator';
+import {
+  CallPreparingIndicator as DefaultCallPreparingIndicator,
+  CallPreparingIndicatorProps,
+} from './CallPreparingIndicator';
 import { useTheme } from '../../../contexts';
 
 /**
@@ -39,23 +46,34 @@ export type RingingCallContentProps = {
    */
   CallTopView?: React.ComponentType<CallTopViewProps> | null;
   /**
-   * Prop to customize the JoiningCallIndicator component in the RingingCallContent. It is shown when the call is accepted and is waiting to be joined.
+   * Prop to override the component shown when the call is left.
+   */
+  CallLeftIndicator?: React.ComponentType<CallLeftIndicatorProps> | null;
+  /**
+   * Prop to override the component shown when the call is in idle state.
    */
-  JoiningCallIndicator?: React.ComponentType | null;
+  CallPreparingIndicator?: React.ComponentType<CallPreparingIndicatorProps> | null;
   /**
    * Check if device is in landscape mode.
    * This will apply the landscape mode styles to the component.
    */
   landscape?: boolean;
+  /**
+   * Callback to handle the back icon press event
+   * in CallLeftIndicator and CallPreparingIndicator components.
+   */
+  onBackPress?: () => void;
 };
 
 const RingingCallPanel = ({
   IncomingCall = DefaultIncomingCall,
   OutgoingCall = DefaultOutgoingCall,
   CallContent = DefaultCallContent,
-  JoiningCallIndicator = DefaultJoiningCallIndicator,
   CallTopView,
-  landscape = false,
+  CallLeftIndicator = DefaultCallLeftIndicator,
+  CallPreparingIndicator = DefaultCallPreparingIndicator,
+  landscape,
+  onBackPress,
 }: RingingCallContentProps) => {
   const call = useCall();
   const isCallCreatedByMe = call?.isCreatedByMe;
@@ -72,16 +90,22 @@ const RingingCallPanel = ({
         : IncomingCall && (
             <IncomingCall CallTopView={CallTopView} landscape={landscape} />
           );
-    case CallingState.JOINED:
+    case CallingState.LEFT:
+      return (
+        CallLeftIndicator && <CallLeftIndicator onBackPress={onBackPress} />
+      );
+    case CallingState.IDLE:
+      return (
+        CallPreparingIndicator && (
+          <CallPreparingIndicator onBackPress={onBackPress} />
+        )
+      );
+    default:
       return (
         CallContent && (
           <CallContent CallTopView={CallTopView} landscape={landscape} />
         )
       );
-    case CallingState.JOINING:
-      return JoiningCallIndicator && <JoiningCallIndicator />;
-    default:
-      return null;
   }
 };
 

package/src/components/Call/RingingCallContent/TextBasedIndicator.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { StyleSheet, View, Text, Pressable } from 'react-native';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { Back } from '../../../icons/Back';
+
+export type TextBasedIndicatorProps = {
+  text: string;
+  onBackPress?: () => void;
+};
+
+export const TextBasedIndicator = (props: TextBasedIndicatorProps) => {
+  const {
+    theme: {
+      colors,
+      typefaces,
+      variants: { iconSizes },
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.static_grey }]}>
+      {props.onBackPress && (
+        <View style={styles.backContainer}>
+          <Pressable
+            onPress={props.onBackPress}
+            style={({ pressed }) => [
+              {
+                opacity: pressed ? 0.2 : 1,
+                height: iconSizes.md,
+                width: iconSizes.md,
+              },
+            ]}
+          >
+            <Back color={colors.static_white} />
+          </Pressable>
+        </View>
+      )}
+      <View style={styles.textContainer}>
+        <Text
+          style={[
+            styles.text,
+            { color: colors.static_white },
+            typefaces.heading6,
+          ]}
+        >
+          {props.text}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  backContainer: {
+    padding: 8,
+    paddingTop: 16,
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 24,
+  },
+});

package/src/hooks/useAndroidKeepCallAliveEffect.ts

@@ -5,10 +5,10 @@ import { StreamVideoRN } from '../utils';
 import { Platform } from 'react-native';
 import { CallingState, getLogger } from '@stream-io/video-client';
 
+const isAndroid7OrBelow = Platform.OS === 'android' && Platform.Version < 26;
+
 function setForegroundService() {
-  if (Platform.OS !== 'android') {
-    return;
-  }
+  if (!isAndroid7OrBelow) return;
   notifee.registerForegroundService(() => {
     return new Promise(() => {
       const logger = getLogger(['setForegroundService method']);
@@ -18,12 +18,9 @@ function setForegroundService() {
 }
 
 async function startForegroundService(call_cid: string) {
-  if (Platform.OS !== 'android') {
-    return;
-  }
+  if (!isAndroid7OrBelow) return;
   const foregroundServiceConfig = StreamVideoRN.getConfig().foregroundService;
   const { title, body } = foregroundServiceConfig.android.notificationTexts;
-  const channelId = foregroundServiceConfig.android.channel.id;
 
   // request for notification permission and then start the foreground service
   const settings = await notifee.getNotificationSettings();
@@ -35,13 +32,11 @@ async function startForegroundService(call_cid: string) {
     );
     return;
   }
-  await notifee.createChannel(foregroundServiceConfig.android.channel);
   await notifee.displayNotification({
     id: call_cid,
     title,
     body,
     android: {
-      channelId,
       asForegroundService: true,
       ongoing: true, // user cannot dismiss the notification
       colorized: true,
@@ -54,9 +49,7 @@ async function startForegroundService(call_cid: string) {
 }
 
 async function stopForegroundService() {
-  if (Platform.OS !== 'android') {
-    return;
-  }
+  if (!isAndroid7OrBelow) return;
   await notifee.stopForegroundService();
 }
 
@@ -70,7 +63,7 @@ let isSetForegroundServiceRan = false;
  * Additonally: also responsible for cancelling any notifee displayed notification when the call has transitioned out of ringing
  */
 export const useAndroidKeepCallAliveEffect = () => {
-  if (!isSetForegroundServiceRan && Platform.OS === 'android') {
+  if (!isSetForegroundServiceRan && isAndroid7OrBelow) {
     isSetForegroundServiceRan = true;
     setForegroundService();
   }
@@ -81,7 +74,7 @@ export const useAndroidKeepCallAliveEffect = () => {
   const callingState = useCallCallingState();
 
   useEffect((): (() => void) | undefined => {
-    if (Platform.OS !== 'android' || !activeCallCid) {
+    if (!isAndroid7OrBelow || !activeCallCid) {
       return;
     }
 

package/src/hooks/useIsInPiPMode.tsx

@@ -8,11 +8,15 @@ import {
 
 const PIP_CHANGE_EVENT = 'StreamVideoReactNative_PIP_CHANGE_EVENT';
 
+const isAndroid8OrAbove = Platform.OS === 'android' && Platform.Version >= 26;
+
 export function useIsInPiPMode() {
-  const [isInPiPMode, setIsInPiPMode] = useState(false);
+  const [isInPiPMode, setIsInPiPMode] = useState(
+    isAndroid8OrAbove && AppState.currentState === 'background'
+  );
 
   useEffect(() => {
-    if (Platform.OS !== 'android') {
+    if (!isAndroid8OrAbove) {
       return;
     }
 
@@ -25,6 +29,12 @@ export function useIsInPiPMode() {
       setIsInPiPMode
     );
 
+    const setFromNativeMethod = async () => {
+      const isInPiPNativeMethod: boolean | null | undefined =
+        await NativeModules?.StreamVideoReactNative?.isInPiPMode();
+      setIsInPiPMode(!!isInPiPNativeMethod);
+    };
+
     const subscriptionAppState = AppState.addEventListener(
       'change',
       (nextAppState) => {
@@ -32,17 +42,12 @@ export function useIsInPiPMode() {
           setIsInPiPMode(true); // set with an assumption that its enabled so that UI disabling happens faster
           // if PiP was not enabled anyway, then in the next code we ll set it to false and UI wont be shown anyway
         }
-        // attempt to take the value as soon as app state is changed
-        // this can be faster than event emitter at times
-        // also in new arch this can be made a synchronous method
-        NativeModules?.StreamVideoReactNative?.isInPiPMode().then(
-          (isInPiPNativeMethod: boolean | null | undefined) => {
-            setIsInPiPMode(!!isInPiPNativeMethod);
-          }
-        );
+        setFromNativeMethod();
       }
     );
 
+    setFromNativeMethod();
+
     return () => {
       subscriptionPiPChange.remove();
       subscriptionAppState.remove();

package/src/theme/theme.ts

@@ -160,9 +160,6 @@ export type Theme = {
     bottomContainer: ViewStyle;
     buttonGroup: ViewStyle;
   };
-  joiningCallIndicator: {
-    container: ViewStyle;
-  };
   outgoingCall: {
     container: ViewStyle;
     background: ViewStyle;
@@ -486,7 +483,6 @@ export const defaultTheme: Theme = {
     deviceControlButtons: {},
   },
   ringingCallContent: { container: {} },
-  joiningCallIndicator: { container: {} },
   callTopView: {
     container: {},
     content: {},

package/src/translations/en.json

@@ -21,5 +21,7 @@
   "{{ userName }} is sharing their screen": "{{ userName }} is sharing their screen",
   "You are sharing your screen": "You are sharing your screen",
   "{{ numberOfParticipants }} participant(s) are in the call.": "{{ numberOfParticipants }} participant(s) are in the call.",
-  "You are about to join a call with id {{ callId }}.": "You are about to join a call with id {{ callId }}."
+  "You are about to join a call with id {{ callId }}.": "You are about to join a call with id {{ callId }}.",
+  "Preparing call": "Preparing call",
+  "You have left the call": "You have left the call"
 }

package/src/utils/StreamVideoRN/index.ts

@@ -1,4 +1,3 @@
-import { AndroidImportance } from '@notifee/react-native';
 import { setupFirebaseHandlerAndroid } from '../push/android';
 import { StreamVideoConfig } from './types';
 import pushLogoutCallbacks from '../internal/pushLogoutCallback';
@@ -10,13 +9,6 @@ import newNotificationCallbacks, {
 const DEFAULT_STREAM_VIDEO_CONFIG: StreamVideoConfig = {
   foregroundService: {
     android: {
-      channel: {
-        id: 'stream_call_foreground_service',
-        name: 'Notification Service to keep call alive',
-        lights: false,
-        vibration: false,
-        importance: AndroidImportance.DEFAULT,
-      },
       notificationTexts: {
         title: 'Call in progress',
         body: 'Tap to return to the call',

package/src/utils/StreamVideoRN/types.ts

@@ -113,11 +113,9 @@ export type StreamVideoConfig = {
   foregroundService: {
     android: {
       /**
-       * The notification channel to keep call alive in the background for Android using a foreground service.
-       */
-      channel: AndroidChannel;
-      /**
-       * The texts shown in the notification to keep call alive in the background for Android using a foreground service.
+       * The texts shown in the notification to keep call alive in the background
+       * for Android 24 and 25 platforms using a foreground service.
+       * On Android 26 and above, Picture in Picture mode is used to keep the call alive.
        */
       notificationTexts: {
         title: string;

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.8.9';
+export const version = '0.9.1';

package/dist/commonjs/components/Call/RingingCallContent/JoiningCallIndicator.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.JoiningCallIndicator = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _contexts = require("../../../contexts");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const JoiningCallIndicator = () => {
-  const {
-    theme: {
-      colors,
-      joiningCallIndicator
-    }
-  } = (0, _contexts.useTheme)();
-  return /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
-    style: [styles.container, {
-      backgroundColor: colors.static_grey
-    }, joiningCallIndicator.container]
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
-    size: 'large',
-    style: _reactNative.StyleSheet.absoluteFill
-  }));
-};
-exports.JoiningCallIndicator = JoiningCallIndicator;
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
-//# sourceMappingURL=JoiningCallIndicator.js.map

package/dist/commonjs/components/Call/RingingCallContent/JoiningCallIndicator.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_contexts","e","__esModule","default","JoiningCallIndicator","theme","colors","joiningCallIndicator","useTheme","createElement","SafeAreaView","style","styles","container","backgroundColor","static_grey","ActivityIndicator","size","StyleSheet","absoluteFill","exports","create","flex"],"sourceRoot":"../../../../../src","sources":["components/Call/RingingCallContent/JoiningCallIndicator.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAA6C,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtC,MAAMG,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAM;IACJC,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAqB;EACxC,CAAC,GAAG,IAAAC,kBAAQ,EAAC,CAAC;EACd,oBACEZ,MAAA,CAAAO,OAAA,CAAAM,aAAA,CAACV,YAAA,CAAAW,YAAY;IACXC,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAER,MAAM,CAACS;IAAY,CAAC,EACvCR,oBAAoB,CAACM,SAAS;EAC9B,gBAEFjB,MAAA,CAAAO,OAAA,CAAAM,aAAA,CAACV,YAAA,CAAAiB,iBAAiB;IAACC,IAAI,EAAE,OAAQ;IAACN,KAAK,EAAEO,uBAAU,CAACC;EAAa,CAAE,CACvD,CAAC;AAEnB,CAAC;AAACC,OAAA,CAAAhB,oBAAA,GAAAA,oBAAA;AAEF,MAAMQ,MAAM,GAAGM,uBAAU,CAACG,MAAM,CAAC;EAC/BR,SAAS,EAAE;IACTS,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/components/Call/RingingCallContent/JoiningCallIndicator.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { ActivityIndicator, SafeAreaView, StyleSheet } from 'react-native';
-import { useTheme } from '../../../contexts';
-export const JoiningCallIndicator = () => {
-  const {
-    theme: {
-      colors,
-      joiningCallIndicator
-    }
-  } = useTheme();
-  return /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: [styles.container, {
-      backgroundColor: colors.static_grey
-    }, joiningCallIndicator.container]
-  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
-    size: 'large',
-    style: StyleSheet.absoluteFill
-  }));
-};
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
-//# sourceMappingURL=JoiningCallIndicator.js.map

package/dist/module/components/Call/RingingCallContent/JoiningCallIndicator.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","ActivityIndicator","SafeAreaView","StyleSheet","useTheme","JoiningCallIndicator","theme","colors","joiningCallIndicator","createElement","style","styles","container","backgroundColor","static_grey","size","absoluteFill","create","flex"],"sourceRoot":"../../../../../src","sources":["components/Call/RingingCallContent/JoiningCallIndicator.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,EAAEC,YAAY,EAAEC,UAAU,QAAQ,cAAc;AAC1E,SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAM;IACJC,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAqB;EACxC,CAAC,GAAGJ,QAAQ,CAAC,CAAC;EACd,oBACEJ,KAAA,CAAAS,aAAA,CAACP,YAAY;IACXQ,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAEN,MAAM,CAACO;IAAY,CAAC,EACvCN,oBAAoB,CAACI,SAAS;EAC9B,gBAEFZ,KAAA,CAAAS,aAAA,CAACR,iBAAiB;IAACc,IAAI,EAAE,OAAQ;IAACL,KAAK,EAAEP,UAAU,CAACa;EAAa,CAAE,CACvD,CAAC;AAEnB,CAAC;AAED,MAAML,MAAM,GAAGR,UAAU,CAACc,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/typescript/components/Call/RingingCallContent/JoiningCallIndicator.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const JoiningCallIndicator: () => React.JSX.Element;
-//# sourceMappingURL=JoiningCallIndicator.d.ts.map

package/dist/typescript/components/Call/RingingCallContent/JoiningCallIndicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"JoiningCallIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/RingingCallContent/JoiningCallIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,oBAAoB,yBAehC,CAAC"}

package/src/components/Call/RingingCallContent/JoiningCallIndicator.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { ActivityIndicator, SafeAreaView, StyleSheet } from 'react-native';
-import { useTheme } from '../../../contexts';
-
-export const JoiningCallIndicator = () => {
-  const {
-    theme: { colors, joiningCallIndicator },
-  } = useTheme();
-  return (
-    <SafeAreaView
-      style={[
-        styles.container,
-        { backgroundColor: colors.static_grey },
-        joiningCallIndicator.container,
-      ]}
-    >
-      <ActivityIndicator size={'large'} style={StyleSheet.absoluteFill} />
-    </SafeAreaView>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});