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

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

package/src/components/Chat/MessageOptionsView.tsx

@@ -0,0 +1,248 @@
+import * as React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+  useAllowBlockingPeerFromChat,
+  useAllowPinningMessage,
+  useBlockPeerActions,
+  useHMSInstance,
+  useHMSMessagePinningActions,
+  useHMSRoomStyle,
+  useHMSRoomStyleSheet,
+  useIsMessagePinned,
+  useIsPeerBlocked,
+  useModalType,
+} from '../../hooks-util';
+import type { RootState } from '../../redux';
+import { BottomSheet } from '../BottomSheet';
+import { NoEntryIcon, PersonIcon, PinIcon } from '../../Icons';
+import {
+  addNotification,
+  setSelectedMessageForAction,
+} from '../../redux/actions';
+import { ModalTypes } from '../../utils/types';
+import { NotificationTypes } from '../../types';
+
+interface MessageOptionsViewProps {
+  onDismiss?: () => void;
+}
+
+const _MessageOptionsView: React.FC<MessageOptionsViewProps> = ({
+  onDismiss,
+}) => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+  const localPeerPermissions = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.role?.permissions
+  );
+  const localPeerId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.peerID
+  );
+  const selectedMessageForAction = useSelector(
+    (state: RootState) => state.app.selectedMessageForAction
+  );
+
+  const allowPinningMessage = useAllowPinningMessage();
+  const isPinned = useIsMessagePinned(selectedMessageForAction);
+  const { pinMessage, unpinMessage } = useHMSMessagePinningActions();
+
+  const allowPeerBlocking = useAllowBlockingPeerFromChat();
+  const isPeerBlocked = useIsPeerBlocked(
+    selectedMessageForAction?.sender ?? null
+  );
+  const { blockPeer, unblockPeer } = useBlockPeerActions();
+
+  const { handleModalVisibleType } = useModalType();
+
+  const hmsRoomStyle = useHMSRoomStyleSheet((theme) => ({
+    blockLabel: {
+      color: theme.palette.alert_error_default,
+    },
+    blockIcon: {
+      tintColor: theme.palette.alert_error_default,
+    },
+  }));
+
+  const closeMessageOptionsBottomSheet = () => {
+    if (onDismiss) {
+      onDismiss();
+    } else {
+      dispatch(setSelectedMessageForAction(null));
+    }
+  };
+
+  const showError = (error: any) => {
+    if (!onDismiss) {
+      handleModalVisibleType(ModalTypes.DEFAULT);
+    }
+    dispatch(
+      addNotification({
+        id: Math.random().toString(16).slice(2),
+        type: NotificationTypes.ERROR,
+        title: error.message,
+      })
+    );
+  };
+
+  const handleMessagePin = async () => {
+    try {
+      if (selectedMessageForAction) {
+        if (isPinned) {
+          await unpinMessage(selectedMessageForAction);
+        } else {
+          await pinMessage(selectedMessageForAction);
+        }
+      }
+      closeMessageOptionsBottomSheet();
+    } catch (error) {
+      closeMessageOptionsBottomSheet();
+      showError(error);
+    }
+  };
+
+  const handleBlockPeerFromChat = async () => {
+    try {
+      if (selectedMessageForAction?.sender) {
+        if (isPeerBlocked) {
+          await unblockPeer(selectedMessageForAction.sender);
+        } else {
+          await blockPeer(selectedMessageForAction.sender);
+        }
+      }
+      closeMessageOptionsBottomSheet();
+    } catch (error) {
+      closeMessageOptionsBottomSheet();
+      showError(error);
+    }
+  };
+
+  const handleRemoveParticipant = async () => {
+    if (selectedMessageForAction?.sender) {
+      await hmsInstance.removePeer(
+        selectedMessageForAction.sender,
+        'Removed from chat'
+      );
+    }
+    closeMessageOptionsBottomSheet();
+  };
+
+  const hidePinItem = !(selectedMessageForAction && allowPinningMessage);
+  const hideBlockItem = !(
+    selectedMessageForAction &&
+    selectedMessageForAction.sender &&
+    allowPeerBlocking &&
+    selectedMessageForAction.sender.peerID !== localPeerId
+  );
+  const hideRemoveItem = !(
+    localPeerPermissions?.removeOthers &&
+    selectedMessageForAction?.sender &&
+    !selectedMessageForAction.sender.isLocal
+  );
+
+  return (
+    <View>
+      <BottomSheet.Header
+        heading="Message Options"
+        dismissModal={closeMessageOptionsBottomSheet}
+      />
+
+      <BottomSheet.Divider style={styles.headerDivider} />
+
+      {hidePinItem ? null : (
+        <MessageOptionsItem
+          label={isPinned ? 'Unpin' : 'Pin'}
+          icon={
+            <PinIcon type={isPinned ? 'unpin' : 'pin'} style={styles.icon} />
+          }
+          onPress={handleMessagePin}
+        />
+      )}
+
+      {hideBlockItem ? null : (
+        <MessageOptionsItem
+          label={isPeerBlocked ? 'Unblock from Chat' : 'Block from Chat'}
+          labelStyle={hmsRoomStyle.blockLabel}
+          icon={<NoEntryIcon style={[styles.icon, hmsRoomStyle.blockIcon]} />}
+          onPress={handleBlockPeerFromChat}
+        />
+      )}
+
+      {hideRemoveItem ? null : (
+        <MessageOptionsItem
+          label="Remove Participant"
+          labelStyle={hmsRoomStyle.blockLabel}
+          icon={
+            <PersonIcon
+              type="left"
+              style={[styles.icon, hmsRoomStyle.blockIcon]}
+            />
+          }
+          onPress={handleRemoveParticipant}
+        />
+      )}
+
+      <View style={styles.bottomSpacer} />
+    </View>
+  );
+};
+
+interface MessageOptionsItemProps {
+  label: string;
+  onPress(): void;
+  icon?: React.ReactElement;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+}
+
+const MessageOptionsItem: React.FC<MessageOptionsItemProps> = ({
+  label,
+  onPress,
+  icon = null,
+  style,
+  labelStyle,
+}) => {
+  const textStyle = useHMSRoomStyle((theme, typography) => ({
+    color: theme.palette.on_surface_high,
+    fontFamily: `${typography.font_family}-SemiBold`,
+  }));
+
+  return (
+    <TouchableOpacity style={[styles.container, style]} onPress={onPress}>
+      {icon}
+
+      <Text style={[styles.text, textStyle, labelStyle]}>{label}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  // Item styles
+  container: {
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+    marginLeft: 8,
+  },
+  // Container styles
+  headerDivider: {
+    marginVertical: 12,
+  },
+  icon: {
+    width: 20,
+    height: 20,
+  },
+  bottomSpacer: {
+    width: '100%',
+    height: 32,
+  },
+});
+
+export const MessageOptionsView = React.memo(_MessageOptionsView);

package/src/components/Chat/PeerBlockedFromChat.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../../hooks-util';
+
+interface PeerBlockedFromChatProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export const _PeerBlockedFromChat: React.FC<PeerBlockedFromChatProps> = ({
+  style,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    subtitle: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container, style]}>
+      <Text style={[styles.subtitle, hmsRoomStyles.subtitle]}>
+        You've been blocked from sending messages
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  subtitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    textAlign: 'center',
+  },
+});
+
+export const PeerBlockedFromChat = React.memo(_PeerBlockedFromChat);