@100mslive/react-native-room-kit 1.0.7 → 1.0.9

package/src/Icons/index.ts

@@ -39,3 +39,5 @@ export * from './Eye';
 export * from './Search';
 export * from './WelcomeHand';
 export * from './CrossCircle';
+export * from './PauseCircle';
+export * from './NoEntry';

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 { KeyboardAvoidingView, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import type {
   StyleProp,
   TextProps,
@@ -52,7 +59,10 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
 
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
-  const Container = resetProps.avoidKeyboard && Platform.OS === 'android' ? KeyboardAvoidingView : View;
+  const Container =
+    resetProps.avoidKeyboard && Platform.OS === 'android'
+      ? KeyboardAvoidingView
+      : View;
 
   return (
     <Modal
@@ -76,7 +86,7 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
       statusBarTranslucent={true}
     >
       <Container
-        behavior='padding'
+        behavior="padding"
         style={[
           isLandscapeOrientation && !fullWidth
             ? styles.landscapeContainer

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/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 (

package/src/components/Chat/ChatFilterView.tsx

@@ -5,6 +5,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
 import {
+  useHMSChatRecipientSelector,
   useHMSInstance,
   useHMSRoomColorPalette,
   useHMSRoomStyleSheet,
@@ -17,16 +18,22 @@ import { ChatFilterItem } from './ChatFilterItem';
 import { setChatFilterSheetVisible } from '../../redux/actions';
 import { ChatBroadcastFilter } from '../../utils/types';
 
-interface ChatFilterViewProps {}
+interface ChatFilterViewProps {
+  onDismiss?: () => void;
+}
 
-const _ChatFilterView: React.FC<ChatFilterViewProps> = () => {
+const _ChatFilterView: React.FC<ChatFilterViewProps> = ({ onDismiss }) => {
   const hmsInstance = useHMSInstance();
   const dispatch = useDispatch();
   const filter = useSelector((state: RootState) => state.chatWindow.sendTo);
-  const roles = useSelector((state: RootState) => state.hmsStates.roles);
   const [loadingPeersList, setLoadingPeersList] = React.useState(false);
   const [remotePeers, setRemotePeers] = React.useState<HMSRemotePeer[]>([]);
   const [filterText, setFilterText] = React.useState('');
+  const {
+    privateChat,
+    publicChat,
+    roles: rolesSpecificChat,
+  } = useHMSChatRecipientSelector();
 
   const { on_surface_medium: onSurfaceMediumColor } = useHMSRoomColorPalette();
 
@@ -46,23 +53,25 @@ const _ChatFilterView: React.FC<ChatFilterViewProps> = () => {
   }));
 
   React.useEffect(() => {
-    let mounted = true;
+    if (privateChat) {
+      let mounted = true;
 
-    const fetchRemotePeers = async () => {
-      setLoadingPeersList(true);
-      const fetchedRemotePeers = await hmsInstance.getRemotePeers();
-      if (mounted) {
-        setLoadingPeersList(false);
-        setRemotePeers(fetchedRemotePeers);
-      }
-    };
+      const fetchRemotePeers = async () => {
+        setLoadingPeersList(true);
+        const fetchedRemotePeers = await hmsInstance.getRemotePeers();
+        if (mounted) {
+          setLoadingPeersList(false);
+          setRemotePeers(fetchedRemotePeers);
+        }
+      };
 
-    fetchRemotePeers();
+      fetchRemotePeers();
 
-    return () => {
-      mounted = false;
-    };
-  }, [hmsInstance]);
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [privateChat, hmsInstance]);
 
   const _keyExtractor = React.useCallback(
     (item: HMSRemotePeer) => item.peerID,
@@ -73,15 +82,20 @@ const _ChatFilterView: React.FC<ChatFilterViewProps> = () => {
     ({ item, extraData }) => (
       <ChatFilterItem
         item={item}
-        active={extraData.name === item.name}
-        disabled={extraData.name === item.name}
+        active={extraData && extraData.name === item.name}
+        disabled={extraData && extraData.name === item.name}
+        onDismiss={onDismiss}
       />
     ),
-    []
+    [onDismiss]
   );
 
   const closeFiltersBottomSheet = () => {
-    dispatch(setChatFilterSheetVisible(false));
+    if (onDismiss) {
+      onDismiss();
+    } else {
+      dispatch(setChatFilterSheetVisible(false));
+    }
   };
 
   const formattedFilterText = filterText.trim().toLowerCase();
@@ -98,23 +112,14 @@ const _ChatFilterView: React.FC<ChatFilterViewProps> = () => {
   }, [formattedFilterText, remotePeers]);
 
   // Filtering Broadcast option
-  const showBroadcastOption =
-    formattedFilterText.length > 0
+  const showBroadcastOption = publicChat
+    ? formattedFilterText.length > 0
       ? ChatBroadcastFilter.name.includes(formattedFilterText)
-      : true;
-
-  // Filtering Roles
-  const foundRoles = roles.filter((role) => {
-    if (!role.name || role.name.startsWith('_')) {
-      return false;
-    }
-
-    return formattedFilterText.length > 0
-      ? role.name.toLowerCase().includes(formattedFilterText)
-      : true;
-  });
+      : true
+    : false;
 
   const isBroadcastFilterSelected =
+    filter !== null &&
     !('publishSettings' in filter || 'peerId' in filter) && // filter is not HMSRole and HMSRemotePeer
     filter.name === ChatBroadcastFilter.name;
 
@@ -127,18 +132,20 @@ const _ChatFilterView: React.FC<ChatFilterViewProps> = () => {
 
       <BottomSheet.Divider style={styles.headerDivider} />
 
-      <HMSTextInput
-        value={filterText}
-        onChangeText={setFilterText}
-        placeholder="Search for participants"
-        containerStyle={[
-          styles.textInputContainer,
-          hmsRoomStyles.textInputContainer,
-        ]}
-        focusedContainerStyle={styles.textInputFocusedContainer}
-        placeholderTextColor={onSurfaceMediumColor}
-        leftIcon={<SearchIcon style={styles.textInputSearchIcon} />}
-      />
+      {privateChat ? (
+        <HMSTextInput
+          value={filterText}
+          onChangeText={setFilterText}
+          placeholder="Search for participants"
+          containerStyle={[
+            styles.textInputContainer,
+            hmsRoomStyles.textInputContainer,
+          ]}
+          focusedContainerStyle={styles.textInputFocusedContainer}
+          placeholderTextColor={onSurfaceMediumColor}
+          leftIcon={<SearchIcon style={styles.textInputSearchIcon} />}
+        />
+      ) : null}
 
       <FlashList
         data={filteredRemotePeers}
@@ -149,38 +156,46 @@ const _ChatFilterView: React.FC<ChatFilterViewProps> = () => {
         keyExtractor={_keyExtractor}
         renderItem={_renderItem}
         ListEmptyComponent={
-          <View style={styles.placeholderContainer}>
-            <Text
-              style={[styles.placeholderText, hmsRoomStyles.placeholderText]}
-            >
-              {loadingPeersList
-                ? 'Loading Participants...'
-                : formattedFilterText.length > 0
-                ? 'No participants found!'
-                : 'There is no one in the session!'}
-            </Text>
-          </View>
+          privateChat ? (
+            <View style={styles.placeholderContainer}>
+              <Text
+                style={[styles.placeholderText, hmsRoomStyles.placeholderText]}
+              >
+                {loadingPeersList
+                  ? 'Loading Participants...'
+                  : formattedFilterText.length > 0
+                    ? 'No participants found!'
+                    : 'There is no one in the session!'}
+              </Text>
+            </View>
+          ) : null
         }
         ListHeaderComponent={
           <View>
             {showBroadcastOption ? (
-              <>
-                <ChatFilterItem
-                  item={ChatBroadcastFilter}
-                  active={isBroadcastFilterSelected}
-                  disabled={isBroadcastFilterSelected}
-                  icon={<ParticipantsIcon />}
-                />
-                <BottomSheet.Divider style={styles.divider} />
-              </>
+              <ChatFilterItem
+                item={ChatBroadcastFilter}
+                active={isBroadcastFilterSelected}
+                disabled={isBroadcastFilterSelected}
+                icon={<ParticipantsIcon />}
+                onDismiss={onDismiss}
+              />
+            ) : null}
+
+            {showBroadcastOption && rolesSpecificChat.length > 0 ? (
+              <BottomSheet.Divider style={styles.divider} />
             ) : null}
 
-            {foundRoles.length > 0 ? (
+            {rolesSpecificChat.length > 0 ? (
               <View>
                 <Text style={[styles.label, hmsRoomStyles.label]}>ROLES</Text>
-                {foundRoles.map((role) => {
-                  const isRoleSelected = 'publishSettings' in filter;
-                  const isActive = isRoleSelected && filter.name === role.name;
+                {rolesSpecificChat.map((role) => {
+                  const isRoleSelected =
+                    filter !== null && 'publishSettings' in filter;
+                  const isActive =
+                    filter !== null &&
+                    isRoleSelected &&
+                    filter.name === role.name;
 
                   return (
                     <ChatFilterItem
@@ -188,16 +203,28 @@ const _ChatFilterView: React.FC<ChatFilterViewProps> = () => {
                       item={role}
                       active={isActive}
                       disabled={isActive}
+                      onDismiss={onDismiss}
                     />
                   );
                 })}
-                <BottomSheet.Divider style={styles.divider} />
               </View>
             ) : null}
 
-            <Text style={[styles.label, hmsRoomStyles.label]}>
-              PARTICIPANTS
-            </Text>
+            {rolesSpecificChat.length > 0 && privateChat ? (
+              <BottomSheet.Divider style={styles.divider} />
+            ) : null}
+
+            {rolesSpecificChat.length <= 0 &&
+            privateChat &&
+            showBroadcastOption ? (
+              <BottomSheet.Divider style={styles.divider} />
+            ) : null}
+
+            {privateChat ? (
+              <Text style={[styles.label, hmsRoomStyles.label]}>
+                PARTICIPANTS
+              </Text>
+            ) : null}
           </View>
         }
       />