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

package/src/components/GridView.tsx

@@ -1,10 +1,9 @@
 import React, { useRef, useState, useImperativeHandle } from 'react';
 import type { ElementRef } from 'react';
-import { View, FlatList, StyleSheet, Dimensions } from 'react-native';
+import { View, FlatList, StyleSheet, useWindowDimensions, Platform } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import type {
   LayoutChangeEvent,
-  LayoutRectangle,
   ViewToken,
 } from 'react-native';
 import type { HMSView, HMSPeer } from '@100mslive/react-native-hms';
@@ -18,6 +17,8 @@ import type { RootState } from '../redux';
 import { PaginationDots } from './PaginationDots';
 import { setGridViewActivePage } from '../redux/actions';
 import { Tile } from './Tile';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 
 export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
@@ -46,11 +47,32 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
     const hmsViewRefs = useRef<Record<string, ElementRef<typeof HMSView>>>({});
     const regularTilesFlatlistRef = useRef<FlatList<PeerTrackNode[]>>(null);
     const screenshareTilesFlatlistRef = useRef<FlatList<PeerTrackNode>>(null);
-    const insetTileBoundingBoxRef = useRef<LayoutRectangle | null>(null);
+    const [insetTileBoundingBox, setInsetTileBoundingBox] = useState<{
+      width: number | null;
+      height: number | null;
+    }>({ width: null, height: null });
 
     const screenshareTilesAvailable = useSelector(
       (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
     );
+    const regularTilesAvailable = pairedPeers.length > 0;
+
+    const isLandscapeOrientation = useIsLandscapeOrientation();
+
+    // On Orientation change, scroll to first page of list
+    React.useEffect(() => {
+      if (screenshareTilesAvailable) {
+        screenshareTilesFlatlistRef.current?.scrollToOffset({ offset: 0, animated: false });
+      }
+    }, [screenshareTilesAvailable, isLandscapeOrientation]);
+
+    // On Orientation change, scroll to first page of list
+    React.useEffect(() => {
+      if (regularTilesAvailable) {
+        regularTilesFlatlistRef.current?.scrollToOffset({ offset: 0, animated: false });
+      }
+    }, [regularTilesAvailable, isLandscapeOrientation]);
+
     const miniviewPeerTrackNodeExists = useSelector(
       (state: RootState) => !!state.app.miniviewPeerTrackNode
     );
@@ -104,7 +126,10 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
 
     const _handleLayoutChange = React.useCallback(
       ({ nativeEvent }: LayoutChangeEvent) => {
-        insetTileBoundingBoxRef.current = nativeEvent.layout;
+        setInsetTileBoundingBox({
+          width: nativeEvent.layout.width,
+          height: nativeEvent.layout.height,
+        });
       },
       []
     );
@@ -121,16 +146,19 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
           />
         ) : null}
 
-        <RegularTiles
-          ref={regularTilesFlatlistRef}
-          pairedPeers={pairedPeers}
-          setHmsViewRefs={setHmsViewRefs}
-          onPeerTileMorePress={onPeerTileMorePress}
-        />
+        {screenshareTilesAvailable && isLandscapeOrientation ? null : (
+          <RegularTiles
+            ref={regularTilesFlatlistRef}
+            pairedPeers={pairedPeers}
+            setHmsViewRefs={setHmsViewRefs}
+            onPeerTileMorePress={onPeerTileMorePress}
+          />
+        )}
 
         {pairedPeers.length > 0 && miniviewPeerTrackNodeExists ? (
           <MiniView
-            boundingBoxRef={insetTileBoundingBoxRef}
+            boundingBoxWidth={insetTileBoundingBox.width}
+            boundingBoxHeight={insetTileBoundingBox.height}
             onMoreOptionsPress={onPeerTileMorePress}
           />
         ) : null}
