@stream-io/video-react-native-sdk 1.8.0 → 1.9.0

package/dist/module/utils/internal/rxSubjects.js

@@ -0,0 +1,4 @@
+import { BehaviorSubject } from 'rxjs';
+export const isInPiPModeAndroid$ = new BehaviorSubject(false);
+export const disablePiPMode$ = new BehaviorSubject(false);
+//# sourceMappingURL=rxSubjects.js.map

package/dist/module/utils/internal/rxSubjects.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BehaviorSubject","isInPiPModeAndroid$","disablePiPMode$"],"sourceRoot":"../../../../src","sources":["utils/internal/rxSubjects.ts"],"mappings":"AAAA,SAASA,eAAe,QAAQ,MAAM;AAEtC,OAAO,MAAMC,mBAAmB,GAAG,IAAID,eAAe,CAAU,KAAK,CAAC;AAEtE,OAAO,MAAME,eAAe,GAAG,IAAIF,eAAe,CAAU,KAAK,CAAC","ignoreList":[]}

package/dist/module/version.js

@@ -1,2 +1,2 @@
-export const version = '1.8.0';
+export const version = '1.9.0';
 //# sourceMappingURL=version.js.map

package/dist/typescript/components/Call/CallContent/CallContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallContent/CallContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,OAAO,EACL,gBAAgB,EAEhB,qBAAqB,EACtB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAIzD,OAAO,EAEL,4BAA4B,EAC5B,6BAA6B,EAC9B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,kCAAkC,EAClC,yBAAyB,EAC1B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,uBAAuB,EACxB,MAAM,kCAAkC,CAAC;AAG1C,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,yBAAyB,GAAG,6BAA6B,GAC5D,IAAI,CAAC,kCAAkC,EAAE,iBAAiB,CAAC,GAAG;IAC5D;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC5D;;OAEG;IACH,uBAAuB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,GAAG,IAAI,CAAC;IACnF;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;IAC7E;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,GAAG,IAAI,CAAC;CAC1E,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,EACrB,qBAAqB,CACtB,GACC,yBAAyB,GAAG;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAK1C,SAAS,CAAC,EAAE,OAAO,CAAC;IAIpB,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC;AAEJ,eAAO,MAAM,WAAW,uVAiBrB,gBAAgB,sBAkIlB,CAAC"}
+{"version":3,"file":"CallContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallContent/CallContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAS5D,OAAO,EACL,gBAAgB,EAEhB,qBAAqB,EACtB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAIzD,OAAO,EAEL,4BAA4B,EAC5B,6BAA6B,EAC9B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,kCAAkC,EAClC,yBAAyB,EAC1B,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,uBAAuB,EACxB,MAAM,kCAAkC,CAAC;AAG1C,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG;IAChD,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,yBAAyB,GAAG,6BAA6B,GAC5D,IAAI,CAAC,kCAAkC,EAAE,iBAAiB,CAAC,GAAG;IAC5D;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC5D;;OAEG;IACH,uBAAuB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,GAAG,IAAI,CAAC;IACnF;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;IAC7E;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,uBAAuB,CAAC,GAAG,IAAI,CAAC;CAC1E,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,EACrB,qBAAqB,CACtB,GACC,yBAAyB,GAAG;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAK1C,SAAS,CAAC,EAAE,OAAO,CAAC;IAIpB,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC,CAAC;AAEJ,eAAO,MAAM,WAAW,uVAiBrB,gBAAgB,sBAmIlB,CAAC"}

package/dist/typescript/components/Call/CallLayout/CallParticipantsGrid.d.ts

@@ -5,7 +5,7 @@ import { ParticipantViewComponentProps } from '../../Participant';
 /**
  * Props for the CallParticipantsGrid component.
  */
