@100mslive/react-native-room-kit 0.0.1

package/src/components/AvatarView.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Text, StyleSheet, View } from 'react-native';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import { getInitials } from '../utils/functions';
+import { COLORS } from '../utils/theme';
+
+type AvatarViewProps = {
+  userName: string;
+  style?: StyleProp<ViewStyle>;
+  initialsStyle?: StyleProp<TextStyle>;
+};
+
+export const AvatarView: React.FC<AvatarViewProps> = ({
+  userName,
+  style,
+  initialsStyle,
+}) => {
+  return (
+    <View
+      style={[
+        styles.avatar,
+        userName.length === 0 ? styles.emptyAvatar : null,
+        style,
+      ]}
+    >
+      <Text style={[styles.avatarText, initialsStyle]}>
+        {userName.length === 0 ? '👤' : getInitials(userName)}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  avatar: {
+    width: 88,
+    aspectRatio: 1,
+    backgroundColor: COLORS.EXTENDED.PURPLE,
+    borderRadius: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyAvatar: {
+    backgroundColor: '#C3D0E5', // TODO: use it from variable
+  },
+  avatarText: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 34,
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    lineHeight: 40,
+    letterSpacing: 0.25,
+  },
+});

package/src/components/BackButton.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { COLORS } from '../utils/theme';
+import { PressableIcon } from './PressableIcon';
+import { ChevronIcon } from '../Icons';
+
+export interface BackButtonProps {}
+
+export const BackButton: React.FC<BackButtonProps> = () => {
+  const navigation = useNavigation();
+
+  if (!navigation.canGoBack()) {
+    return null;
+  }
+
+  const handleGoBack = () => {
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+    }
+  };
+
+  return (
+    <PressableIcon
+      style={styles.button}
+      rounded={true}
+      border={false}
+      onPress={handleGoBack}
+    >
+      <ChevronIcon direction="left" />
+    </PressableIcon>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    marginTop: 16,
+    marginLeft: 8,
+    backgroundColor: COLORS.SURFACE.DEFAULT,
+  },
+});

package/src/components/Chat/ChatBanner.tsx

@@ -0,0 +1,70 @@
+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 { COLORS } from '../../utils/theme';
+import { CustomButton } from '../CustomButton';
+
+export const ChatBanner = () => {
+  const [showBanner, setShowBanner] = React.useState(true);
+
+  if (!showBanner) {
+    return null;
+  }
+
+  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>
+  );
+};
+
+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%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bannerTextContainer: {
+    flex: 1,
+  },
+  bannerText: {
+    fontFamily: 'Inter-Regular',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    color: COLORS.TEXT.MEDIUM_EMPHASIS,
+  },
+});

package/src/components/Chat/ChatList.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { HMSMessage } from '@100mslive/react-native-hms';
+import {
+  FlashList,
+  // FlashListProps
+} from '@shopify/flash-list';
+import { 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';
+
+type ChatListProps = {
+  // estimatedListSize?: FlashListProps<HMSMessage>['estimatedListSize'];
+};
+
+const _ChatList: React.FC<ChatListProps> = () => {
+  const messages = useSelector((state: RootState) => state.messages.messages);
+
+  const _keyExtractor = React.useCallback(
+    (item: HMSMessage) => item.messageId,
+    []
+  );
+
+  const _renderItem = React.useCallback((data: { item: HMSMessage }) => {
+    return <ChatMessage message={data.item} />;
+  }, []);
+
+  return (
+    <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}
+      />
+    </View>
+  );
+};
+
+const chatListStyle = StyleSheet.create({
+  list: {
+    flex: 1,
+    marginVertical: 8,
+  },
+  listContentContainer: {
+    paddingRight: 12,
+  },
+});
+
+export const ChatList = React.memo(_ChatList);

package/src/components/Chat/ChatMessage.tsx

@@ -0,0 +1,237 @@
+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 type { RootState } from '../../redux';
+import { CustomButton } from '../CustomButton';
+import { AvatarView } from '../AvatarView';
+import { COLORS } from '../../utils/theme';
+import { getTimeStringin12HourFormat } from '../../utils/functions';
+
+interface ChatMessageProps {
+  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 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;
+
+  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>
+
+        {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>
+        )}
+      </View>
+
+      <Text
+        style={[
+          styles.messageText,
+          isMessageSenderLocal ? styles.messageTextRightAlign : null,
+        ]}
+        numberOfLines={3}
+      >
+        {message.message}
+      </Text>
+    </View>
+  );
+};
+
+export const ChatMessage = React.memo(_ChatMessage);
+
+const styles = StyleSheet.create({
+  message: {
+    padding: 8,
+    borderRadius: 8,
+    marginTop: 16,
+    width: '100%',
+  },
+  privateMessage: {
+    backgroundColor: COLORS.SURFACE.LIGHT,
+  },
+  messageHeader: {
+    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',
+  },
+  senderName: {
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    textTransform: 'capitalize',
+    marginHorizontal: 8,
+  },
+  messageTime: {
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    color: COLORS.SURFACE.ON_SURFACE.LOW,
+  },
+  messageText: {
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+  messageTextRightAlign: {
+    textAlign: 'right',
+  },
+  pinIcon: {
+    color: COLORS.WHITE,
+  },
+  pinIconContainer: {
+    flex: 1,
+    height: '100%',
+    justifyContent: 'flex-end',
+  },
+  localMsgPinIconContainer: {
+    justifyContent: 'flex-start',
+  },
+});

package/src/components/Chat/PinnedMessage.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { View, StyleSheet, Text } 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';
+
+export const PinnedMessage = () => {
+  const pinnedMessage = useSelector(
+    (state: RootState) => state.messages.pinnedMessage
+  );
+  const hmsSessionStore = useSelector(
+    (state: RootState) => state.user.hmsSessionStore
+  );
+
+  const removePinnedMessage = React.useCallback(async () => {
+    // If instance of HMSSessionStore is available
+    if (hmsSessionStore) {
+      try {
+        // set `value` on `session` with key 'pinnedMessage'
+        const response = await hmsSessionStore.set(null, 'pinnedMessage');
+        console.log('setSessionMetaData Response -> ', response);
+      } catch (error) {
+        console.log('setSessionMetaData Error -> ', error);
+      }
+    }
+  }, [hmsSessionStore]);
+
+  if (!pinnedMessage || pinnedMessage.length <= 0) {
+    return null;
+  }
+
+  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>
+  );
+};
+
+const styles = StyleSheet.create({
+  pinnedMessage: {
+    height: 80,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: COLORS.SURFACE.LIGHT,
+    borderRadius: 8,
+  },
+  bannerIcon: {
+    color: COLORS.TEXT.DISABLED,
+  },
+  bannerIconContainer: {
+    width: 52,
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bannerTextContainer: {
+    flex: 1,
+  },
+  bannerText: {
+    fontFamily: 'Inter-Regular',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    color: COLORS.TEXT.MEDIUM_EMPHASIS,
+  },
+});

package/src/components/Chat/index.ts

@@ -0,0 +1,4 @@
+export * from './ChatBanner';
+export * from './ChatList';
+export * from './ChatMessage';
+export * from './PinnedMessage';