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

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

package/src/components/Chat/ChatList.tsx

@@ -4,19 +4,22 @@ import {
   FlashList,
   // FlashListProps
 } from '@shopify/flash-list';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import type { RootState } from '../../redux';
 import { ChatMessage } from './ChatMessage';
 import { ChatBanner } from './ChatBanner';
-import { PinnedMessage } from './PinnedMessage';
+import { PinnedMessages } from './PinnedMessages';
+import { useIsAllowedToSendMessage } from '../../hooks-util';
 
 type ChatListProps = {
   // estimatedListSize?: FlashListProps<HMSMessage>['estimatedListSize'];
 };
 
 const _ChatList: React.FC<ChatListProps> = () => {
+  const flashlistRef = React.useRef<null | FlashList<HMSMessage>>(null);
+  const isAllowedToSendMessage = useIsAllowedToSendMessage();
   const messages = useSelector((state: RootState) => state.messages.messages);
 
   const _keyExtractor = React.useCallback(
@@ -29,15 +32,22 @@ const _ChatList: React.FC<ChatListProps> = () => {
   }, []);
 
   return (
-    <View style={chatListStyle.list}>
-      <PinnedMessage />
+    <View
+      style={[
+        chatListStyle.list,
+        isAllowedToSendMessage ? chatListStyle.bottomSpace : null,
+      ]}
+    >
+      <PinnedMessages />
 
       {messages.length > 0 ? (
         <FlashList
+          ref={flashlistRef}
           data={messages}
           inverted={true}
           estimatedItemSize={75}
-          contentContainerStyle={chatListStyle.listContentContainer} // Bug: Android inverted flashlist will apply padding on left when `paddingRight: 12` is applied
+          showsVerticalScrollIndicator={Platform.OS !== 'android'}
+          // contentContainerStyle={chatListStyle.listContentContainer} // Bug: Android inverted flashlist will apply padding on left when `paddingRight: 12` is applied
           keyboardShouldPersistTaps="always"
           // ItemSeparatorComponent={() => <View style={{ height: 16 }} />} // TODO: There is a bug related to this: https://github.com/Shopify/flash-list/issues/638
           renderItem={_renderItem}
@@ -54,10 +64,12 @@ const chatListStyle = StyleSheet.create({
   list: {
     flex: 1,
     marginTop: 8,
+  },
+  bottomSpace: {
     marginBottom: 16,
   },
   listContentContainer: {
-    paddingRight: 12,
+    paddingRight: 8,
   },
 });
 

package/src/components/Chat/ChatMessage.tsx

@@ -1,16 +1,46 @@
 import * as React from 'react';
-import { View, Text, StyleSheet, Platform } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+  TouchableOpacity,
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
 import { HMSMessage } from '@100mslive/react-native-hms';
 
-import { useHMSRoomStyleSheet } from '../../hooks-util';
+import {
+  useAllowBlockingPeerFromChat,
+  useAllowPinningMessage,
+  useHMSRoomStyleSheet,
+} from '../../hooks-util';
 import { getTimeStringin12HourFormat } from '../../utils/functions';
+import { PinIcon, ThreeDotsIcon } from '../../Icons';
+import type { RootState } from '../../redux';
+import { setSelectedMessageForAction } from '../../redux/actions';
 
 interface HMSHLSMessageProps {
   message: HMSMessage;
 }
 
 const _ChatMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
-  const messageSender = message.sender;
+  const dispatch = useDispatch();
+  const isPinned = useSelector(
+    (state: RootState) =>
+      state.messages.pinnedMessages.findIndex(
+        (pinnedMessage) => pinnedMessage.id === message.messageId
+      ) >= 0
+  );
+  const localPeerId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.peerID
+  );
+
+  const allowPinningMessage = useAllowPinningMessage();
+  const allowPeerBlocking = useAllowBlockingPeerFromChat();
+  const canRemoveOthers = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.localPeer?.role?.permissions?.removeOthers
+  );
 
   const hmsRoomStyles = useHMSRoomStyleSheet(
     (theme, typography) => ({
@@ -23,15 +53,49 @@ const _ChatMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
         fontFamily: `${typography.font_family}-Regular`,
       },
       time: {
-        color: theme.palette.on_surface_medium,
+        color: theme.palette.on_surface_low,
         fontFamily: `${typography.font_family}-Regular`,
       },
+      threeDots: {
+        tintColor: theme.palette.on_surface_low,
+      },
+      pinnedLabel: {
+        color: theme.palette.on_surface_low,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
     }),
     []
   );
 
+  const onThreeDotsPress = () => {
+    dispatch(setSelectedMessageForAction(message));
+  };
+
+  const messageSender = message.sender;
+
+  const canTakeAction =
+    allowPinningMessage || // can pin message, OR
+    (allowPeerBlocking &&
+      message.sender &&
+      message.sender.peerID !== localPeerId) || // can block peers, OR
+    (canRemoveOthers &&
+      message.sender &&
+      message.sender.peerID !== localPeerId); // can remove participants
+
   return (
     <View style={styles.container}>
+      {isPinned ? (
+        <View style={styles.pinLabelContainer}>
+          <PinIcon
+            type="pin"
+            style={[styles.pinIcon, hmsRoomStyles.threeDots]}
+          />
+          <Text style={[styles.pinnedLabel, hmsRoomStyles.pinnedLabel]}>
+            PINNED
+          </Text>
+        </View>
+      ) : null}
+
       <View style={[styles.nameWrapper]}>
         <Text
           style={[styles.senderName, hmsRoomStyles.senderName]}
@@ -47,6 +111,18 @@ const _ChatMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
         <Text style={[styles.time, hmsRoomStyles.time]}>
           {getTimeStringin12HourFormat(message.time)}
         </Text>
+
+        {canTakeAction ? (
+          <TouchableOpacity
+            hitSlop={styles.threeDotsHitSlop}
+            onPress={onThreeDotsPress}
+          >
+            <ThreeDotsIcon
+              stack="vertical"
+              style={[styles.threeDots, hmsRoomStyles.threeDots]}
+            />
+          </TouchableOpacity>
+        ) : null}
       </View>
 
       <Text style={[styles.message, hmsRoomStyles.message]}>
@@ -60,15 +136,16 @@ export const ChatMessage = React.memo(_ChatMessage);
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: 16,
+    marginTop: 4,
     padding: 8,
     width: '100%',
   },
   nameWrapper: {
     flexDirection: 'row',
-    alignItems: 'flex-end',
+    alignItems: 'center',
   },
   senderName: {
+    flexGrow: 1,
     fontSize: 14,
     lineHeight: Platform.OS === 'android' ? 20 : undefined,
     letterSpacing: 0.1,
@@ -83,6 +160,33 @@ const styles = StyleSheet.create({
     fontSize: 14,
     lineHeight: Platform.OS === 'android' ? 20 : undefined,
     letterSpacing: 0.25,
-    marginTop: 8,
+    marginTop: 4,
+  },
+  threeDots: {
+    width: 20,
+    height: 20,
+    marginLeft: 4,
+  },
+  threeDotsHitSlop: {
+    left: 12,
+    right: 12,
+    top: 12,
+    bottom: 12,
+  },
+  pinLabelContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  pinIcon: {
+    width: 12,
+    height: 12,
+    marginRight: 4,
+  },
+  pinnedLabel: {
+    fontSize: 10,
+    textTransform: 'uppercase',
+    lineHeight: 16,
+    letterSpacing: 1.5,
   },
 });

package/src/components/Chat/ChatMoreActionsModal.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+import { interpolate } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+
+import { BottomSheet } from '../BottomSheet';
+import { useIsAllowedToSendMessage, useModalType } from '../../hooks-util';
+import { ModalTypes } from '../../utils/types';
+import { ChatMoreActionsView } from './ChatMoreActionsView';
+import { useFooterHeight } from '../Footer';
+import { useHMSNotificationsHeight } from '../HMSNotifications';
+import type { RootState } from '../../redux';
+
+export interface ChatMoreActionsModalProps {
+  offset?: SharedValue<number>;
+}
+
+const _ChatMoreActionsModal: React.FC<ChatMoreActionsModalProps> = ({
+  offset,
+}) => {
+  const { modalVisibleType, handleModalVisibleType } = useModalType();
+
+  const footerHeight = useFooterHeight();
+  const notificationsHeight = useHMSNotificationsHeight();
+  const isAllowedToSendMessage = useIsAllowedToSendMessage();
+  const isMessageInputVisible = useSelector(
+    (state: RootState) =>
+      state.chatWindow.sendTo !== null && isAllowedToSendMessage
+  );
+
+  const dismissModal = () => handleModalVisibleType(ModalTypes.DEFAULT);
+
+  return (
+    <BottomSheet
+      dismissModal={dismissModal}
+      isVisible={modalVisibleType === ModalTypes.CHAT_MORE_ACTIONS}
+      backdropOpacity={0.1}
+      animationIn={'fadeIn'}
+      animationOut={'fadeOut'}
+      style={styles.modal}
+      containerStyle={[
+        styles.contentContainer,
+        {
+          bottom:
+            (offset
+              ? interpolate(offset.value, [0, 1], [0, footerHeight])
+              : footerHeight) +
+            notificationsHeight +
+            (isMessageInputVisible ? 58 : 8),
+        },
+      ]}
+    >
+      <ChatMoreActionsView onDismiss={dismissModal} />
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    justifyContent: undefined,
+    position: 'relative',
+  },
+  contentContainer: {
+    width: undefined,
+    paddingBottom: 0,
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    backgroundColor: 'transparent',
+    position: 'absolute',
+    right: 8,
+  },
+});
+
+export const ChatMoreActionsModal = React.memo(_ChatMoreActionsModal);

package/src/components/Chat/ChatMoreActionsSheetView.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+import { hexToRgbA } from '../../utils/theme';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import type { RootState } from '../../redux';
+import { setChatMoreActionsSheetVisible } from '../../redux/actions';
+import { ChatMoreActionsView } from './ChatMoreActionsView';
+
+interface ChatMoreActionsSheetViewProps {}
+
+const _ChatMoreActionsSheetView: React.FC<
+  ChatMoreActionsSheetViewProps
+> = ({}) => {
+  const dispatch = useDispatch();
+  const chatMoreActionsSheetVisible = useSelector(
+    (state: RootState) => state.app.chatMoreActionsSheetVisible
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    backdrop: {
+      backgroundColor:
+        theme.palette.background_dim &&
+        hexToRgbA(theme.palette.background_dim, 0.05),
+    },
+  }));
+
+  const closeFiltersBottomSheet = () => {
+    dispatch(setChatMoreActionsSheetVisible(false));
+  };
+
+  if (!chatMoreActionsSheetVisible) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        onPress={closeFiltersBottomSheet}
+        style={[styles.backdrop, hmsRoomStyles.backdrop]}
+      />
+
+      <Animated.View
+        entering={FadeIn.duration(150)}
+        exiting={FadeOut.duration(150)}
+        style={styles.contentContainer}
+      >
+        <ChatMoreActionsView />
+      </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: {
+    position: 'absolute',
+    top: 60,
+    right: 48,
+    overflow: 'hidden',
+  },
+});
+
+export const ChatMoreActionsSheetView = React.memo(_ChatMoreActionsSheetView);