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

package/src/components/Chat/ChatFilterView.tsx

@@ -0,0 +1,250 @@
+import * as React from 'react';
+import type { HMSRemotePeer } from '@100mslive/react-native-hms';
+import { FlashList, type ListRenderItem } from '@shopify/flash-list';
+import { StyleSheet, Text, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+  useHMSInstance,
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+} from '../../hooks-util';
+import type { RootState } from '../../redux';
+import { BottomSheet } from '../BottomSheet';
+import { HMSTextInput } from '../HMSTextInput';
+import { ParticipantsIcon, SearchIcon } from '../../Icons';
+import { ChatFilterItem } from './ChatFilterItem';
+import { setChatFilterSheetVisible } from '../../redux/actions';
+import { ChatBroadcastFilter } from '../../utils/types';
+
+interface ChatFilterViewProps {}
+
+const _ChatFilterView: React.FC<ChatFilterViewProps> = () => {
+  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 { on_surface_medium: onSurfaceMediumColor } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    textInputContainer: {
+      backgroundColor: theme.palette.surface_dim,
+      borderColor: theme.palette.border_bright,
+    },
+    placeholderText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    label: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  React.useEffect(() => {
+    let mounted = true;
+
+    const fetchRemotePeers = async () => {
+      setLoadingPeersList(true);
+      const fetchedRemotePeers = await hmsInstance.getRemotePeers();
+      if (mounted) {
+        setLoadingPeersList(false);
+        setRemotePeers(fetchedRemotePeers);
+      }
+    };
+
+    fetchRemotePeers();
+
+    return () => {
+      mounted = false;
+    };
+  }, [hmsInstance]);
+
+  const _keyExtractor = React.useCallback(
+    (item: HMSRemotePeer) => item.peerID,
+    []
+  );
+
+  const _renderItem: ListRenderItem<HMSRemotePeer> = React.useCallback(
+    ({ item, extraData }) => (
+      <ChatFilterItem
+        item={item}
+        active={extraData.name === item.name}
+        disabled={extraData.name === item.name}
+      />
+    ),
+    []
+  );
+
+  const closeFiltersBottomSheet = () => {
+    dispatch(setChatFilterSheetVisible(false));
+  };
+
+  const formattedFilterText = filterText.trim().toLowerCase();
+
+  // Filtering Peers
+  const filteredRemotePeers = React.useMemo(() => {
+    if (formattedFilterText.length <= 0) {
+      return remotePeers;
+    }
+
+    return remotePeers.filter((remotePeer) =>
+      remotePeer.name.toLowerCase().includes(formattedFilterText)
+    );
+  }, [formattedFilterText, remotePeers]);
+
+  // Filtering Broadcast option
+  const showBroadcastOption =
+    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;
+  });
+
+  const isBroadcastFilterSelected =
+    !('publishSettings' in filter || 'peerId' in filter) && // filter is not HMSRole and HMSRemotePeer
+    filter.name === ChatBroadcastFilter.name;
+
+  return (
+    <View style={{ flex: 1 }}>
+      <BottomSheet.Header
+        heading="Send Message to"
+        dismissModal={closeFiltersBottomSheet}
+      />
+
+      <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} />}
+      />
+
+      <FlashList
+        data={filteredRemotePeers}
+        extraData={filter}
+        estimatedItemSize={104}
+        contentContainerStyle={styles.list}
+        keyboardShouldPersistTaps="always"
+        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>
+        }
+        ListHeaderComponent={
+          <View>
+            {showBroadcastOption ? (
+              <>
+                <ChatFilterItem
+                  item={ChatBroadcastFilter}
+                  active={isBroadcastFilterSelected}
+                  disabled={isBroadcastFilterSelected}
+                  icon={<ParticipantsIcon />}
+                />
+                <BottomSheet.Divider style={styles.divider} />
+              </>
+            ) : null}
+
+            {foundRoles.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;
+
+                  return (
+                    <ChatFilterItem
+                      key={role.name}
+                      item={role}
+                      active={isActive}
+                      disabled={isActive}
+                    />
+                  );
+                })}
+                <BottomSheet.Divider style={styles.divider} />
+              </View>
+            ) : null}
+
+            <Text style={[styles.label, hmsRoomStyles.label]}>
+              PARTICIPANTS
+            </Text>
+          </View>
+        }
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerDivider: {
+    marginVertical: 12,
+  },
+  textInputContainer: {
+    borderWidth: 1,
+    flex: 0,
+    marginHorizontal: 24,
+    height: 48,
+    paddingHorizontal: 16,
+  },
+  textInputFocusedContainer: {
+    borderWidth: 1,
+  },
+  textInputSearchIcon: {
+    marginRight: 8,
+    alignSelf: 'center',
+  },
+  list: {
+    paddingBottom: 32,
+  },
+  placeholderContainer: {
+    marginTop: 24,
+  },
+  placeholderText: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+    textAlign: 'center',
+  },
+  divider: {
+    marginVertical: 0,
+  },
+  label: {
+    fontSize: 10,
+    lineHeight: 16,
+    letterSpacing: 1.5,
+    marginHorizontal: 32,
+    marginTop: 16,
+  },
+});
+
+export const ChatFilterView = React.memo(_ChatFilterView);

