@100mslive/react-native-room-kit 1.0.6 → 1.0.8

package/src/components/AnimatedFooter.tsx

@@ -6,6 +6,8 @@ import Animated, {
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
+import { useFooterHeight } from './Footer';
+
 interface AnimatedFooterProps {
   offset: SharedValue<number>;
 }
@@ -14,12 +16,16 @@ export const AnimatedFooter: React.FC<AnimatedFooterProps> = ({
   offset,
   children,
 }) => {
+  const footerHeight = useFooterHeight();
+
   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]) }],
+      opacity: interpolate(offset.value, [0, 0.3, 1], [0, 0.7, 1]),
+      transform: [
+        { translateY: interpolate(offset.value, [0, 1], [footerHeight, 0]) },
+      ],
     };
-  }, []);
+  }, [footerHeight]);
 
   const animatedProps = useAnimatedProps((): {
     pointerEvents: 'none' | 'auto';

package/src/components/AnimatedHLSFooter.tsx

@@ -2,11 +2,12 @@ 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';
 
+import { useFooterHeight } from './Footer';
+
 interface AnimatedHLSFooterProps {
   offset: SharedValue<number>;
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
@@ -17,27 +18,17 @@ export const AnimatedHLSFooter: React.FC<AnimatedHLSFooterProps> = ({
   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 footerHeight = useFooterHeight();
 
-  const animatedProps = useAnimatedProps((): {
-    pointerEvents: 'none' | 'auto';
-  } => {
+  const animatedStyles = useAnimatedStyle(() => {
     return {
-      pointerEvents: offset.value === 0 ? 'none' : 'auto',
+      transform: [
+        { translateY: interpolate(offset.value, [0, 1], [footerHeight, 0]) },
+      ],
     };
   }, []);
 
   return (
-    <Animated.View
-      style={[animatedStyles, style]}
-      animatedProps={animatedProps}
-    >
-      {children}
-    </Animated.View>
+    <Animated.View style={[animatedStyles, style]}>{children}</Animated.View>
   );
 };

package/src/components/AnimatedHeader.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import Animated, {
+  interpolate,
   useAnimatedProps,
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
+import { useHeaderHeight } from './Header';
 import { useIsHLSViewer } from '../hooks-util';
 
 export interface AnimatedHeaderProps {
@@ -17,13 +19,22 @@ export const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
   offset,
 }) => {
   const isHLSViewer = useIsHLSViewer();
+  const headerHeight = useHeaderHeight();
 
   const animatedStyles = useAnimatedStyle(() => {
+    if (isHLSViewer) {
+      return {
+        opacity: offset.value,
+        transform: [{ translateY: 0 }],
+      };
+    }
     return {
-      opacity: offset.value,
-      // transform: [{ translateY: interpolate(offset.value, [0, 1], [-10, 0]) }]
+      opacity: interpolate(offset.value, [0, 0.3, 1], [0, 0.7, 1]),
+      transform: [
+        { translateY: interpolate(offset.value, [0, 1], [-headerHeight, 0]) },
+      ],
     };
-  }, []);
+  }, [headerHeight, isHLSViewer]);
 
   const animatedProps = useAnimatedProps((): {
     pointerEvents: 'none' | 'auto';
@@ -35,7 +46,7 @@ export const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
 
   return (
     <Animated.View
-      style={[isHLSViewer ? styles.hlsContainer : null, animatedStyles]}
+      style={[styles.container, animatedStyles]}
       animatedProps={animatedProps}
     >
       {children}
@@ -44,7 +55,7 @@ export const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
 };
 
 const styles = StyleSheet.create({
-  hlsContainer: {
+  container: {
     position: 'absolute',
     top: 0,
     width: '100%',

package/src/components/BottomSheet.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
 import Modal from 'react-native-modal';
 import type { ReactNativeModal } from 'react-native-modal';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import type {
   StyleProp,
   TextProps,
@@ -26,6 +33,7 @@ export type BottomSheetProps = WithRequired<
   // closes modal and no action will be taken after modal has been closed
   dismissModal(): void;
   containerStyle?: StyleProp<ViewStyle>;
+  bottomOffsetSpace?: number;
   fullWidth?: boolean;
 };
 
@@ -38,6 +46,7 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
   style,
   children,
   containerStyle,
+  bottomOffsetSpace = 32,
   ...resetProps
 }) => {
   const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
@@ -50,6 +59,11 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
 
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
+  const Container =
+    resetProps.avoidKeyboard && Platform.OS === 'android'
+      ? KeyboardAvoidingView
+      : View;
+
   return (
     <Modal
       {...resetProps}
@@ -71,7 +85,8 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
       }
       statusBarTranslucent={true}
     >
-      <View
+      <Container
+        behavior="padding"
         style={[
           isLandscapeOrientation && !fullWidth
             ? styles.landscapeContainer
@@ -81,7 +96,10 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
         ]}
       >
         {children}
-      </View>
+        {typeof bottomOffsetSpace === 'number' && bottomOffsetSpace > 0 ? (
+          <View style={{ height: bottomOffsetSpace, width: '100%' }} />
+        ) : null}
+      </Container>
     </Modal>
   );
 };
@@ -198,11 +216,9 @@ const styles = StyleSheet.create({
   container: {
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
-    paddingBottom: 32,
   },
   landscapeContainer: {
     borderRadius: 16,
-    paddingBottom: 32,
     width: '60%',
     alignSelf: 'center',
     marginBottom: 12,

package/src/components/Chat/ChatFilterBottomSheet.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { BottomSheet } from '../BottomSheet';
+import { useHMSRoomStyleSheet, useModalType } from '../../hooks-util';
+import { ModalTypes } from '../../utils/types';
+import { ChatFilterView } from './ChatFilterView';
+
+const _ChatFilterBottomSheet = () => {
+  const { modalVisibleType, handleModalVisibleType } = useModalType();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    contentContainer: {
+      flex: 0.7,
+      backgroundColor: theme.palette.surface_default,
+    },
+  }));
+
+  const dismissModal = React.useCallback(
+    () => handleModalVisibleType(ModalTypes.DEFAULT),
+    [handleModalVisibleType]
+  );
+
+  return (
+    <BottomSheet
+      dismissModal={dismissModal}
+      isVisible={modalVisibleType === ModalTypes.CHAT_FILTER}
+      animationOutTiming={400}
+      containerStyle={hmsRoomStyles.contentContainer}
+    >
+      <ChatFilterView onDismiss={dismissModal} />
+    </BottomSheet>
+  );
+};
+
+export const ChatFilterBottomSheet = React.memo(_ChatFilterBottomSheet);

package/src/components/Chat/ChatFilterBottomSheetOpener.tsx

@@ -1,54 +1,168 @@
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 
-import { ChevronIcon } from '../../Icons';
+import {
+  ChevronIcon,
+  ParticipantsIcon,
+  PersonIcon,
+  SearchIcon,
+  ThreeDotsIcon,
+} from '../../Icons';
 import type { RootState } from '../../redux';
-import { useHMSRoomStyleSheet } from '../../hooks-util';
-import { setChatFilterSheetVisible } from '../../redux/actions';
+import {
+  useHMSCanDisableChat,
+  useHMSChatRecipientSelector,
+  useHMSRoomStyleSheet,
+  useIsAllowedToSendMessage,
+  useIsLocalPeerBlockedFromChat,
+  useModalType,
+} from '../../hooks-util';
+import {
+  setChatFilterSheetVisible,
+  setChatMoreActionsSheetVisible,
+} from '../../redux/actions';
+import { PressableIcon } from '../PressableIcon';
+import { ChatBroadcastFilter, ModalTypes } from '../../utils/types';
+import { hexToRgbA } from '../../utils/theme';
 
-interface ChatFilterBottomSheetOpenerProps {}
+interface ChatFilterBottomSheetOpenerProps {
+  insetMode?: boolean;
+}
 
 const _ChatFilterBottomSheetOpener: React.FC<
   ChatFilterBottomSheetOpenerProps
-> = () => {
+> = ({ insetMode = false }) => {
   const dispatch = useDispatch();
-  const filter = useSelector(
-    (state: RootState) => state.chatWindow.sendTo.name as string
+  const canDisableChat = useHMSCanDisableChat();
+  const chatRecipients = useHMSChatRecipientSelector();
+  const allowedToSendMessage = useIsAllowedToSendMessage();
+  const isLocalPeerBlockedFromChat = useIsLocalPeerBlockedFromChat();
+  const selectedChatRecipient = useSelector(
+    (state: RootState) => state.chatWindow.sendTo
   );
+  const { handleModalVisibleType } = useModalType();
 
-  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 hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      label: {
+        color: theme.palette.on_surface_medium,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+      button: {
+        backgroundColor: insetMode
+          ? theme.palette.background_dim &&
+            hexToRgbA(theme.palette.background_dim, 0.64)
+          : theme.palette.primary_default,
+      },
+      buttonText: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+      moreAction: {
+        backgroundColor:
+          theme.palette.background_dim &&
+          hexToRgbA(theme.palette.background_dim, 0.64),
+      },
+      moreActionIcon: {
+        tintColor: insetMode
+          ? theme.palette.on_surface_low
+          : theme.palette.on_surface_medium,
+      },
+    }),
+    [insetMode]
+  );
 
   const openChatFiltersSheet = () => {
-    dispatch(setChatFilterSheetVisible(true));
+    if (insetMode) {
+      handleModalVisibleType(ModalTypes.CHAT_FILTER);
+    } else {
+      dispatch(setChatFilterSheetVisible(true));
+    }
+  };
+
+  const openChatMoreActionsSheet = () => {
+    if (insetMode) {
+      handleModalVisibleType(ModalTypes.CHAT_MORE_ACTIONS);
+    } else {
+      dispatch(setChatMoreActionsSheetVisible(true));
+    }
   };
 
+  const filterSheetDisabled =
+    !chatRecipients.privateChat && // filter Sheet can't be diabled when privateChat is 'on'
+    (chatRecipients.publicChat
+      ? chatRecipients.roles.length === 0
+      : chatRecipients.roles.length <= 1);
+
+  const showActionButtons =
+    (allowedToSendMessage && !isLocalPeerBlockedFromChat) || canDisableChat;
+
+  if (!showActionButtons) {
+    return null;
+  }
+
+  const tapGesture = Gesture.Tap();
+
   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>
+      {allowedToSendMessage && !isLocalPeerBlockedFromChat ? (
+        <View style={styles.sendToContainer}>
+          <Text style={[styles.label, hmsRoomStyles.label]}>
+            {selectedChatRecipient !== null
+              ? 'To'
+              : `Choose ${
+                  chatRecipients.privateChat
+                    ? 'Participant'
+                    : chatRecipients.roles.length > 0
+                      ? 'Role'
+                      : ''
+                }`}
+          </Text>
+
+          <GestureDetector gesture={tapGesture}>
+            <TouchableOpacity
+              disabled={filterSheetDisabled}
+              onPress={openChatFiltersSheet}
+              style={[
+                styles.button,
+                { paddingRight: filterSheetDisabled ? 8 : undefined },
+                hmsRoomStyles.button,
+              ]}
+            >
+              {selectedChatRecipient ? (
+                selectedChatRecipient === ChatBroadcastFilter ? (
+                  <ParticipantsIcon style={styles.buttonIcon} />
+                ) : (
+                  <PersonIcon style={styles.buttonIcon} />
+                )
+              ) : (
+                <SearchIcon style={styles.buttonIcon} />
+              )}
+
+              <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+                {selectedChatRecipient ? selectedChatRecipient.name : 'Search'}
+              </Text>
+
+              {filterSheetDisabled || !selectedChatRecipient ? null : (
+                <ChevronIcon direction="down" style={styles.buttonIcon} />
+              )}
+            </TouchableOpacity>
+          </GestureDetector>
+        </View>
+      ) : (
+        <View />
+      )}
+
+      {canDisableChat && insetMode ? (
+        <PressableIcon
+          onPress={openChatMoreActionsSheet}
+          style={[styles.moreAction, hmsRoomStyles.moreAction]}
+        >
+          <ThreeDotsIcon stack="vertical" style={styles.moreActionIcon} />
+        </PressableIcon>
+      ) : null}
     </View>
   );
 };
@@ -57,30 +171,44 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'space-between',
     marginBottom: 8,
-    marginLeft: 16,
+  },
+  sendToContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  moreAction: {
+    padding: 4,
+    borderRadius: 4,
+  },
+  moreActionIcon: {
+    width: 16,
+    height: 16,
   },
   label: {
-    fontSize: 10,
+    fontSize: 12,
     lineHeight: 16,
-    letterSpacing: 1.5,
+    letterSpacing: 0.4,
   },
   button: {
     padding: 4,
-    paddingLeft: 8,
     flexDirection: 'row',
     marginLeft: 8,
-    borderWidth: 1,
     borderRadius: 4,
     alignItems: 'center',
   },
   buttonText: {
-    fontSize: 10,
-    textTransform: 'uppercase',
+    fontSize: 12,
+    textTransform: 'capitalize',
     lineHeight: 16,
-    letterSpacing: 1.5,
+    letterSpacing: 0.4,
+    marginHorizontal: 4,
+  },
+  buttonIcon: {
+    width: 16,
+    height: 16,
   },
-  buttonIcon: { width: 16, height: 16, marginLeft: 4 },
 });
 
 export const ChatFilterBottomSheetOpener = React.memo(

package/src/components/Chat/ChatFilterBottomSheetView.tsx

@@ -69,6 +69,7 @@ const styles = StyleSheet.create({
     height: '100%',
     zIndex: 1,
     justifyContent: 'flex-end',
+    alignSelf: 'center',
   },
   backdrop: {
     position: 'absolute',

package/src/components/Chat/ChatFilterItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { batch, useDispatch } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type { HMSRemotePeer, HMSRole } from '@100mslive/react-native-hms';
 
@@ -13,6 +13,7 @@ interface ChatFilterItemProps {
   disabled?: boolean;
   active?: boolean;
   icon?: React.ReactElement;
+  onDismiss?: () => void;
 }
 
 const _ChatFilterItem: React.FC<ChatFilterItemProps> = ({
@@ -20,6 +21,7 @@ const _ChatFilterItem: React.FC<ChatFilterItemProps> = ({
   disabled,
   active,
   icon,
+  onDismiss,
 }) => {
   const dispatch = useDispatch();
 
@@ -29,10 +31,12 @@ const _ChatFilterItem: React.FC<ChatFilterItemProps> = ({
   }));
 
   const handleFilterSelect = () => {
-    batch(() => {
+    dispatch({ type: 'SET_SENDTO', sendTo: item });
+    if (onDismiss) {
+      onDismiss();
+    } else {
       dispatch(setChatFilterSheetVisible(false));
-      dispatch({ type: 'SET_SENDTO', sendTo: item });
-    });
+    }
   };
 
   return (