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

package/src/components/HMSMeetingEnded.tsx

@@ -22,8 +22,7 @@ const styles = StyleSheet.create({
   title: {
     color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 24,
-    fontFamily: 'Inter',
-    fontWeight: '600',
+    fontFamily: 'Inter-SemiBold',
     lineHeight: 32,
   },
 });

package/src/components/HMSPreviewEditName.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { Platform, StyleSheet, TextInput } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { changeUsername } from '../redux/actions';
 import { useHMSConfig } from '../hooks-util';
+import { HMSTextInput } from './HMSTextInput';
 
 export interface HMSPreviewEditNameProps {}
 
@@ -13,52 +12,11 @@ export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
   const dispatch = useDispatch();
   const { updateConfig } = useHMSConfig();
   const userName = useSelector((state: RootState) => state.user.userName);
-  const [inputFocused, setInputFocused] = React.useState(false);
 
   const handleNameChange = (name: string) => {
     dispatch(changeUsername(name));
     updateConfig({ username: name });
   };
 
-  const handleInputFocus = () => setInputFocused(true);
-
-  const handleInputBlur = () => setInputFocused(false);
-
-  return (
-    <TextInput
-      style={[styles.input, inputFocused ? styles.focusedInput : null]}
-      value={userName}
-      onChangeText={handleNameChange}
-      placeholder="Enter Name..."
-      autoCapitalize="words"
-      autoCompleteType="name"
-      placeholderTextColor={COLORS.SURFACE.ON_SURFACE.LOW}
-      selectionColor={COLORS.SURFACE.ON_SURFACE.HIGH}
-      onFocus={handleInputFocus}
-      onBlur={handleInputBlur}
-    />
-  );
+  return <HMSTextInput value={userName} onChangeText={handleNameChange} />;
 };
-
-const styles = StyleSheet.create({
-  input: {
-    flex: 1,
-    height: 50,
-    textAlignVertical: 'center',
-    backgroundColor: COLORS.SURFACE.DEFAULT,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 16,
-    lineHeight: Platform.OS === 'android' ? 24 : undefined,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    letterSpacing: 0.5,
-    borderWidth: 2,
-    borderColor: COLORS.SURFACE.DEFAULT,
-  },
-  focusedInput: {
-    borderColor: COLORS.PRIMARY.DEFAULT,
-    borderWidth: 2,
-  },
-});

package/src/components/HMSPreviewHLSLiveIndicator.tsx

@@ -2,24 +2,37 @@ import * as React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
+import { useHMSRoomStyleSheet } from '../hooks-util';
 
 export const HMSPreviewHLSLiveIndicator = () => {
   const isHLSStreaming = useSelector(
     (state: RootState) => state.hmsStates.room?.hlsStreamingState?.running
   );
 
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.alert_error_default,
+    },
+    circle: {
+      backgroundColor: theme.palette.on_surface_high,
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
   if (!isHLSStreaming) {
     return null;
   }
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, hmsRoomStyles.container]}>
       <View style={styles.circleContainer}>
-        <View style={styles.circle} />
+        <View style={[styles.circle, hmsRoomStyles.circle]} />
       </View>
-      <Text style={styles.text}>LIVE</Text>
+      <Text style={[styles.text, hmsRoomStyles.text]}>LIVE</Text>
     </View>
   );
 };
@@ -29,7 +42,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     borderRadius: 20,
-    backgroundColor: COLORS.ALERT.ERROR.DEFAULT,
     paddingLeft: 8,
     paddingRight: 12,
     marginRight: 8,