package/src/components/Chat/ChatList.tsx

@@ -32,17 +32,20 @@ const _ChatList: React.FC<ChatListProps> = () => {
     <View style={chatListStyle.list}>
       <PinnedMessage />
 
-      <FlashList
-        data={messages}
-        inverted={true}
-        estimatedItemSize={104}
-        contentContainerStyle={chatListStyle.listContentContainer} // Bug: Android inverted flashlist will apply padding on left when `paddingRight: 12` is applied
-        keyboardShouldPersistTaps="always"
-        ListEmptyComponent={ChatBanner}
-        // ItemSeparatorComponent={() => <View style={{ height: 16 }} />} // TODO: There is a bug related to this: https://github.com/Shopify/flash-list/issues/638
-        renderItem={_renderItem}
-        keyExtractor={_keyExtractor}
-      />
+      {messages.length > 0 ? (
+        <FlashList
+          data={messages}
+          inverted={true}
+          estimatedItemSize={75}
+          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}
+          keyExtractor={_keyExtractor}
+        />
+      ) : (
+        <ChatBanner />
+      )}
     </View>
   );
 };
@@ -50,7 +53,8 @@ const _ChatList: React.FC<ChatListProps> = () => {
 const chatListStyle = StyleSheet.create({
   list: {
     flex: 1,
-    marginVertical: 8,
+    marginTop: 8,
+    marginBottom: 16,
   },
   listContentContainer: {
     paddingRight: 12,

package/src/components/Chat/ChatMessage.tsx

@@ -1,140 +1,55 @@
 import * as React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import {
-  HMSMessage,
-  HMSMessageRecipientType,
-} from '@100mslive/react-native-hms';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useSelector } from 'react-redux';
+import { View, Text, StyleSheet, Platform } from 'react-native';
+import { HMSMessage } from '@100mslive/react-native-hms';
 
-import type { RootState } from '../../redux';
-import { CustomButton } from '../CustomButton';
-import { AvatarView } from '../AvatarView';
-import { COLORS } from '../../utils/theme';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
 import { getTimeStringin12HourFormat } from '../../utils/functions';
 
-interface ChatMessageProps {
+interface HMSHLSMessageProps {
   message: HMSMessage;
 }
 
-const _ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {
-  const hmsSessionStore = useSelector(
-    (state: RootState) => state.user.hmsSessionStore
-  );
-
-  const pinMessage = async () => {
-    // If instance of HMSSessionStore is available
-    if (hmsSessionStore) {
-      try {
-        const formattedMessage = `${message.sender?.name || 'Anonymous'}: ${
-          message.message
-        }`;
-
-        // set `formattedMessage` on `session` with key 'pinnedMessage'
-        const response = await hmsSessionStore.set(
-          formattedMessage,
-          'pinnedMessage'
-        );
-        console.log('setSessionMetaData Response -> ', response);
-      } catch (error) {
-        console.log('setSessionMetaData Error -> ', error);
-      }
-    }
-  };
-
+const _ChatMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
   const messageSender = message.sender;
-  const isMessageSenderLocal = messageSender?.isLocal;
 
-  const messageRecipient = message.recipient;
-  const isBroadcastMessage =
-    messageRecipient.recipientType === HMSMessageRecipientType.BROADCAST;
-  const isPrivatePeerMessage =
-    messageRecipient.recipientType === HMSMessageRecipientType.PEER;
-  const isPrivateRoleMessage =
-    messageRecipient.recipientType === HMSMessageRecipientType.ROLES;
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      senderName: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+      message: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+      time: {
+        color: theme.palette.on_surface_medium,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+    }),
+    []
+  );
 
   return (
-    <View
-      style={[
-        styles.message,
-        isBroadcastMessage ? null : styles.privateMessage,
-      ]}
-    >
-      <View
-        style={[
-          styles.messageHeader,
-          isMessageSenderLocal ? styles.localMessageHeader : null,
-        ]}
-      >
-        <View style={styles.headingLeftContainer}>
-          <AvatarView
-            userName={messageSender?.name || ''}
-            style={styles.messageAvatar}
-            initialsStyle={styles.messageAvatarText}
-          />
-
-          <Text
-            style={styles.senderName}
-            numberOfLines={1}
-            ellipsizeMode="middle"
-          >
-            {messageSender
-              ? messageSender.isLocal
-                ? 'You'
-                : messageSender.name
-              : 'Anonymous'}
-          </Text>
-
-          <Text style={styles.messageTime}>
-            {getTimeStringin12HourFormat(message.time)}
-          </Text>
-        </View>
+    <View style={styles.container}>
+      <View style={[styles.nameWrapper]}>
+        <Text
+          style={[styles.senderName, hmsRoomStyles.senderName]}
+          numberOfLines={1}
+        >
+          {messageSender
+            ? messageSender.isLocal
+              ? 'You'
+              : messageSender.name
+            : 'Anonymous'}
+        </Text>
 
-        {isBroadcastMessage ? (
-          <CustomButton
-            onPress={pinMessage}
-            viewStyle={[
-              styles.pinIconContainer,
-              isMessageSenderLocal ? styles.localMsgPinIconContainer : null,
-            ]}
-            LeftIcon={
-              <MaterialCommunityIcons
-                style={styles.pinIcon}
-                size={24}
-                name="pin-outline"
-              />
-            }
-          />
-        ) : (
-          <View style={styles.privateRecipientTypeContainer}>
-            <Text
-              style={styles.private}
-              numberOfLines={1}
-              ellipsizeMode="middle"
-            >
-              {isPrivatePeerMessage
-                ? `${
-                    isMessageSenderLocal
-                      ? 'TO ' + messageRecipient.recipientPeer?.name
-                      : 'TO YOU'
-                  } | PRIVATE`
-                : null}
-              {isPrivateRoleMessage &&
-              messageRecipient.recipientRoles.length > 0
-                ? messageRecipient.recipientRoles[0]!.name
-                : null}
-            </Text>
-          </View>
-        )}
+        <Text style={[styles.time, hmsRoomStyles.time]}>
+          {getTimeStringin12HourFormat(message.time)}
+        </Text>
       </View>
 
-      <Text
-        style={[
-          styles.messageText,
-          isMessageSenderLocal ? styles.messageTextRightAlign : null,
-        ]}
-        numberOfLines={3}
-      >
+      <Text style={[styles.message, hmsRoomStyles.message]}>
         {message.message}
       </Text>
     </View>
@@ -144,94 +59,30 @@ const _ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {
 export const ChatMessage = React.memo(_ChatMessage);
 
 const styles = StyleSheet.create({
-  message: {
-    padding: 8,
-    borderRadius: 8,
+  container: {
     marginTop: 16,
+    padding: 8,
     width: '100%',
   },
-  privateMessage: {
-    backgroundColor: COLORS.SURFACE.LIGHT,
-  },
-  messageHeader: {
+  nameWrapper: {
     flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8,
-    justifyContent: 'space-between',
-  },
-  localMessageHeader: {
-    flexDirection: 'row-reverse',
-  },
-  headingLeftContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  messageAvatar: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-  },
-  messageAvatarText: {
-    fontSize: 10,
-    lineHeight: undefined,
-  },
-  privateRecipientTypeContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderRadius: 4,
-    borderColor: COLORS.BORDER.LIGHT,
-    justifyContent: 'center',
-    padding: 4,
-    flexShrink: 1,
-    marginLeft: 8,
-  },
-  private: {
-    fontFamily: 'Inter-Medium',
-    fontSize: 10,
-    lineHeight: 16,
-    letterSpacing: 1.5,
-    color: COLORS.TEXT.HIGH_EMPHASIS,
-    textTransform: 'uppercase',
+    alignItems: 'flex-end',
   },
   senderName: {
-    fontFamily: 'Inter',
-    fontWeight: '600',
     fontSize: 14,
-    lineHeight: 20,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
     letterSpacing: 0.1,
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    textTransform: 'capitalize',
-    marginHorizontal: 8,
   },
-  messageTime: {
-    fontFamily: 'Inter',
-    fontWeight: '400',
+  time: {
     fontSize: 12,
     lineHeight: 16,
     letterSpacing: 0.4,
-    color: COLORS.SURFACE.ON_SURFACE.LOW,
+    marginLeft: 4,
   },
-  messageText: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+  message: {
     fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    lineHeight: 20,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
     letterSpacing: 0.25,
-  },
-  messageTextRightAlign: {
-    textAlign: 'right',
-  },
-  pinIcon: {
-    color: COLORS.WHITE,
-  },
-  pinIconContainer: {
-    flex: 1,
-    height: '100%',
-    justifyContent: 'flex-end',
-  },
-  localMsgPinIconContainer: {
-    justifyContent: 'flex-start',
+    marginTop: 8,
   },
 });

package/src/components/Chat/PinnedMessage.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
-import { View, StyleSheet, Text } from 'react-native';
+import {
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
 import { useSelector } from 'react-redux';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
-import { COLORS } from '../../utils/theme';
 import type { RootState } from '../../redux';
-import { CustomButton } from '../CustomButton';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import { CloseIcon, PinIcon } from '../../Icons';
 
 export const PinnedMessage = () => {
   const pinnedMessage = useSelector(
@@ -15,6 +20,19 @@ export const PinnedMessage = () => {
     (state: RootState) => state.user.hmsSessionStore
   );
 
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    closeIcon: {
+      tintColor: theme.palette.on_surface_medium,
+    },
+    text: {
+      fontFamily: `${typography.font_family}-Regular`,
+      color: theme.palette.on_surface_high,
+    },
+  }));
+
   const removePinnedMessage = React.useCallback(async () => {
     // If instance of HMSSessionStore is available
     if (hmsSessionStore) {
@@ -33,57 +51,39 @@ export const PinnedMessage = () => {
   }
 
   return (
-    <View style={styles.pinnedMessage}>
-      <View style={styles.bannerIconContainer}>
-        <MaterialCommunityIcons
-          style={styles.bannerIcon}
-          size={16}
-          name="pin-outline"
-        />
-      </View>
-      <View style={styles.bannerTextContainer}>
-        <Text style={styles.bannerText}>{pinnedMessage}</Text>
-      </View>
-      <CustomButton
-        onPress={removePinnedMessage}
-        viewStyle={styles.bannerIconContainer}
-        LeftIcon={
-          <MaterialCommunityIcons
-            style={styles.bannerIcon}
-            size={24}
-            name="close"
-          />
-        }
-      />
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <PinIcon style={[styles.icon, hmsRoomStyles.closeIcon]} />
+
+      <ScrollView style={styles.textWrapper}>
+        <Text style={[styles.text, hmsRoomStyles.text]}>{pinnedMessage}</Text>
+      </ScrollView>
+
+      <TouchableOpacity onPress={removePinnedMessage}>
+        <CloseIcon style={[styles.icon, hmsRoomStyles.closeIcon]} />
+      </TouchableOpacity>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  pinnedMessage: {
-    height: 80,
+  container: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: COLORS.SURFACE.LIGHT,
     borderRadius: 8,
+    padding: 8,
+    marginTop: 8,
   },
-  bannerIcon: {
-    color: COLORS.TEXT.DISABLED,
-  },
-  bannerIconContainer: {
-    width: 52,
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
+  textWrapper: {
+    maxHeight: 50,
+    marginHorizontal: 8,
   },
-  bannerTextContainer: {
-    flex: 1,
+  icon: {
+    width: 20,
+    height: 20,
   },
-  bannerText: {
-    fontFamily: 'Inter-Regular',
-    fontSize: 12,
-    lineHeight: 16,
-    letterSpacing: 0.4,
-    color: COLORS.TEXT.MEDIUM_EMPHASIS,
+  text: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
   },
 });