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

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.12",
   "packageManager": "yarn@3.2.4",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",

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/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.12';