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

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);
 
@@ -28,42 +56,136 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
     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_low,
+    },
+    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 ?? onSurfaceLowColor
+      }
+      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,
+  },
+});

package/src/components/Header.tsx

@@ -1,70 +1,61 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import Animated, {
-  useAnimatedProps,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-import type { SharedValue } from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { HMSManageCameraRotation } from './HMSManageCameraRotation';
-import { useHMSRoomStyle, useIsHLSViewer } from '../hooks-util';
+import { useHMSRoomStyle } from '../hooks-util';
 import { HMSManageAudioOutput } from './HMSManageAudioOutput';
 import { HMSRecordingIndicator } from './HMSRecordingIndicator';
 import { CompanyLogo } from './CompanyLogo';
+import { HMSLiveIndicator } from './HMSLiveIndicator';
 
 interface HeaderProps {
-  offset: SharedValue<number>;
+  transparent?: boolean;
+  showControls?: boolean;
 }
 
-export const _Header: React.FC<HeaderProps> = ({ offset }) => {
-  const isHLSViewer = useIsHLSViewer();
-
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      opacity: offset.value,
-      // transform: [{ translateY: interpolate(offset.value, [0, 1], [-10, 0]) }]
-    };
-  }, []);
-
-  const animatedProps = useAnimatedProps((): {
-    pointerEvents: 'none' | 'auto';
-  } => {
-    return {
-      pointerEvents: offset.value === 0 ? 'none' : 'auto',
-    };
-  }, []);
+const TOP_PADDING = 8;
+const BOTTOM_PADDING = 16;
+const CONTENT_HEIGHT = 42;
+export const HEADER_HEIGHT = TOP_PADDING + CONTENT_HEIGHT + BOTTOM_PADDING;
 