-export type CallParticipantsGridProps = ParticipantViewComponentProps & Pick<CallContentProps, 'supportedReactions' | 'CallParticipantsList' | 'disablePictureInPicture'> & Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
+export type CallParticipantsGridProps = ParticipantViewComponentProps & Pick<CallContentProps, 'supportedReactions' | 'CallParticipantsList'> & Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
     /**
      * Boolean to decide if local participant will be visible in the grid when there is 1:1 call.
      */
@@ -19,5 +19,5 @@ export type CallParticipantsGridProps = ParticipantViewComponentProps & Pick<Cal
 /**
  * Component used to display the list of participants in a grid mode.
  */
-export declare const CallParticipantsGrid: ({ CallParticipantsList, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, VideoRenderer, showLocalParticipant, supportedReactions, landscape, disablePictureInPicture, }: CallParticipantsGridProps) => React.JSX.Element;
+export declare const CallParticipantsGrid: ({ CallParticipantsList, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, VideoRenderer, showLocalParticipant, supportedReactions, landscape, }: CallParticipantsGridProps) => React.JSX.Element;
 //# sourceMappingURL=CallParticipantsGrid.d.ts.map

package/dist/typescript/components/Call/CallLayout/CallParticipantsGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantsGrid.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAEL,kCAAkC,EACnC,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC;AAIlE;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,6BAA6B,GACnE,IAAI,CACF,gBAAgB,EAChB,oBAAoB,GAAG,sBAAsB,GAAG,yBAAyB,CAC1E,GACD,IAAI,CAAC,kCAAkC,EAAE,iBAAiB,CAAC,GAAG;IAC5D;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,oBAAoB,iPAY9B,yBAAyB,sBAwE3B,CAAC"}
+{"version":3,"file":"CallParticipantsGrid.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAEL,kCAAkC,EACnC,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC;AAIlE;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,6BAA6B,GACnE,IAAI,CAAC,gBAAgB,EAAE,oBAAoB,GAAG,sBAAsB,CAAC,GACrE,IAAI,CAAC,kCAAkC,EAAE,iBAAiB,CAAC,GAAG;IAC5D;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,oBAAoB,wNAW9B,yBAAyB,sBAwE3B,CAAC"}

package/dist/typescript/components/Call/CallLayout/CallParticipantsSpotlight.d.ts

@@ -5,7 +5,7 @@ import { CallContentProps } from '../CallContent';
 /**
  * Props for the CallParticipantsSpotlight component.
  */
-export type CallParticipantsSpotlightProps = ParticipantViewComponentProps & Pick<CallContentProps, 'supportedReactions' | 'CallParticipantsList' | 'ScreenShareOverlay' | 'disablePictureInPicture'> & Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
+export type CallParticipantsSpotlightProps = ParticipantViewComponentProps & Pick<CallContentProps, 'supportedReactions' | 'CallParticipantsList' | 'ScreenShareOverlay'> & Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
     /**
      * Check if device is in landscape mode.
      * This will apply the landscape mode styles to the component.
@@ -16,5 +16,5 @@ export type CallParticipantsSpotlightProps = ParticipantViewComponentProps & Pic
  * Component used to display the list of participants in a spotlight mode.
  * This can be used when you want to render the screen sharing stream.
  */
-export declare const CallParticipantsSpotlight: ({ CallParticipantsList, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, ScreenShareOverlay, VideoRenderer, supportedReactions, landscape, disablePictureInPicture, }: CallParticipantsSpotlightProps) => React.JSX.Element;
+export declare const CallParticipantsSpotlight: ({ CallParticipantsList, ParticipantLabel, ParticipantNetworkQualityIndicator, ParticipantReaction, ParticipantVideoFallback, ParticipantView, ScreenShareOverlay, VideoRenderer, supportedReactions, landscape, }: CallParticipantsSpotlightProps) => React.JSX.Element;
 //# sourceMappingURL=CallParticipantsSpotlight.d.ts.map

