@100mslive/react-native-room-kit 1.1.9 → 1.2.1

package/lib/module/hooks-util.js

@@ -1,21 +1,18 @@
-import { HMSConfig, HMSMessage, HMSMessageRecipientType, HMSPIPListenerActions, HMSPeerUpdate, HMSRoomUpdate, HMSTrackSource, HMSTrackType, HMSTrackUpdate, HMSUpdateListenerActions, HMSMessageRecipient, useHMSHLSPlayerResolution, useHmsViewsResolutionsState, setSoftInputMode, getSoftInputMode, WindowController, useHMSHLSPlayerCue, HMSPollUpdateType, useHMSHLSPlayerPlaybackState, HMSHLSPlayerPlaybackState } from '@100mslive/react-native-hms';
-import { SoftInputModes } from '@100mslive/react-native-hms';
+import { getSoftInputMode, HMSConfig, HMSHLSPlayerPlaybackState, HMSMessage, HMSMessageRecipient, HMSMessageRecipientType, HMSPeerUpdate, HMSPIPListenerActions, HMSPollUpdateType, HMSRoomUpdate, HMSTrackSource, HMSTrackType, HMSTrackUpdate, HMSUpdateListenerActions, HMSVideoViewMode, setSoftInputMode, SoftInputModes, TranscriptionsMode, TranscriptionState, useHMSHLSPlayerCue, useHMSHLSPlayerPlaybackState, useHMSHLSPlayerResolution, useHmsViewsResolutionsState, WindowController } from '@100mslive/react-native-hms';
 import Toast from 'react-native-simple-toast';
-import { useRef, useCallback, useEffect, useState, useMemo, useContext } from 'react';
-import { MaxTilesInOnePage, ModalTypes, OnLeaveReason, PeerListRefreshInterval, PipModes } from './utils/types';
-import { ChatBroadcastFilter } from './utils/types';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { ChatBroadcastFilter, MaxTilesInOnePage, ModalTypes, OnLeaveReason, PeerListRefreshInterval, PipModes } from './utils/types';
 import { createPeerTrackNode, parseMetadata } from './utils/functions';
 import { batch, shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
-import { addCuedPollId, addMessage, addNotification, addParticipant, addParticipants, addPinnedMessages, addScreenshareTile, addUpdateParticipant, changeMeetingState, changePipModeStatus, changeStartingHLSStream, clearStore, filterOutMsgsFromBlockedPeers, removeNotification, removeParticipant, removeParticipants, removeScreenshareTile, replaceParticipantsList, saveUserData, setActiveChatBottomSheetTab, setActiveSpeakers, setAndroidHLSStreamPaused, setAutoEnterPipMode, setChatPeerBlacklist, setChatState, setEditUsernameDisabled, setFullScreenPeerTrackNode, setHMSLocalPeerState, setHMSRoleState, setHMSRoomState, setHandleBackButton, setIsLocalAudioMutedState, setIsLocalVideoMutedState, setLayoutConfig, setLocalPeerTrackNode, setMiniViewPeerTrackNode, setModalType, setOnLeaveHandler, setPrebuiltData, setReconnecting, setRoleChangeRequest, setStartingOrStoppingRecording, updateFullScreenPeerTrackNode, updateLocalPeerTrackNode, updateMiniViewPeerTrackNode, updateScreenshareTile } from './redux/actions';
+import { addCuedPollId, addMessage, addNotification, addParticipant, addParticipants, addPinnedMessages, addScreenshareTile, addUpdateParticipant, changeMeetingState, changePipModeStatus, changeStartingHLSStream, clearStore, filterOutMsgsFromBlockedPeers, removeNotification, removeParticipant, removeParticipants, removeScreenshareTile, replaceParticipantsList, saveUserData, setActiveChatBottomSheetTab, setActiveSpeakers, setAndroidHLSStreamPaused, setAutoEnterPipMode, setChatPeerBlacklist, setChatState, setEditUsernameDisabled, setFullScreenPeerTrackNode, setHandleBackButton, setHMSLocalPeerState, setHMSRoleState, setHMSRoomState, 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 { MeetingState, NotificationTypes } from './types';
 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 './types';
 import { KeyboardState, useSharedValue } from 'react-native-reanimated';
 import { useCanPublishAudio, useCanPublishScreen, useCanPublishVideo, useHMSActions } from './hooks-sdk';
 import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -44,6 +41,43 @@ const useHMSRoomUpdate = hmsInstance => {
         }
       } else if (type === HMSRoomUpdate.HLS_STREAMING_STATE_UPDATED) {
         dispatch(changeStartingHLSStream(false));
+      } else if (type === HMSRoomUpdate.TRANSCRIPTIONS_UPDATED) {
+        var _room$transcriptions;
+        const captionTranscription = (_room$transcriptions = room.transcriptions) === null || _room$transcriptions === void 0 ? void 0 : _room$transcriptions.find(transcription => transcription.mode === TranscriptionsMode.CAPTION);
+        if ((captionTranscription === null || captionTranscription === void 0 ? void 0 : captionTranscription.state) === TranscriptionState.STARTED) {
+          batch(() => {
+            dispatch(removeNotification('enable-cc'));
+            dispatch(addNotification({
+              id: Math.random().toString(16).slice(2),
+              type: NotificationTypes.INFO,
+              icon: 'cc',
+              title: 'Closed Captioning enabled for everyone'
+            }));
+          });
+        } else if ((captionTranscription === null || captionTranscription === void 0 ? void 0 : captionTranscription.state) === TranscriptionState.STOPPED) {
+          batch(() => {
+            dispatch(removeNotification('disable-cc'));
+            dispatch(addNotification({
+              id: Math.random().toString(16).slice(2),
+              type: NotificationTypes.INFO,
+              icon: 'cc',
+              title: 'Closed Captioning disabled for everyone'
+            }));
+          });
+        } else if ((captionTranscription === null || captionTranscription === void 0 ? void 0 : captionTranscription.state) === TranscriptionState.FAILED) {
+          const transcriptionError = captionTranscription.error;
+          batch(() => {
+            dispatch(removeNotification('enable-cc'));
+            dispatch(removeNotification('disable-cc'));
+            if (transcriptionError !== undefined) {
+              dispatch(addNotification({
+                id: Math.random().toString(16).slice(2),
+                title: transcriptionError.message || 'Failed to enable/disable Closed Captions',
+                type: NotificationTypes.ERROR
+              }));
+            }
+          });
+        }
       }
     };
     hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ROOM_UPDATE, roomUpdateHandler);
