@stream-io/video-react-native-sdk 0.1.11 → 0.1.13

package/expo-config-plugin/dist/index.js

@@ -10,20 +10,24 @@ const withMainApplication_1 = __importDefault(require("./withMainApplication"));
 const withAndroidPermissions_1 = __importDefault(require("./withAndroidPermissions"));
 const withAndroidManifest_1 = __importDefault(require("./withAndroidManifest"));
 const withiOSInfoPlist_1 = __importDefault(require("./withiOSInfoPlist"));
+const withMainActivity_1 = __importDefault(require("./withMainActivity"));
 const withBuildProperties_1 = __importDefault(require("./withBuildProperties"));
 const withAppBuildGradle_1 = __importDefault(require("./withAppBuildGradle"));
 // path should be relative to dist
 const pkg = require('../../package.json');
 const withStreamVideoReactNativeSDK = (config, props) => {
     return (0, config_plugins_1.withPlugins)(config, [
+        // ios
         () => (0, withPushAppDelegate_1.default)(config, props),
         withStreamVideoReactNativeSDKAppDelegate_1.default,
+        () => (0, withiOSInfoPlist_1.default)(config, props),
+        // android
         withMainApplication_1.default,
         withAndroidPermissions_1.default,
-        withAndroidManifest_1.default,
         withAppBuildGradle_1.default,
         withBuildProperties_1.default,
-        () => (0, withiOSInfoPlist_1.default)(config, props),
+        () => (0, withAndroidManifest_1.default)(config, props),
+        () => (0, withMainActivity_1.default)(config, props),
     ]);
 };
 exports.default = (0, config_plugins_1.createRunOncePlugin)(withStreamVideoReactNativeSDK, pkg.name, pkg.version);

package/expo-config-plugin/dist/withAndroidManifest.d.ts

@@ -1,3 +1,4 @@
 import { ConfigPlugin } from '@expo/config-plugins';
-declare const withStreamVideoReactNativeSDKManifest: ConfigPlugin;
+import { ConfigProps } from './common/types';
+declare const withStreamVideoReactNativeSDKManifest: ConfigPlugin<ConfigProps>;
 export default withStreamVideoReactNativeSDKManifest;

package/expo-config-plugin/dist/withAndroidManifest.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const config_plugins_1 = require("@expo/config-plugins");
-const { prefixAndroidKeys, getMainApplicationOrThrow } = config_plugins_1.AndroidConfig.Manifest;
+const { prefixAndroidKeys, getMainApplicationOrThrow, getMainActivityOrThrow } = config_plugins_1.AndroidConfig.Manifest;
 function getNotifeeService() {
     /*
       <service
@@ -18,19 +18,37 @@ function getNotifeeService() {
         $: head,
     };
 }
-const withStreamVideoReactNativeSDKManifest = (configuration) => {
+const withStreamVideoReactNativeSDKManifest = (configuration, props) => {
     return (0, config_plugins_1.withAndroidManifest)(configuration, (config) => {
         try {
             const androidManifest = config.modResults;
             const mainApplication = getMainApplicationOrThrow(androidManifest);
+            /* Add the notifeee Service */
             let services = mainApplication.service ?? [];
             // we filter out the existing notifee service (if any) so that we can override it
             services = services.filter((service) => service.$['android:name'] !== 'app.notifee.core.ForegroundService');
             services.push(getNotifeeService());
             mainApplication.service = services;
+            if (props?.androidPictureInPicture) {
+                const mainActivity = getMainActivityOrThrow(androidManifest);
+                ('keyboard|keyboardHidden|orientation|screenSize|uiMode');
+                const currentConfigChangesArray = mainActivity.$['android:configChanges']
+                    ? mainActivity.$['android:configChanges'].split('|')
+                    : [];
+                const neededConfigChangesArray = 'screenSize|smallestScreenSize|screenLayout|orientation'.split('|');
+                // Create a Set from the two arrays.
+                const set = new Set([
+                    ...currentConfigChangesArray,
+                    ...neededConfigChangesArray,
+                ]);
+                const mergedConfigChanges = [...set];
+                mainActivity.$['android:configChanges'] = mergedConfigChanges.join('|');
+                mainActivity.$['android:supportsPictureInPicture'] = 'true';
+            }
             config.modResults = androidManifest;
         }
         catch (error) {
+            console.log(error);
             throw new Error('Cannot setup StreamVideoReactNativeSDK because the AndroidManifest is malformed');
         }
         return config;