package/dist/typescript/components/Call/CallLayout/CallParticipantsSpotlight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CallParticipantsSpotlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsSpotlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AASvC,OAAO,EAEL,kCAAkC,EACnC,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAEL,6BAA6B,EAC9B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD;;GAEG;AACH,MAAM,MAAM,8BAA8B,GAAG,6BAA6B,GACxE,IAAI,CACF,gBAAgB,EACd,oBAAoB,GACpB,sBAAsB,GACtB,oBAAoB,GACpB,yBAAyB,CAC5B,GACD,IAAI,CAAC,kCAAkC,EAAE,iBAAiB,CAAC,GAAG;IAC5D;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,yBAAyB,+OAYnC,8BAA8B,sBAsGhC,CAAC"}
+{"version":3,"file":"CallParticipantsSpotlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/Call/CallLayout/CallParticipantsSpotlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AASvC,OAAO,EAEL,kCAAkC,EACnC,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAEL,6BAA6B,EAC9B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGlD;;GAEG;AACH,MAAM,MAAM,8BAA8B,GAAG,6BAA6B,GACxE,IAAI,CACF,gBAAgB,EAChB,oBAAoB,GAAG,sBAAsB,GAAG,oBAAoB,CACrE,GACD,IAAI,CAAC,kCAAkC,EAAE,iBAAiB,CAAC,GAAG;IAC5D;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,yBAAyB,sNAWnC,8BAA8B,sBAsGhC,CAAC"}

package/dist/typescript/hooks/useAutoEnterPiPEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAutoEnterPiPEffect.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAutoEnterPiPEffect.tsx"],"names":[],"mappings":"AAKA,wBAAgB,qBAAqB,CACnC,uBAAuB,EAAE,OAAO,GAAG,SAAS,QAwC7C"}
+{"version":3,"file":"useAutoEnterPiPEffect.d.ts","sourceRoot":"","sources":["../../../src/hooks/useAutoEnterPiPEffect.tsx"],"names":[],"mappings":"AAMA,wBAAgB,qBAAqB,CACnC,uBAAuB,EAAE,OAAO,GAAG,SAAS,QA0C7C"}

package/dist/typescript/hooks/useIsInPiPMode.d.ts

@@ -1,2 +1,2 @@
-export declare function useIsInPiPMode(disablePictureInPicture: boolean | undefined): boolean | undefined;
+export declare function useIsInPiPMode(): boolean;
 //# sourceMappingURL=useIsInPiPMode.d.ts.map

package/dist/typescript/hooks/useIsInPiPMode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIsInPiPMode.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIsInPiPMode.tsx"],"names":[],"mappings":"AAYA,wBAAgB,cAAc,CAAC,uBAAuB,EAAE,OAAO,GAAG,SAAS,uBA+C1E"}
+{"version":3,"file":"useIsInPiPMode.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIsInPiPMode.tsx"],"names":[],"mappings":"AAIA,wBAAgB,cAAc,YAmB7B"}

package/dist/typescript/providers/StreamCall/AppStateListener.d.ts

@@ -0,0 +1,2 @@
+export declare const AppStateListener: () => null;
+//# sourceMappingURL=AppStateListener.d.ts.map

package/dist/typescript/providers/StreamCall/AppStateListener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppStateListener.d.ts","sourceRoot":"","sources":["../../../../src/providers/StreamCall/AppStateListener.tsx"],"names":[],"mappings":"AAsBA,eAAO,MAAM,gBAAgB,YAsG5B,CAAC"}

package/dist/typescript/providers/StreamCall/DeviceStats.d.ts

@@ -0,0 +1,5 @@
+/**
+ * This is a renderless component to get the device stats like thermal state and power saver mode.
+ */
+export declare const DeviceStats: () => null;
+//# sourceMappingURL=DeviceStats.d.ts.map

