@100mslive/react-native-room-kit/lib/module/components/HMSOverlayMessageView.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 { useDispatch, useSelector } from 'react-redux';
import { View, Text, StyleSheet, Platform, TouchableOpacity, Linking } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { useAllowBlockingPeerFromChat, useAllowPinningMessage, useHMSRoomStyleSheet, useModalType } from '../hooks-util';
import { PinIcon, ThreeDotsIcon } from '../Icons';
import { setSelectedMessageForAction } from '../redux/actions';
import { ModalTypes } from '../utils/types';
import { splitLinksAndContent } from '../utils/functions';
const _HMSOverlayMessageView = ({
  message
}) => {
  const dispatch = useDispatch();
  const {
    handleModalVisibleType
  } = useModalType();
  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 isPinned = useSelector(state => state.messages.pinnedMessages.findIndex(pinnedMessage => pinnedMessage.id === message.messageId) >= 0);
  const messageSender = message.sender;
  const hmsRoomStyles = useHMSRoomStyleSheet((_theme, typography) => ({
    senderName: {
      color: '#ffffff',
      fontFamily: `${typography.font_family}-SemiBold`,
      textShadowColor: 'rgba(0, 0, 0, 0.5)'
    },
    message: {
      color: '#ffffff',
      fontFamily: `${typography.font_family}-Regular`,
      textShadowColor: 'rgba(0, 0, 0, 0.5)'
    },
    threeDots: {
      tintColor: '#ffffff'
    },
    pinnedLabel: {
      color: '#ffffff'
    },
    link: {
      color: _theme.palette.primary_bright
    }
  }), []);
  const onThreeDotsPress = () => {
    dispatch(setSelectedMessageForAction(message));
    handleModalVisibleType(ModalTypes.MESSAGE_OPTIONS);
  };
  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'), canTakeAction ? /*#__PURE__*/React.createElement(GestureDetector, {
    gesture: Gesture.Tap()
  }, /*#__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 HMSOverlayMessageView = /*#__PURE__*/React.memo(_HMSOverlayMessageView);
const styles = StyleSheet.create({
  container: {
    marginTop: 8,
    width: '100%'
  },
  nameWrapper: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  senderName: {
    flexGrow: 1,
    fontSize: 14,
    lineHeight: Platform.OS === 'android' ? 20 : undefined,
    letterSpacing: 0.1,
    textShadowOffset: {
      height: 1,
      width: 1
    },
    textShadowRadius: 2
  },
  message: {
    fontSize: 14,
    lineHeight: Platform.OS === 'android' ? 20 : undefined,
    letterSpacing: 0.25,
    marginTop: 2,
    textShadowOffset: {
      height: 0.5,
      width: 0.5
    },
    textShadowRadius: 2
  },
  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=HMSOverlayMessageView.js.map