package/expo-config-plugin/dist/withMainActivity.d.ts

@@ -0,0 +1,4 @@
+import { ConfigPlugin } from '@expo/config-plugins';
+import { ConfigProps } from './common/types';
+declare const withStreamVideoReactNativeSDKMainActivity: ConfigPlugin<ConfigProps>;
+export default withStreamVideoReactNativeSDKMainActivity;

package/expo-config-plugin/dist/withMainActivity.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_plugins_1 = require("@expo/config-plugins");
+const codeMod_1 = require("@expo/config-plugins/build/android/codeMod");
+const addNewLinesToMainActivity_1 = __importDefault(require("./common/addNewLinesToMainActivity"));
+const withStreamVideoReactNativeSDKMainActivity = (configuration, props) => {
+    return (0, config_plugins_1.withMainActivity)(configuration, (config) => {
+        if (['java'].includes(config.modResults.language)) {
+            try {
+                /*
+                  import com.streamvideo.reactnative.StreamVideoReactNative;
+                  import android.util.Rational;
+                  import androidx.lifecycle.Lifecycle;
+                  import android.app.PictureInPictureParams;
+                */
+                config.modResults.contents = (0, codeMod_1.addImports)(config.modResults.contents, [
+                    'com.streamvideo.reactnative.StreamVideoReactNative',
+                    'android.util.Rational',
+                    'androidx.lifecycle.Lifecycle',
+                    'android.app.PictureInPictureParams',
+                ], config.modResults.language === 'java');
+                config.modResults.contents = addOnPictureInPictureModeChanged(config.modResults.contents);
+                if (props?.androidPictureInPicture?.enableAutomaticEnter) {
+                    config.modResults.contents = addOnUserLeaveHint(config.modResults.contents);
+                }
+            }
+            catch (error) {
+                throw new Error("Cannot add StreamVideoReactNativeSDK to the project's MainApplication because it's malformed.");
+            }
+        }
+        else {
+            throw new Error('Cannot setup StreamVideoReactNativeSDK because the MainApplication is not in Java');
+        }
+        return config;
+    });
+};
+function addOnPictureInPictureModeChanged(contents) {
+    if (!contents.includes('StreamVideoReactNative.onPictureInPictureModeChanged')) {
+        const statementToInsert = `
+  @Override
+  public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode) {
+    super.onPictureInPictureModeChanged(isInPictureInPictureMode);
+    if (getLifecycle().getCurrentState() == Lifecycle.State.CREATED) {
+      // when user clicks on Close button of PIP
+      finishAndRemoveTask();
+    } else {
+      StreamVideoReactNative.onPictureInPictureModeChanged(isInPictureInPictureMode);
+    }
+  }`;
+        contents = (0, addNewLinesToMainActivity_1.default)(contents, statementToInsert.trim().split('\n'));
+    }
+    return contents;
+}
+function addOnUserLeaveHint(contents) {
+    if (!contents.includes('StreamVideoReactNative.canAutoEnterPictureInPictureMode')) {
+        const statementToInsert = `
+  @Override
+  public void onUserLeaveHint () {
+    if (StreamVideoReactNative.canAutoEnterPictureInPictureMode) {
+      PictureInPictureParams.Builder builder = new PictureInPictureParams.Builder();
+      builder.setAspectRatio(new Rational(480, 640));
+      enterPictureInPictureMode(builder.build());
+    }
+  }`;
+        contents = (0, addNewLinesToMainActivity_1.default)(contents, statementToInsert.trim().split('\n'));
+    }
+    return contents;
+}
+exports.default = withStreamVideoReactNativeSDKMainActivity;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "packageManager": "yarn@3.2.4",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",
@@ -45,8 +45,8 @@
     "!**/.*"
   ],
   "dependencies": {
-    "@stream-io/video-client": "^0.3.35",
-    "@stream-io/video-react-bindings": "^0.2.36",
+    "@stream-io/video-client": "^0.3.36",
+    "@stream-io/video-react-bindings": "^0.2.37",
     "intl-pluralrules": "2.0.1",
     "lodash.merge": "^4.6.2",
     "react-native-url-polyfill": "1.3.0",

package/src/components/Call/CallContent/CallContent.tsx

@@ -30,6 +30,7 @@ import {
   CallParticipantsListComponentProps,
   CallParticipantsListProps,
 } from '../CallParticipantsList';
+import { useIsInPiPMode, useAutoEnterPiPEffect } from '../../../hooks';
 
 export type StreamReactionType = StreamReaction & {
   icon: string;
@@ -111,19 +112,24 @@ export const CallContent = ({
     useLocalParticipant,
   } = useCallStateHooks();
 
+  useAutoEnterPiPEffect();
+
   const _remoteParticipants = useRemoteParticipants();
   const remoteParticipants = useDebouncedValue(_remoteParticipants, 300); // we debounce the remote participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
   const localParticipant = useLocalParticipant();
-
+  const isInPiPMode = useIsInPiPMode();
   const hasScreenShare = useHasOngoingScreenShare();
   const showSpotlightLayout = hasScreenShare || layout === 'spotlight';
 
   const showFloatingView =
     !showSpotlightLayout &&
+    !isInPiPMode &&
     remoteParticipants.length > 0 &&
     remoteParticipants.length < 3;
   const isRemoteParticipantInFloatingView =
-    showRemoteParticipantInFloatingView && remoteParticipants.length === 1;
+    showFloatingView &&
+    showRemoteParticipantInFloatingView &&
+    remoteParticipants.length === 1;
 
   /**
    * This hook is used to handle IncallManager specs of the application.
@@ -150,8 +156,10 @@ export const CallContent = ({
   }, []);
 
   const participantViewProps: ParticipantViewComponentProps = {
-    ParticipantLabel,
-    ParticipantNetworkQualityIndicator,
+    ParticipantLabel: isInPiPMode ? null : ParticipantLabel,
+    ParticipantNetworkQualityIndicator: isInPiPMode
+      ? null
+      : ParticipantNetworkQualityIndicator,
     ParticipantReaction,
     ParticipantVideoFallback,
     VideoRenderer,
@@ -187,7 +195,7 @@ export const CallContent = ({
           // and allows only the top and floating view (its child views) to take up the touches
           pointerEvents="box-none"
         >
-          {CallTopView && (
+          {!isInPiPMode && CallTopView && (
             <CallTopView
               onBackPressed={onBackPressed}
               onParticipantInfoPress={onParticipantInfoPress}
@@ -214,7 +222,7 @@ export const CallContent = ({
         )}
       </View>
 
-      {CallControls && (
+      {!isInPiPMode && CallControls && (
         <CallControls
           onHangupCallHandler={onHangupCallHandler}
           landscape={landscape}

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

@@ -10,6 +10,7 @@ import { ComponentTestIds } from '../../../constants/TestIds';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { CallContentProps } from '../CallContent';
 import { ParticipantViewComponentProps } from '../../Participant';
+import { useIsInPiPMode } from '../../../hooks';
 
 /**
  * Props for the CallParticipantsGrid component.
@@ -58,15 +59,28 @@ export const CallParticipantsGrid = ({
     flexDirection: landscape ? 'row' : 'column',
   };
 
+  const isInPiPMode = useIsInPiPMode();
+
   const showFloatingView =
-    remoteParticipants.length > 0 && remoteParticipants.length < 3;
+    !isInPiPMode &&
+    remoteParticipants.length > 0 &&
+    remoteParticipants.length < 3;
 
-  const participants = showFloatingView
+  let participants = showFloatingView
     ? showLocalParticipant && localParticipant
       ? [localParticipant]
       : remoteParticipants
     : allParticipants;
 
+  if (isInPiPMode) {
+    participants =
+      remoteParticipants.length > 0
+        ? [remoteParticipants[0]]
+        : localParticipant
+        ? [localParticipant]
+        : [];
+  }
+
   const participantViewProps: CallParticipantsListComponentProps = {
     ParticipantView,
     ParticipantLabel,

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

@@ -18,6 +18,7 @@ import {
 } from '../../Participant';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { CallContentProps } from '../CallContent';
+import { useIsInPiPMode } from '../../../hooks';
 
 /**
  * Props for the CallParticipantsSpotlight component.
@@ -62,6 +63,8 @@ export const CallParticipantsSpotlight = ({
   const isScreenShareOnSpotlight = hasScreenShare(participantInSpotlight);
   const isUserAloneInCall = _allParticipants?.length === 1;
 
+  const isInPiP = useIsInPiPMode();
+
   const participantViewProps: ParticipantViewComponentProps = {
     ParticipantLabel,
     ParticipantNetworkQualityIndicator,
@@ -117,7 +120,7 @@ export const CallParticipantsSpotlight = ({
           {...participantViewProps}
         />
       )}
-      {!isUserAloneInCall && (
+      {!isInPiP && !isUserAloneInCall && (
         <View
           style={[
             styles.callParticipantsListContainer,

package/src/components/Call/CallTopView/ParticipantsInfoBadge.tsx

@@ -80,6 +80,7 @@ export const ParticipantsInfoBadge = ({
           },
           participantInfoBadge.participantCountContainer,
         ]}
+        testID={ButtonTestIds.PARTICIPANTS_COUNT_VIEW}
       >
         <Text
           style={[
@@ -90,6 +91,7 @@ export const ParticipantsInfoBadge = ({
             typefaces.subtitle,
             participantInfoBadge.participantsCountText,
           ]}
+          testID={ButtonTestIds.PARTICIPANTS_COUNT_TEXT}
         >
           {count}
         </Text>

package/src/constants/TestIds.ts

@@ -19,6 +19,8 @@ export enum ComponentTestIds {
 
 export enum ButtonTestIds {
   PARTICIPANTS_INFO = 'participants-info-button',
+  PARTICIPANTS_COUNT_VIEW = 'participants-count-view',
+  PARTICIPANTS_COUNT_TEXT = 'participants-count-text',
   HANG_UP_CALL = 'hang-up-call',
   REACTION = 'call-controls-reaction',
 }

package/src/hooks/index.ts

@@ -3,3 +3,5 @@ export * from './usePermissionRequest';
 export * from './usePermissionNotification';
 export * from './push';
 export * from './useAndroidKeepCallAliveEffect';
+export * from './useIsInPiPMode';
+export * from './useAutoEnterPiPEffect';

package/src/hooks/useAutoEnterPiPEffect.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { NativeModules, Platform } from 'react-native';
+
+export function useAutoEnterPiPEffect() {
+  useEffect(() => {
+    if (Platform.OS !== 'android') {
+      return;
+    }
+
+    NativeModules.StreamVideoReactNative.canAutoEnterPipMode(true);
+
+    return () => {
+      NativeModules.StreamVideoReactNative.canAutoEnterPipMode(false);
+    };
+  }, []);
+}

package/src/hooks/useIsInPiPMode.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { NativeEventEmitter, NativeModules, Platform } from 'react-native';
+
+export function useIsInPiPMode() {
+  const [isInPiPMode, setIsInPiPMode] = useState(false);
+
+  useEffect(() => {
+    if (Platform.OS !== 'android') {
+      return;
+    }
+
+    const eventEmitter = new NativeEventEmitter(
+      NativeModules.StreamVideoReactNative,
+    );
+
+    const subscription = eventEmitter.addListener(
+      'StreamVideoReactNative_PIP_CHANGE_EVENT',
+      (isPiPEnabled: boolean) => {
+        setIsInPiPMode(isPiPEnabled);
+      },
+    );
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return isInPiPMode;
+}

package/src/providers/MediaStreamManagement.tsx

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useAppStateListener } from '../utils/hooks';
+import { NativeModules, Platform } from 'react-native';
 
 export type MediaDevicesInitialState = {
   /**
@@ -38,7 +39,19 @@ export const MediaStreamManagement = ({
       call?.camera?.resume();
     },
     () => {
-      call?.camera?.disable();
+      if (Platform.OS === 'android') {
+        // in Android, we need to check if we are in PiP mode
+        // in PiP mode, we don't want to disable the camera
+        NativeModules?.StreamVideoReactNative?.isInPiPMode().then(
+          (isInPiP: boolean) => {
+            if (!isInPiP) {
+              call?.camera?.disable();
+            }
+          },
+        );
+      } else {
+        call?.camera?.disable();
+      }
     },
   );
 

package/src/utils/enterPiPAndroid.ts

@@ -0,0 +1,11 @@
+import { NativeModules, Platform } from 'react-native';
+
+export function enterPiPAndroid(width?: number, height?: number) {
+  if (Platform.OS !== 'android') {
+    return;
+  }
+  return NativeModules?.StreamVideoReactNative?.enterPipMode(
+    width ? Math.floor(width) : 0,
+    height ? Math.floor(height) : 0,
+  );
+}

package/src/utils/index.ts

@@ -36,4 +36,5 @@ export const getInitialsOfName = (name: string) => {
   return initials;
 };
 
+export * from './enterPiPAndroid';
 export * from './StreamVideoRN';

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.1.11';
+export const version = '0.1.13';