Feat/added autoenterpipmode config option (#1246)

* fix(prebuilt): 🐛 showing indicator on browser recording initialising state * feat(prebuilt): ✨ added lower remote peer hand ui option in participants list * initial changes * refactoring and using `useStartRecording` hook * refactor(sdk): ♻️ removed `emitRequiredKeysError` calls on ios sdk * refactor(sdk): ♻️ removed `emitRequiredKeysError` calls on android sdk and renamed `emitHMSSuccess` and `emitHMSMessageSuccess` methods * refactor(sdk): ♻️ removed `ON_ERROR` emit code from HMSRNSDK constructor * feat(prebuilt): added notification for exception and api rejections * refactor(sdk): ♻️ removed `ON_ERROR` emit code from `join` method * add notification on ON_ERROR event when user is inside meeting * removed temp code * released sample app version 2.3.88 (339) ⚛️ * refactor(prebuilt): ♻️ extracted LeaveRoom and EndRoom modals out of `HMSManageLeave` component * feat(prebuilt): ✨ added "Leave" button on `HMSExceptionNotification` * released sample app version 2.3.89 (340) ⚛️ * feat(prebuilt): ✨ added option to handle android back button press when enabled, back button press will open leave modal instead of leaving meeting without confirmation * feat(example-app): ✨ usage of `handleBackButton` prop in `HMSPrebuilt` component * feat(prebuilt): ✨ added option to handle auto enter pip mode * feat(example-app): ✨ usage of `autoEnterPipMode` prop in `HMSPrebuilt` component * released sample app version 2.3.92 (343) ⚛️
100mslive · Oct 27, 2023 · caeecb3 · caeecb3
1 parent 7dbfc4b
commit caeecb3
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 13 deletions.
diff --git a/packages/react-native-room-kit/example/android/app/build.gradle b/packages/react-native-room-kit/example/android/app/build.gradle
@@ -136,8 +136,8 @@ android {
         applicationId "live.hms.rn"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 342
-        versionName "2.3.91"
+        versionCode 343
+        versionName "2.3.92"
         missingDimensionStrategy 'react-native-camera', 'general'
     }
 

diff --git a/packages/react-native-room-kit/example/ios/RNExample.xcodeproj/project.pbxproj b/packages/react-native-room-kit/example/ios/RNExample.xcodeproj/project.pbxproj
@@ -486,7 +486,7 @@
 				CODE_SIGN_ENTITLEMENTS = RNExample/RNExample.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 342;
+				CURRENT_PROJECT_VERSION = 343;
 				DEVELOPMENT_TEAM = 5N85PP82A9;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = RNExample/Info.plist;
@@ -520,7 +520,7 @@
 				CODE_SIGN_ENTITLEMENTS = RNExample/RNExample.entitlements;
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 342;
+				CURRENT_PROJECT_VERSION = 343;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 5N85PP82A9;
 				INFOPLIST_FILE = RNExample/Info.plist;
@@ -679,7 +679,7 @@
 				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
 				CODE_SIGN_ENTITLEMENTS = RNExampleBroadcastUpload/RNExampleBroadcastUpload.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 342;
+				CURRENT_PROJECT_VERSION = 343;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 5N85PP82A9;
 				GCC_C_LANGUAGE_STANDARD = gnu11;
@@ -721,7 +721,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 342;
+				CURRENT_PROJECT_VERSION = 343;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 5N85PP82A9;

diff --git a/packages/react-native-room-kit/example/ios/RNExample/Info.plist b/packages/react-native-room-kit/example/ios/RNExample/Info.plist
@@ -21,11 +21,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.3.91</string>
+	<string>2.3.92</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>342</string>
+	<string>343</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSRequiresIPhoneOS</key>

diff --git a/packages/react-native-room-kit/example/src/screens/HMSPrebuiltScreen/index.tsx b/packages/react-native-room-kit/example/src/screens/HMSPrebuiltScreen/index.tsx
@@ -98,6 +98,7 @@ export const HMSPrebuiltScreen = () => {
       options={prebuiltOptions}
       onLeave={handleMeetingLeave}
       handleBackButton={isScreenFocused}
+      autoEnterPipMode={true}
     />
   );
 };
diff --git a/packages/react-native-room-kit/src/HMSPrebuilt.tsx b/packages/react-native-room-kit/src/HMSPrebuilt.tsx
@@ -42,6 +42,13 @@ const arePropsEqual = (
     return false;
   }
 
+  if (
+    Platform.OS === 'android' &&
+    !Object.is(prevProps.autoEnterPipMode, nextProps.autoEnterPipMode)
+  ) {
+    return false;
+  }
+
   if (!Object.is(prevProps.onLeave, nextProps.onLeave)) {
     return false;
   }

