@100mslive/react-native-room-kit 1.0.5 → 1.0.7

package/src/components/RoomSettingsModalDebugModeContent.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 import {
   HMSAudioMixingMode,
+  HMSStreamingState,
   HMSUpdateListenerActions,
   checkNotifications,
 } from '@100mslive/react-native-hms';
@@ -61,7 +62,7 @@ export const RoomSettingsModalDebugModeContent: React.FC<
   );
   const isHLSStreaming = useSelector(
     (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.running ?? false
+      state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED ?? false
   );
 
   const pipModeStatus = useSelector(

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/components/WebrtcView.tsx

@@ -1,5 +1,11 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
+import { SafeAreaView, useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { SharedValue } from 'react-native-reanimated';
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 
 import { MaxTilesInOnePage, PipModes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
@@ -13,15 +19,22 @@ import { LocalPeerRegularVideoView } from './LocalPeerRegularVideoView';
 import { WelcomeInMeeting } from './WelcomeInMeeting';
 import { OverlayContainer } from './OverlayContainer';
 import { OverlayedViews } from './OverlayedViews';
+import { useFooterHeight } from './Footer';
+import { useHeaderHeight } from './Header';
 
 interface WebrtcViewProps {
+  offset: SharedValue<number>;
   peerTrackNodes: Array<PeerTrackNode>;
   handlePeerTileMorePress(node: PeerTrackNode): void;
 }
 
 export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
-  ({ peerTrackNodes, handlePeerTileMorePress }, gridViewRef) => {
+  ({ offset, peerTrackNodes, handlePeerTileMorePress }, gridViewRef) => {
     const isPortrait = useIsPortraitOrientation();
+    const { height } = useSafeAreaFrame(); // This height does not include top & bottom safe area as this component isn't wrapped in SafeAreaView
+    const footerHeight = useFooterHeight(); // This height includes top safearea by default
+    const headerHeight = useHeaderHeight(); // This height includes top safearea by default
+    const { top, bottom } = useSafeAreaInsets();
 
     const isPipModeActive = useSelector(
       (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
@@ -55,37 +68,61 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
         !state.app.localPeerTrackNode && pairedPeers.length === 0
     );
 
+    const animatedStyles = useAnimatedStyle(() => {
+      return {
+        height: interpolate(
+          offset.value,
+          [0, 1],
+          [height - top - bottom, height - headerHeight - footerHeight]
+        ),
+      };
+    }, [height, top, bottom, footerHeight, headerHeight]);
+
+    const headerPlaceholderAnimatedStyles = useAnimatedStyle(() => {
+      return {
+        height: interpolate(offset.value, [0, 1], [top, headerHeight]),
+      };
+    }, [headerHeight, top]);
+
     if (isPipModeActive) {
       return (
         <PIPView
           peerTrackNodes={peerTrackNodes}
-          customView={showWelcomeBanner ? (
-            <WelcomeInMeeting />
-          ) : pairedPeers.length <= 0 ? (
-            <LocalPeerRegularVideoView />
-          ) : null}
+          customView={
+            showWelcomeBanner ? (
+              <WelcomeInMeeting />
+            ) : pairedPeers.length <= 0 ? (
+              <LocalPeerRegularVideoView />
+            ) : null
+          }
         />
       );
     }
 
     return (
-      <OverlayContainer>
-        {showWelcomeBanner ? (
-          <WelcomeInMeeting />
-        ) : pairedPeers.length > 0 ? (
-          <GridView
-            ref={gridViewRef}
-            onPeerTileMorePress={handlePeerTileMorePress}
-            pairedPeers={pairedPeers}
-          />
-        ) : (
-          <LocalPeerRegularVideoView
-            onMoreOptionsPress={handlePeerTileMorePress}
-          />
-        )}
+      <SafeAreaView edges={['left','right']} style={{ flex: 1 }}>
+        <Animated.View style={headerPlaceholderAnimatedStyles} />
+
+        <Animated.View style={animatedStyles}>
+          <OverlayContainer>
+            {showWelcomeBanner ? (
+              <WelcomeInMeeting />
+            ) : pairedPeers.length > 0 ? (
+              <GridView
+                ref={gridViewRef}
+                onPeerTileMorePress={handlePeerTileMorePress}
+                pairedPeers={pairedPeers}
+              />
+            ) : (
+              <LocalPeerRegularVideoView
+                onMoreOptionsPress={handlePeerTileMorePress}
+              />
+            )}
 
-        <OverlayedViews />
-      </OverlayContainer>
+            <OverlayedViews offset={offset} />
+          </OverlayContainer>
+        </Animated.View>
+      </SafeAreaView>
     );
   }
 );

package/src/hooks-util-selectors.tsx

@@ -3,6 +3,7 @@ import type {
   HLSLiveStreamingScreen,
   Layout,
 } from '@100mslive/types-prebuilt';
+import { HMSStreamingState } from '@100mslive/react-native-hms';
 import type { HMSRole } from '@100mslive/react-native-hms';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 
@@ -46,7 +47,7 @@ export const selectShouldGoLive = (state: RootState) => {
   );
 
   const isHLSStreaming =
-    state.hmsStates.room?.hlsStreamingState?.running ?? false;
+    state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED ?? false;
 
   const joinButtonType =
     layoutConfig?.screens?.preview?.default?.elements?.join_form

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,
@@ -91,6 +94,7 @@ import {
   setActiveChatBottomSheetTab,
   setActiveSpeakers,
   setAutoEnterPipMode,
+  setEditUsernameDisabled,
   setFullScreenPeerTrackNode,
   setHMSLocalPeerState,
   setHMSRoleState,
@@ -148,6 +152,7 @@ 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';
 
 export const useHMSListeners = (
   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
@@ -186,48 +191,6 @@ const useHMSRoomUpdate = (hmsInstance: HMSSDK) => {
         }
       } else if (type === HMSRoomUpdate.HLS_STREAMING_STATE_UPDATED) {
         dispatch(changeStartingHLSStream(false));
-      } else if (type === HMSRoomUpdate.RTMP_STREAMING_STATE_UPDATED) {
-        let streaming = room?.rtmpHMSRtmpStreamingState?.running;
-        const startAtDate = room?.rtmpHMSRtmpStreamingState?.startedAt;
-
-        let startTime: null | string = null;
-
-        if (startAtDate) {
-          let hours = startAtDate.getHours().toString();
-          let minutes = startAtDate.getMinutes()?.toString();
-          startTime = hours + ':' + minutes;
-        }
-
-        Toast.showWithGravity(
-          `RTMP Streaming ${
-            streaming
-              ? `Started ${startTime ? 'At ' + startTime : ''}`
-              : 'Stopped'
-          }`,
-          Toast.LONG,
-          Toast.TOP
-        );
-      } else if (type === HMSRoomUpdate.SERVER_RECORDING_STATE_UPDATED) {
-        let streaming = room?.serverRecordingState?.running;
-        const startAtDate = room?.serverRecordingState?.startedAt;
-
-        let startTime: null | string = null;
-
-        if (startAtDate) {
-          let hours = startAtDate.getHours().toString();
-          let minutes = startAtDate.getMinutes()?.toString();
-          startTime = hours + ':' + minutes;
-        }
-
-        Toast.showWithGravity(
-          `Server Recording ${
-            streaming
-              ? `Started ${startTime ? 'At ' + startTime : ''}`
-              : 'Stopped'
-          }`,
-          Toast.LONG,
-          Toast.TOP
-        );
       }
     };
 
@@ -2385,8 +2348,13 @@ export const useSavePropsToStore = (
   const { roomCode, options, onLeave, handleBackButton, autoEnterPipMode } =
     props;
 
+  dispatch(setPrebuiltData({ roomCode, options }));
+
   useEffect(() => {
-    dispatch(setPrebuiltData({ roomCode, options }));
+    const passedUserName = options?.userName;
+    if (passedUserName && passedUserName.length > 0) {
+      dispatch(setEditUsernameDisabled(true));
+    }
   }, [roomCode, options]);
 
   useEffect(() => {
@@ -2431,3 +2399,78 @@ 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);
+        }
+      };
+    }
+  }, []);
+};
+
+export const useKeyboardState = () => {
+  const keyboardState = useSharedValue(KeyboardState.UNKNOWN);
+
+  useEffect(() => {
+    let didShowTimeoutId: null | NodeJS.Timeout = null;
+    let didHideTimeoutId: null | NodeJS.Timeout = null;
+
+    const didShowSubscription = Keyboard.addListener('keyboardDidShow', () => {
+      keyboardState.value = KeyboardState.OPENING;
+      if (didShowTimeoutId !== null) {
+        clearTimeout(didShowTimeoutId);
+      }
+      didShowTimeoutId = setTimeout(() => {
+        keyboardState.value = KeyboardState.OPEN;
+        didShowTimeoutId = null;
+      }, 400);
+    });
+
+    const didHideSubscription = Keyboard.addListener('keyboardDidHide', () => {
+      keyboardState.value = KeyboardState.CLOSING;
+      if (didHideTimeoutId !== null) {
+        clearTimeout(didHideTimeoutId);
+      }
+      didHideTimeoutId = setTimeout(() => {
+        keyboardState.value = KeyboardState.CLOSED;
+        didHideTimeoutId = null;
+      }, 400);
+    });
+
+    return () => {
+      if (didShowTimeoutId !== null) {
+        clearTimeout(didShowTimeoutId);
+      }
+      if (didHideTimeoutId !== null) {
+        clearTimeout(didHideTimeoutId);
+      }
+      if ('remove' in didShowSubscription) {
+        didShowSubscription.remove();
+      } else {
+        Keyboard.removeSubscription(didShowSubscription);
+      }
+      if ('remove' in didHideSubscription) {
+        didHideSubscription.remove();
+      } else {
+        Keyboard.removeSubscription(didHideSubscription);
+      }
+    };
+  }, []);
+
+  return { keyboardState };
+};

package/src/redux/actionTypes.ts

@@ -88,6 +88,8 @@ const SET_HANDLE_BACK_BUTTON = 'SET_HANDLE_BACK_BUTTON';
 
 const SET_AUTO_ENTER_PIP_MODE = 'SET_AUTO_ENTER_PIP_MODE';
 
+const SET_EDIT_USERNAME_DISABLED = 'SET_EDIT_USERNAME_DISABLED';
+
 export default {
   ADD_PINNED_MESSAGE,
   ADD_MESSAGE,
@@ -129,6 +131,7 @@ export default {
   SET_CHAT_FILTER_SHEET_VISIBLE,
   SET_HANDLE_BACK_BUTTON,
   SET_AUTO_ENTER_PIP_MODE,
+  SET_EDIT_USERNAME_DISABLED,
 };
 
 export enum HmsStateActionTypes {

package/src/redux/actions/index.ts

@@ -391,3 +391,8 @@ export const setAutoEnterPipMode = (autoEnterPipMode?: boolean) => ({
   type: actionTypes.SET_AUTO_ENTER_PIP_MODE,
   payload: { autoEnterPipMode },
 });
+
+export const setEditUsernameDisabled = (editUsernameDisabled: boolean) => ({
+  type: actionTypes.SET_EDIT_USERNAME_DISABLED,
+  payload: { editUsernameDisabled },
+});

package/src/redux/reducers/appState.ts

@@ -54,6 +54,7 @@ type IntialStateType = {
   chatFilterSheetVisible: boolean;
   handleBackButton: boolean;
   autoEnterPipMode: boolean;
+  editUsernameDisabled: boolean;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -85,6 +86,7 @@ const INITIAL_STATE: IntialStateType = {
   chatFilterSheetVisible: false,
   handleBackButton: false,
   autoEnterPipMode: false,
+  editUsernameDisabled: false,
 };
 
 const appReducer = (
@@ -300,6 +302,12 @@ const appReducer = (
         autoEnterPipMode: action.payload.autoEnterPipMode ?? INITIAL_STATE.autoEnterPipMode,
       };
     }
+    case ActionTypes.SET_EDIT_USERNAME_DISABLED: {
+      return {
+        ...state,
+        editUsernameDisabled: action.payload.editUsernameDisabled ?? INITIAL_STATE.editUsernameDisabled,
+      }
+    }
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/utils/types.ts

@@ -107,7 +107,7 @@ export const ChatBroadcastFilter = { name: 'everyone' } as const;
 
 export const PeerListRefreshInterval = 5000; // in milliseconds
 
-export enum OnLeaveReason {  
+export enum OnLeaveReason {
   /**
    * User left the meeting room by pressing the "Leave" or "End Stream" button in Leave Modal
    */
@@ -128,6 +128,15 @@ export enum OnLeaveReason {
    * User left the meeting room by pressing the "end" button in PIP window
    */
   PIP = 'pip',
-};
+}
+
+export const TerminalExceptionCodes = [
+  4005,
+  1003,
+  2000,
+  '4005',
+  '1003',
+  '2000',
+];
 
-export const TerminalExceptionCodes = [4005, 1003, 2000, "4005", "1003", "2000"];
+export const HeaderFooterHideDelayMs = 5000;