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

package/src/components/AnimatedFooter.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Animated, {
+  interpolate,
+  useAnimatedProps,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+
+interface AnimatedFooterProps {
+  offset: SharedValue<number>;
+}
+
+export const AnimatedFooter: React.FC<AnimatedFooterProps> = ({
+  offset,
+  children,
+}) => {
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(offset.value, [0, 0.7, 1], [0, 0.5, 1]),
+      transform: [{ translateY: interpolate(offset.value, [0, 1], [10, 0]) }],
+    };
+  }, []);
+
+  const animatedProps = useAnimatedProps((): {
+    pointerEvents: 'none' | 'auto';
+  } => {
+    return {
+      pointerEvents: offset.value === 0 ? 'none' : 'auto',
+    };
+  }, []);
+
+  return (
+    <Animated.View style={animatedStyles} animatedProps={animatedProps}>
+      {children}
+    </Animated.View>
+  );
+};

package/src/components/AnimatedHLSFooter.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedProps,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+
+interface AnimatedHLSFooterProps {
+  offset: SharedValue<number>;
+  style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+}
+
+export const AnimatedHLSFooter: React.FC<AnimatedHLSFooterProps> = ({
+  offset,
+  children,
+  style,
+}) => {
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      opacity: interpolate(offset.value, [0, 0.7, 1], [0, 0.5, 1]),
+      transform: [{ translateY: interpolate(offset.value, [0, 1], [10, 0]) }],
+    };
+  }, []);
+
+  const animatedProps = useAnimatedProps((): {
+    pointerEvents: 'none' | 'auto';
+  } => {
+    return {
+      pointerEvents: offset.value === 0 ? 'none' : 'auto',
+    };
+  }, []);
+
+  return (
+    <Animated.View
+      style={[animatedStyles, style]}
+      animatedProps={animatedProps}
+    >
+      {children}
+    </Animated.View>
+  );
+};

package/src/components/AnimatedHeader.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedProps,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+
+import { useIsHLSViewer } from '../hooks-util';
+
+export interface AnimatedHeaderProps {
+  offset: SharedValue<number>;
+}
+
+export const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
+  children,
+  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',
+    };
+  }, []);
+
+  return (
+    <Animated.View
+      style={[isHLSViewer ? styles.hlsContainer : null, animatedStyles]}
+      animatedProps={animatedProps}
+    >
+      {children}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  hlsContainer: {
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    zIndex: 1,
+  },
+});

package/src/components/BottomSheet.tsx

