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

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,11 +20,16 @@ import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import {
   isPublishingAllowed,
   useHMSLayoutConfig,
+  useHMSRoomColorPalette,
   useHMSRoomStyleSheet,
   useShowChatAndParticipants,
   useStartRecording,
 } from '../hooks-util';
-import { useCanPublishScreen, useHMSActions } from '../hooks-sdk';
+import {
+  useCanPublishScreen,
+  useHMSActions,
+  useIsAnyStreamingOn,
+} from '../hooks-sdk';
 import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeContent';
 import { ParticipantsCount } from './ParticipantsCount';
 import { selectAllowedTracksToPublish } from '../hooks-sdk-selectors';
@@ -50,10 +56,16 @@ 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();
 
@@ -128,10 +140,27 @@ export const RoomSettingsModalContent: React.FC<
     (state: RootState) =>
       !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
   );
-
-  const isRecordingOn = useSelector(
-    (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
+  const isAnyStreamingOn = useIsAnyStreamingOn();
+
+  const isRecordingOn = useSelector((state: RootState) => {
+    const room = state.hmsStates.room;
+    return (
+      room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
+      room?.browserRecordingState?.state === HMSRecordingState.STARTED
+    );
+  });
+  const isRecordingPaused = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.browserRecordingState?.state ===
+      HMSRecordingState.PAUSED
   );
+  const isRecordingDisabled = useSelector((state: RootState) => {
+    const room = state.hmsStates.room;
+    return (
+      isAnyStreamingOn ||
+      room?.browserRecordingState?.state === HMSRecordingState.STARTING
+    );
+  });
 
   const { startRecording } = useStartRecording();
 
@@ -203,7 +232,9 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'share-screen',
-              testID: !!isLocalScreenShared ? TestIds.room_modal_stop_screen_share_btn : TestIds.room_modal_share_screen_btn,
+              testID: !!isLocalScreenShared
+                ? TestIds.room_modal_stop_screen_share_btn
+                : TestIds.room_modal_share_screen_btn,
               icon: <ScreenShareIcon style={{ width: 20, height: 20 }} />,
               label: isLocalScreenShared ? 'Sharing Screen' : 'Share Screen',
               pressHandler: handleScreenShareTogglePress,
@@ -212,7 +243,9 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'brb',
-              testID: isBRBOn ? TestIds.room_modal_stop_brb_btn : TestIds.room_modal_brb_btn,
+              testID: isBRBOn
+                ? TestIds.room_modal_stop_brb_btn
+                : TestIds.room_modal_brb_btn,
               icon: <BRBIcon style={{ width: 20, height: 20 }} />,
               label: isBRBOn ? "I'm Back" : 'Be Right Back',
               pressHandler: toggleBRB,
@@ -221,7 +254,9 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'raise-hand',
-              testID: isHandRaised ? TestIds.room_modal_hand_raised_btn : TestIds.room_modal_hand_raise_btn,
+              testID: isHandRaised
+                ? TestIds.room_modal_hand_raised_btn
+                : TestIds.room_modal_hand_raise_btn,
               icon: <HandIcon style={{ width: 20, height: 20 }} />,
               label: isHandRaised ? 'Hand Raised' : 'Raise Hand',
               pressHandler: toggleRaiseHand,
@@ -229,12 +264,29 @@ export const RoomSettingsModalContent: React.FC<
               hide: !showHandRaiseIcon, // Hide if can't publish screen
             },
             {
-              id: 'start-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',
+              id: 'recording',
+              testID: isRecordingOn
+                ? TestIds.room_modal_stop_recording_btn
+                : TestIds.room_modal_start_recording_btn,
+              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: isRecordingDisabled,
               hide: !canStartRecording, // Hide if can't publish screen
             },
             {
@@ -244,7 +296,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 +324,7 @@ export const RoomSettingsModalContent: React.FC<
                               onPress={item.pressHandler}
                               text={item.label}
                               isActive={item.isActive}
+                              disabled={item.disabled}
                             />
 
                             {item.sibling}
@@ -296,6 +349,7 @@ type SettingItemProps = {
   text: string;
   icon: React.ReactElement;
   onPress(): void;
+  disabled?: TouchableOpacityProps['disabled'];
   testID?: TouchableOpacityProps['testID'];
   isActive?: boolean;
 };
@@ -305,6 +359,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
   text,
   icon,
   onPress,
+  disabled,
   isActive = false,
 }) => {
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
@@ -320,7 +375,12 @@ const SettingItem: React.FC<SettingItemProps> = ({
   return (
     <TouchableOpacity
       testID={testID}
-      style={[styles.button, isActive ? hmsRoomStyles.button : null]}
+      disabled={disabled}
+      style={[
+        styles.button,
+        isActive ? hmsRoomStyles.button : null,
+        disabled ? { opacity: 0.6 } : null,
+      ]}
       onPress={onPress}
     >
       {icon}

package/src/components/RoomSettingsModalDebugModeContent.tsx

@@ -26,6 +26,7 @@ import {
 } from '../redux/actions';
 import { ModalTypes, PipModes } from '../utils/types';
 import { useIsHLSViewer } from '../hooks-util';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 interface RoomSettingsModalDebugModeContentProps {
   newAudioMixingMode: HMSAudioMixingMode;
@@ -59,10 +60,7 @@ export const RoomSettingsModalDebugModeContent: React.FC<
   const localPeerRole = useSelector(
     (state: RootState) => state.hmsStates.localPeer?.role
   );
-  const isHLSStreaming = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.running ?? false
-  );
+  const isHLSStreaming = useIsHLSStreamingOn();
 
   const pipModeStatus = useSelector(
     (state: RootState) => state.app.pipModeStatus

package/src/components/WebrtcView.tsx

@@ -1,5 +1,15 @@
 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 +23,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 +72,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-sdk-selectors.tsx

@@ -1,3 +1,4 @@
+import { HMSStreamingState } from '@100mslive/react-native-hms';
 import type { HMSRole } from '@100mslive/react-native-hms';
 
 import type { RootState } from './redux';
@@ -14,3 +15,21 @@ export const selectCanPublishTrackForRole = (
   role: HMSRole | undefined,
   track: 'audio' | 'video' | 'screen'
 ) => role?.publishSettings?.allowed?.includes(track) ?? false;
+
+export const selectIsHLSStreamingOn = (state: RootState) => {
+  return (
+    state.hmsStates.room?.hlsStreamingState?.state ===
+      HMSStreamingState.STARTED ?? false
+  );
+};
+
+export const selectIsRTMPStreamingOn = (state: RootState) => {
+  return (
+    state.hmsStates.room?.rtmpHMSRtmpStreamingState?.state ===
+      HMSStreamingState.STARTED ?? false
+  );
+};
+
+export const selectIsAnyStreamingOn = (state: RootState) => {
+  return selectIsHLSStreamingOn(state) || selectIsRTMPStreamingOn(state);
+};

package/src/hooks-sdk.ts

@@ -10,9 +10,12 @@ import {
 import {
   selectAllowedTracksToPublish,
   selectCanPublishTrack,
+  selectIsAnyStreamingOn,
+  selectIsHLSStreamingOn,
 } from './hooks-sdk-selectors';
 import { useCallback } from 'react';
 import type { HMSPeer } from '@100mslive/react-native-hms';
+import { HMSRecordingState } from '@100mslive/react-native-hms';
 
 export const useAllowedTracksToPublish = () => {
   return useSelector(selectAllowedTracksToPublish);
@@ -254,3 +257,37 @@ export const useHMSActions = () => {
     setRoomMuteLocally,
   };
 };
+
+export const useIsHLSStreamingOn = () => {
+  return useSelector(selectIsHLSStreamingOn);
+};
+
+export const useIsAnyStreamingOn = () => {
+  return useSelector(selectIsAnyStreamingOn);
+};
+
+export const useIsAnyRecordingOn = () => {
+  return useSelector((state: RootState) => {
+    const room = state.hmsStates.room;
+    return (
+      room?.browserRecordingState?.state === HMSRecordingState.STARTED ||
+      room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
+      room?.serverRecordingState?.state === HMSRecordingState.STARTED ||
+      room?.serverRecordingState?.state === HMSRecordingState.RESUMED ||
+      room?.hlsRecordingState?.state === HMSRecordingState.STARTED ||
+      room?.hlsRecordingState?.state === HMSRecordingState.RESUMED
+    );
+  });
+};
+
+export const useIsAnyRecordingPaused = () => {
+  const isRecordingPaused = useSelector((state: RootState) => {
+    const room = state.hmsStates.room;
+    return (
+      room?.browserRecordingState?.state === HMSRecordingState.PAUSED ||
+      room?.serverRecordingState?.state === HMSRecordingState.PAUSED ||
+      room?.hlsRecordingState?.state === HMSRecordingState.PAUSED
+    );
+  });
+  return isRecordingPaused;
+};

package/src/hooks-util-selectors.tsx

@@ -7,6 +7,7 @@ import type { HMSRole } from '@100mslive/react-native-hms';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 
 import type { RootState } from './redux';
+import { selectIsHLSStreamingOn } from './hooks-sdk-selectors';
 
 export const selectIsHLSViewer = (
   role: HMSRole | null | undefined,
@@ -45,8 +46,7 @@ export const selectShouldGoLive = (state: RootState) => {
     currentRole
   );
 
-  const isHLSStreaming =
-    state.hmsStates.room?.hlsStreamingState?.running ?? false;
+  const isHLSStreaming = selectIsHLSStreamingOn(state);
 
   const joinButtonType =
     layoutConfig?.screens?.preview?.default?.elements?.join_form