+export const _Header: React.FC<HeaderProps> = ({
+  transparent = false,
+  showControls = true,
+}) => {
   const containerStyles = useHMSRoomStyle((theme) => ({
     backgroundColor: theme.palette.background_dim,
   }));
 
   return (
-    <Animated.View style={animatedStyles} animatedProps={animatedProps}>
-      <View style={[styles.container, containerStyles]}>
+    <SafeAreaView style={transparent ? null : containerStyles} edges={['top']}>
+      <View style={[styles.container, transparent ? null : containerStyles]}>
         <View style={styles.logoContainer}>
           <CompanyLogo style={styles.logo} />
 
           <HMSRecordingIndicator />
+
+          <HMSLiveIndicator />
         </View>
 
-        <View style={styles.controls}>
-          {isHLSViewer ? null : (
+        {showControls ? (
+          <View style={styles.controls}>
             <View style={styles.cameraRotationWrapper}>
               <HMSManageCameraRotation />
             </View>
-          )}
 
-          <HMSManageAudioOutput />
-        </View>
+            <HMSManageAudioOutput />
+          </View>
+        ) : null}
       </View>
-    </Animated.View>
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    paddingTop: 8,
-    paddingBottom: 16,
+    paddingTop: TOP_PADDING,
+    paddingBottom: BOTTOM_PADDING,
     paddingHorizontal: 16,
     flexDirection: 'row',
     alignItems: 'center',
@@ -88,102 +79,3 @@ const styles = StyleSheet.create({
 });
 
 export const Header = memo(_Header);
-
-// export const _Header2 = ({
-//   isLeaveMenuOpen,
-//   setModalVisible,
-// }: {
-//   isLeaveMenuOpen: boolean;
-//   setModalVisible(modalType: ModalTypes, delay?: any): void;
-// }) => {
-//   // hooks
-//   const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
-//   const room = useSelector((state: RootState) => state.hmsStates.room);
-//   const localPeer = useSelector(
-//     (state: RootState) => state.hmsStates.localPeer,
-//   );
-//   const roomCode = useSelector((state: RootState) => state.user.roomCode);
-//   const isScreenShared = useSelector(
-//     (state: RootState) => state.hmsStates.isLocalScreenShared,
-//   );
-//   const showLandscapeLayout = useShowLandscapeLayout();
-
-//   // constants
-//   const iconSize = 20;
-
-//   // functions
-
-//   return (
-//     <View
-//       style={[
-//         styles.iconTopWrapper,
-//         showLandscapeLayout ? styles.iconTopWrapperLandscape : null,
-//       ]}
-//     >
-//       <View
-//         style={[
-//           styles.iconTopSubWrapper,
-//           showLandscapeLayout ? styles.iconTopSubWrapperLandscape : null,
-//         ]}
-//       >
-//         {room?.hlsStreamingState?.running ? (
-//           <View>
-//             <View style={styles.liveTextContainer}>
-//               <View style={styles.liveStatus} />
-//               <Text style={styles.liveTimeText}>Live</Text>
-//             </View>
-//             {Array.isArray(room?.hlsStreamingState?.variants) ? (
-//               <RealTime
-//                 startedAt={room?.hlsStreamingState?.variants[0]?.startedAt}
-//               />
-//             ) : null}
-//           </View>
-//         ) : (
-//           <Text style={styles.headerName}>{roomCode}</Text>
-//         )}
-//       </View>
-//       <View
-//         style={[
-//           styles.iconTopSubWrapper,
-//           showLandscapeLayout ? styles.iconTopSubWrapperLandscape : null,
-//         ]}
-//       >
-//         {(room?.browserRecordingState?.running ||
-//           room?.hlsRecordingState?.running) && (
-//           <MaterialCommunityIcons
-//             name="record-circle-outline"
-//             style={
-//               showLandscapeLayout
-//                 ? styles.roomStatusLandscape
-//                 : styles.roomStatus
-//             }
-//             size={iconSize}
-//           />
-//         )}
-//         {(room?.hlsStreamingState?.running ||
-//           room?.rtmpHMSRtmpStreamingState?.running) && (
-//           <Ionicons
-//             name="globe-outline"
-//             style={
-//               showLandscapeLayout
-//                 ? styles.roomStatusLandscape
-//                 : styles.roomStatus
-//             }
-//             size={iconSize}
-//           />
-//         )}
-//         {isScreenShared && (
-//           <Feather
-//             name="copy"
-//             style={
-//               showLandscapeLayout
-//                 ? styles.roomStatusLandscape
-//                 : styles.roomStatus
-//             }
-//             size={iconSize}
-//           />
-//         )}
-//       </View>
-//     </View>
-//   );
-// };

package/src/components/LocalPeerScreenshareView.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import { CustomButton } from './CustomButton';
 import { useHMSActions } from '../hooks-sdk';
@@ -15,11 +14,6 @@ export const LocalPeerScreenshareView = () => {
 
   return (
     <View style={styles.container}>
-      <MaterialCommunityIcons
-        name="monitor-share"
-        style={styles.icon}
-        size={48}
-      />
       <Text style={styles.text}>You are sharing your screen</Text>
       <CustomButton
         title="X   Stop Screenshare"

package/src/components/Meeting.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -11,12 +11,12 @@ import {
   useHMSMessages,
   useHMSNetworkQualityUpdate,
   useHMSPIPRoomLeave,
+  useHMSReconnection,
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
-  useLandscapeChatViewVisible,
+  useIsHLSViewer,
   usePIPListener,
 } from '../hooks-util';
-import { ChatView } from './ChatWindow';
 import { MeetingScreenContent } from './MeetingScreenContent';
 import { HMSHLSStreamLoading } from './HMSHLSStreamLoading';
 import type { RootState } from '../redux';
@@ -30,12 +30,16 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     (state: RootState) => state.app.startingHLSStream
   );
 
+  const isHLSViewer = useIsHLSViewer();
+
   // TODO: Fetch latest Room and localPeer on mount of this component?
 
   useFetchHMSRoles();
 
   useHMSMessages();
 
+  useHMSReconnection();
+
   useHMSRemovedFromRoomUpdate();
 
   // Handle when user press leave button visible on PIP Window
@@ -50,8 +54,6 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
   // Subscribe to Peers Network quality updates
   useHMSNetworkQualityUpdate();
 
-  const landscapeChatViewVisible = useLandscapeChatViewVisible();
-
   // Clearing any pending modal opening tasks
   React.useEffect(() => {
     return () => {
@@ -67,6 +69,8 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     return <HMSHLSStreamLoading />;
   }
 
+  const Container = isHLSViewer ? View : SafeAreaView;
+
   /**
    * TODO: disbaled Expended View animation in Webrtc flow
    *
@@ -74,11 +78,14 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
    * Solution: Try using Tab Gesture detector instead on Pressable component
    */
   return (
-    <SafeAreaView style={[styles.container, containerStyles]} edges={['top', 'left', 'right']}>
+    <Container
+      style={[styles.container, containerStyles]}
+      edges={['left', 'right']}
+    >
       <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
 
-      {landscapeChatViewVisible ? <ChatView /> : null}
-    </SafeAreaView>
+      {/* {landscapeChatViewVisible ? <ChatView /> : null} */}
+    </Container>
   );
 };