@100mslive/react-native-room-kit/lib/module/components/Chat/ChatMessage.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { View, Text, StyleSheet, Platform, TouchableOpacity, Linking } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { useAllowBlockingPeerFromChat, useAllowPinningMessage, useHMSRoomStyleSheet } from '../../hooks-util';
import { getTimeStringin12HourFormat, splitLinksAndContent } from '../../utils/functions';
import { PinIcon, ThreeDotsIcon } from '../../Icons';
import { setSelectedMessageForAction } from '../../redux/actions';
const _ChatMessage = ({
  message
}) => {
  const dispatch = useDispatch();
  const isPinned = useSelector(state => state.messages.pinnedMessages.findIndex(pinnedMessage => pinnedMessage.id === message.messageId) >= 0);
  const localPeerId = useSelector(state => {
    var _state$hmsStates$loca;
    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.peerID;
  });
  const allowPinningMessage = useAllowPinningMessage();
  const allowPeerBlocking = useAllowBlockingPeerFromChat();
  const canRemoveOthers = useSelector(state => {
    var _state$hmsStates$loca2;
    return !!((_state$hmsStates$loca2 = state.hmsStates.localPeer) !== null && _state$hmsStates$loca2 !== void 0 && (_state$hmsStates$loca2 = _state$hmsStates$loca2.role) !== null && _state$hmsStates$loca2 !== void 0 && (_state$hmsStates$loca2 = _state$hmsStates$loca2.permissions) !== null && _state$hmsStates$loca2 !== void 0 && _state$hmsStates$loca2.removeOthers);
  });
  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_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`
    },
    link: {
      color: theme.palette.primary_bright
    }
  }), []);
  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

  const handleLinkPress = async url => {
    const canOpen = await Linking.canOpenURL(url);
    if (canOpen) {
      await Linking.openURL(url);
    }
  };
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, isPinned ? /*#__PURE__*/React.createElement(View, {
    style: styles.pinLabelContainer
  }, /*#__PURE__*/React.createElement(PinIcon, {
    type: "pin",
    style: [styles.pinIcon, hmsRoomStyles.threeDots]
  }), /*#__PURE__*/React.createElement(Text, {
    style: [styles.pinnedLabel, hmsRoomStyles.pinnedLabel]
  }, "PINNED")) : null, /*#__PURE__*/React.createElement(View, {
    style: [styles.nameWrapper]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [styles.senderName, hmsRoomStyles.senderName],
    numberOfLines: 1
  }, messageSender ? messageSender.isLocal ? 'You' : messageSender.name : 'Anonymous'), /*#__PURE__*/React.createElement(Text, {
    style: [styles.time, hmsRoomStyles.time]
  }, getTimeStringin12HourFormat(message.time)), canTakeAction ? /*#__PURE__*/React.createElement(TouchableOpacity, {
    hitSlop: styles.threeDotsHitSlop,
    onPress: onThreeDotsPress
  }, /*#__PURE__*/React.createElement(ThreeDotsIcon, {
    stack: "vertical",
    style: [styles.threeDots, hmsRoomStyles.threeDots]
  })) : null), /*#__PURE__*/React.createElement(Text, {
    style: [styles.message, hmsRoomStyles.message]
  }, splitLinksAndContent(message.message, {
    pressHandler: handleLinkPress,
    style: hmsRoomStyles.link
  })));
};
export const ChatMessage = /*#__PURE__*/React.memo(_ChatMessage);
const styles = StyleSheet.create({
  container: {
    marginTop: 4,
    padding: 8,
    width: '100%'
  },
  nameWrapper: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  senderName: {
    flexGrow: 1,
    fontSize: 14,
    lineHeight: Platform.OS === 'android' ? 20 : undefined,
    letterSpacing: 0.1
  },
  time: {
    fontSize: 12,
    lineHeight: 16,
    letterSpacing: 0.4,
    marginLeft: 4
  },
  message: {
    fontSize: 14,
    lineHeight: Platform.OS === 'android' ? 20 : undefined,
    letterSpacing: 0.25,
    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
  }
});
//# sourceMappingURL=ChatMessage.js.map