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

package/src/components/HMSPreviewJoinButton.tsx

@@ -4,7 +4,11 @@ import { shallowEqual, useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
 import { RadioIcon } from '../Icons';
-import { useHMSRoomStyle, useShouldGoLive } from '../hooks-util';
+import {
+  useHMSLayoutConfig,
+  useHMSRoomStyleSheet,
+  useShouldGoLive,
+} from '../hooks-util';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
 
 export interface HMSPreviewJoinButtonProps {
@@ -20,8 +24,7 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
     (state: RootState) => state.user.userName.length <= 0
   );
 
-  const joinButtonLabels = useSelector((state: RootState) => {
-    const layoutConfig = state.hmsStates.layoutConfig;
+  const joinButtonLabels = useHMSLayoutConfig((layoutConfig) => {
     const joinLayoutConfig =
       layoutConfig?.screens?.preview?.default?.elements?.join_form;
 
@@ -33,8 +36,13 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
 
   const shouldGoLive = useShouldGoLive();
 
-  const liveIconStyles = useHMSRoomStyle((theme) => ({
-    tintColor: theme.palette.on_primary_low,
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    disabledLiveIcon: {
+      tintColor: theme.palette.on_primary_low,
+    },
+    activeLiveIcon: {
+      tintColor: theme.palette.on_primary_high,
+    },
   }));
 
   const disabledJoin = userNameInvalid || loading;
@@ -51,7 +59,13 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
       disabled={disabledJoin}
       leftComponent={
         shouldGoLive ? (
-          <RadioIcon style={disabledJoin ? liveIconStyles : null} />
+          <RadioIcon
+            style={
+              disabledJoin
+                ? hmsRoomStyles.disabledLiveIcon
+                : hmsRoomStyles.activeLiveIcon
+            }
+          />
         ) : null
       }
       style={styles.button}

package/src/components/HMSPreviewNetworkQuality.tsx

@@ -21,7 +21,9 @@ export const HMSPreviewNetworkQuality = () => {
   }, []);
 
   const containerStyles = useHMSRoomStyle((theme) => ({
-    backgroundColor: hexToRgbA(theme.palette.background_dim, 0.8),
+    backgroundColor:
+      theme.palette.background_dim &&
+      hexToRgbA(theme.palette.background_dim, 0.8),
   }));
 
   return (

package/src/components/HMSPreviewSubtitle.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import { useSelector } from 'react-redux';
 import { StyleSheet, Text } from 'react-native';
 import type { StyleProp, TextStyle } from 'react-native';
 
 import { useCanPublishAudio, useCanPublishVideo } from '../hooks-sdk';
-import { useHMSRoomStyle } from '../hooks-util';
-import type { RootState } from '../redux';
+import { useHMSLayoutConfig, useHMSRoomStyle } from '../hooks-util';
 
 export interface HMSPreviewSubtitleProps {
   subtitle?: string;
@@ -17,9 +15,7 @@ export const HMSPreviewSubtitle: React.FC<HMSPreviewSubtitleProps> = ({
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
 
-  const hmsRoomPreviewSubtitle = useSelector((state: RootState) => {
-    const layoutConfig = state.hmsStates.layoutConfig;
-
+  const hmsRoomPreviewSubtitle = useHMSLayoutConfig((layoutConfig) => {
     return layoutConfig?.screens?.preview?.default?.elements?.preview_header
       ?.sub_title;
   });

package/src/components/HMSPreviewTile.tsx

@@ -26,7 +26,7 @@ export const HMSPreviewTile: React.FC = () => {
       backgroundColor: COLORS.EXTENDED.PURPLE,
     },
     avatarText: {
-      color: theme.palette.on_surface_high,
+      color: COLORS.WHITE,
       fontFamily: `${typography.font_family}-SemiBold`,
     },
   }));

package/src/components/HMSPreviewTitle.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, Text } from 'react-native';
-import { useSelector } from 'react-redux';
 
-import { useHMSRoomStyle } from '../hooks-util';
-import type { RootState } from '../redux';
+import { useHMSLayoutConfig, useHMSRoomStyle } from '../hooks-util';
 
 export interface HMSPreviewTitleProps {
   title?: string;
@@ -12,9 +10,7 @@ export interface HMSPreviewTitleProps {
 export const HMSPreviewTitle: React.FC<HMSPreviewTitleProps> = ({
   title = 'Get Started',
 }) => {
-  const hmsRoomPreviewTitle = useSelector((state: RootState) => {
-    const layoutConfig = state.hmsStates.layoutConfig;
-
+  const hmsRoomPreviewTitle = useHMSLayoutConfig((layoutConfig) => {
     const previewTitle =
       layoutConfig?.screens?.preview?.default?.elements?.preview_header?.title;
 

package/src/components/HMSRecordingIndicator.tsx

@@ -11,7 +11,9 @@ export const HMSRecordingIndicator = () => {
     (state: RootState) => !!state.hmsStates.room?.browserRecordingState?.running
   );
   const startingOrStoppingRecording = useSelector(
-    (state: RootState) => state.app.startingOrStoppingRecording
+    (state: RootState) =>
+      state.app.startingOrStoppingRecording ||
+      state.hmsStates.room?.browserRecordingState.initialising
   );
 
   const { on_surface_high: onSurfaceHighColor } = useHMSRoomColorPalette();
@@ -21,11 +23,19 @@ export const HMSRecordingIndicator = () => {
   }));
 
   if (startingOrStoppingRecording) {
-    return <ActivityIndicator size={'small'} color={onSurfaceHighColor} />;
+    return (
+      <ActivityIndicator
+        size={'small'}
+        color={onSurfaceHighColor}
+        style={styles.rightSpace}
+      />
+    );
   }
 
   if (isRecordingOn) {
-    return <RecordingIcon style={[styles.icon, iconStyles]} />;
+    return (
+      <RecordingIcon style={[styles.icon, styles.rightSpace, iconStyles]} />
+    );
   }
 
   return null;
@@ -36,4 +46,7 @@ const styles = StyleSheet.create({
     width: 24,
     height: 24,
   },
+  rightSpace: {
+    marginRight: 8,
+  },
 });

package/src/components/HMSRoleChangeDeclinedNotification.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { HMSNotification } from './HMSNotification';
+import { PersonIcon } from '../Icons';
+
+export interface HMSRoleChangeDeclinedNotificationProps {
+  peerName: string;
+  id: string;
+  autoDismiss?: boolean;
+  dismissDelay?: number;
+}
+
+export const HMSRoleChangeDeclinedNotification: React.FC<
+  HMSRoleChangeDeclinedNotificationProps
+> = ({ peerName, id, autoDismiss, dismissDelay }) => {
+  return (
+    <HMSNotification
+      id={id}
+      text={`${peerName} declined the request to join the stage`}
+      icon={<PersonIcon type="off" />}
+      autoDismiss={autoDismiss}
+      dismissDelay={dismissDelay}
+    />
+  );
+};

package/src/components/HMSSendMessageInput.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import { HMSTextInput } from './HMSTextInput';
+import { useHMSRoomStyleSheet, useSendMessage } from '../hooks-util';
+
+interface HMSSendMessageInputProps {
+  style?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+export const HMSSendMessageInput: React.FC<HMSSendMessageInputProps> = ({
+  style,
+  containerStyle,
+}) => {
+  const { message, sendMessage, setMessage } = useSendMessage();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    containerStyle: {
+      backgroundColor: theme.palette.surface_dim,
+      borderColor: theme.palette.surface_dim,
+    },
+  }));
+
+  return (
+    <HMSTextInput
+      style={[styles.input, style]}
+      value={message}
+      onChangeText={setMessage}
+      placeholder="Send a message..."
+      autoCapitalize="sentences"
+      autoCompleteType="off"
+      containerStyle={[
+        styles.inputContainer,
+        hmsRoomStyles.containerStyle,
+        containerStyle,
+      ]}
+      sendIcon={true}
+      onSendIconPress={sendMessage}
+      onSubmitEditing={sendMessage}
+      returnKeyType="send"
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+    letterSpacing: 0.25,
+  },
+  inputContainer: {
+    height: 40,
+    marginHorizontal: 8,
+    marginTop: 4,
+    marginBottom: 8,
+  },
+});

package/src/components/HMSTextInput.tsx

@@ -1,21 +1,49 @@
 import * as React from 'react';
-import { Platform, StyleSheet, TextInput } from 'react-native';
-import type { StyleProp, TextStyle } from 'react-native';
+import {
+  Platform,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import type {
+  StyleProp,
+  TextInputProps,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
+import { SendIcon } from '../Icons';
 
-export interface HMSTextInputProps {
+export type HMSTextInputProps = TextInputProps & {
   value: string;
-  onChangeText(text: string): void;
-  style?: StyleProp<TextStyle>;
-  autoFocus?: boolean;
-}
+  focusedStyle?: StyleProp<TextStyle>;
+  leftIcon?: React.ReactElement;
+  containerStyle?: StyleProp<ViewStyle>;
+  focusedContainerStyle?: StyleProp<ViewStyle>;
+} & (
+    | {
+        rightIcon: React.ReactElement;
+        containerStyle?: StyleProp<ViewStyle>;
+        focusedContainerStyle?: StyleProp<ViewStyle>;
+      }
+    | {
+        rightIcon?: undefined;
+        sendIcon: boolean;
+        onSendIconPress(): void;
+        containerStyle?: StyleProp<ViewStyle>;
+        focusedContainerStyle?: StyleProp<ViewStyle>;
+      }
+    | { rightIcon?: undefined; sendIcon?: undefined }
+  );
 
 export const HMSTextInput: React.FC<HMSTextInputProps> = ({
   value,
   onChangeText,
   style,
-  autoFocus,
+  focusedStyle,
+  ...resetProps
 }) => {
   const [inputFocused, setInputFocused] = React.useState(false);
 
@@ -24,46 +52,140 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
   const handleInputBlur = () => setInputFocused(false);
 
   const {
-    on_surface_low: onSurfaceLowColor,
+    on_surface_medium: onSurfaceMediumColor,
     on_surface_high: onSurfaceHighColor,
   } = useHMSRoomColorPalette();
 
+  const containerExists =
+    resetProps.leftIcon || resetProps.rightIcon || resetProps.sendIcon;
+
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    // TEXT INPUT STYLES
     input: {
       backgroundColor: theme.palette.surface_default,
       color: theme.palette.on_surface_high,
       borderColor: theme.palette.surface_default,
       fontFamily: `${typography.font_family}-Regular`,
     },
+    // when text input is inside container
+    childInput: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
     focusedInput: {
       borderColor: theme.palette.primary_default,
       borderWidth: 2,
     },
+    // when text input is inside container
+    focusedChildInput: {},
+
+    // CONTAINER STYLES
+    container: {
+      backgroundColor: theme.palette.surface_default,
+      borderColor: theme.palette.surface_default,
+    },
+    focusedContainer: {
+      borderColor: theme.palette.primary_default,
+      borderWidth: 2,
+    },
+
+    // ICON STYLES
+    sendIcon: {
+      tintColor: theme.palette.on_surface_medium,
+    },
+    focusedSendIcon: {
+      tintColor: theme.palette.on_surface_high,
+    },
   }));
 
-  return (
+  const textInputStyles: StyleProp<TextStyle> = [
+    // regular styles
+    containerExists ? styles.childInput : styles.input,
+    containerExists ? hmsRoomStyles.childInput : hmsRoomStyles.input, // theme regular styles
+    style, // user provided regular styles
+
+    // focused styles
+    inputFocused
+      ? containerExists
+        ? hmsRoomStyles.focusedChildInput
+        : hmsRoomStyles.focusedInput
+      : null, // theme focused styles
+    inputFocused ? focusedStyle : null, // user provided focused styles
+  ];
+
+  const textInputComp = (
     <TextInput
-      style={[
-        styles.input,
-        hmsRoomStyles.input,
-        inputFocused ? hmsRoomStyles.focusedInput : null,
-        style,
-      ]}
+      {...resetProps}
+      style={textInputStyles}
       value={value}
       onChangeText={onChangeText}
-      placeholder="Enter Name..."
-      autoCapitalize="words"
-      autoCompleteType="name"
-      placeholderTextColor={onSurfaceLowColor}
-      selectionColor={onSurfaceHighColor}
-      onFocus={handleInputFocus}
-      onBlur={handleInputBlur}
-      autoFocus={autoFocus}
+      placeholder={resetProps.placeholder ?? 'Enter Name...'}
+      autoCapitalize={resetProps.autoCapitalize ?? 'words'}
+      autoCompleteType={resetProps.autoCompleteType ?? 'name'}
+      placeholderTextColor={
+        resetProps.placeholderTextColor ?? onSurfaceMediumColor
+      }
+      selectionColor={resetProps.selectionColor ?? onSurfaceHighColor}
+      onFocus={resetProps.onFocus ?? handleInputFocus}
+      onBlur={resetProps.onBlur ?? handleInputBlur}
     />
   );
+
+  if (!containerExists) {
+    return textInputComp;
+  }
+
+  const containerStyles: StyleProp<ViewStyle> = [
+    // regular styles
+    styles.container,
+    hmsRoomStyles.container, // theme regular styles
+    resetProps.leftIcon || resetProps.rightIcon || resetProps.sendIcon
+      ? resetProps.containerStyle
+      : null, // user provided regular styles
+
+    // focused styles
+    inputFocused ? hmsRoomStyles.focusedContainer : null, // theme focused styles
+    inputFocused &&
+    (resetProps.leftIcon || resetProps.rightIcon || resetProps.sendIcon)
+      ? resetProps.focusedContainerStyle
+      : null, // user provided focused styles
+  ];
+
+  return (
+    <View style={containerStyles}>
+      {resetProps.leftIcon}
+
+      {textInputComp}
+
+      {resetProps.rightIcon ||
+        (resetProps.sendIcon ? (
+          <TouchableOpacity
+            style={styles.sendIconButton}
+            onPress={resetProps.onSendIconPress}
+          >
+            <SendIcon
+              style={[
+                hmsRoomStyles.sendIcon,
+                inputFocused ? hmsRoomStyles.focusedSendIcon : null,
+              ]}
+            />
+          </TouchableOpacity>
+        ) : null)}
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: 50,
+    overflow: 'hidden',
+    paddingLeft: 16,
+    paddingRight: 8,
+    borderRadius: 8,
+    borderWidth: 2,
+    flexDirection: 'row',
+  },
   input: {
     flex: 1,
     height: 50,
@@ -75,4 +197,16 @@ const styles = StyleSheet.create({
     letterSpacing: 0.5,
     borderWidth: 2,
   },
+  childInput: {
+    flex: 1,
+    textAlignVertical: 'center',
+    fontSize: 16,
+    lineHeight: Platform.OS === 'android' ? 24 : undefined,
+    letterSpacing: 0.5,
+  },
+  sendIconButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 8,
+  },
 });

package/src/components/HMSVideoView.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+import { HMSVideoViewMode } from '@100mslive/react-native-hms';
+import type { HMSViewProps } from '@100mslive/react-native-hms';
+
+import type { RootState } from '../redux';
+import { useHMSInstance } from '../hooks-util';
+
+export interface HMSVideoViewProps extends Omit<HMSViewProps, 'id'> {}
+
+export const HMSVideoView: React.FC<HMSVideoViewProps> = ({
+  trackId,
+  style,
+  ...restProps
+}) => {
+  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
+  );
+
+  return (
+    <HmsView
+      {...restProps}
+      trackId={trackId}
+      key={trackId}
+      mirror={restProps.mirror ?? mirrorCamera}
+      autoSimulcast={restProps.autoSimulcast ?? autoSimulcast}
+      scaleType={restProps.scaleType ?? HMSVideoViewMode.ASPECT_FILL}
+      style={{ ...styles.hmsView, ...style }}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  hmsView: {
+    flex: 1,
+  },
+});