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

package/src/components/PressableIcon.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 
 import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
 import { hexToRgbA } from '../utils/theme';
@@ -41,24 +42,28 @@ export const PressableIcon: React.FC<PressableIconProps> = ({
     [isHLSViewer]
   );
 
+  const tapGesture = React.useMemo(() => Gesture.Tap(), []);
+
   return (
-    <TouchableOpacity
-      style={[
-        styles.pressable,
-        hmsRoomStyles.pressable,
-        {
-          borderRadius: rounded ? 20 : 8,
-          ...(border && !isHLSViewer
-            ? { ...styles.withBorder, ...hmsRoomStyles.border }
-            : undefined),
-          ...(active ? hmsRoomStyles.active : undefined),
-        },
-        style,
-      ]}
-      {...restProps}
-    >
-      {children}
-    </TouchableOpacity>
+    <GestureDetector gesture={tapGesture}>
+      <TouchableOpacity
+        style={[
+          styles.pressable,
+          hmsRoomStyles.pressable,
+          {
+            borderRadius: rounded ? 20 : 8,
+            ...(border && !isHLSViewer
+              ? { ...styles.withBorder, ...hmsRoomStyles.border }
+              : undefined),
+            ...(active ? hmsRoomStyles.active : undefined),
+          },
+          style,
+        ]}
+        {...restProps}
+      >
+        {children}
+      </TouchableOpacity>
+    </GestureDetector>
   );
 };
 

package/src/components/RoomSettingsModalContent.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 import type { HMSAudioMixingMode } from '@100mslive/react-native-hms';
+import { HMSRecordingState } from '@100mslive/react-native-hms';
 import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
@@ -19,6 +20,7 @@ import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import {
   isPublishingAllowed,
   useHMSLayoutConfig,
+  useHMSRoomColorPalette,
   useHMSRoomStyleSheet,
   useShowChatAndParticipants,
   useStartRecording,
@@ -50,10 +52,13 @@ export const RoomSettingsModalContent: React.FC<
 
   const hmsActions = useHMSActions();
 
+  const { alert_error_default: alertErrorDefaultColor } = useHMSRoomColorPalette()
+
   const isPublisher = useSelector((state: RootState) => {
     const localPeer = state.hmsStates.localPeer;
     return localPeer ? isPublishingAllowed(localPeer) : false;
   });
+  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
 
   const { registerOnModalHideAction } = useBottomSheetActions();
 
@@ -130,7 +135,13 @@ export const RoomSettingsModalContent: React.FC<
   );
 
   const isRecordingOn = useSelector(
-    (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
+    (state: RootState) =>
+      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
+      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.STARTED
+  );
+  const isRecordingPaused = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.PAUSED
   );
 
   const { startRecording } = useStartRecording();
@@ -229,12 +240,13 @@ export const RoomSettingsModalContent: React.FC<
               hide: !showHandRaiseIcon, // Hide if can't publish screen
             },
             {
-              id: 'start-recording',
+              id: 'recording',
               testID: isRecordingOn ? TestIds.room_modal_stop_recording_btn : TestIds.room_modal_start_recording_btn,
-              icon: <RecordingIcon style={{ width: 20, height: 20 }} />,
-              label: isRecordingOn ? 'Stop Recording' : 'Start Recording',
+              icon: <RecordingIcon type={isRecordingPaused ? 'pause' : 'on'} style={[{ width: 20, height: 20 }, isRecordingOn ? { tintColor: alertErrorDefaultColor } : null]} />,
+              label: isRecordingOn ? 'Recording' : isRecordingPaused ? 'Recording Paused' : 'Record',
               pressHandler: handleRecordingTogglePress,
-              isActive: isRecordingOn,
+              isActive: false,
+              disabled: isRecordingPaused,
               hide: !canStartRecording, // Hide if can't publish screen
             },
             {
@@ -244,7 +256,7 @@ export const RoomSettingsModalContent: React.FC<
               label: 'Change Name',
               pressHandler: changeName,
               isActive: false,
-              hide: isPublisher,
+              hide: isPublisher || editUsernameDisabled,
             },
           ].filter((itm) => !itm.hide),
           true
@@ -272,6 +284,7 @@ export const RoomSettingsModalContent: React.FC<
                               onPress={item.pressHandler}
                               text={item.label}
                               isActive={item.isActive}
+                              disabled={item.disabled}
                             />
 
                             {item.sibling}
@@ -296,6 +309,7 @@ type SettingItemProps = {
   text: string;
   icon: React.ReactElement;
   onPress(): void;
+  disabled?: TouchableOpacityProps['disabled'];
   testID?: TouchableOpacityProps['testID'];
   isActive?: boolean;
 };
@@ -305,6 +319,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
   text,
   icon,
   onPress,
+  disabled,
   isActive = false,
 }) => {
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
@@ -320,6 +335,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
   return (
     <TouchableOpacity
       testID={testID}
+      disabled={disabled}
       style={[styles.button, isActive ? hmsRoomStyles.button : null]}
       onPress={onPress}
     >

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/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

@@ -94,6 +94,7 @@ import {
   setActiveChatBottomSheetTab,
   setActiveSpeakers,
   setAutoEnterPipMode,
+  setEditUsernameDisabled,
   setFullScreenPeerTrackNode,
   setHMSLocalPeerState,
   setHMSRoleState,
@@ -151,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[]>>
@@ -189,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
-        );
       }
     };
 
@@ -2388,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(() => {
@@ -2453,7 +2418,59 @@ export const useAndroidSoftInputAdjustResize = () => {
         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;