@@ -176,6 +204,8 @@ const RegularTiles = React.forwardRef<
   RegularTilesProps
 >(({ pairedPeers, onPeerTileMorePress, setHmsViewRefs }, flatlistRef) => {
   const dispatch = useDispatch();
+  const { height: safeHeight } = useSafeAreaFrame();
+
   const screenshareTilesAvailable = useSelector(
     (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
   );
@@ -183,6 +213,8 @@ const RegularTiles = React.forwardRef<
     (state: RootState) => state.app.gridViewActivePage
   );
 
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+
   const _keyExtractor = React.useCallback((item) => item[0]?.id, []);
 
   const _handleViewableItemsChanged = React.useCallback(
@@ -217,6 +249,7 @@ const RegularTiles = React.forwardRef<
       <FlatList
         ref={flatlistRef}
         horizontal={true}
+        style={Platform.OS === 'ios' ? {maxHeight: (safeHeight - 16)} : null}
         data={pairedPeers}
         initialNumToRender={1}
         maxToRenderPerBatch={1}
@@ -234,7 +267,11 @@ const RegularTiles = React.forwardRef<
         <PaginationDots
           list={pairedPeers}
           activeIndex={activeIndex}
-          style={screenshareTilesAvailable ? { marginVertical: 8 } : null}
+          style={
+            screenshareTilesAvailable || isLandscapeOrientation
+              ? { marginVertical: isLandscapeOrientation ? 4 : 8 }
+              : null
+          }
         />
       ) : null}
     </View>
@@ -250,6 +287,8 @@ const ScreenshareTiles = React.forwardRef<
   FlatList<PeerTrackNode>,
   ScreenshareTilesProps
 >(({ onPeerTileMorePress, setHmsViewRefs }, flatlistRef) => {
+  const { width } = useWindowDimensions();
+  const isLandscapeOrientation = useIsLandscapeOrientation();
   const [activePage, setActivePage] = useState(0);
   const screensharePeerTrackNodes = useSelector(
     (state: RootState) => state.app.screensharePeerTrackNodes
@@ -276,14 +315,14 @@ const ScreenshareTiles = React.forwardRef<
       return (
         <Tile
           height={'100%'}
-          width={Dimensions.get('window').width}
+          width={width}
           peerTrackNode={item}
           onPeerTileMorePress={onPeerTileMorePress}
           setHmsViewRefs={setHmsViewRefs}
         />
       );
     },
-    [onPeerTileMorePress, setHmsViewRefs]
+    [width, onPeerTileMorePress, setHmsViewRefs]
   );
 
   return (
@@ -308,7 +347,7 @@ const ScreenshareTiles = React.forwardRef<
         <PaginationDots
           list={screensharePeerTrackNodes}
           activeIndex={activePage}
-          style={{ marginVertical: 8 }}
+          style={{ marginVertical: isLandscapeOrientation ? 4 : 8 }}
         />
       ) : null}
     </View>

package/src/components/HLSFooter.tsx

@@ -17,7 +17,7 @@ export const HLSFooter: React.FC<HLSFooterProps> = ({ offset }) => {
 
   return (
     <AnimatedHLSFooter offset={offset} style={styles.animatedContainer}>
-      {overlayChatVisible ? <HLSChatView /> : null}
+      {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
 
       <HMSNotifications />
 

package/src/components/HLSView.tsx

@@ -6,6 +6,7 @@ import {
   HMSHLSPlayer,
   HMSHLSPlayerPlaybackState,
   useHMSHLSPlayerPlaybackState,
+  HMSStreamingState,
 } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
@@ -128,7 +129,7 @@ export const _HLSView: React.FC = () => {
 
   return (
     <View style={styles.hlsView}>
-      {room?.hlsStreamingState?.running ? (
+      {room?.hlsStreamingState?.state === HMSStreamingState.STARTED ? (
         room?.hlsStreamingState?.variants?.slice(0, 1)?.map((variant, index) =>
           variant?.hlsStreamUrl ? (
             <View key={index} style={styles.hlsPlayerContainer}>

package/src/components/HMSHLSMessageList.tsx

@@ -6,10 +6,12 @@ import type { HMSMessage } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
 import { HMSHLSMessage } from './HMSHLSMessage';
+import { useIsLandscapeOrientation } from '../utils/dimension';
 
 export const HMSHLSMessageList: React.FC = () => {
   const { height: windowHeight } = useWindowDimensions();
   const messages = useSelector((state: RootState) => state.messages.messages);
+  const isLandscapeOrientation = useIsLandscapeOrientation();
 
   const _keyExtractor = React.useCallback(
     (item: HMSMessage) => item.messageId,
@@ -24,14 +26,18 @@ export const HMSHLSMessageList: React.FC = () => {
     return null;
   }
 
+  const HEIGHT_MULTIPLIER = isLandscapeOrientation ? 0.45 : 0.2;
+
   return (
     <View
       style={[
         styles.container,
         {
-          maxHeight: windowHeight * 0.2,
+          maxHeight: windowHeight * HEIGHT_MULTIPLIER,
           height:
-            messages.length > 3 ? windowHeight * 0.2 : messages.length * 54,
+            messages.length > 3
+              ? windowHeight * HEIGHT_MULTIPLIER
+              : messages.length * 54,
         },
       ]}
     >

package/src/components/HMSKeyboardAvoidingView.android.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import Animated from 'react-native-reanimated'; // useDerivedValue, // useAnimatedStyle, // useAnimatedKeyboard,
+
+export interface HMSKeyboardAvoidingViewProps {
+  style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+  bottomOffset?: number;
+}
+
+export const HMSKeyboardAvoidingView: React.FC<
+  HMSKeyboardAvoidingViewProps
+> = ({
+  children,
+  style,
+  // bottomOffset=0
+}) => {
+  // const animatedKeyboard = useAnimatedKeyboard();
+
+  // const initialPageY = useDerivedValue(() => bottomOffset, [bottomOffset]);
+
+  // const keyboardAvoidStyle = useAnimatedStyle(() => {
+  //   const keyboardHeight = animatedKeyboard.height.value;
+  //   return {
+  //     transform: [
+  //       {
+  //         translateY:
+  //           keyboardHeight <= initialPageY.value
+  //             ? 0 // Keep element at original `pageY` till and when keyboard height is less than `pageY`
+  //             : -(keyboardHeight - initialPageY.value),
+  //       },
+  //     ],
+  //   };
+  // });
+
+  return (
+    <Animated.View
+      style={[
+        style,
+        // keyboardAvoidStyle
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+};

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -5,18 +5,21 @@ import Animated, {
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
-  bottomOffset?: number;
+  bottomOffset?: number | SharedValue<number>;
 }
 
 export const HMSKeyboardAvoidingView: React.FC<
   HMSKeyboardAvoidingViewProps
-> = ({ children, style, bottomOffset=0 }) => {
+> = ({ children, style, bottomOffset = 0 }) => {
   const animatedKeyboard = useAnimatedKeyboard();
 
-  const initialPageY = useDerivedValue(() => bottomOffset, [bottomOffset]);
+  const initialPageY = useDerivedValue(() => {
+    return typeof bottomOffset === 'number' ? bottomOffset : bottomOffset.value;
+  }, [bottomOffset]);
 
   const keyboardAvoidStyle = useAnimatedStyle(() => {
     const keyboardHeight = animatedKeyboard.height.value;

package/src/components/HMSLiveIndicator.tsx

@@ -4,27 +4,18 @@ import {
   View,
   Text,
   Platform,
-  TouchableOpacity,
 } from 'react-native';
 import { useSelector } from 'react-redux';
+import { HMSStreamingState } from '@100mslive/react-native-hms';
 
-import {
-  useHMSRoomStyleSheet,
-  useIsHLSViewer,
-  useShowChatAndParticipants,
-} from '../hooks-util';
-import { EyeIcon } from '../Icons';
-import { COLORS, hexToRgbA } from '../utils/theme';
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { TestIds } from '../utils/constants';
 
 const _HMSLiveIndicator = () => {
-  const isHLSViewer = useIsHLSViewer();
-  const previewPeerCount = useSelector(
-    (state: RootState) => state.hmsStates.room?.peerCount
-  );
   const live = useSelector(
-    (state: RootState) => !!state.hmsStates.room?.hlsStreamingState?.running
+    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
@@ -35,51 +26,15 @@ const _HMSLiveIndicator = () => {
       color: COLORS.WHITE,
       fontFamily: `${typograhy.font_family}-SemiBold`,
     },
-    viewers: {
-      backgroundColor: isHLSViewer
-        ? theme.palette.background_dim &&
-          hexToRgbA(theme.palette.background_dim, 0.64)
-        : undefined,
-      borderWidth: isHLSViewer ? 0 : 1,
-      borderColor: theme.palette.border_bright,
-    },
-    count: {
-      color: theme.palette.on_surface_high,
-      fontFamily: `${typograhy.font_family}-SemiBold`,
-    },
   }));
 
-  const { canShowParticipants, show } = useShowChatAndParticipants();
-
-  const showParticipantsSheet = () => {
-    show('participants');
-  };
-
   if (!live) {
     return null;
   }
 
   return (
-    <View style={styles.container}>
-      {/* Live */}
-      <View style={[styles.live, hmsRoomStyles.live]}>
-        <Text testID={TestIds.live_text} style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
-      </View>
-
-      {/* Viewer Count */}
-      {typeof previewPeerCount === 'number' ? (
-        <TouchableOpacity
-          style={[styles.viewers, hmsRoomStyles.viewers]}
-          onPress={showParticipantsSheet}
-          disabled={!canShowParticipants}
-        >
-          <EyeIcon testID={TestIds.peer_count_icon} />
-
-          <Text testID={TestIds.peer_count} style={[styles.count, hmsRoomStyles.count]}>
-            {previewPeerCount}
-          </Text>
-        </TouchableOpacity>
-      ) : null}
+    <View style={[styles.live, hmsRoomStyles.live]}>
+      <Text testID={TestIds.live_text} style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
     </View>
   );
 };
@@ -87,13 +42,11 @@ const _HMSLiveIndicator = () => {
 export const HMSLiveIndicator = React.memo(_HMSLiveIndicator);
 
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-  },
   live: {
     paddingHorizontal: 8,
-    paddingVertical: 4,
+    paddingVertical: 6,
     borderRadius: 4,
+    marginRight: 8,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -104,22 +57,4 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     textAlignVertical: 'center',
   },
-  viewers: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 4,
-    paddingRight: 8,
-    paddingLeft: 6,
-    marginLeft: 8,
-    borderRadius: 4,
-  },
-  count: {
-    fontSize: 10,
-    lineHeight: Platform.OS === 'android' ? 16 : undefined,
-    letterSpacing: 1.5,
-    textAlign: 'center',
-    textAlignVertical: 'center',
-
-    marginLeft: 4,
-  },
 });

package/src/components/HMSLiveViewerCount.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import {
+  StyleSheet,
+  Text,
+  Platform,
+  TouchableOpacity,
+} from 'react-native';
+import { useSelector } from 'react-redux';
+import { HMSStreamingState } from '@100mslive/react-native-hms';
+
+import {
+  useHMSRoomStyleSheet,
+  useIsHLSViewer,
+  useShowChatAndParticipants,
+} from '../hooks-util';
+import { EyeIcon } from '../Icons';
+import { hexToRgbA } from '../utils/theme';
+import type { RootState } from '../redux';
+import { TestIds } from '../utils/constants';
+
+const _HMSLiveViewerCount = () => {
+  const isHLSViewer = useIsHLSViewer();
+  const previewPeerCount = useSelector(
+    (state: RootState) => state.hmsStates.room?.peerCount
+  );
+  const live = useSelector(
+    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
+    viewers: {
+      backgroundColor: isHLSViewer
+        ? theme.palette.background_dim &&
+          hexToRgbA(theme.palette.background_dim, 0.64)
+        : undefined,
+      borderWidth: isHLSViewer ? 0 : 1,
+      borderColor: theme.palette.border_bright,
+    },
+    count: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typograhy.font_family}-SemiBold`,
+    },
+  }));
+
+  const { canShowParticipants, show } = useShowChatAndParticipants();
+
+  const showParticipantsSheet = () => {
+    show('participants');
+  };
+
+  if (!live || typeof previewPeerCount !== 'number') {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      style={[styles.viewers, hmsRoomStyles.viewers]}
+      onPress={showParticipantsSheet}
+      disabled={!canShowParticipants}
+    >
+      <EyeIcon testID={TestIds.peer_count_icon} />
+
+      <Text testID={TestIds.peer_count} style={[styles.count, hmsRoomStyles.count]}>
+        {previewPeerCount}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+export const HMSLiveViewerCount = React.memo(_HMSLiveViewerCount);
+
+const styles = StyleSheet.create({
+  viewers: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 4,
+    paddingRight: 8,
+    paddingLeft: 6,
+    borderRadius: 4,
+  },
+  count: {
+    fontSize: 10,
+    lineHeight: Platform.OS === 'android' ? 16 : undefined,
+    letterSpacing: 1.5,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+
+    marginLeft: 4,
+  },
+});

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/HMSOverlayChatView.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import MaskedView from '@react-native-masked-view/masked-view';
+import { useDerivedValue, interpolate } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
 import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
 import { HMSSendMessageInput } from './HMSSendMessageInput';
@@ -16,12 +18,26 @@ const colors = [
 ];
 const colorLocations = [0, 0.4, 1];
 
-export const HLSChatView = () => {
+export interface HLSChatViewProps {
+  offset?: SharedValue<number>;
+}
+
+export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
   const footerHeight = useFooterHeight();
   const hmsNotificationsHeight = useHMSNotificationsHeight();
 
+  const chatBottomOffset = useDerivedValue(() => {
+    if (offset) {
+      return (
+        interpolate(offset.value, [0, 1], [0, footerHeight]) +
+        hmsNotificationsHeight
+      );
+    }
+    return footerHeight + hmsNotificationsHeight;
+  }, [offset, footerHeight, hmsNotificationsHeight]);
+
   return (
-    <HMSKeyboardAvoidingView bottomOffset={footerHeight + hmsNotificationsHeight}>
+    <HMSKeyboardAvoidingView bottomOffset={chatBottomOffset}>
       <MaskedView
         maskElement={
           <LinearGradient

package/src/components/HMSPreviewEditName.tsx

@@ -13,11 +13,20 @@ export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
   const dispatch = useDispatch();
   const { updateConfig } = useHMSConfig();
   const userName = useSelector((state: RootState) => state.user.userName);
+  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
 
   const handleNameChange = (name: string) => {
     dispatch(changeUsername(name));
     updateConfig({ username: name });
   };
 
-  return <HMSTextInput testID={TestIds.enter_name} value={userName} onChangeText={handleNameChange} />;
+  return (
+    <HMSTextInput
+      editable={!editUsernameDisabled}
+      testID={TestIds.enter_name}
+      value={userName}
+      onChangeText={handleNameChange}
+      style={editUsernameDisabled ? { opacity: 0.5 } : null}
+    />
+  );
 };

package/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
+import { HMSStreamingState } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
 import { useHMSRoomStyleSheet } from '../hooks-util';
@@ -8,7 +9,7 @@ import { COLORS } from '../utils/theme';
 
 export const HMSPreviewHLSLiveIndicator = () => {
   const isHLSStreaming = useSelector(
-    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.running
+    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({

package/src/components/HMSRecordingIndicator.tsx

@@ -5,15 +5,35 @@ 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?.state === HMSRecordingState.STARTED ||
+      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.RESUMED ||
+
+      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.STARTED ||
+      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.RESUMED ||
+
+      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.STARTED ||
+      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.RESUMED
+  );
+  const isRecordingPaused = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.browserRecordingState?.state === HMSRecordingState.PAUSED ||
+      state.hmsStates.room?.serverRecordingState?.state === HMSRecordingState.PAUSED ||
+      state.hmsStates.room?.hlsRecordingState?.state === HMSRecordingState.PAUSED
   );
   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();
@@ -38,6 +58,12 @@ export const HMSRecordingIndicator = () => {
     );
   }
 
+  if (isRecordingPaused) {
+    return (
+      <RecordingIcon type='pause' style={[styles.icon, styles.rightSpace]} />
+    );
+  }
+
   return null;
 };