@@ -429,6 +463,7 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
         var _peer$audioTrack, _peer$videoTrack;
         if (track.source === HMSTrackSource.SCREEN) {
           if (!peer.isLocal && track.type === HMSTrackType.VIDEO) {
+            hmsInstance.setActiveSpeakerInIOSPIP(true);
             const screensharePeerTrackNodes = reduxState.app.screensharePeerTrackNodes;
             const nodeToRemove = screensharePeerTrackNodes.find(node => {
               var _node$track;
@@ -982,10 +1017,20 @@ export const useHMSNetworkQualityUpdate = () => {
     return () => hmsInstance.disableNetworkQualityUpdates();
   }, [hmsInstance]);
 };
+const pipConfig = {
+  scaleType: HMSVideoViewMode.ASPECT_FILL,
+  aspectRatio: [9, 16],
+  autoEnterPipMode: true,
+  useActiveSpeaker: true,
+  endButton: false,
+  audioButton: false,
+  videoButton: false
+};
 export const useEnableAutoPip = () => {
   const hmsInstance = useHMSInstance();
   const enableAutoPip = useCallback(data => {
     hmsInstance.setPipParams({
+      ...pipConfig,
       ...data,
       autoEnterPipMode: true
     });
@@ -996,6 +1041,7 @@ export const useDisableAutoPip = () => {
   const hmsInstance = useHMSInstance();
   const disableAutoPip = useCallback(data => {
     hmsInstance.setPipParams({
+      ...pipConfig,
       ...data,
       autoEnterPipMode: false
     });
@@ -1014,9 +1060,12 @@ export const useAutoPip = oneToOneCall => {
   useEffect(() => {
     if (autoEnterPipMode && remotePeersPresent) {
       enableAutoPip({
+        scaleType: HMSVideoViewMode.ASPECT_FILL,
         aspectRatio: [numerator, denominator]
       });
-      return disableAutoPip;
+      return () => {
+        disableAutoPip({});
+      };
     }
   }, [remotePeersPresent, numerator, denominator, autoEnterPipMode, enableAutoPip, disableAutoPip]);
 };
@@ -1034,7 +1083,7 @@ export const usePipAspectRatio = oneToOneCall => {
     if (isHLSViewer && hlsPlayerResolution) {
       return [hlsPlayerResolution.width, hlsPlayerResolution.height];
     }
-    // When user is hlsviewer and we don't have stream resolution
+    // When user is hlsviewer, and we don't have stream resolution
     if (isHLSViewer) {
       return [9, 16];
     }
@@ -1047,7 +1096,11 @@ export const usePipAspectRatio = oneToOneCall => {
       return [9, 16];
     }
     // default aspect ratio
-    return [16, 9];
+    return Platform.select({
+      ios: [9, 16],
+      android: [16, 9],
+      default: [16, 9]
+    });
   }, [isHLSViewer, firstSSNodeId, oneToOneCall, ssResolution, hlsPlayerResolution]);
   return aspectRatio;
 };
@@ -1400,7 +1453,10 @@ export const useFilteredParticipants = filterText => {
     const filteredHandRaisedPeers = [];
     sortedRoles.forEach(role => {
       const list = groupedParticipants[role.name];
-      const filteredList = Array.isArray(list) && formattedSearchText.length > 0 ? list.filter(peer => peer.name.toLowerCase().includes(formattedSearchText)) : list;
+      const filteredList = Array.isArray(list) && formattedSearchText.length > 0 ? list.filter(peer => {
+        var _peer$name;
+        return (_peer$name = peer.name) === null || _peer$name === void 0 ? void 0 : _peer$name.toLowerCase().includes(formattedSearchText);
+      }) : list;
       if (Array.isArray(filteredList) && filteredList.length > 0) {
         filteredHandRaisedPeers.push(filteredList);
         const offStageRoleTotalCount = offStageParticipantsTotalCounts[role.name];
@@ -1789,9 +1845,7 @@ export const useSavePropsToStore = (props, dispatch) => {
     }
   }, [handleBackButton]);
   useEffect(() => {
-    if (Platform.OS === 'android') {
-      dispatch(setAutoEnterPipMode(autoEnterPipMode));
-    }
+    dispatch(setAutoEnterPipMode(autoEnterPipMode));
   }, [autoEnterPipMode]);
 };
 export const useStartRecording = () => {