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

package/src/components/WebrtcView.tsx

@@ -24,7 +24,7 @@ import { OverlayContainer } from './OverlayContainer';
 import { OverlayedViews } from './OverlayedViews';
 import { useFooterHeight } from './Footer';
 import { useHeaderHeight } from './Header';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { WebrtcTranscriptOverlayView } from './WebrtcTranscriptOverlayView';
 
 interface WebrtcViewProps {
@@ -111,7 +111,7 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
       };
     }, [isPortrait, bottom]);
 
-    if (isPipModeActive) {
+    if (isPipModeActive && Platform.OS === 'android') {
       return (
         <PIPView
           peerTrackNodes={peerTrackNodes}

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,
@@ -785,6 +785,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,14 +1578,26 @@ 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 });
+    (data: HMSPIPConfig) => {
+      hmsInstance.setPipParams({
+        ...pipConfig,
+        ...data,
+        autoEnterPipMode: true,
+      });
     },
     [hmsInstance]
   );
@@ -1596,8 +1609,12 @@ export const useDisableAutoPip = () => {
   const hmsInstance = useHMSInstance();
 
   const disableAutoPip = useCallback(
-    (data?: PIPConfig) => {
-      hmsInstance.setPipParams({ ...data, autoEnterPipMode: false });
+    (data: HMSPIPConfig) => {
+      hmsInstance.setPipParams({
+        ...pipConfig,
+        ...data,
+        autoEnterPipMode: false,
+      });
     },
     [hmsInstance]
   );
@@ -1621,9 +1638,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 +1673,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 +1686,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 +2745,7 @@ export const useSavePropsToStore = (
   }, [handleBackButton]);
 
   useEffect(() => {
-    if (Platform.OS === 'android') {
-      dispatch(setAutoEnterPipMode(autoEnterPipMode));
-    }
+    dispatch(setAutoEnterPipMode(autoEnterPipMode));
   }, [autoEnterPipMode]);
 };