@@ -24,7 +24,7 @@ export type BottomSheetProps = WithRequired<
 
 export const BottomSheet: React.FC<BottomSheetProps> & {
   Header: React.FC<HeaderProps>;
-  Divider: React.FC;
+  Divider: React.FC<BottomSheetDividerProps>;
 } = ({ dismissModal, style, children, containerStyle, ...resetProps }) => {
   const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
 
@@ -108,12 +108,16 @@ const BottomSheetHeader: React.FC<HeaderProps> = ({
   );
 };
 
-const BottomSheetDivider: React.FC = () => {
+interface BottomSheetDividerProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const BottomSheetDivider: React.FC<BottomSheetDividerProps> = ({ style }) => {
   const dividerStyles = useHMSRoomStyle((theme) => ({
     backgroundColor: theme.palette.border_default,
   }));
 
-  return <View style={[styles.divider, dividerStyles]} />;
+  return <View style={[styles.divider, dividerStyles, style]} />;
 };
 
 BottomSheet.Header = BottomSheetHeader;
@@ -184,7 +188,7 @@ const styles = StyleSheet.create({
     top: 16,
   },
   divider: {
-    height: 1,
+    height: 2,
     width: '100%',
     marginVertical: 16,
   },

package/src/components/ChangeNameModalContent.tsx

@@ -9,10 +9,9 @@ import {
 import { useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
-import { useHMSRoomStyleSheet, useModalType } from '../hooks-util';
-import { BottomSheet, useBottomSheetActions } from './BottomSheet';
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { BottomSheet } from './BottomSheet';
 import { ChevronIcon, CloseIcon } from '../Icons';
-import { ModalTypes } from '../utils/types';
 import { HMSTextInput } from './HMSTextInput';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
 import { useHMSActions } from '../hooks-sdk';
@@ -31,9 +30,6 @@ export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
 
   const [name, setName] = React.useState(localPeerName);
   const [nameChangeLoading, setNameChangeLoading] = React.useState(false);
-  const { handleModalVisibleType } = useModalType();
-
-  const { registerOnModalHideAction } = useBottomSheetActions();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     headerText: {
@@ -48,11 +44,6 @@ export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
   const handleBackPress = () => {
     Keyboard.dismiss();
 
-    // Open SETTINGS bottom sheet when current sheet is closed
-    registerOnModalHideAction(() => {
-      handleModalVisibleType(ModalTypes.SETTINGS);
-    });
-
     // Close current bottom sheet
     dismissModal();
   };

package/src/components/Chat/ChatBanner.tsx

@@ -1,70 +1,55 @@
 import * as React from 'react';
-import { View, StyleSheet, Text, Platform } from 'react-native';
-import Feather from 'react-native-vector-icons/Feather';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { View, StyleSheet, Text, Image } from 'react-native';
 
-import { COLORS } from '../../utils/theme';
-import { CustomButton } from '../CustomButton';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
 
 export const ChatBanner = () => {
-  const [showBanner, setShowBanner] = React.useState(true);
-
-  if (!showBanner) {
-    return null;
-  }
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    title: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    subtitle: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
 
   return (
-    <View style={styles.banner}>
-      <View style={styles.bannerIconContainer}>
-        <Feather style={styles.bannerIcon} size={16} name="info" />
-      </View>
-      <View style={styles.bannerTextContainer}>
-        <Text style={styles.bannerText}>
-          Messages can only be seen by people in the call and are deleted when
-          the call ends.
-        </Text>
-      </View>
-      <CustomButton
-        onPress={() => setShowBanner(false)}
-        viewStyle={styles.bannerIconContainer}
-        LeftIcon={
-          <MaterialCommunityIcons
-            style={styles.bannerIcon}
-            size={24}
-            name="close"
-          />
-        }
+    <View style={styles.container}>
+      <Image
+        source={require('../../assets/empty-chat-illustration/empty-chat.png')}
       />
+      <Text style={[styles.title, hmsRoomStyles.title]}>
+        Start a Conversation
+      </Text>
+      <Text style={[styles.subtitle, hmsRoomStyles.subtitle]}>
+        There are no messages here yet. Start a conversation by sending a
+        message.
+      </Text>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  banner: {
-    height: 80,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: COLORS.SURFACE.LIGHT,
-    borderRadius: 8,
-    transform: [Platform.OS === 'android' ? { scale: -1 } : { scaleY: -1 }],
-  },
-  bannerIcon: {
-    color: COLORS.TEXT.DISABLED,
-  },
-  bannerIconContainer: {
-    width: 52,
-    height: '100%',
+  container: {
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    // transform: [Platform.OS === 'android' ? { scale: -1 } : { scaleY: -1 }],
   },
-  bannerTextContainer: {
-    flex: 1,
+  title: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    textAlign: 'center',
+    marginTop: 16,
   },
-  bannerText: {
-    fontFamily: 'Inter-Regular',
-    fontSize: 12,
-    lineHeight: 16,
-    letterSpacing: 0.4,
-    color: COLORS.TEXT.MEDIUM_EMPHASIS,
+  subtitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    textAlign: 'center',
+    marginTop: 8,
   },
 });

package/src/components/Chat/ChatFilterBottomSheetOpener.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import { ChevronIcon } from '../../Icons';
+import type { RootState } from '../../redux';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import { setChatFilterSheetVisible } from '../../redux/actions';
+
+interface ChatFilterBottomSheetOpenerProps {}
+
+const _ChatFilterBottomSheetOpener: React.FC<
+  ChatFilterBottomSheetOpenerProps
+> = () => {
+  const dispatch = useDispatch();
+  const filter = useSelector(
+    (state: RootState) => state.chatWindow.sendTo.name as string
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    label: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    button: {
+      borderColor: theme.palette.border_bright,
+    },
+    buttonText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const openChatFiltersSheet = () => {
+    dispatch(setChatFilterSheetVisible(true));
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.label, hmsRoomStyles.label]}>SEND TO</Text>
+
+      <TouchableOpacity
+        onPress={openChatFiltersSheet}
+        style={[styles.button, hmsRoomStyles.button]}
+      >
+        <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+          {filter}
+        </Text>
+
+        <ChevronIcon direction="down" style={styles.buttonIcon} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+    marginLeft: 16,
+  },
+  label: {
+    fontSize: 10,
+    lineHeight: 16,
+    letterSpacing: 1.5,
+  },
+  button: {
+    padding: 4,
+    paddingLeft: 8,
+    flexDirection: 'row',
+    marginLeft: 8,
+    borderWidth: 1,
+    borderRadius: 4,
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontSize: 10,
+    textTransform: 'uppercase',
+    lineHeight: 16,
+    letterSpacing: 1.5,
+  },
+  buttonIcon: { width: 16, height: 16, marginLeft: 4 },
+});
+
+export const ChatFilterBottomSheetOpener = React.memo(
+  _ChatFilterBottomSheetOpener
+);

package/src/components/Chat/ChatFilterBottomSheetView.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';
+
+import { hexToRgbA } from '../../utils/theme';
+import { ChatFilterView } from './ChatFilterView';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import type { RootState } from '../../redux';
+import { setChatFilterSheetVisible } from '../../redux/actions';
+
+interface ChatFilterBottomSheetViewProps {}
+
+const _ChatFilterBottomSheetView: React.FC<
+  ChatFilterBottomSheetViewProps
+> = ({}) => {
+  const dispatch = useDispatch();
+  const chatFilterSheetVisible = useSelector(
+    (state: RootState) => state.app.chatFilterSheetVisible
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    backdrop: {
+      backgroundColor:
+        theme.palette.background_dim &&
+        hexToRgbA(theme.palette.background_dim, 0.1),
+    },
+    contentContainer: {
+      backgroundColor: theme.palette.surface_default,
+    },
+  }));
+
+  const closeFiltersBottomSheet = () => {
+    dispatch(setChatFilterSheetVisible(false));
+  };
+
+  if (!chatFilterSheetVisible) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        onPress={closeFiltersBottomSheet}
+        style={[styles.backdrop, hmsRoomStyles.backdrop]}
+      />
+
+      <Animated.View
+        entering={SlideInDown}
+        exiting={SlideOutDown}
+        style={[styles.contentContainer, hmsRoomStyles.contentContainer]}
+      >
+        <ChatFilterView />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: 1,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  contentContainer: {
+    width: '100%',
+    minHeight: 352,
+    maxHeight: '80%',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+});
+
+export const ChatFilterBottomSheetView = React.memo(_ChatFilterBottomSheetView);

package/src/components/Chat/ChatFilterItem.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { batch, useDispatch } from 'react-redux';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import type { HMSRemotePeer, HMSRole } from '@100mslive/react-native-hms';
+
+import { CheckIcon } from '../../Icons';
+import { useHMSRoomStyle } from '../../hooks-util';
+import { ChatBroadcastFilter } from '../../utils/types';
+import { setChatFilterSheetVisible } from '../../redux/actions';
+
+interface ChatFilterItemProps {
+  item: HMSRemotePeer | HMSRole | typeof ChatBroadcastFilter;
+  disabled?: boolean;
+  active?: boolean;
+  icon?: React.ReactElement;
+}
+
+const _ChatFilterItem: React.FC<ChatFilterItemProps> = ({
+  item,
+  disabled,
+  active,
+  icon,
+}) => {
+  const dispatch = useDispatch();
+
+  const titleStyles = useHMSRoomStyle((theme, typography) => ({
+    color: theme.palette.on_surface_high,
+    fontFamily: `${typography.font_family}-SemiBold`,
+  }));
+
+  const handleFilterSelect = () => {
+    batch(() => {
+      dispatch(setChatFilterSheetVisible(false));
+      dispatch({ type: 'SET_SENDTO', sendTo: item });
+    });
+  };
+
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={handleFilterSelect}
+      disabled={disabled}
+    >
+      {icon ? <View style={styles.leftIcon}>{icon}</View> : null}
+
+      <Text style={[styles.title, titleStyles]}>{item.name}</Text>
+
+      {active ? <CheckIcon style={styles.rightIcon} /> : null}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 32,
+    paddingVertical: 16,
+  },
+  title: {
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+    textTransform: 'capitalize',
+  },
+  rightIcon: { marginLeft: 8 },
+  leftIcon: { marginRight: 8 },
+});
+
+export const ChatFilterItem = React.memo(_ChatFilterItem);