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

package/src/components/HMSPreviewPeersList.tsx

@@ -2,23 +2,38 @@ import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 
 export interface HMSPreviewPeersListProps {}
 
 export const HMSPreviewPeersList: React.FC<HMSPreviewPeersListProps> = () => {
-  const previewPeersList = useSelector(
-    (state: RootState) => state.hmsStates.previewPeersList
+  const previewPeerCount = useSelector(
+    (state: RootState) => state.hmsStates.room?.peerCount
   );
 
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_default,
+      borderColor: theme.palette.border_default,
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  if (typeof previewPeerCount !== 'number') {
+    return null;
+  }
+
   return (
-    <View style={styles.container}>
-      <Text style={[styles.text, styles.textSpacer]}>
-        {previewPeersList.length === 0
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <Text style={[styles.text, hmsRoomStyles.text, styles.textSpacer]}>
+        {previewPeerCount <= 0
           ? 'You are the first to join'
-          : `${previewPeersList.length} ${
-              previewPeersList.length > 1 ? 'others' : 'other'
+          : `${previewPeerCount} ${
+              previewPeerCount > 1 ? 'others' : 'other'
             } in session`}
       </Text>
     </View>
@@ -28,18 +43,13 @@ export const HMSPreviewPeersList: React.FC<HMSPreviewPeersListProps> = () => {
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
-    backgroundColor: COLORS.SURFACE.DEFAULT,
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 20,
-    borderColor: COLORS.BORDER.DEFAULT,
     borderWidth: 1,
   },
   text: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 24,
   },
   textSpacer: {

package/src/components/HMSPreviewSubtitle.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
+import { useSelector } from 'react-redux';
 import { StyleSheet, Text } from 'react-native';
+import type { StyleProp, TextStyle } from 'react-native';
 
-import { COLORS } from '../utils/theme';
 import { useCanPublishAudio, useCanPublishVideo } from '../hooks-sdk';
+import { useHMSRoomStyle } from '../hooks-util';
+import type { RootState } from '../redux';
 
 export interface HMSPreviewSubtitleProps {
   subtitle?: string;
@@ -14,35 +17,48 @@ export const HMSPreviewSubtitle: React.FC<HMSPreviewSubtitleProps> = ({
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
 
+  const hmsRoomPreviewSubtitle = useSelector((state: RootState) => {
+    const layoutConfig = state.hmsStates.layoutConfig;
+
+    return layoutConfig?.screens?.preview?.default?.elements?.preview_header
+      ?.sub_title;
+  });
+
+  const titleStyles = useHMSRoomStyle((theme, typography) => ({
+    color: theme.palette.on_surface_medium,
+    fontFamily: `${typography.font_family}-Regular`,
+  }));
+
+  const textStyles: StyleProp<TextStyle> = [styles.title, titleStyles];
+
   if (subtitle) {
-    return <Text style={styles.title}>{subtitle}</Text>;
+    return <Text style={textStyles}>{subtitle}</Text>;
+  }
+
+  if (hmsRoomPreviewSubtitle) {
+    return <Text style={textStyles}>{hmsRoomPreviewSubtitle}</Text>;
   }
 
   if (canPublishAudio && canPublishVideo) {
     return (
-      <Text style={styles.title}>
-        Setup your audio and video before joining
-      </Text>
+      <Text style={textStyles}>Setup your audio and video before joining</Text>
     );
   }
 
   if (canPublishAudio) {
-    return <Text style={styles.title}>Setup your audio before joining</Text>;
+    return <Text style={textStyles}>Setup your audio before joining</Text>;
   }
 
   if (canPublishVideo) {
-    return <Text style={styles.title}>Setup your video before joining</Text>;
+    return <Text style={textStyles}>Setup your video before joining</Text>;
   }
 
-  return <Text style={styles.title}>Enter your name before joining</Text>;
+  return <Text style={textStyles}>Enter your name before joining</Text>;
 };
 
 const styles = StyleSheet.create({
   title: {
-    color: COLORS.SURFACE.ON_SURFACE.MEDIUM,
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
     lineHeight: 20,
     marginTop: 4,
     textAlign: 'center',

package/src/components/HMSPreviewTile.tsx

@@ -7,6 +7,7 @@ import type { RootState } from '../redux';
 import { getInitials } from '../utils/functions';
 import { COLORS } from '../utils/theme';
 import { HMSLocalVideoView } from './HMSLocalVideoView';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 
 export const HMSPreviewTile: React.FC = () => {
   const isLocalVideoMuted = useSelector(
@@ -17,15 +18,30 @@ export const HMSPreviewTile: React.FC = () => {
   );
   const userName = useSelector((state: RootState) => state.user.userName);
 
+  const roomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.background_dim,
+    },
+    avatar: {
+      backgroundColor: COLORS.EXTENDED.PURPLE,
+    },
+    avatarText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
   return (
-    <View style={styles.modalContainer}>
+    <View style={[styles.modalContainer, roomStyles.container]}>
       {isLocalVideoMuted || !localVideoTrackId ? (
         <View style={styles.avatarContainer}>
-          <View style={styles.avatar}>
+          <View style={[styles.avatar, roomStyles.avatar]}>
             {userName.length === 0 ? (
               <PersonIcon style={styles.avatarIcon} />
             ) : (
-              <Text style={styles.avatarText}>{getInitials(userName)}</Text>
+              <Text style={[styles.avatarText, roomStyles.avatarText]}>
+                {getInitials(userName)}
+              </Text>
             )}
           </View>
         </View>
@@ -40,7 +56,6 @@ const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
     position: 'relative',
-    backgroundColor: COLORS.BACKGROUND.DIM,
     overflow: 'hidden',
   },
   hmsView: {
@@ -54,7 +69,6 @@ const styles = StyleSheet.create({
   avatar: {
     width: 88,
     aspectRatio: 1,
-    backgroundColor: COLORS.EXTENDED.PURPLE,
     borderRadius: 44,
     justifyContent: 'center',
     alignItems: 'center',
@@ -64,10 +78,7 @@ const styles = StyleSheet.create({
     height: 40,
   },
   avatarText: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 34,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 40,
     letterSpacing: 0.25,
   },

package/src/components/HMSPreviewTitle.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { StyleSheet, Text } from 'react-native';
+import { useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
+import { useHMSRoomStyle } from '../hooks-util';
+import type { RootState } from '../redux';
 
 export interface HMSPreviewTitleProps {
   title?: string;
@@ -10,15 +12,26 @@ export interface HMSPreviewTitleProps {
 export const HMSPreviewTitle: React.FC<HMSPreviewTitleProps> = ({
   title = 'Get Started',
 }) => {
-  return <Text style={styles.title}>{title}</Text>;
+  const hmsRoomPreviewTitle = useSelector((state: RootState) => {
+    const layoutConfig = state.hmsStates.layoutConfig;
+
+    const previewTitle =
+      layoutConfig?.screens?.preview?.default?.elements?.preview_header?.title;
+
+    return previewTitle || title;
+  });
+
+  const titleStyles = useHMSRoomStyle((theme, typography) => ({
+    color: theme.palette.on_surface_high,
+    fontFamily: `${typography.font_family}-SemiBold`,
+  }));
+
+  return <Text style={[styles.title, titleStyles]}>{hmsRoomPreviewTitle}</Text>;
 };
 
 const styles = StyleSheet.create({
   title: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 24,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 32,
     textAlign: 'center',
   },

package/src/components/HMSPrimaryButton.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
+import { HMSBaseButton } from './HMSBaseButton';
+
+export interface HMSPrimaryButtonProps {
+  title: string;
+  loading: boolean;
+  onPress(): void;
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  leftComponent?: React.ReactElement | null;
+}
+
+export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
+  title,
+  loading,
+  onPress,
+  style,
+  disabled,
+  leftComponent,
+}) => {
+  const { primary_dim: primaryDarkColor, on_primary_high: onPrimaryHighColor } =
+    useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.primary_default,
+    },
+    disabledButton: {
+      backgroundColor: theme.palette.primary_disabled,
+    },
+    buttonText: {
+      color: theme.palette.on_primary_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    disabledText: {
+      color: theme.palette.on_primary_low,
+    },
+  }));
+
+  return (
+    <HMSBaseButton
+      loaderColor={onPrimaryHighColor}
+      loading={loading}
+      onPress={onPress}
+      title={title}
+      underlayColor={primaryDarkColor}
+      disabled={disabled}
+      leftComponent={leftComponent}
+      style={[
+        hmsRoomStyles.button,
+        disabled ? hmsRoomStyles.disabledButton : null,
+        style,
+      ]}
+      textStyle={[
+        hmsRoomStyles.buttonText,
+        disabled ? hmsRoomStyles.disabledText : null,
+      ]}
+    />
+  );
+};

package/src/components/HMSRecordingIndicator.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+
+import type { RootState } from '../redux';
+import { RecordingIcon } from '../Icons';
+import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
+
+export const HMSRecordingIndicator = () => {
+  const isRecordingOn = useSelector(
+    (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
+  );
+  const startingOrStoppingRecording = useSelector((state: RootState) => state.app.startingOrStoppingRecording);
+
+  const { on_surface_high: onSurfaceHighColor } = useHMSRoomColorPalette();
+
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.alert_error_default
+  }));
+
+  if (startingOrStoppingRecording) {
+    return <ActivityIndicator size={"small"} color={onSurfaceHighColor} />
+  }
+
+  if (isRecordingOn) {
+    return <RecordingIcon style={[styles.icon, iconStyles]} />;
+  }
+
+  return null;
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+  },
+});

package/src/components/HMSRoomOptions.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { HMSAudioMixingMode, HMSAudioMode } from '@100mslive/react-native-hms';
 
 import { PressableIcon } from './PressableIcon';
-import { ThreeDotsIcon } from '../Icons';
+import { HamburgerIcon } from '../Icons';
 import { DefaultModal } from './DefaultModal';
 import { RoomSettingsModalContent } from './RoomSettingsModalContent';
 import {
@@ -18,6 +18,9 @@ import {
 } from './Modals';
 import { ModalTypes } from '../utils/types';
 import { useModalType } from '../hooks-util';
+import { BottomSheet } from './BottomSheet';
+import { ChangeNameModalContent } from './ChangeNameModalContent';
+import { StopRecordingModalContent } from './StopRecordingModalContent';
 
 interface HMSRoomOptionsProps {}
 
@@ -44,14 +47,13 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
   return (
     <View>
       <PressableIcon onPress={onSettingsPress}>
-        <ThreeDotsIcon stack="vertical" />
+        <HamburgerIcon />
       </PressableIcon>
 
-      <DefaultModal
-        animationIn={'slideInUp'}
-        animationOut={'slideOutDown'}
-        modalVisible={modalVisible === ModalTypes.SETTINGS}
-        setModalVisible={dismissModal}
+      <BottomSheet
+        isVisible={modalVisible === ModalTypes.SETTINGS}
+        dismissModal={dismissModal}
+        animationOutTiming={700}
       >
         <RoomSettingsModalContent
           newAudioMixingMode={newAudioMixingMode}
@@ -64,7 +66,25 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
           setIsAudioShared={setIsAudioShared}
           setMuteAllTracksAudio={setMuteAllTracksAudio}
         />
-      </DefaultModal>
+      </BottomSheet>
+
+      <BottomSheet
+        isVisible={modalVisible === ModalTypes.CHANGE_NAME}
+        dismissModal={dismissModal}
+        avoidKeyboard={true}
+        animationOutTiming={700}
+      >
+        <ChangeNameModalContent dismissModal={dismissModal} />
+      </BottomSheet>
+
+      <BottomSheet
+        isVisible={modalVisible === ModalTypes.STOP_RECORDING}
+        dismissModal={dismissModal}
+        animationOutTiming={800}
+      >
+        <StopRecordingModalContent dismissModal={dismissModal} />
+      </BottomSheet>
+
       <DefaultModal
         animationIn={'slideInUp'}
         animationOut={'slideOutDown'}

package/src/components/HMSShowNetworkQuality.tsx

@@ -3,9 +3,8 @@ import { useSelector } from 'react-redux';
 import { StyleSheet, Image } from 'react-native';
 
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { CustomButton } from './CustomButton';
-import { useHMSInstance } from '../hooks-util';
+import { useHMSInstance, useHMSRoomStyle } from '../hooks-util';
 
 export const HMSShowNetworkQuality = () => {
   const hmsInstance = useHMSInstance();
@@ -20,11 +19,16 @@ export const HMSShowNetworkQuality = () => {
     return () => hmsInstance.disableNetworkQualityUpdates();
   }, [hmsInstance]);
 
+  const iconContainer = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.border_bright,
+    borderColor: theme.palette.border_bright,
+  }));
+
   return (
     <CustomButton
       onPress={() => {}}
       disabled={true}
-      viewStyle={styles.singleIconContainer}
+      viewStyle={[styles.singleIconContainer, iconContainer]}
       LeftIcon={
         <Image
           resizeMode="contain"
@@ -53,8 +57,6 @@ const styles = StyleSheet.create({
   },
   singleIconContainer: {
     padding: 8,
-    backgroundColor: COLORS.BORDER.LIGHT,
-    borderColor: COLORS.BORDER.LIGHT,
     borderWidth: 1,
     width: 'auto',
     height: 48,

package/src/components/HMSTextInput.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Platform, StyleSheet, TextInput } from 'react-native';
+import type { StyleProp, TextStyle } from 'react-native';
+
+import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
+
+export interface HMSTextInputProps {
+  value: string;
+  onChangeText(text: string): void;
+  style?: StyleProp<TextStyle>;
+  autoFocus?: boolean;
+}
+
+export const HMSTextInput: React.FC<HMSTextInputProps> = ({
+  value,
+  onChangeText,
+  style,
+  autoFocus,
+}) => {
+  const [inputFocused, setInputFocused] = React.useState(false);
+
+  const handleInputFocus = () => setInputFocused(true);
+
+  const handleInputBlur = () => setInputFocused(false);
+
+  const {
+    on_surface_low: onSurfaceLowColor,
+    on_surface_high: onSurfaceHighColor,
+  } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    input: {
+      backgroundColor: theme.palette.surface_default,
+      color: theme.palette.on_surface_high,
+      borderColor: theme.palette.surface_default,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    focusedInput: {
+      borderColor: theme.palette.primary_default,
+      borderWidth: 2,
+    },
+  }));
+
+  return (
+    <TextInput
+      style={[
+        styles.input,
+        hmsRoomStyles.input,
+        inputFocused ? hmsRoomStyles.focusedInput : null,
+        style,
+      ]}
+      value={value}
+      onChangeText={onChangeText}
+      placeholder="Enter Name..."
+      autoCapitalize="words"
+      autoCompleteType="name"
+      placeholderTextColor={onSurfaceLowColor}
+      selectionColor={onSurfaceHighColor}
+      onFocus={handleInputFocus}
+      onBlur={handleInputBlur}
+      autoFocus={autoFocus}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    flex: 1,
+    height: 50,
+    textAlignVertical: 'center',
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    fontSize: 16,
+    lineHeight: Platform.OS === 'android' ? 24 : undefined,
+    letterSpacing: 0.5,
+    borderWidth: 2,
+  },
+});

package/src/components/Header.tsx

@@ -1,18 +1,16 @@
 import React, { memo } from 'react';
-import { View, StyleSheet, Text } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import Animated, {
   useAnimatedProps,
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
-import { COLORS } from '../utils/theme';
-import { HMSManageLeave } from './HMSManageLeave';
 import { HMSManageCameraRotation } from './HMSManageCameraRotation';
-import { useIsHLSViewer } from '../hooks-util';
-import { HmsLogoIcon } from '../Icons';
-import { useSelector } from 'react-redux';
-import type { RootState } from '../redux';
+import { useHMSRoomStyle, useIsHLSViewer } from '../hooks-util';
+import { HMSManageAudioOutput } from './HMSManageAudioOutput';
+import { HMSRecordingIndicator } from './HMSRecordingIndicator';
+import { CompanyLogo } from './CompanyLogo';
 
 interface HeaderProps {
   offset: SharedValue<number>;
@@ -20,10 +18,7 @@ interface HeaderProps {
 
 export const _Header: React.FC<HeaderProps> = ({ offset }) => {
   const isHLSViewer = useIsHLSViewer();
-  const roomName = useSelector(
-    (state: RootState) => state.hmsStates.room?.name
-  );
-  const debugMode = useSelector((state: RootState) => state.user.debugMode);
+
   const animatedStyles = useAnimatedStyle(() => {
     return {
       opacity: offset.value,
@@ -39,50 +34,56 @@ export const _Header: React.FC<HeaderProps> = ({ offset }) => {
     };
   }, []);
 
+  const containerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.background_dim,
+  }));
+
   return (
     <Animated.View style={animatedStyles} animatedProps={animatedProps}>
-      {isHLSViewer ? (
-        <View style={styles.hlsContainer}>
-          <HmsLogoIcon />
+      <View style={[styles.container, containerStyles]}>
+        <View style={styles.logoContainer}>
+          <CompanyLogo style={styles.logo} />
 
-          {debugMode && roomName ? (
-            <Text style={styles.roomName}>{roomName}</Text>
-          ) : null}
+          <HMSRecordingIndicator />
         </View>
-      ) : (
-        <View style={styles.container}>
-          <HMSManageLeave />
-          <HMSManageCameraRotation />
+
+        <View style={styles.controls}>
+          {isHLSViewer ? null : (
+            <View style={styles.cameraRotationWrapper}>
+              <HMSManageCameraRotation />
+            </View>
+          )}
+
+          <HMSManageAudioOutput />
         </View>
-      )}
+      </View>
     </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 8,
+    paddingTop: 8,
+    paddingBottom: 16,
     paddingHorizontal: 16,
-    backgroundColor: COLORS.BACKGROUND.DIM,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
   },
-  hlsContainer: {
-    padding: 16,
-    paddingTop: 8,
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  logo: {
+    marginRight: 12
+  },
+  controls: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginLeft: 16,
   },
-  roomName: {
-    flex: 1,
-    fontFamily: 'Inter',
-    fontSize: 15,
-    fontWeight: '500',
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    lineHeight: 20,
-    letterSpacing: 0.1,
-    marginLeft: 24,
+  cameraRotationWrapper: {
+    marginRight: 16
   },
 });
 

package/src/components/LocalPeerRegularVideoView.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+
+import { PeerVideoTileView } from './PeerVideoTile/PeerVideoTileView';
+import type { PeerVideoTileViewProps } from './PeerVideoTile/PeerVideoTileView';
+import type { RootState } from '../redux';
+
+export interface LocalPeerRegularVideoViewProps
+  extends Omit<PeerVideoTileViewProps, 'peerTrackNode'> {}
+
+export const LocalPeerRegularVideoView: React.FC<
+  LocalPeerRegularVideoViewProps
+> = ({ onMoreOptionsPress }) => {
+  const localPeerTrackNode = useSelector(
+    (state: RootState) => state.app.localPeerTrackNode
+  );
+
+  if (!localPeerTrackNode) {
+    return null;
+  }
+
+  return (
+    <PeerVideoTileView
+      peerTrackNode={localPeerTrackNode}
+      onMoreOptionsPress={onMoreOptionsPress}
+    />
+  );
+};