@@ -44,14 +56,10 @@ const styles = StyleSheet.create({
     width: 12,
     height: 12,
     borderRadius: 6,
-    backgroundColor: COLORS.WHITE,
   },
   text: {
     marginLeft: 4,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
     lineHeight: 20,
     letterSpacing: 0.25,
   },

package/src/components/HMSPreviewJoinButton.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react';
-import {
-  ActivityIndicator,
-  StyleSheet,
-  Text,
-  TouchableHighlight,
-} from 'react-native';
-import { useSelector } from 'react-redux';
+import { StyleSheet } from 'react-native';
+import { shallowEqual, useSelector } from 'react-redux';
 
-import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { RadioIcon } from '../Icons';
-import { useShouldGoLive } from '../hooks-util';
+import { useHMSRoomStyle, useShouldGoLive } from '../hooks-util';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
 
 export interface HMSPreviewJoinButtonProps {
   onJoin(): void;
@@ -25,80 +20,47 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
     (state: RootState) => state.user.userName.length <= 0
   );
 
+  const joinButtonLabels = useSelector((state: RootState) => {
+    const layoutConfig = state.hmsStates.layoutConfig;
+    const joinLayoutConfig =
+      layoutConfig?.screens?.preview?.default?.elements?.join_form;
+
+    return {
+      joinBtnLabel: joinLayoutConfig?.join_btn_label || 'Join Now',
+      goLiveBtnLabel: joinLayoutConfig?.go_live_btn_label || 'Go Live',
+    };
+  }, shallowEqual);
+
   const shouldGoLive = useShouldGoLive();
 
+  const liveIconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_primary_low,
+  }));
+
   const disabledJoin = userNameInvalid || loading;
 
   return (
-    <TouchableHighlight
-      underlayColor={COLORS.PRIMARY.DARK}
-      style={[styles.button, disabledJoin ? styles.disabledButton : null]}
+    <HMSPrimaryButton
+      loading={loading}
       onPress={onJoin}
+      title={
+        shouldGoLive
+          ? joinButtonLabels.goLiveBtnLabel
+          : joinButtonLabels.joinBtnLabel
+      }
       disabled={disabledJoin}
-    >
-      <>
-        {loading ? (
-          <ActivityIndicator
-            size={'small'}
-            color={COLORS.BASE.WHITE}
-            style={styles.loader}
-          />
-        ) : null}
-
-        {shouldGoLive ? (
-          <RadioIcon
-            style={[
-              loading ? styles.hiddenView : null,
-              disabledJoin ? styles.disabledIcon : null,
-            ]}
-          />
-        ) : null}
-
-        <Text
-          style={[
-            styles.text,
-            loading ? styles.hiddenView : null,
-            disabledJoin ? styles.disabledText : null,
-          ]}
-        >
-          {shouldGoLive ? 'Go Live' : 'Join Now'}
-        </Text>
-      </>
-    </TouchableHighlight>
+      leftComponent={
+        shouldGoLive ? (
+          <RadioIcon style={disabledJoin ? liveIconStyles : null} />
+        ) : null
+      }
+      style={styles.button}
+    />
   );
 };
 
 const styles = StyleSheet.create({
   button: {
-    flexDirection: 'row',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    borderRadius: 8,
-    backgroundColor: COLORS.PRIMARY.DEFAULT,
     marginLeft: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    color: COLORS.BASE.WHITE,
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    lineHeight: 24,
-    letterSpacing: 0.5,
-    marginHorizontal: 8,
-  },
-  loader: { position: 'absolute' },
-  disabledButton: {
-    backgroundColor: COLORS.PRIMARY.DISABLED,
-  },
-  disabledIcon: {
-    tintColor: COLORS.PRIMARY.ON_PRIMARY.LOW,
-  },
-  disabledText: {
-    color: COLORS.PRIMARY.ON_PRIMARY.LOW,
-  },
-  hiddenView: {
-    opacity: 0,
   },
 });

package/src/components/HMSPreviewNetworkQuality.tsx

@@ -3,9 +3,9 @@ import { View, StyleSheet } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { NetworkQualityIcon } from '../Icons';
-import { COLORS } from '..//utils/theme';
+import { hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
-import { useHMSInstance } from '../hooks-util';
+import { useHMSInstance, useHMSRoomStyle } from '../hooks-util';
 
 export const HMSPreviewNetworkQuality = () => {
   const hmsInstance = useHMSInstance();
@@ -20,8 +20,12 @@ export const HMSPreviewNetworkQuality = () => {
     return () => hmsInstance.disableNetworkQualityUpdates();
   }, []);
 
+  const containerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: hexToRgbA(theme.palette.background_dim, 0.8),
+  }));
+
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, containerStyles]}>
       <NetworkQualityIcon quality={localPeerNetworkQuality} />
     </View>
   );
@@ -34,7 +38,6 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     paddingVertical: 4,
     paddingHorizontal: 8,
-    backgroundColor: COLORS.BACKGROUND.DIM_80,
     alignSelf: 'flex-start',
   },
 });

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,39 @@
+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,
+  },
+});