diff --git a/packages/react-native-room-kit/src/hooks-util.ts b/packages/react-native-room-kit/src/hooks-util.ts
@@ -83,6 +83,7 @@ import {
   saveUserData,
   setActiveChatBottomSheetTab,
   setActiveSpeakers,
+  setAutoEnterPipMode,
   setFullScreenPeerTrackNode,
   setHMSLocalPeerState,
   setHMSRoleState,
@@ -1392,19 +1393,23 @@ export const useDisableAutoPip = () => {
   return disableAutoPip;
 };
 
-export const useAutoPip = (enabled: boolean = true) => {
+export const useAutoPip = () => {
   const enableAutoPip = useEnableAutoPip();
   const disableAutoPip = useDisableAutoPip();
   const isHLSViewer = useIsHLSViewer();
 
+  const autoEnterPipMode = useSelector(
+    (state: RootState) => state.app.autoEnterPipMode
+  );
+
   useEffect(() => {
-    if (enabled) {
+    if (autoEnterPipMode) {
       enableAutoPip({ aspectRatio: isHLSViewer ? [9, 16] : [16, 9] });
 
       return disableAutoPip;
     }
-  }, [enabled, isHLSViewer, enableAutoPip, disableAutoPip]);
-}
+  }, [autoEnterPipMode, isHLSViewer, enableAutoPip, disableAutoPip]);
+};
 
 export const useHMSActiveSpeakerUpdates = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>,
@@ -2280,7 +2285,7 @@ export const useSavePropsToStore = (
   props: HMSPrebuiltProps,
   dispatch: AppDispatch
 ) => {
-  const { roomCode, options, onLeave, handleBackButton } = props;
+  const { roomCode, options, onLeave, handleBackButton, autoEnterPipMode } = props;
 
   useEffect(() => {
     dispatch(setPrebuiltData({ roomCode, options }));
@@ -2295,6 +2300,12 @@ export const useSavePropsToStore = (
       dispatch(setHandleBackButton(handleBackButton));
     }
   }, [handleBackButton]);
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      dispatch(setAutoEnterPipMode(autoEnterPipMode));
+    }
+  }, [autoEnterPipMode]);
 };
 
 export const useStartRecording = () => {

diff --git a/packages/react-native-room-kit/src/redux/actionTypes.ts b/packages/react-native-room-kit/src/redux/actionTypes.ts
@@ -86,6 +86,8 @@ const SET_CHAT_FILTER_SHEET_VISIBLE = 'SET_CHAT_FILTER_SHEET_VISIBLE';
 
 const SET_HANDLE_BACK_BUTTON = 'SET_HANDLE_BACK_BUTTON';
 
+const SET_AUTO_ENTER_PIP_MODE = 'SET_AUTO_ENTER_PIP_MODE';
+
 export default {
   ADD_PINNED_MESSAGE,
   ADD_MESSAGE,
@@ -126,6 +128,7 @@ export default {
   SET_ACTIVE_CHAT_BOTTOM_SHEET_TAB,
   SET_CHAT_FILTER_SHEET_VISIBLE,
   SET_HANDLE_BACK_BUTTON,
+  SET_AUTO_ENTER_PIP_MODE,
 };
 
 export enum HmsStateActionTypes {

diff --git a/packages/react-native-room-kit/src/redux/actions/index.ts b/packages/react-native-room-kit/src/redux/actions/index.ts
@@ -385,3 +385,8 @@ export const setHandleBackButton = (handleBackButton?: boolean) => ({
   type: actionTypes.SET_HANDLE_BACK_BUTTON,
   payload: { handleBackButton },
 });
+
+export const setAutoEnterPipMode = (autoEnterPipMode?: boolean) => ({
+  type: actionTypes.SET_AUTO_ENTER_PIP_MODE,
+  payload: { autoEnterPipMode },
+});
diff --git a/packages/react-native-room-kit/src/redux/reducers/appState.ts b/packages/react-native-room-kit/src/redux/reducers/appState.ts
@@ -53,6 +53,7 @@ type IntialStateType = {
   activeChatBottomSheetTab: (typeof ChatBottomSheetTabs)[number];
   chatFilterSheetVisible: boolean;
   handleBackButton: boolean;
+  autoEnterPipMode: boolean;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -83,6 +84,7 @@ const INITIAL_STATE: IntialStateType = {
   activeChatBottomSheetTab: ChatBottomSheetTabs[0],
   chatFilterSheetVisible: false,
   handleBackButton: false,
+  autoEnterPipMode: false,
 };
 
 const appReducer = (
@@ -292,6 +294,12 @@ const appReducer = (
         handleBackButton: action.payload.handleBackButton ?? INITIAL_STATE.handleBackButton,
       };
     }
+    case ActionTypes.SET_AUTO_ENTER_PIP_MODE: {
+      return {
+        ...state,
+        autoEnterPipMode: action.payload.autoEnterPipMode ?? INITIAL_STATE.autoEnterPipMode,
+      };
+    }
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

diff --git a/packages/react-native-room-kit/src/types.ts b/packages/react-native-room-kit/src/types.ts
@@ -46,6 +46,20 @@ export interface HMSPrebuiltProps {
    * ```
    */
   handleBackButton?: boolean;
+  /**
+   * [Android Only] autoEnterPipMode - `Optional<Boolean>` | Default value - `false`
+   *
+   * When `true`, App will go into PIP mode automatically when user tries to leave or minimize app while it is inside room
+   *
+   * Example usage:
+   * ```jsx
+   * <HMSPrebuilt
+   *  {...}
+   *  autoEnterPipMode={true}
+   * />
+   * ```
+   */
+  autoEnterPipMode?: boolean;
 }
 
 export enum NotificationTypes {