@100mslive/react-native-room-kit 1.2.0 → 1.2.2

package/src/hooks-util.ts

@@ -1,12 +1,24 @@
+import type {
+  HMSHLSPlayer,
+  HMSPIPConfig,
+  HMSRole,
+  HMSSessionStore,
+  HMSSpeaker,
+  JsonValue,
+} from '@100mslive/react-native-hms';
 import {
+  getSoftInputMode,
   HMSChangeTrackStateRequest,
   HMSConfig,
+  HMSHLSPlayerPlaybackState,
   HMSLocalPeer,
   HMSMessage,
+  HMSMessageRecipient,
   HMSMessageRecipientType,
-  HMSPIPListenerActions,
   HMSPeer,
   HMSPeerUpdate,
+  HMSPIPListenerActions,
+  HMSPollUpdateType,
   HMSRoleChangeRequest,
   HMSRoom,
   HMSRoomUpdate,
@@ -16,29 +28,18 @@ import {
   HMSTrackType,
   HMSTrackUpdate,
   HMSUpdateListenerActions,
-  HMSMessageRecipient,
-  useHMSHLSPlayerResolution,
-  useHmsViewsResolutionsState,
+  HMSVideoViewMode,
   setSoftInputMode,
-  getSoftInputMode,
-  WindowController,
-  useHMSHLSPlayerCue,
-  HMSPollUpdateType,
-  useHMSHLSPlayerPlaybackState,
-  HMSHLSPlayerPlaybackState,
+  SoftInputModes,
   TranscriptionsMode,
   TranscriptionState,
+  useHMSHLSPlayerCue,
+  useHMSHLSPlayerPlaybackState,
+  useHMSHLSPlayerResolution,
+  useHmsViewsResolutionsState,
+  WindowController,
 } from '@100mslive/react-native-hms';
 import type { Chat as ChatConfig } from '@100mslive/types-prebuilt/elements/chat';
-import { SoftInputModes } from '@100mslive/react-native-hms';
-import type {
-  HMSHLSPlayer,
-  HMSPIPConfig,
-  HMSRole,
-  HMSSessionStore,
-  HMSSpeaker,
-  JsonValue,
-} from '@100mslive/react-native-hms';
 import type {
   ColorPalette,
   DefaultConferencingScreen,
@@ -48,25 +49,25 @@ import type {
   Typography,
 } from '@100mslive/types-prebuilt';
 import Toast from 'react-native-simple-toast';
+import type { DependencyList } from 'react';
 import {
-  useRef,
   useCallback,
+  useContext,
   useEffect,
-  useState,
   useMemo,
-  useContext,
+  useRef,
+  useState,
 } from 'react';
-import type { DependencyList } from 'react';
 
+import type { OnLeaveHandler, PeerTrackNode } from './utils/types';
 import {
+  ChatBroadcastFilter,
   MaxTilesInOnePage,
   ModalTypes,
   OnLeaveReason,
   PeerListRefreshInterval,
   PipModes,
 } from './utils/types';
-import { ChatBroadcastFilter } from './utils/types';
-import type { OnLeaveHandler, PeerTrackNode } from './utils/types';
 import { createPeerTrackNode, parseMetadata } from './utils/functions';
 import {
   batch,
@@ -104,10 +105,10 @@ import {
   setChatState,
   setEditUsernameDisabled,
   setFullScreenPeerTrackNode,
+  setHandleBackButton,
   setHMSLocalPeerState,
   setHMSRoleState,
   setHMSRoomState,
-  setHandleBackButton,
   setIsLocalAudioMutedState,
   setIsLocalVideoMutedState,
   setLayoutConfig,
@@ -134,15 +135,15 @@ import {
   replacePeerTrackNodes,
   replacePeerTrackNodesWithTrack,
 } from './peerTrackNodeUtils';
-import { MeetingState } from './types';
 import type { ChatState, HMSPrebuiltProps, PinnedMessage } from './types';
+import { MeetingState, NotificationTypes } from './types';
+import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import {
   BackHandler,
   InteractionManager,
   Keyboard,
   Platform,
 } from 'react-native';
-import type { ImageStyle, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { NavigationContext } from '@react-navigation/native';
 import {
   useIsLandscapeOrientation,
@@ -159,7 +160,6 @@ import {
 import type { GridViewRefAttrs } from './components/GridView';
 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,
@@ -217,9 +217,10 @@ const useHMSRoomUpdate = (hmsInstance: HMSSDK) => {
         if (captionTranscription?.state === TranscriptionState.STARTED) {
           batch(() => {
             dispatch(removeNotification('enable-cc'));
+            dispatch(removeNotification('TranscriptionState.STARTED'));
             dispatch(
               addNotification({
-                id: Math.random().toString(16).slice(2),
+                id: 'TranscriptionState.STARTED',
                 type: NotificationTypes.INFO,
                 icon: 'cc',
                 title: 'Closed Captioning enabled for everyone',
@@ -287,6 +288,8 @@ const useHMSPeersUpdate = (
   // );
   const hmsActions = useHMSActions();
 
+  const isFirstRunForRoleChangeModal = useRef(true);
+
   useEffect(() => {
     const peerUpdateHandler = ({ peer, type }: PeerUpdate) => {
       // Handle State from Preview screen
@@ -428,6 +431,18 @@ const useHMSPeersUpdate = (
               .catch((e) => {
                 console.log('Metadata change failed', e);
               });
+
+            if (isFirstRunForRoleChangeModal.current) {
+              isFirstRunForRoleChangeModal.current = false;
+            } else {
+              dispatch(
+                addNotification({
+                  id: Math.random().toString(16).slice(2),
+                  type: NotificationTypes.INFO,
+                  title: `You are now a ${peer.role?.name}`,
+                })
+              );
+            }
           }
         }
         return;
@@ -785,6 +800,7 @@ const useHMSTrackUpdate = (
       if (type === HMSTrackUpdate.TRACK_REMOVED) {
         if (track.source === HMSTrackSource.SCREEN) {
           if (!peer.isLocal && track.type === HMSTrackType.VIDEO) {
+            hmsInstance.setActiveSpeakerInIOSPIP(true);
             const screensharePeerTrackNodes =
               reduxState.app.screensharePeerTrackNodes;
             const nodeToRemove = screensharePeerTrackNodes.find(
@@ -1577,32 +1593,50 @@ export const useHMSNetworkQualityUpdate = () => {
   }, [hmsInstance]);
 };
 
-export type PIPConfig = Omit<HMSPIPConfig, 'autoEnterPipMode'>;
+const pipConfig: HMSPIPConfig = {
+  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?: PIPConfig) => {
-      hmsInstance.setPipParams({ ...data, autoEnterPipMode: true });
+  return useCallback(
+    (data: HMSPIPConfig) => {
+      hmsInstance
+        .setPipParams({
+          ...pipConfig,
+          ...data,
+          autoEnterPipMode: true,
+        })
+        .then((r) => console.log('Enable Auto PIP: ', r))
+        .catch((e) => console.log('Enable Auto PIP Error: ', e));
     },
     [hmsInstance]
   );
-
-  return enableAutoPip;
 };
 
 export const useDisableAutoPip = () => {
   const hmsInstance = useHMSInstance();
 
-  const disableAutoPip = useCallback(
-    (data?: PIPConfig) => {
-      hmsInstance.setPipParams({ ...data, autoEnterPipMode: false });
+  return useCallback(
+    (data: HMSPIPConfig) => {
+      hmsInstance
+        .setPipParams({
+          ...pipConfig,
+          ...data,
+          autoEnterPipMode: false,
+        })
+        .then((r) => console.log('Disable Auto PIP: ', r))
+        .catch((e) => console.log('Disable Auto PIP Error: ', e));
     },
     [hmsInstance]
   );
-
-  return disableAutoPip;
 };
 
 export const useAutoPip = (oneToOneCall: boolean) => {
@@ -1621,9 +1655,14 @@ export const useAutoPip = (oneToOneCall: boolean) => {
 
   useEffect(() => {
     if (autoEnterPipMode && remotePeersPresent) {
-      enableAutoPip({ aspectRatio: [numerator, denominator] });
+      enableAutoPip({
+        scaleType: HMSVideoViewMode.ASPECT_FILL,
+        aspectRatio: [numerator, denominator],
+      });
 
-      return disableAutoPip;
+      return () => {
+        disableAutoPip({});
+      };
     }
   }, [
     remotePeersPresent,
@@ -1651,7 +1690,7 @@ export const usePipAspectRatio = (oneToOneCall: boolean): [number, number] => {
     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];
     }
@@ -1664,7 +1703,11 @@ export const usePipAspectRatio = (oneToOneCall: boolean): [number, number] => {
       return [9, 16];
     }
     // default aspect ratio
-    return [16, 9];
+    return Platform.select({
+      ios: [9, 16],
+      android: [16, 9],
+      default: [16, 9],
+    });
   }, [
     isHLSViewer,
     firstSSNodeId,
@@ -2719,9 +2762,7 @@ export const useSavePropsToStore = (
   }, [handleBackButton]);
 
   useEffect(() => {
-    if (Platform.OS === 'android') {
-      dispatch(setAutoEnterPipMode(autoEnterPipMode));
-    }
+    dispatch(setAutoEnterPipMode(autoEnterPipMode));
   }, [autoEnterPipMode]);
 };
 

package/src/utils.ts

@@ -4,8 +4,8 @@ const DEFAULT_JOINING_CONFIG = {
   mutedAudio: true,
   mutedVideo: true,
   skipPreview: false,
-  audioMixer: false, // IOS only
-  musicMode: false, // IOS only
+  audioMixer: false, // iOS only
+  musicMode: false, // iOS only
   softwareDecoder: true, // Android only
   autoResize: false, // Android only
 };