@100mslive/react-native-room-kit 0.1.0 → 0.2.0

package/lib/typescript/redux/actions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/redux/actions/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/redux/actions/index.ts"],"names":[],"mappings":"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"}

package/lib/typescript/redux/reducers/appState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appState.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/appState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAA2B,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,OAAO,EACP,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,aAAa,EAAE,QAAQ,CAAC;IACxB,QAAQ,EAAE,MAAM,CACd,MAAM,EACJ,SAAS,GACT,kBAAkB,GAClB,kBAAkB,EAAE,GACpB,mBAAmB,GACnB,mBAAmB,CACtB,CAAC;IACF,cAAc,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,UAAU,EAAE;QACV,YAAY,EAAE,OAAO,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;QACvB,SAAS,EAAE,OAAO,CAAC;QACnB,YAAY,EAAE,OAAO,CAAC;QACtB,uBAAuB,EAAE,OAAO,CAAC;QACjC,2BAA2B,EAAE,OAAO,CAAC;KACtC,CAAC;IACF,SAAS,EAAE,UAAU,CAAC;IACtB,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,IAAI,GAAG,aAAa,CAAC;IAC5C,kBAAkB,EAAE,IAAI,GAAG,aAAa,CAAC;IACzC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;CACtC,CAAC;AA0BF,QAAA,MAAM,UAAU,+CAEN,UAAU,KACjB,eAiIF,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"appState.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/appState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAA2B,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,OAAO,EACP,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,aAAa,EAAE,QAAQ,CAAC;IACxB,QAAQ,EAAE,MAAM,CACd,MAAM,EACJ,SAAS,GACT,kBAAkB,GAClB,kBAAkB,EAAE,GACpB,mBAAmB,GACnB,mBAAmB,CACtB,CAAC;IACF,cAAc,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9C,UAAU,EAAE;QACV,YAAY,EAAE,OAAO,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;QACvB,SAAS,EAAE,OAAO,CAAC;QACnB,YAAY,EAAE,OAAO,CAAC;QACtB,uBAAuB,EAAE,OAAO,CAAC;QACjC,2BAA2B,EAAE,OAAO,CAAC;KACtC,CAAC;IACF,SAAS,EAAE,UAAU,CAAC;IACtB,YAAY,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,IAAI,GAAG,aAAa,CAAC;IAC5C,kBAAkB,EAAE,IAAI,GAAG,aAAa,CAAC;IACzC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;CACtC,CAAC;AA0BF,QAAA,MAAM,UAAU,+CAEN,UAAU,KACjB,eAoIF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -80,7 +80,7 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "@100mslive/react-native-hms": "github:100mslive/100ms-react-native#release1.8.0",
+    "@100mslive/react-native-hms": "1.7.1",
     "@shopify/flash-list": "^1.4.3",
     "react": "*",
     "react-native": "*",

package/src/Icons/Radio/index.tsx

@@ -1,27 +1,76 @@
 import React from 'react';
-import { Image, StyleSheet } from 'react-native';
-import type { ImageProps } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
+import type { ImageProps, StyleProp, ViewStyle } from 'react-native';
 
-interface RadioIconProps extends Omit<ImageProps, 'source'> {}
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+
+type RadioIconProps = Omit<ImageProps, 'source'> &
+  (
+    | {
+        size?: 'normal';
+      }
+    | {
+        size?: 'extra-large';
+        containerStyle?: StyleProp<ViewStyle>;
+      }
+  );
 
 export const RadioIcon: React.FC<RadioIconProps> = ({
   style,
   ...restProps
 }) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    container: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    icon: {
+      tintColor: theme.palette.on_surface_high,
+    },
+  }));
+
+  if (restProps.size === 'extra-large') {
+    return (
+      <View
+        style={[
+          styles.container,
+          hmsRoomStyles.container,
+          restProps.containerStyle,
+        ]}
+      >
+        <Image
+          source={require('./assets/radio-xlarge.png')}
+          style={[styles.icon, styles.xLargeIcon, hmsRoomStyles.icon, style]}
+          {...restProps}
+        />
+      </View>
+    );
+  }
+
   return (
     <Image
       source={require('./assets/radio.png')}
-      style={[styles.icon, style]}
+      style={[styles.icon, hmsRoomStyles.icon, style]}
       {...restProps}
     />
   );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   icon: {
     width: 24,
     height: 24,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  xLargeIcon: {
+    width: 56,
+    height: 56,
+  },
 });

