@100mslive/react-native-room-kit 1.0.5-beta.0 → 1.0.6

package/src/components/HMSNotifications.tsx

@@ -11,6 +11,7 @@ import { HMSTerminalErrorNotification } from './HMSTerminalErrorNotification';
 import { HMSNotification } from './HMSNotification';
 import { AlertTriangleIcon } from '../Icons';
 import { HMSReconnectingNotification } from './HMSReconnectingNotification';
+import { useIsLandscapeOrientation } from '../utils/dimension';
 
 export interface HMSNotificationsProps {}
 
@@ -23,6 +24,7 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
   const isLocalScreenShared = useSelector(
     (state: RootState) => state.hmsStates.isLocalScreenShared
   );
+  const isLandscapeOrientation = useIsLandscapeOrientation();
 
   // notifications is a stack, first will appear last
   const notifications = useSelector((state: RootState) => {
@@ -81,7 +83,9 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
   return (
     <View
       style={[
-        styles.absoluteContainer,
+        isLandscapeOrientation
+          ? styles.absoluteLandscapeContainer
+          : styles.absoluteContainer,
         { paddingTop: (notifications.length - 1) * 16 },
       ]}
     >
@@ -165,6 +169,12 @@ const styles = StyleSheet.create({
     marginBottom: 8,
     width: '100%',
   },
+  absoluteLandscapeContainer: {
+    position: 'relative',
+    marginBottom: 8,
+    width: '60%',
+    alignSelf: 'center',
+  },
   notificationWrapper: {
     position: 'absolute',
     width: '100%',

package/src/components/HMSRecordingIndicator.tsx

@@ -5,15 +5,24 @@ import { ActivityIndicator, StyleSheet } from 'react-native';
 import type { RootState } from '../redux';
 import { RecordingIcon } from '../Icons';
 import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
+import { HMSRecordingState } from '@100mslive/react-native-hms';
 
 export const HMSRecordingIndicator = () => {
   const isRecordingOn = useSelector(
-    (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
+    (state: RootState) =>
+      !!state.hmsStates.room?.browserRecordingState?.running ||
+      !!state.hmsStates.room?.serverRecordingState?.running ||
+      !!state.hmsStates.room?.hlsRecordingState?.running
   );
   const startingOrStoppingRecording = useSelector(
     (state: RootState) =>
       state.app.startingOrStoppingRecording ||
-      (state.hmsStates.room?.browserRecordingState.initialising ?? false)
+      state.hmsStates.room?.browserRecordingState.state ===
+        HMSRecordingState.STARTING ||
+      state.hmsStates.room?.serverRecordingState.state ===
+        HMSRecordingState.STARTING ||
+      state.hmsStates.room?.hlsRecordingState?.state ===
+        HMSRecordingState.STARTING
   );
 
   const { on_surface_high: onSurfaceHighColor } = useHMSRoomColorPalette();

package/src/components/HMSTextInput.tsx

@@ -130,6 +130,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
       selectionColor={resetProps.selectionColor ?? onSurfaceHighColor}
       onFocus={resetProps.onFocus ?? handleInputFocus}
       onBlur={resetProps.onBlur ?? handleInputBlur}
+      disableFullscreenUI={true}
     />
   );
 

package/src/components/MeetingScreenContent.tsx

@@ -20,6 +20,7 @@ import { HMSStatusBar } from './StatusBar';
 import { AnimatedFooter } from './AnimatedFooter';
 import { HLSFooter } from './HLSFooter';
 import { AnimatedHeader } from './AnimatedHeader';
+import { useIsLandscapeOrientation } from '../utils/dimension';
 // import { ReconnectionView } from './ReconnectionView';
 
 interface MeetingScreenContentProps {
@@ -36,6 +37,7 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
   const isPipModeActive = useSelector(
     (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
   );
+  const isLandscapeOrientation = useIsLandscapeOrientation();
 
   const toggleControls = useCallback(() => {
     'worklet';
@@ -90,7 +92,7 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
       <HMSStatusBar hidden={controlsHidden} barStyle={'light-content'} />
 
       <View style={styles.reconnectionWrapper}>
-        {isPipModeActive ? null : (
+        {isPipModeActive || isLandscapeOrientation ? null : (
           <AnimatedHeader offset={offset}>
             <Header transparent={isHLSViewer} showControls={!isHLSViewer} />
           </AnimatedHeader>

package/src/components/MiniView.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import type { MutableRefObject } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { StyleSheet, View, LayoutAnimation } from 'react-native';
-import type { LayoutRectangle } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, {
   cancelAnimation,
@@ -20,6 +18,7 @@ import {
 import type { RootState } from '../redux';
 import { setInsetViewMinimized } from '../redux/actions';
 import { isPublishingAllowed } from '../hooks-util';
+import { useIsLandscapeOrientation } from '../utils/dimension';
 
 const cornerOffset = {
   x: 8, // rightX
@@ -30,13 +29,16 @@ const cornerOffset = {
 
 export interface MiniViewProps
   extends Omit<PeerVideoTileViewProps, 'peerTrackNode'> {
-  boundingBoxRef: MutableRefObject<LayoutRectangle | null>;
+  boundingBoxWidth: number | null;
+  boundingBoxHeight: number | null;
 }
 
 export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
-  boundingBoxRef,
+  boundingBoxWidth,
+  boundingBoxHeight,
   onMoreOptionsPress,
 }) => {
+  const isLandscapeOrientation = useIsLandscapeOrientation();
   const isPressed = useSharedValue(false);
   const xOffset = useSharedValue(0);
   const yOffset = useSharedValue(0);
@@ -54,8 +56,8 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
     usePeerMinimizedViewDimensions();
 
   const size = {
-    width: minimized ? minimizedViewWidth : 104,
-    height: minimized ? minimizedViewHeigth : 186,
+    width: minimized ? minimizedViewWidth : (isLandscapeOrientation ? 178 : 104),
+    height: minimized ? minimizedViewHeigth : (isLandscapeOrientation ? 98 : 186),
   };
 
   const dimensionStyles = {
@@ -83,7 +85,8 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
       size.height,
       cornerOffset.x,
       cornerOffset.topY,
-      boundingBoxRef.current
+      boundingBoxWidth,
+      boundingBoxHeight,
     );
 
     const finalX = snapPointX;
@@ -130,7 +133,7 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
       cancelAnimation(xOffset);
       cancelAnimation(yOffset);
     };
-  }, [minimized]);
+  }, [boundingBoxWidth, boundingBoxHeight, minimized]);
 
   const handleMaximize = () => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
@@ -195,25 +198,25 @@ const getSnappingPoints = (
   compHeight: number,
   xCornerOffset: number,
   yCornerOffset: number,
-  boundingBox: null | { width: number; height: number }
+  boundingBoxWidth: number | null,
+  boundingBoxHeight: number | null,
 ) => {
   'worklet';
-  if (!boundingBox) {
+  if (!boundingBoxWidth || !boundingBoxHeight) {
     return {
       snapPointX: 0,
       snapPointY: 0,
     };
   }
-  const { height, width } = boundingBox;
 
   return {
     snapPointX:
-      Math.abs(currentValueX) + compWidth < width / 2
+      Math.abs(currentValueX) + compWidth < boundingBoxWidth / 2
         ? 0
-        : -width + compWidth + xCornerOffset * 2,
+        : -boundingBoxWidth + compWidth + xCornerOffset * 2,
     snapPointY:
-      Math.abs(currentValueY) + compHeight < height / 2
+      Math.abs(currentValueY) + compHeight < boundingBoxHeight / 2
         ? 0
-        : -height + compHeight + yCornerOffset * 2,
+        : -boundingBoxHeight + compHeight + yCornerOffset * 2,
   };
 };

package/src/components/Preview.tsx

@@ -114,7 +114,7 @@ export const Preview = ({
           <BackButton />
         </SafeAreaView>
 
-        <View style={styles.footerWrapper}>
+        <SafeAreaView edges={['left', 'right']} style={styles.footerWrapper}>
           <HMSPreviewNetworkQuality />
 
           <HMSKeyboardAvoidingView
@@ -145,7 +145,7 @@ export const Preview = ({
               />
             </View>
           </HMSKeyboardAvoidingView>
-        </View>
+        </SafeAreaView>
       </View>
     </TouchableWithoutFeedback>
   );

package/src/components/TilesContainer.tsx

@@ -47,9 +47,13 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
             screenshareTilesAvailable && peerTrackNodes.length === 1
               ? 'center'
               : growableTileLayout
-              ? 'space-between'
-              : 'center',
-          flexDirection: screenshareTilesAvailable ? 'row' : 'column',
+                ? 'space-between'
+                : 'center',
+          flexDirection: screenshareTilesAvailable
+            ? 'row'
+            : isLandscapeOrientation
+              ? 'row'
+              : 'column',
         },
         { width: Dimensions.get('window').width - left - right },
       ]}
@@ -133,8 +137,8 @@ const fourTileStyle = { width: '49.5%', height: '100%' }; // Grid Layout when Wi
 const fiveAndSixTileStyle = { width: '49.5%', aspectRatio: 1 }; // Grid Layout when width and Height as fixed aspectRatio
 
 const oneTileStyleLandscape = { width: '100%', height: '100%' };
-const twoTileStyleLandscape = { width: '50%', height: '100%' };
-const threeTileStyleLandscape = { width: '33.3333%', height: '100%' };
+const twoTileStyleLandscape = { width: '49.7222%', height: '100%' };
+const threeTileStyleLandscape = { width: '33%', height: '100%' };
 const fourTileStyleLandscape = { width: '50%', height: '50%' };
 
 function computeTileWidthAndHeight(

package/src/hooks-util.ts

@@ -20,9 +20,12 @@ import {
   HMSMessageRecipient,
   useHMSHLSPlayerResolution,
   useHmsViewsResolutionsState,
+  setSoftInputMode,
+  getSoftInputMode,
   // useHMSPeerUpdates,
 } 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 {
   HMSPIPConfig,
   HMSRole,
@@ -2431,3 +2434,26 @@ export const useStartRecording = () => {
     startRecording,
   };
 };
+
+export const useAndroidSoftInputAdjustResize = () => {
+  const currentSoftInputRef = useRef<null | SoftInputModes>(null);
+
+  useEffect(() => {
+    if (Platform.OS !== 'android') {
+      return;
+    }
+    const currentSoftInputMode = getSoftInputMode();
+
+    if (currentSoftInputMode !== SoftInputModes.SOFT_INPUT_ADJUST_RESIZE) {
+      currentSoftInputRef.current = currentSoftInputMode;
+
+      setSoftInputMode(SoftInputModes.SOFT_INPUT_ADJUST_RESIZE);
+
+      return () => {
+        if (currentSoftInputRef.current !== null) {
+          setSoftInputMode(currentSoftInputRef.current);
+        }
+      }
+    }
+  }, []);
+};