package/dist/typescript/providers/StreamCall/DeviceStats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceStats.d.ts","sourceRoot":"","sources":["../../../../src/providers/StreamCall/DeviceStats.tsx"],"names":[],"mappings":"AAaA;;GAEG;AACH,eAAO,MAAM,WAAW,YA0CvB,CAAC"}

package/dist/typescript/providers/{StreamCall.d.ts → StreamCall/index.d.ts}

@@ -15,4 +15,4 @@ export type StreamCallProps = {
  * @category Client State
  */
 export declare const StreamCall: ({ call, children, }: PropsWithChildren<StreamCallProps>) => React.JSX.Element;
-//# sourceMappingURL=StreamCall.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/providers/StreamCall/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/providers/StreamCall/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAc/C,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC;AACF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,wBAGpB,iBAAiB,CAAC,eAAe,CAAC,sBAWpC,CAAC"}

package/dist/typescript/utils/internal/rxSubjects.d.ts

@@ -0,0 +1,4 @@
+import { BehaviorSubject } from 'rxjs';
+export declare const isInPiPModeAndroid$: BehaviorSubject<boolean>;
+export declare const disablePiPMode$: BehaviorSubject<boolean>;
+//# sourceMappingURL=rxSubjects.d.ts.map

package/dist/typescript/utils/internal/rxSubjects.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rxSubjects.d.ts","sourceRoot":"","sources":["../../../../src/utils/internal/rxSubjects.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AAEvC,eAAO,MAAM,mBAAmB,0BAAsC,CAAC;AAEvE,eAAO,MAAM,eAAe,0BAAsC,CAAC"}

package/dist/typescript/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "1.8.0";
+export declare const version = "1.9.0";
 //# sourceMappingURL=version.d.ts.map

package/expo-config-plugin/dist/common/types.d.ts

@@ -3,13 +3,10 @@ export type RingingPushNotifications = {
     includesCallsInRecentsIos?: boolean;
     showWhenLockedAndroid?: boolean;
 };
-export type AndroidPictureInPicture = {
-    enableAutomaticEnter: boolean;
-};
 export type ConfigProps = {
     ringingPushNotifications?: RingingPushNotifications;
     enableNonRingingPushNotifications?: boolean;
-    androidPictureInPicture?: AndroidPictureInPicture;
+    androidPictureInPicture?: boolean;
     androidKeepCallAlive?: boolean;
     enableScreenshare?: boolean;
     appleTeamId?: string;

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

@@ -12,13 +12,12 @@ const withStreamVideoReactNativeSDKMainActivity = (configuration, props) => {
         config.modResults.contents = (0, codeMod_1.addImports)(config.modResults.contents, [
             'com.streamvideo.reactnative.StreamVideoReactNative',
             'android.os.Build',
-            'android.util.Rational',
+            'android.content.res.Configuration',
             'androidx.lifecycle.Lifecycle',
-            'android.app.PictureInPictureParams',
             'com.oney.WebRTCModule.WebRTCModuleOptions',
         ], isMainActivityJava);
         config.modResults.contents = addOnPictureInPictureModeChanged(config.modResults.contents, isMainActivityJava);
-        if (props?.androidPictureInPicture?.enableAutomaticEnter) {
+        if (props?.androidPictureInPicture) {
             config.modResults.contents = addOnUserLeaveHint(config.modResults.contents, isMainActivityJava);
         }
         if (props?.enableScreenshare) {
@@ -28,32 +27,33 @@ const withStreamVideoReactNativeSDKMainActivity = (configuration, props) => {
     });
 };
 function addOnPictureInPictureModeChanged(contents, isJava) {
-    if (!contents.includes('StreamVideoReactNative.onPictureInPictureModeChanged')) {
+    if (!contents.includes('StreamVideoReactNative.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig)')) {
         let statementToInsert = '';
         if (isJava) {
             statementToInsert = `
       @Override
-      public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode) {
-        super.onPictureInPictureModeChanged(isInPictureInPictureMode);
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && getLifecycle().getCurrentState() == Lifecycle.State.CREATED) {
-          // when user clicks on Close button of PIP
-          finishAndRemoveTask();
-        } else {
-          StreamVideoReactNative.onPictureInPictureModeChanged(isInPictureInPictureMode);
-        }
+      public void onPictureInPictureModeChanged(boolean isInPictureInPictureMode, Configuration newConfig) {
+          super.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig);
+
+          if (lifecycleOwner.getLifecycle().getCurrentState() == Lifecycle.State.CREATED) {
+              // When user clicks on Close button of PIP
+              finishAndRemoveTask();
+          } else {
+              StreamVideoReactNative.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig);
+          }
       }`;
         }
         else {
             // Kotlin
             statementToInsert = `         
-      override fun onPictureInPictureModeChanged(isInPictureInPictureMode: Boolean) {
-          super.onPictureInPictureModeChanged(isInPictureInPictureMode)
-          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && lifecycle.currentState == Lifecycle.State.CREATED) {
-              // when user clicks on Close button of PIP
-              finishAndRemoveTask()
-          } else {
-              StreamVideoReactNative.onPictureInPictureModeChanged(isInPictureInPictureMode)
-          }
+      override fun onPictureInPictureModeChanged(isInPictureInPictureMode: Boolean, newConfig: Configuration) {
+        super.onPictureInPictureModeChanged(isInPictureInPictureMode)
+        if (lifecycle.currentState === Lifecycle.State.CREATED) {
+            // when user clicks on Close button of PIP
+            finishAndRemoveTask()
+        } else {
+            StreamVideoReactNative.onPictureInPictureModeChanged(isInPictureInPictureMode, newConfig)
+        }
       }`;
         }
         contents = (0, addNewLinesToMainActivity_1.default)(contents, statementToInsert.trim().split('\n'));
@@ -61,29 +61,35 @@ function addOnPictureInPictureModeChanged(contents, isJava) {
     return contents;
 }
 function addOnUserLeaveHint(contents, isJava) {
-    if (!contents.includes('StreamVideoReactNative.canAutoEnterPictureInPictureMode')) {
-        let statementToInsert = '';
-        if (isJava) {
+    let statementToInsert = '';
+    if (isJava) {
+        if (!contents.includes('StreamVideoReactNative.Companion.getCanAutoEnterPictureInPictureMode')) {
             statementToInsert = `
       @Override
-      public void onUserLeaveHint () {
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && StreamVideoReactNative.canAutoEnterPictureInPictureMode) {
-          PictureInPictureParams.Builder builder = new PictureInPictureParams.Builder();
-          builder.setAspectRatio(new Rational(480, 640));
-          enterPictureInPictureMode(builder.build());
-        }
+      protected void onUserLeaveHint() {
+          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O &&
+              Build.VERSION.SDK_INT < Build.VERSION_CODES.S &&
+              StreamVideoReactNative.Companion.getCanAutoEnterPictureInPictureMode()) {
+              Configuration config = getResources().getConfiguration();
+              onPictureInPictureModeChanged(true, config);
+          }
       }`;
         }
-        else {
+    }
+    else {
+        if (!contents.includes('StreamVideoReactNative.canAutoEnterPictureInPictureMode')) {
             statementToInsert = `           
-      override fun onUserLeaveHint () {
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O && StreamVideoReactNative.canAutoEnterPictureInPictureMode) {
-          val builder = PictureInPictureParams.Builder()
-          builder.setAspectRatio(Rational(480, 640))
-          enterPictureInPictureMode(builder.build())
-        }
+      override fun onUserLeaveHint() {
+          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O &&
+              Build.VERSION.SDK_INT < Build.VERSION_CODES.S &&
+              StreamVideoReactNative.canAutoEnterPictureInPictureMode) {
+              val config = resources.configuration
+              onPictureInPictureModeChanged(true,  config)
+          }
       }`;
         }
+    }
+    if (statementToInsert) {
         contents = (0, addNewLinesToMainActivity_1.default)(contents, statementToInsert.trim().split('\n'));
     }
     return contents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "packageManager": "yarn@3.2.4",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",

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

@@ -127,7 +127,7 @@ export const CallContent = ({
   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(disablePictureInPicture);
+  const isInPiPMode = useIsInPiPMode();
   const hasScreenShare = useHasOngoingScreenShare();
   const showSpotlightLayout = hasScreenShare || layout === 'spotlight';
 
@@ -136,6 +136,7 @@ export const CallContent = ({
     !isInPiPMode &&
     remoteParticipants.length > 0 &&
     remoteParticipants.length < 3;
+
   const isRemoteParticipantInFloatingView =
     showFloatingView &&
     showRemoteParticipantInFloatingView &&

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

@@ -17,10 +17,7 @@ import { StreamVideoParticipant } from '@stream-io/video-client';
  * Props for the CallParticipantsGrid component.
  */
 export type CallParticipantsGridProps = ParticipantViewComponentProps &
-  Pick<
-    CallContentProps,
-    'supportedReactions' | 'CallParticipantsList' | 'disablePictureInPicture'
-  > &
+  Pick<CallContentProps, 'supportedReactions' | 'CallParticipantsList'> &
   Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
     /**
      * Boolean to decide if local participant will be visible in the grid when there is 1:1 call.
@@ -47,7 +44,6 @@ export const CallParticipantsGrid = ({
   showLocalParticipant = false,
   supportedReactions,
   landscape,
-  disablePictureInPicture,
 }: CallParticipantsGridProps) => {
   const {
     theme: { colors, callParticipantsGrid },
@@ -69,7 +65,7 @@ export const CallParticipantsGrid = ({
     flexDirection: landscape ? 'row' : 'column',
   };
 
-  const isInPiPMode = useIsInPiPMode(disablePictureInPicture);
+  const isInPiPMode = useIsInPiPMode();
 
   const showFloatingView =
     !isInPiPMode &&

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

@@ -25,10 +25,7 @@ import { useIsInPiPMode } from '../../../hooks/useIsInPiPMode';
 export type CallParticipantsSpotlightProps = ParticipantViewComponentProps &
   Pick<
     CallContentProps,
-    | 'supportedReactions'
-    | 'CallParticipantsList'
-    | 'ScreenShareOverlay'
-    | 'disablePictureInPicture'
+    'supportedReactions' | 'CallParticipantsList' | 'ScreenShareOverlay'
   > &
   Pick<CallParticipantsListComponentProps, 'ParticipantView'> & {
     /**
@@ -53,7 +50,6 @@ export const CallParticipantsSpotlight = ({
   VideoRenderer,
   supportedReactions,
   landscape,
-  disablePictureInPicture,
 }: CallParticipantsSpotlightProps) => {
   const {
     theme: { callParticipantsSpotlight, variants },
@@ -69,7 +65,7 @@ export const CallParticipantsSpotlight = ({
     participantInSpotlight && hasScreenShare(participantInSpotlight);
   const isUserAloneInCall = _allParticipants?.length === 1;
 
-  const isInPiP = useIsInPiPMode(disablePictureInPicture);
+  const isInPiP = useIsInPiPMode();
 
   const participantViewProps: ParticipantViewComponentProps = {
     ParticipantLabel,

package/src/hooks/useAutoEnterPiPEffect.tsx

@@ -2,6 +2,7 @@ import { CallingState } from '@stream-io/video-client';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useEffect } from 'react';
 import { NativeModules, Platform } from 'react-native';
+import { disablePiPMode$ } from '../utils/internal/rxSubjects';
 
 export function useAutoEnterPiPEffect(
   disablePictureInPicture: boolean | undefined
@@ -10,7 +11,7 @@ export function useAutoEnterPiPEffect(
 
   const callingState = useCallCallingState();
 
-  // if we need to enable, only enable in joined state
+  // if we need to enable autoEnter, only enable in joined state
   useEffect(() => {
     if (Platform.OS !== 'android') {
       return;
@@ -23,12 +24,14 @@ export function useAutoEnterPiPEffect(
     }
   }, [callingState, disablePictureInPicture]);
 
-  // on unmount always disable PiP mode
   useEffect(() => {
+    disablePiPMode$.next(disablePictureInPicture === true);
+
     if (Platform.OS !== 'android') {
       return;
     }
 
+    // on unmount always disable PiP mode auto enter
     return () => {
       NativeModules.StreamVideoReactNative.canAutoEnterPipMode(false);
     };

package/src/hooks/useIsInPiPMode.tsx

@@ -1,60 +1,24 @@
 import { useEffect, useState } from 'react';
-import {
-  AppState,
-  NativeEventEmitter,
-  NativeModules,
-  Platform,
-} from 'react-native';
+import { RxUtils } from '@stream-io/video-client';
+import { isInPiPModeAndroid$ } from '../utils/internal/rxSubjects';
 
-const PIP_CHANGE_EVENT = 'StreamVideoReactNative_PIP_CHANGE_EVENT';
-
-const isAndroid8OrAbove = Platform.OS === 'android' && Platform.Version >= 26;
-
-export function useIsInPiPMode(disablePictureInPicture: boolean | undefined) {
-  const [isInPiPMode, setIsInPiPMode] = useState(
-    disablePictureInPicture &&
-      isAndroid8OrAbove &&
-      AppState.currentState === 'background'
-  );
+export function useIsInPiPMode() {
+  const [value, setValue] = useState<boolean>(() => {
+    return RxUtils.getCurrentValue(isInPiPModeAndroid$);
+  });
 
   useEffect(() => {
-    if (!isAndroid8OrAbove) {
-      return;
-    }
-
-    const eventEmitter = new NativeEventEmitter(
-      NativeModules.StreamVideoReactNative
-    );
-
-    const subscriptionPiPChange = eventEmitter.addListener(
-      PIP_CHANGE_EVENT,
-      setIsInPiPMode
-    );
-
-    const setFromNativeMethod = async () => {
-      const isInPiPNativeMethod: boolean | null | undefined =
-        await NativeModules?.StreamVideoReactNative?.isInPiPMode();
-      setIsInPiPMode(!!isInPiPNativeMethod);
-    };
-
-    const subscriptionAppState = AppState.addEventListener(
-      'change',
-      (nextAppState) => {
-        if (nextAppState === 'background') {
-          setIsInPiPMode(!disablePictureInPicture); // 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
-        }
-        setFromNativeMethod();
-      }
-    );
-
-    setFromNativeMethod();
-
+    const subscription = isInPiPModeAndroid$.subscribe({
+      next: setValue,
+      error: (err) => {
+        console.log('An error occurred while reading isInPiPModeAndroid$', err);
+        setValue(false);
+      },
+    });
     return () => {
-      subscriptionPiPChange.remove();
-      subscriptionAppState.remove();
+      subscription.unsubscribe();
     };
-  }, [disablePictureInPicture]);
+  }, []);
 
-  return isInPiPMode;
+  return value;
 }

package/src/providers/StreamCall/AppStateListener.tsx

@@ -0,0 +1,125 @@
+import { useCall } from '@stream-io/video-react-bindings';
+import { useEffect, useRef } from 'react';
+import {
+  AppState,
+  NativeEventEmitter,
+  NativeModules,
+  Platform,
+} from 'react-native';
+import { shouldDisableIOSLocalVideoOnBackgroundRef } from '../../utils/internal/shouldDisableIOSLocalVideoOnBackground';
+import {
+  disablePiPMode$,
+  isInPiPModeAndroid$,
+} from '../../utils/internal/rxSubjects';
+import { RxUtils } from '@stream-io/video-client';
+
+const PIP_CHANGE_EVENT = 'StreamVideoReactNative_PIP_CHANGE_EVENT';
+
+const isAndroid8OrAbove = Platform.OS === 'android' && Platform.Version >= 26;
+
+// Does 2 functionalities:
+// 1. Resume/Disable video stream tracks when app goes to background/foreground - To save on CPU resources
+// 2. Handle PiP mode in Android
+export const AppStateListener = () => {
+  const call = useCall();
+  const appState = useRef(AppState.currentState);
+
+  // on mount: set initial PiP mode and listen to PiP events
+  useEffect(() => {
+    if (!isAndroid8OrAbove) {
+      return;
+    }
+
+    const disablePiP = RxUtils.getCurrentValue(disablePiPMode$);
+    isInPiPModeAndroid$.next(
+      !disablePiP && AppState.currentState === 'background'
+    );
+
+    const eventEmitter = new NativeEventEmitter(
+      NativeModules.StreamVideoReactNative
+    );
+
+    const subscriptionPiPChange = eventEmitter.addListener(
+      PIP_CHANGE_EVENT,
+      (isInPiPMode: boolean) => {
+        isInPiPModeAndroid$.next(isInPiPMode);
+      }
+    );
+
+    return () => {
+      subscriptionPiPChange.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    // due to strange behavior in iOS when app goes to "inactive" state
+    // we dont check for inactive states
+    // ref: https://www.reddit.com/r/reactnative/comments/15kib42/appstate_behavior_in_ios_when_swiping_down_to/
+    const subscription = AppState.addEventListener('change', (nextAppState) => {
+      if (appState.current.match(/background/) && nextAppState === 'active') {
+        if (
+          call?.camera?.state.status === 'enabled' &&
+          Platform.OS === 'android'
+        ) {
+          // when device is locked and resumed, the status isnt made disabled but stays enabled
+          // as a workaround we stop the track and enable again if its already in enabled state
+          call?.camera?.disable(true).then(() => {
+            call?.camera?.enable();
+          });
+        } else {
+          call?.camera?.resume();
+        }
+        appState.current = nextAppState;
+      } else if (
+        appState.current === 'active' &&
+        nextAppState.match(/background/)
+      ) {
+        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
+          const disableCameraIfNeeded = () => {
+            if (call?.camera?.state.status === 'enabled') {
+              call?.camera?.disable();
+            }
+          };
+          if (isAndroid8OrAbove) {
+            // set with an assumption that its enabled so that UI disabling happens faster
+            const disablePiP = RxUtils.getCurrentValue(disablePiPMode$);
+            isInPiPModeAndroid$.next(!disablePiP);
+            // if PiP was not enabled anyway, then in the next code we ll set it to false and UI wont be shown anyway
+            NativeModules?.StreamVideoReactNative?.isInPiPMode().then(
+              (isInPiP: boolean | null | undefined) => {
+                isInPiPModeAndroid$.next(!!isInPiP);
+                if (!isInPiP) {
+                  if (AppState.currentState === 'active') {
+                    // this is to handle the case that the app became active as soon as it went to background
+                    // in this case, we dont want to disable the camera
+                    // this happens on foreground push notifications
+                    return;
+                  }
+                  disableCameraIfNeeded();
+                }
+              }
+            );
+          } else {
+            disableCameraIfNeeded();
+          }
+        } else {
+          // shouldDisableIOSLocalVideoOnBackgroundRef is false, if local video is enabled on PiP
+          if (shouldDisableIOSLocalVideoOnBackgroundRef.current) {
+            if (call?.camera?.state.status === 'enabled') {
+              call?.camera?.disable();
+            }
+          }
+        }
+        appState.current = nextAppState;
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [call]);
+
+  return null;
+};