@100mslive/react-native-room-kit 1.0.1 → 1.0.2-beta.1

package/lib/module/hooks-util.js

@@ -1,21 +1,21 @@
-import { HMSConfig, HMSMessage, HMSMessageRecipientType, HMSPIPListenerActions, HMSPeerUpdate, HMSRoomUpdate, HMSTrackSource, HMSTrackType, HMSTrackUpdate, HMSUpdateListenerActions, HMSMessageRecipient
+import { HMSConfig, HMSMessage, HMSMessageRecipientType, HMSPIPListenerActions, HMSPeerUpdate, HMSRoomUpdate, HMSTrackSource, HMSTrackType, HMSTrackUpdate, HMSUpdateListenerActions, HMSMessageRecipient, useHMSHLSPlayerResolution, useHmsViewsResolutionsState
 // useHMSPeerUpdates,
 } from '@100mslive/react-native-hms';
 import Toast from 'react-native-simple-toast';
 import { useRef, useCallback, useEffect, useState, useMemo, useContext } from 'react';
-import { MaxTilesInOnePage, ModalTypes, PeerListRefreshInterval, PipModes } from './utils/types';
+import { MaxTilesInOnePage, ModalTypes, OnLeaveReason, PeerListRefreshInterval, PipModes } from './utils/types';
 import { createPeerTrackNode } from './utils/functions';
 import { batch, shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
-import { addMessage, addNotification, addParticipant, addParticipants, addPinnedMessage, addScreenshareTile, addUpdateParticipant, changeMeetingState, changePipModeStatus, changeStartingHLSStream, clearStore, removeNotification, removeParticipant, removeParticipants, removeScreenshareTile, replaceParticipantsList, saveUserData, setActiveChatBottomSheetTab, setActiveSpeakers, setFullScreenPeerTrackNode, setHMSLocalPeerState, setHMSRoleState, setHMSRoomState, setIsLocalAudioMutedState, setIsLocalVideoMutedState, setLayoutConfig, setLocalPeerTrackNode, setMiniViewPeerTrackNode, setModalType, setReconnecting, setRoleChangeRequest, setStartingOrStoppingRecording, updateFullScreenPeerTrackNode, updateLocalPeerTrackNode, updateMiniViewPeerTrackNode, updateScreenshareTile } from './redux/actions';
+import { addMessage, addNotification, addParticipant, addParticipants, addPinnedMessage, addScreenshareTile, addUpdateParticipant, changeMeetingState, changePipModeStatus, changeStartingHLSStream, clearStore, removeNotification, removeParticipant, removeParticipants, removeScreenshareTile, replaceParticipantsList, saveUserData, setActiveChatBottomSheetTab, setActiveSpeakers, setAutoEnterPipMode, setFullScreenPeerTrackNode, setHMSLocalPeerState, setHMSRoleState, setHMSRoomState, setHandleBackButton, setIsLocalAudioMutedState, setIsLocalVideoMutedState, setLayoutConfig, setLocalPeerTrackNode, setMiniViewPeerTrackNode, setModalType, setOnLeaveHandler, setPrebuiltData, setReconnecting, setRoleChangeRequest, setStartingOrStoppingRecording, updateFullScreenPeerTrackNode, updateLocalPeerTrackNode, updateMiniViewPeerTrackNode, updateScreenshareTile } from './redux/actions';
 import { createPeerTrackNodeUniqueId, degradeOrRestorePeerTrackNodes, peerTrackNodeExistForPeer, peerTrackNodeExistForPeerAndTrack, removePeerTrackNodes, removePeerTrackNodesWithTrack, replacePeerTrackNodes, replacePeerTrackNodesWithTrack } from './peerTrackNodeUtils';
 import { MeetingState } from './types';
-import { InteractionManager, Keyboard, Platform } from 'react-native';
+import { BackHandler, InteractionManager, Keyboard, Platform } from 'react-native';
 import { NavigationContext } from '@react-navigation/native';
 import { useIsLandscapeOrientation, useIsPortraitOrientation } from './utils/dimension';
 import { selectChatLayoutConfig, selectConferencingScreenConfig, selectIsHLSViewer, selectLayoutConfigForRole, selectShouldGoLive, selectVideoTileLayoutConfig } from './hooks-util-selectors';
 import { getRoomLayout } from './modules/HMSManager';
 import { DEFAULT_THEME, DEFAULT_TYPOGRAPHY } from './utils/theme';
-import { NotificationTypes } from './utils';
+import { NotificationTypes } from './types';
 export const useHMSListeners = setPeerTrackNodes => {
   const hmsInstance = useHMSInstance();
   const updateLocalPeer = useUpdateHMSLocalPeer(hmsInstance);
@@ -824,12 +824,21 @@ export const useHMSReconnection = () => {
     let mounted = true;
     hmsInstance.addEventListener(HMSUpdateListenerActions.RECONNECTING, () => {
       if (mounted) {
-        dispatch(setReconnecting(true));
+        batch(() => {
+          dispatch(setReconnecting(true));
+          dispatch(addNotification({
+            id: NotificationTypes.RECONNECTING,
+            type: NotificationTypes.RECONNECTING
+          }));
+        });
       }
     });
     hmsInstance.addEventListener(HMSUpdateListenerActions.RECONNECTED, () => {
       if (mounted) {
-        dispatch(setReconnecting(false));
+        batch(() => {
+          dispatch(setReconnecting(false));
+          dispatch(removeNotification(NotificationTypes.RECONNECTING));
+        });
       }
     });
     return () => {
@@ -843,10 +852,10 @@ export const useHMSPIPRoomLeave = () => {
   const hmsInstance = useHMSInstance();
   const {
     destroy
-  } = useLeaveMethods(true);
+  } = useLeaveMethods();
   useEffect(() => {
     const pipRoomLeaveHandler = () => {
-      destroy();
+      destroy(OnLeaveReason.PIP);
     };
     hmsInstance.addEventListener(HMSPIPListenerActions.ON_PIP_ROOM_LEAVE, pipRoomLeaveHandler);
     return () => {
@@ -858,10 +867,10 @@ export const useHMSRemovedFromRoomUpdate = () => {
   const hmsInstance = useHMSInstance();
   const {
     destroy
-  } = useLeaveMethods(true);
+  } = useLeaveMethods();
   useEffect(() => {
-    const removedFromRoomHandler = () => {
-      destroy();
+    const removedFromRoomHandler = data => {
+      destroy(data.roomEnded ? OnLeaveReason.ROOM_END : OnLeaveReason.PEER_KICKED);
     };
     hmsInstance.addEventListener(HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM, removedFromRoomHandler);
     return () => {
@@ -908,6 +917,71 @@ export const useHMSNetworkQualityUpdate = () => {
     return () => hmsInstance.disableNetworkQualityUpdates();
   }, [hmsInstance]);
 };
+export const useEnableAutoPip = () => {
+  const hmsInstance = useHMSInstance();
+  const enableAutoPip = useCallback(data => {
+    hmsInstance.setPipParams({
+      ...data,
+      autoEnterPipMode: true
+    });
+  }, [hmsInstance]);
+  return enableAutoPip;
+};
+export const useDisableAutoPip = () => {
+  const hmsInstance = useHMSInstance();
+  const disableAutoPip = useCallback(data => {
+    hmsInstance.setPipParams({
+      ...data,
+      autoEnterPipMode: false
+    });
+  }, [hmsInstance]);
+  return disableAutoPip;
+};
+export const useAutoPip = oneToOneCall => {
+  const enableAutoPip = useEnableAutoPip();
+  const disableAutoPip = useDisableAutoPip();
+  const autoEnterPipMode = useSelector(state => state.app.autoEnterPipMode);
+  const [numerator, denominator] = usePipAspectRatio(oneToOneCall);
+  useEffect(() => {
+    if (autoEnterPipMode) {
+      enableAutoPip({
+        aspectRatio: [numerator, denominator]
+      });
+      return disableAutoPip;
+    }
+  }, [numerator, denominator, autoEnterPipMode, enableAutoPip, disableAutoPip]);
+};
+export const usePipAspectRatio = oneToOneCall => {
+  const isHLSViewer = useIsHLSViewer();
+  const hlsPlayerResolution = useHMSHLSPlayerResolution();
+  const firstSSNodeId = useSelector(state => {
+    var _ssPeerTrackNode$trac;
+    const ssPeerTrackNode = state.app.screensharePeerTrackNodes[0];
+    return ssPeerTrackNode === null || ssPeerTrackNode === void 0 || (_ssPeerTrackNode$trac = ssPeerTrackNode.track) === null || _ssPeerTrackNode$trac === void 0 ? void 0 : _ssPeerTrackNode$trac.trackId;
+  });
+  const ssResolution = useHmsViewsResolutionsState(firstSSNodeId);
+  const aspectRatio = useMemo(() => {
+    // When user is hlsviewer and we have stream resolution
+    if (isHLSViewer && hlsPlayerResolution) {
+      return [hlsPlayerResolution.width, hlsPlayerResolution.height];
+    }
+    // When user is hlsviewer and we don't have stream resolution
+    if (isHLSViewer) {
+      return [9, 16];
+    }
+    // When we have screenshare resolution, use it
+    if (ssResolution) {
+      return [ssResolution.width, ssResolution.height];
+    }
+    // When there is no screenshare and one-to-one call is happening
+    if (!firstSSNodeId && oneToOneCall) {
+      return [9, 16];
+    }
+    // default aspect ratio
+    return [16, 9];
+  }, [isHLSViewer, firstSSNodeId, oneToOneCall, ssResolution, hlsPlayerResolution]);
+  return aspectRatio;
+};
 export const useHMSActiveSpeakerUpdates = (setPeerTrackNodes, active) => {
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
@@ -1255,7 +1329,8 @@ export const useFilteredParticipants = filterText => {
         const firstTen = filteredList.slice(0, 10);
         t.push({
           id: role.name,
-          label: `${role.name} (${typeof offStageRoleTotalCount === 'number' ? offStageRoleTotalCount : filteredList.length})`,
+          label: `${role.name} (${typeof offStageRoleTotalCount === 'number' && offStageRoleTotalCount > filteredList.length ? offStageRoleTotalCount // only use `offStageRoleTotalCount` when it is number and more than list length
+          : filteredList.length})`,
           showViewAll: typeof offStageRoleTotalCount === 'number' && formattedSearchText.length <= 0 ? offStageRoleTotalCount > 10 : filteredList.length > 10,
           data: firstTen
         });
@@ -1285,12 +1360,12 @@ export const useShouldGoLive = () => {
   const shouldGoLive = useSelector(selectShouldGoLive);
   return shouldGoLive;
 };
-export const useLeaveMethods = isUnmounted => {
+export const useLeaveMethods = () => {
   const navigation = useContext(NavigationContext);
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
   const reduxStore = useStore();
-  const destroy = useCallback(() => {
+  const destroy = useCallback(reason => {
     try {
       const s = hmsInstance.destroy();
       console.log('Destroy Success: ', s);
@@ -1316,9 +1391,9 @@ export const useLeaveMethods = isUnmounted => {
 
       const onLeave = reduxStore.getState().user.onLeave;
       if (typeof onLeave === 'function') {
-        onLeave();
+        onLeave(reason);
         dispatch(clearStore());
-      } else if (navigation && navigation.canGoBack() && !isUnmounted) {
+      } else if (navigation && typeof navigation.canGoBack === 'function' && navigation.canGoBack()) {
         navigation.goBack();
         dispatch(clearStore());
       } else {
@@ -1332,8 +1407,8 @@ export const useLeaveMethods = isUnmounted => {
       return Promise.reject(e);
     }
   }, [hmsInstance]);
-  const leave = useCallback(async function () {
-    let shouldEndStream = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  const leave = useCallback(async function (reason) {
+    let shouldEndStream = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     if (shouldEndStream) {
       hmsInstance.stopHLSStreaming().catch(error => {
         console.log('Stop HLS Streaming Error: ', error);
@@ -1342,26 +1417,26 @@ export const useLeaveMethods = isUnmounted => {
     try {
       const d = await hmsInstance.leave();
       console.log('Leave Success: ', d);
-      await destroy();
+      await destroy(reason);
     } catch (e) {
       console.log(`Leave Room Error: ${e}`);
       Toast.showWithGravity(`Leave Room Error: ${e}`, Toast.LONG, Toast.TOP);
     }
   }, [destroy, hmsInstance]);
-  const goToPreview = useCallback(async () => {
+  const prebuiltCleanUp = useCallback(async () => {
     try {
       await hmsInstance.leave();
       await hmsInstance.destroy();
       dispatch(clearStore());
     } catch (error) {
-      Toast.showWithGravity(`Unable to go to Preview: ${error}`, Toast.LONG, Toast.TOP);
+      Toast.showWithGravity(`Unable to leave or destroy: ${error}`, Toast.LONG, Toast.TOP);
     }
   }, [hmsInstance]);
-  const endRoom = useCallback(async () => {
+  const endRoom = useCallback(async reason => {
     try {
       const d = await hmsInstance.endRoom('Host ended the room');
       console.log('EndRoom Success: ', d);
-      await destroy();
+      await destroy(reason);
     } catch (e) {
       console.log('EndRoom Error: ', e);
     }
@@ -1370,7 +1445,7 @@ export const useLeaveMethods = isUnmounted => {
     destroy,
     leave,
     endRoom,
-    goToPreview
+    prebuiltCleanUp
   };
 };
 
@@ -1508,4 +1583,88 @@ export const useHMSConferencingScreenConfig = (selector, equalityFn) => {
     return selector(conferencingScreenConfig);
   }, equalityFn);
 };
+export const useBackButtonPress = () => {
+  const {
+    handleModalVisibleType
+  } = useModalType();
+  const handleBackPress = useSelector(state => state.app.handleBackButton);
+  useEffect(() => {
+    if (handleBackPress) {
+      const backPressHandler = () => {
+        handleModalVisibleType(ModalTypes.LEAVE_ROOM);
+
+        /**
+         * When true is returned the event will not be bubbled up
+         * & no other back action will execute
+         */
+        return true;
+
+        /**
+         * Returning false will let the event to bubble up & let other event listeners
+         * or the system's default back action to be executed.
+         */
+        // return false;
+      };
+
+      const subscription = BackHandler.addEventListener('hardwareBackPress', backPressHandler);
+      return () => {
+        if (typeof subscription.remove === 'function') {
+          subscription.remove();
+        } else {
+          BackHandler.removeEventListener('hardwareBackPress', backPressHandler);
+        }
+      };
+    }
+  }, [handleBackPress, handleModalVisibleType]);
+};
+export const useSavePropsToStore = (props, dispatch) => {
+  const {
+    roomCode,
+    options,
+    onLeave,
+    handleBackButton,
+    autoEnterPipMode
+  } = props;
+  useEffect(() => {
+    dispatch(setPrebuiltData({
+      roomCode,
+      options
+    }));
+  }, [roomCode, options]);
+  useEffect(() => {
+    dispatch(setOnLeaveHandler(onLeave));
+  }, [onLeave]);
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      dispatch(setHandleBackButton(handleBackButton));
+    }
+  }, [handleBackButton]);
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      dispatch(setAutoEnterPipMode(autoEnterPipMode));
+    }
+  }, [autoEnterPipMode]);
+};
+export const useStartRecording = () => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+  const startRecording = useCallback(() => {
+    dispatch(setStartingOrStoppingRecording(true));
+    hmsInstance.startRTMPOrRecording({
+      record: true
+    }).catch(error => {
+      batch(() => {
+        dispatch(setStartingOrStoppingRecording(false));
+        dispatch(addNotification({
+          id: Math.random().toString(16).slice(2),
+          type: NotificationTypes.ERROR,
+          message: error.message
+        }));
+      });
+    });
+  }, [hmsInstance]);
+  return {
+    startRecording
+  };
+};
 //# sourceMappingURL=hooks-util.js.map