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

package/src/components/HMSPreviewJoinButton.tsx

@@ -1,14 +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 { useHMSRoomStyle, useShouldGoLive } from '../hooks-util';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
 
 export interface HMSPreviewJoinButtonProps {
   onJoin(): void;
@@ -23,59 +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 ? { backgroundColor: COLORS.PRIMARY.DISABLED } : 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}
-
-        <Text
-          style={[
-            styles.text,
-            { opacity: loading ? 0 : undefined },
-            disabledJoin ? { color: COLORS.PRIMARY.ON_PRIMARY.LOW } : null,
-          ]}
-        >
-          Join Now
-        </Text>
-      </>
-    </TouchableHighlight>
+      leftComponent={
+        shouldGoLive ? (
+          <RadioIcon style={disabledJoin ? liveIconStyles : null} />
+        ) : null
+      }
+      style={styles.button}
+    />
   );
 };
 
 const styles = StyleSheet.create({
   button: {
-    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' },
 });

package/src/components/HMSPreviewNetworkQuality.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { NetworkQualityIcon } from '../Icons';
+import { hexToRgbA } from '../utils/theme';
+import type { RootState } from '../redux';
+import { useHMSInstance, useHMSRoomStyle } from '../hooks-util';
+
+export const HMSPreviewNetworkQuality = () => {
+  const hmsInstance = useHMSInstance();
+  const localPeerNetworkQuality = useSelector(
+    (state: RootState) =>
+      state.hmsStates.localPeer?.networkQuality?.downlinkQuality
+  );
+
+  React.useEffect(() => {
+    hmsInstance.enableNetworkQualityUpdates();
+
+    return () => hmsInstance.disableNetworkQualityUpdates();
+  }, []);
+
+  const containerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: hexToRgbA(theme.palette.background_dim, 0.8),
+  }));
+
+  return (
+    <View style={[styles.container, containerStyles]}>
+      <NetworkQualityIcon quality={localPeerNetworkQuality} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: 8,
+    marginBottom: 8,
+    borderRadius: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    alignSelf: 'flex-start',
+  },
+});

package/src/components/HMSPreviewPeersList.tsx

@@ -1,87 +1,58 @@
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useSelector } from 'react-redux';
-import type { HMSPeer } from '@100mslive/react-native-hms';
 
-import { COLORS } from '../utils/theme';
-import { ParticipantsIcon } from '../Icons';
 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
   );
 
