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

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);

package/src/components/Chat/ChatMoreActionsView.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { useDispatch } from 'react-redux';
+import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
+
+import { PauseCircleIcon } from '../../Icons';
+import { useHMSChatState, useHMSRoomStyleSheet } from '../../hooks-util';
+import { setChatMoreActionsSheetVisible } from '../../redux/actions';
+
+interface ChatMoreActionsViewProps {
+  onDismiss?: () => void;
+}
+
+const _ChatMoreActionsView: React.FC<ChatMoreActionsViewProps> = ({
+  onDismiss,
+}) => {
+  const dispatch = useDispatch();
+  const { chatState, setChatState } = useHMSChatState();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_default,
+      borderColor: theme.palette.border_default,
+    },
+    // --- Button Item Styles ---
+    buttonText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const pauseChatHandler = () => {
+    setChatState(!chatState.enabled);
+    if (onDismiss) {
+      onDismiss();
+    } else {
+      dispatch(setChatMoreActionsSheetVisible(false));
+    }
+  };
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <TouchableOpacity onPress={pauseChatHandler} style={styles.button}>
+        <View style={styles.buttonWrapper}>
+          {chatState.enabled ? (
+            <PauseCircleIcon style={styles.buttonIcon} />
+          ) : null}
+          <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+            {chatState.enabled ? 'Pause Chat' : 'Resume Chat'}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  // --- Button Item Styles ---
+  button: {
+    paddingHorizontal: 8,
+    paddingVertical: 16,
+  },
+  buttonWrapper: {
+    paddingHorizontal: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  buttonIcon: {
+    width: 20,
+    height: 20,
+    marginRight: 8,
+  },
+  buttonText: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  },
+});
+
+export const ChatMoreActionsView = React.memo(_ChatMoreActionsView);

package/src/components/Chat/ChatPaused.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import {
+  useHMSCanDisableChat,
+  useHMSChatState,
+  useHMSRoomStyleSheet,
+} from '../../hooks-util';
+import { HMSPrimaryButton } from '../HMSPrimaryButton';
+import { hexToRgbA } from '../../utils/theme';
+
+interface ChatPausedProps {
+  insetMode?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const _ChatPaused: React.FC<ChatPausedProps> = ({
+  insetMode = false,
+  style,
+}) => {
+  const canDisableChat = useHMSCanDisableChat();
+  const { chatState, setChatState } = useHMSChatState();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      container: {
+        backgroundColor: insetMode
+          ? theme.palette.background_dim &&
+            hexToRgbA(theme.palette.background_dim, 0.64)
+          : theme.palette.surface_default,
+      },
+      title: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+      subtitle: {
+        color: theme.palette.on_surface_medium,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+    }),
+    [insetMode]
+  );
+
+  const resumeChatHandler = () => {
+    setChatState(true);
+  };
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container, style]}>
+      <View style={styles.textContainer}>
+        <Text style={[styles.title, hmsRoomStyles.title]}>Chat Paused</Text>
+
+        <Text
+          numberOfLines={1}
+          style={[styles.subtitle, hmsRoomStyles.subtitle]}
+        >
+          Chat has been paused by{' '}
+          {!chatState.enabled ? chatState.updatedBy.userName : null}
+        </Text>
+      </View>
+
+      {canDisableChat ? (
+        <HMSPrimaryButton
+          title="Resume"
+          loading={false}
+          onPress={resumeChatHandler}
+          style={styles.resumeBtn}
+          wrapWithGestureDetector={true}
+        />
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    paddingVertical: 8,
+    paddingRight: 8,
+    paddingLeft: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  textContainer: {
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  title: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  },
+  subtitle: {
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+  },
+  resumeBtn: { marginLeft: 16 },
+});
+
+export const ChatPaused = React.memo(_ChatPaused);

package/src/components/Chat/MessageOptionsBottomSheet.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import { BottomSheet } from '../BottomSheet';
+import { useHMSRoomStyleSheet, useModalType } from '../../hooks-util';
+import { ModalTypes } from '../../utils/types';
+import { MessageOptionsView } from './MessageOptionsView';
+
+const _MessageOptionsBottomSheet = () => {
+  const { modalVisibleType, handleModalVisibleType } = useModalType();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    contentContainer: {
+      backgroundColor: theme.palette.surface_default,
+    },
+  }));
+
+  const dismissModal = React.useCallback(
+    () => handleModalVisibleType(ModalTypes.DEFAULT),
+    [handleModalVisibleType]
+  );
+
+  return (
+    <BottomSheet
+      dismissModal={dismissModal}
+      isVisible={modalVisibleType === ModalTypes.MESSAGE_OPTIONS}
+      containerStyle={hmsRoomStyles.contentContainer}
+    >
+      <MessageOptionsView onDismiss={dismissModal} />
+    </BottomSheet>
+  );
+};
+
+export const MessageOptionsBottomSheet = React.memo(_MessageOptionsBottomSheet);

package/src/components/Chat/MessageOptionsBottomSheetView.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';
+
+import { hexToRgbA } from '../../utils/theme';
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+import type { RootState } from '../../redux';
+import { setSelectedMessageForAction } from '../../redux/actions';
+import { MessageOptionsView } from './MessageOptionsView';
+
+interface MessageOptionsBottomSheetViewProps {}
+
+const _MessageOptionsBottomSheetView: React.FC<
+  MessageOptionsBottomSheetViewProps
+> = ({}) => {
+  const dispatch = useDispatch();
+  const selectedMessageForAction = useSelector(
+    (state: RootState) => state.app.selectedMessageForAction
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    backdrop: {
+      backgroundColor:
+        theme.palette.background_dim &&
+        hexToRgbA(theme.palette.background_dim, 0.1),
+    },
+    contentContainer: {
+      backgroundColor: theme.palette.surface_default,
+    },
+  }));
+
+  const closeMessageOptionsBottomSheet = () => {
+    dispatch(setSelectedMessageForAction(null));
+  };
+
+  if (!selectedMessageForAction) {
+    return null;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Pressable
+        onPress={closeMessageOptionsBottomSheet}
+        style={[styles.backdrop, hmsRoomStyles.backdrop]}
+      />
+
+      <Animated.View
+        entering={SlideInDown}
+        exiting={SlideOutDown}
+        style={[styles.contentContainer, hmsRoomStyles.contentContainer]}
+      >
+        <MessageOptionsView />
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: 1,
+    justifyContent: 'flex-end',
+    alignSelf: 'center',
+  },
+  backdrop: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+  contentContainer: {
+    width: '100%',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+});
+
+export const MessageOptionsBottomSheetView = React.memo(
+  _MessageOptionsBottomSheetView
+);