package/src/Icons/Stop/index.tsx

@@ -6,10 +6,7 @@ import { useHMSRoomStyle } from '../../hooks-util';
 
 interface StopIconProps extends Omit<ImageProps, 'source'> {}
 
-export const StopIcon: React.FC<StopIconProps> = ({
-  style,
-  ...restProps
-}) => {
+export const StopIcon: React.FC<StopIconProps> = ({ style, ...restProps }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
     tintColor: theme.palette.on_surface_high,
   }));

package/src/components/CompanyLogo.tsx

@@ -28,7 +28,7 @@ export const CompanyLogo: React.FC<CompanyLogoProps> = ({
 
 const styles = StyleSheet.create({
   icon: {
-    width: '100%',
+    aspectRatio: 1,
     height: 32,
     resizeMode: 'contain',
   },

package/src/components/DisplayView.tsx

@@ -8,7 +8,6 @@ import Animated, {
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
-import { styles } from './styles';
 import { DefaultModal } from './DefaultModal';
 import { ModalTypes, PipModes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
@@ -139,7 +138,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
   }, []);
 
   return (
-    <Animated.View style={[styles.container, animatedStyles]}>
+    <Animated.View style={[{ flex: 1 }, animatedStyles]}>
       {isHLSViewer ? (
         <HLSView />
       ) : (

package/src/components/Footer.tsx

@@ -6,9 +6,9 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { COLORS } from '../utils/theme';
-import { useIsHLSViewer } from '../hooks-util';
+import { useHMSRoomStyle, useIsHLSViewer } from '../hooks-util';
 import { HMSManageLeave } from './HMSManageLeave';
 import { HMSManageRaiseHand } from './HMSManageRaiseHand';
 import { HMSManageLocalAudio } from './HMSManageLocalAudio';
@@ -61,32 +61,38 @@ export const _Footer: React.FC<FooterProps> = ({ offset }) => {
     };
   }, []);
 
+  const containerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.background_dim,
+  }));
+
   return (
     <Animated.View style={animatedStyles} animatedProps={animatedProps}>
-      <View style={styles.container}>
-        {footerActionButtons.map((actionType, index) => {
-          return (
-            <View
-              key={actionType}
-              style={index === 0 ? null : styles.iconWrapper}
-            >
-              {actionType === 'leave' ? (
-                <HMSManageLeave />
-              ) : actionType === 'audio' ? (
-                <HMSManageLocalAudio />
-              ) : actionType === 'video' ? (
-                <HMSManageLocalVideo />
-              ) : actionType === 'chat' ? (
-                <HMSChat />
-              ) : actionType === 'options' ? (
-                <HMSRoomOptions />
-              ) : actionType === 'hand-raise' ? (
-                <HMSManageRaiseHand />
-              ) : null}
-            </View>
-          );
-        })}
-      </View>
+      <SafeAreaView style={containerStyles} edges={['bottom']}>
+        <View style={[styles.container, containerStyles]}>
+          {footerActionButtons.map((actionType, index) => {
+            return (
+              <View
+                key={actionType}
+                style={index === 0 ? null : styles.iconWrapper}
+              >
+                {actionType === 'leave' ? (
+                  <HMSManageLeave />
+                ) : actionType === 'audio' ? (
+                  <HMSManageLocalAudio />
+                ) : actionType === 'video' ? (
+                  <HMSManageLocalVideo />
+                ) : actionType === 'chat' ? (
+                  <HMSChat />
+                ) : actionType === 'options' ? (
+                  <HMSRoomOptions />
+                ) : actionType === 'hand-raise' ? (
+                  <HMSManageRaiseHand />
+                ) : null}
+              </View>
+            );
+          })}
+        </View>
+      </SafeAreaView>
     </Animated.View>
   );
 };
@@ -95,7 +101,6 @@ const styles = StyleSheet.create({
   container: {
     paddingTop: 16,
     paddingHorizontal: 16,
-    backgroundColor: COLORS.BACKGROUND.DIM,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',

package/src/components/HLSView.tsx

@@ -46,7 +46,7 @@ export const HLSView: React.FC = () => {
       | 'seekForward'
       | 'seekBackward'
       | 'seekToLive'
-      | 'setVolume'
+      | 'setVolume',
   >(
     action: T,
     ...args: any[]

package/src/components/HMSHLSNotStarted.tsx

@@ -3,9 +3,8 @@ import { useSelector } from 'react-redux';
 import { View, Text, StyleSheet } from 'react-native';
 
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
-import { usePortraitChatViewVisible } from '../hooks-util';
-import { ClockIcon } from '../Icons';
+import { useHMSRoomStyleSheet, usePortraitChatViewVisible } from '../hooks-util';
+import { RadioIcon } from '../Icons';
 
 export const HMSHLSNotStarted = () => {
   const portraitChatViewVisible = usePortraitChatViewVisible();
@@ -13,46 +12,53 @@ export const HMSHLSNotStarted = () => {
     (state: RootState) => state.app.hlsAspectRatio
   );
 
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    title: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    description: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    }
+  }));
+
   return (
     <View
       style={[
-        styles.textContainer,
+        styles.container,
         portraitChatViewVisible ? styles.taleLessSpaceAsYouCan : null,
         portraitChatViewVisible ? { aspectRatio: hlsAspectRatio.value } : null,
       ]}
     >
-      <ClockIcon />
-      <Text style={styles.title}>Class hasn't started yet</Text>
-      <Text style={styles.description}>
-        Please wait for the teacher to start the class.
+      <RadioIcon size='extra-large' containerStyle={styles.icon} />
+      <Text style={[styles.title, hmsRoomStyles.title]}>Stream yet to start</Text>
+      <Text style={[styles.description, hmsRoomStyles.description]}>
+        Sit back and relax
       </Text>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  textContainer: {
+  container: {
     flex: 1,
     paddingHorizontal: 24,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  icon: {
+    marginBottom: 24
+  },
   title: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontFamily: 'Inter',
-    fontSize: 28,
-    fontWeight: '600',
+    fontSize: 24,
     lineHeight: 32,
-    letterSpacing: 0.25,
     textAlign: 'center',
   },
   description: {
-    color: COLORS.SURFACE.ON_SURFACE.LOW,
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    lineHeight: 20,
-    letterSpacing: 0.25,
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
     textAlign: 'center',
     marginTop: 8,
   },

package/src/components/HMSManageLeave.tsx

@@ -9,7 +9,6 @@ import {
   useLeaveMethods,
 } from '../hooks-util';
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { ModalTypes } from '../utils/types';
 import { PressableIcon } from './PressableIcon';
 import { BottomSheet } from './BottomSheet';
@@ -42,9 +41,6 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
   const [leaveModalType, setLeaveModalType] = React.useState(
     ModalTypes.DEFAULT
   );
-  const canEndRoom = useSelector(
-    (state: RootState) => state.hmsStates.localPeer?.role?.permissions?.endRoom
-  );
 
   const { leave } = useLeaveMethods();
 
@@ -52,11 +48,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
    * Opens the Leave Popup Menu
    */
   const handleLeaveButtonPress = () => {
-    if (canEndRoom) {
-      setLeavePopVisible(true);
-    } else {
-      setLeaveModalType(ModalTypes.LEAVE_ROOM);
-    }
+    setLeavePopVisible(true);
   };
 
   /**
@@ -95,13 +87,23 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
 
   const dismissModal = () => setLeaveModalType(ModalTypes.DEFAULT);
 
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    button: {
+      backgroundColor: theme.palette.alert_error_default,
+      borderColor: theme.palette.alert_error_default
+    },
+    icon: {
+      tintColor: theme.palette.alert_error_brighter
+    },
+  }));
+
   const leaveIconDelegate =
     'leaveIconDelegate' in props && props.leaveIconDelegate ? (
       props.leaveIconDelegate
     ) : isHLSViewer ? (
-      <LeaveIcon style={{ transform: [{ rotateZ: '180 deg' }] }} />
+      <LeaveIcon style={hmsRoomStyles.icon} />
     ) : (
-      <EndIcon />
+      <EndIcon style={hmsRoomStyles.icon} />
     );
 
   const leaveButtonDelegate =
@@ -115,7 +117,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
     <View>
       {React.cloneElement(leaveButtonDelegate, {
         onPress: handleLeaveButtonPress,
-        style: styles.button,
+        style: hmsRoomStyles.button,
       })}
 
       <LeaveBottomSheet
@@ -140,13 +142,6 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
 // const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
 // const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING
 
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: COLORS.ALERT.ERROR.DEFAULT,
-    borderColor: COLORS.ALERT.ERROR.DEFAULT,
-  },
-});
-
 interface LeaveBottomSheetProps {
   isVisible: boolean;
   onPopupDismiss(): void;
@@ -254,7 +249,6 @@ const leavePopupStyles = StyleSheet.create({
     width: 24,
     height: 24,
     marginRight: 16,
-    transform: [{ rotateY: '180deg' }],
   },
   textContainer: {
     flex: 1,

package/src/components/HMSManageRaiseHand.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
 import { useSelector, shallowEqual } from 'react-redux';
 
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { useHMSActions } from '../hooks-sdk';
 import { PressableIcon } from './PressableIcon';
 import { HandIcon } from '../Icons';
@@ -28,21 +26,9 @@ export const HMSManageRaiseHand = () => {
   return (
     <PressableIcon
       onPress={toggleRaiseHand}
-      style={localPeerMetadata.isHandRaised ? styles.activeButton : undefined}
+      active={localPeerMetadata.isHandRaised}
     >
-      <HandIcon
-        style={localPeerMetadata.isHandRaised ? styles.handRaised : undefined}
-      />
+      <HandIcon />
     </PressableIcon>
   );
 };
-
-const styles = StyleSheet.create({
-  activeButton: {
-    backgroundColor: COLORS.SECONDARY.DIM,
-    borderColor: COLORS.SECONDARY.DIM,
-  },
-  handRaised: {
-    tintColor: COLORS.TWIN.YELLOW,
-  },
-});

package/src/components/HMSRecordingIndicator.tsx

@@ -10,16 +10,18 @@ export const HMSRecordingIndicator = () => {
   const isRecordingOn = useSelector(
     (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
   );
-  const startingOrStoppingRecording = useSelector((state: RootState) => state.app.startingOrStoppingRecording);
+  const startingOrStoppingRecording = useSelector(
+    (state: RootState) => state.app.startingOrStoppingRecording
+  );
 
   const { on_surface_high: onSurfaceHighColor } = useHMSRoomColorPalette();
 
   const iconStyles = useHMSRoomStyle((theme) => ({
-    tintColor: theme.palette.alert_error_default
+    tintColor: theme.palette.alert_error_default,
   }));
 
   if (startingOrStoppingRecording) {
-    return <ActivityIndicator size={"small"} color={onSurfaceHighColor} />
+    return <ActivityIndicator size={'small'} color={onSurfaceHighColor} />;
   }
 
   if (isRecordingOn) {
@@ -27,7 +29,7 @@ export const HMSRecordingIndicator = () => {
   }
 
   return null;
-}
+};
 
 const styles = StyleSheet.create({
   icon: {

package/src/components/Header.tsx

@@ -72,10 +72,10 @@ const styles = StyleSheet.create({
   },
   logoContainer: {
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   logo: {
-    marginRight: 12
+    marginRight: 12,
   },
   controls: {
     flexDirection: 'row',
@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
     marginLeft: 16,
   },
   cameraRotationWrapper: {
-    marginRight: 16
+    marginRight: 16,
   },
 });
 

package/src/components/Meeting.tsx

@@ -74,7 +74,7 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
    * Solution: Try using Tab Gesture detector instead on Pressable component
    */
   return (
-    <SafeAreaView style={[styles.container, containerStyles]}>
+    <SafeAreaView style={[styles.container, containerStyles]} edges={['top', 'left', 'right']}>
       <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
 
       {landscapeChatViewVisible ? <ChatView /> : null}

package/src/components/MeetingScreenContent.tsx

@@ -88,7 +88,7 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
       ]}
       disabled={isHLSViewer || true}
     >
-      <HMSStatusBar hidden={controlsHidden} />
+      <HMSStatusBar hidden={controlsHidden} barStyle={'light-content'} />
 
       {isPipModeActive ? null : <Header offset={offset} />}
 

package/src/components/RoomSettingsModalContent.tsx

@@ -15,7 +15,7 @@ import {
   ScreenShareIcon,
 } from '../Icons';
 import { BottomSheet, useBottomSheetActions } from './BottomSheet';
-import { useHMSInstance, useHMSRoomStyleSheet } from '../hooks-util';
+import { useHMSInstance, useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
 import { useCanPublishScreen, useHMSActions } from '../hooks-sdk';
 import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeContent';
 import { setStartingOrStoppingRecording } from '../redux/actions';
@@ -41,6 +41,7 @@ export const RoomSettingsModalContent: React.FC<
   const dispatch = useDispatch();
   const hmsInstance = useHMSInstance();
   const debugMode = useSelector((state: RootState) => state.user.debugMode);
+  const isHLSViewer = useIsHLSViewer();
 
   const hmsActions = useHMSActions();
 
@@ -184,7 +185,7 @@ export const RoomSettingsModalContent: React.FC<
               label: parsedMetadata.isHandRaised ? 'Hand Raised' : 'Raise Hand',
               pressHandler: toggleRaiseHand,
               isActive: isHandRaised, // Show active if `isHandRaised` is set on metadata
-              hide: false, // Hide if can't publish screen
+              hide: isHLSViewer, // Hide if can't publish screen
             },
             {
               id: 'start-recording',

package/src/components/StatusBar.tsx

@@ -1,22 +1,24 @@
 import * as React from 'react';
 import { StatusBar, Platform } from 'react-native';
+import type { StatusBarProps } from 'react-native';
 
 import { useShowLandscapeLayout } from '../hooks-util';
 
-type HMSStatusBarProps = {
+type HMSStatusBarProps = StatusBarProps & {
   hidden?: boolean;
 };
 
-export const HMSStatusBar: React.FC<HMSStatusBarProps> = ({ hidden }) => {
+export const HMSStatusBar: React.FC<HMSStatusBarProps> = ({ hidden, ...resetProps }) => {
   const showLandscapeLayout = useShowLandscapeLayout();
 
   return (
     <StatusBar
+      {...resetProps}
       hidden={(Platform.OS === 'ios' && hidden) || showLandscapeLayout} // use `hidden` prop to hide Status bar on iOS
       barStyle={
-        Platform.OS === 'android' && hidden ? 'dark-content' : 'default'
+        Platform.OS === 'android' && hidden ? 'dark-content' : resetProps.barStyle
       } // hack: use `dark-content` value to make StatusBar look like it's hidden
-      animated={true}
+      animated={resetProps.animated ?? true}
     />
   );
 };

package/src/components/StopRecordingModalContent.tsx

@@ -17,7 +17,9 @@ export const StopRecordingModalContent: React.FC<
 > = ({ dismissModal }) => {
   const dispatch = useDispatch();
   const hmsInstance = useHMSInstance();
-  const startingOrStoppingRecording = useSelector((state: RootState) => state.app.startingOrStoppingRecording);
+  const startingOrStoppingRecording = useSelector(
+    (state: RootState) => state.app.startingOrStoppingRecording
+  );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     headerText: {