-  return (
-    <View style={styles.container}>
-      {previewPeersList.length > 0 ? <ParticipantsIcon /> : null}
+  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`,
+    },
+  }));
 
-      {previewPeersList.length === 0 ? (
-        <Text style={[styles.text, styles.textSpacer]}>
-          You are the first to join
-        </Text>
-      ) : previewPeersList.length === 1 ? (
-        <Text style={[styles.text, styles.textSpacer]}>
-          {previewPeersList[0]!.name} has joined
-        </Text>
-      ) : (
-        <View style={styles.multiTextContainer}>
-          <Text
-            style={[styles.text, styles.flexView]}
-            ellipsizeMode="tail"
-            numberOfLines={1}
-          >
-            {previewPeersList
-              .slice(0, 2)
-              .map((peer: HMSPeer) => peer.name)
-              .join(', ')}
-          </Text>
+  if (typeof previewPeerCount !== 'number') {
+    return null;
+  }
 
-          {previewPeersList.length - 2 > 0 ? (
-            <Text style={styles.text}>
-              {' '}
-              +{previewPeersList.length - 2}{' '}
-              {previewPeersList.length - 2 > 1 ? 'others' : 'other'}
-            </Text>
-          ) : null}
-        </View>
-      )}
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <Text style={[styles.text, hmsRoomStyles.text, styles.textSpacer]}>
+        {previewPeerCount <= 0
+          ? 'You are the first to join'
+          : `${previewPeerCount} ${
+              previewPeerCount > 1 ? 'others' : 'other'
+            } in session`}
+      </Text>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: COLORS.SURFACE.DEFAULT,
-    marginTop: 16,
-    alignSelf: 'center',
     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: {
     marginHorizontal: 8,
   },
-  flexView: {
-    flex: 1,
-    flexShrink: 1,
-  },
-  multiTextContainer: {
-    flexDirection: 'row',
-    marginHorizontal: 8,
-    maxWidth: '70%',
-  },
 });

package/src/components/HMSPreviewSubtitle.tsx

@@ -1,24 +1,64 @@
 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;
 }
 
 export const HMSPreviewSubtitle: React.FC<HMSPreviewSubtitleProps> = ({
-  subtitle = 'Setup your audio and video before joining',
+  subtitle,
 }) => {
-  return <Text style={styles.title}>{subtitle}</Text>;
+  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={textStyles}>{subtitle}</Text>;
+  }
+
+  if (hmsRoomPreviewSubtitle) {
+    return <Text style={textStyles}>{hmsRoomPreviewSubtitle}</Text>;
+  }
+
+  if (canPublishAudio && canPublishVideo) {
+    return (
+      <Text style={textStyles}>Setup your audio and video before joining</Text>
+    );
+  }
+
+  if (canPublishAudio) {
+    return <Text style={textStyles}>Setup your audio before joining</Text>;
+  }
+
+  if (canPublishVideo) {
+    return <Text style={textStyles}>Setup your video 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

@@ -1,23 +1,15 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { HMSVideoViewMode } from '@100mslive/react-native-hms';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { PersonIcon } from '../Icons';
-import { useHMSInstance } from '../hooks-util';
 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 hmsInstance = useHMSInstance();
-  const HmsView = hmsInstance.HmsView;
-  const mirrorCamera = useSelector(
-    (state: RootState) => state.app.joinConfig.mirrorCamera
-  );
-  const autoSimulcast = useSelector(
-    (state: RootState) => state.app.joinConfig.autoSimulcast
-  );
   const isLocalVideoMuted = useSelector(
     (state: RootState) => state.hmsStates.isLocalVideoMuted
   );
@@ -26,33 +18,35 @@ export const HMSPreviewTile: React.FC = () => {
   );
   const userName = useSelector((state: RootState) => state.user.userName);
 
-  React.useEffect(() => {
-    hmsInstance.enableNetworkQualityUpdates();
-
-    return () => hmsInstance.disableNetworkQualityUpdates();
-  }, []);
+  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>
       ) : (
-        <HmsView
-          trackId={localVideoTrackId}
-          key={localVideoTrackId}
-          mirror={mirrorCamera}
-          autoSimulcast={autoSimulcast}
-          scaleType={HMSVideoViewMode.ASPECT_FILL}
-          style={styles.hmsView}
-        />
+        <HMSLocalVideoView />
       )}
     </View>
   );
@@ -62,7 +56,6 @@ const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
     position: 'relative',
-    backgroundColor: COLORS.BACKGROUND.DIM,
     overflow: 'hidden',
   },
   hmsView: {
@@ -76,7 +69,6 @@ const styles = StyleSheet.create({
   avatar: {
     width: 88,
     aspectRatio: 1,
-    backgroundColor: COLORS.EXTENDED.PURPLE,
     borderRadius: 44,
     justifyContent: 'center',
     alignItems: 'center',
@@ -86,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'}
@@ -75,16 +95,10 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
       </DefaultModal>
       <DefaultModal
         modalPosiion="center"
-        modalVisible={
-          modalVisible === ModalTypes.RECORDING ||
-          modalVisible === ModalTypes.RESOLUTION
-        }
+        modalVisible={modalVisible === ModalTypes.RECORDING}
         setModalVisible={dismissModal}
       >
-        <RecordingModal
-          setModalVisible={setModalVisible}
-          recordingModal={modalVisible === ModalTypes.RECORDING}
-        />
+        <RecordingModal setModalVisible={setModalVisible} />
       </DefaultModal>
       <DefaultModal
         modalPosiion="center"