stream-chat-react-native-core/lib/module/components/Attachment/Attachment.js

The official React Native and Expo components for Stream Chat, a service for building chat applications

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Attachment = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _streamChat = require("stream-chat");
var _AttachmentFileUploadProgressIndicator = require("../../components/Attachment/AttachmentFileUploadProgressIndicator");
var _contexts = require("../../contexts");
var _ComponentsContext = require("../../contexts/componentsContext/ComponentsContext");
var _MessageContext = require("../../contexts/messageContext/MessageContext");
var _MessagesContext = require("../../contexts/messagesContext/MessagesContext");
var _usePendingAttachmentUpload = require("../../hooks/usePendingAttachmentUpload");
var _native = require("../../native");
var _theme = require("../../theme");
var _types = require("../../types/types");
var _utils = require("../../utils/utils");
var _jsxRuntime = require("react/jsx-runtime");
var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/Attachment.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var AttachmentWithContext = props => {
  var attachment = props.attachment,
    index = props.index,
    message = props.message,
    urlPreviewType = props.urlPreviewType;
  var _useComponentsContext = (0, _ComponentsContext.useComponentsContext)(),
    AudioAttachment = _useComponentsContext.AudioAttachment,
    FileAttachment = _useComponentsContext.FileAttachment,
    Gallery = _useComponentsContext.Gallery,
    Giphy = _useComponentsContext.Giphy,
    UrlPreview = _useComponentsContext.UrlPreview,
    URLPreviewCompact = _useComponentsContext.URLPreviewCompact,
    UnsupportedAttachment = _useComponentsContext.UnsupportedAttachment;
  var audioAttachmentStyles = useAudioAttachmentStyles();
  if (attachment.type === _types.FileTypes.Giphy || attachment.type === _types.FileTypes.Imgur) {
    return (0, _jsxRuntime.jsx)(Giphy, {
      attachment: attachment
    });
  }
  if (attachment.og_scrape_url || attachment.title_link) {
    if (urlPreviewType === 'compact') {
      return (0, _jsxRuntime.jsx)(URLPreviewCompact, {
        attachment: attachment
      });
    }
    return (0, _jsxRuntime.jsx)(UrlPreview, {
      attachment: attachment
    });
  }
  if ((0, _streamChat.isImageAttachment)(attachment)) {
    return (0, _jsxRuntime.jsx)(Gallery, {
      images: [attachment]
    });
  }
  if ((0, _streamChat.isVideoAttachment)(attachment) && !attachment.og_scrape_url) {
    return (0, _native.isVideoPlayerAvailable)() ? (0, _jsxRuntime.jsx)(Gallery, {
      videos: [attachment]
    }) : (0, _jsxRuntime.jsx)(FileAttachment, {
      attachment: attachment
    });
  }
  if ((0, _streamChat.isAudioAttachment)(attachment) || (0, _streamChat.isVoiceRecordingAttachment)(attachment)) {
    if ((0, _native.isSoundPackageAvailable)()) {
      return (0, _jsxRuntime.jsx)(MessageAudioAttachment, {
        AudioAttachment: AudioAttachment,
        attachment: attachment,
        audioAttachmentStyles: audioAttachmentStyles,
        index: index,
        message: message
      });
    }
    return (0, _jsxRuntime.jsx)(FileAttachment, {
      attachment: attachment
    });
  }
  if ((0, _streamChat.isFileAttachment)(attachment)) {
    return (0, _jsxRuntime.jsx)(FileAttachment, {
      attachment: attachment
    });
  }
  return (0, _jsxRuntime.jsx)(UnsupportedAttachment, {
    attachment: attachment
  });
};
var areEqual = (prevProps, nextProps) => {
  var prevAttachment = prevProps.attachment,
    isAttachmentEqual = prevProps.isAttachmentEqual,
    prevMyMessageTheme = prevProps.myMessageTheme;
  var nextAttachment = nextProps.attachment,
    nextMyMessageTheme = nextProps.myMessageTheme;
  var attachmentEqual = prevAttachment.actions?.length === nextAttachment.actions?.length && prevAttachment.image_url === nextAttachment.image_url && prevAttachment.thumb_url === nextAttachment.thumb_url && prevAttachment.type === nextAttachment.type;
  if (!attachmentEqual) {
    return false;
  }
  if (isAttachmentEqual) {
    return isAttachmentEqual(prevAttachment, nextAttachment);
  }
  var messageThemeEqual = JSON.stringify(prevMyMessageTheme) === JSON.stringify(nextMyMessageTheme);
  if (!messageThemeEqual) {
    return false;
  }
  return true;
};
var MemoizedAttachment = _react.default.memo(AttachmentWithContext, areEqual);
var Attachment = props => {
  var attachment = props.attachment;
  var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
    isAttachmentEqual = _useMessagesContext.isAttachmentEqual,
    myMessageTheme = _useMessagesContext.myMessageTheme,
    urlPreviewType = _useMessagesContext.urlPreviewType;
  var _useMessageContext = (0, _MessageContext.useMessageContext)(),
    message = _useMessageContext.message;
  if (!attachment) {
    return null;
  }
  return (0, _jsxRuntime.jsx)(MemoizedAttachment, {
    attachment,
    isAttachmentEqual,
    message,
    myMessageTheme,
    urlPreviewType
  });
};
exports.Attachment = Attachment;
var MessageAudioAttachment = ({
  AudioAttachment: AudioAttachmentComponent,
  attachment,
  audioAttachmentStyles,
  index,
  message
}) => {
  var localId = attachment.localId;
  var sourceUrl = attachment.asset_url ?? attachment.originalFile?.uri;
  var shouldTrackPendingUpload = !!localId && !!sourceUrl && (0, _utils.isLocalUrl)(sourceUrl);
  var pendingUpload = (0, _usePendingAttachmentUpload.usePendingAttachmentUpload)(shouldTrackPendingUpload ? localId : undefined);
  var indicator = pendingUpload.isUploading ? (0, _jsxRuntime.jsx)(_AttachmentFileUploadProgressIndicator.AttachmentFileUploadProgressIndicator, {
    localId: localId,
    sourceUrl: sourceUrl,
    totalBytes: attachment.file_size
  }) : undefined;
  var audioItemType = (0, _streamChat.isVoiceRecordingAttachment)(attachment) ? 'voiceRecording' : 'audio';
  return (0, _jsxRuntime.jsx)(AudioAttachmentComponent, {
    indicator: indicator,
    item: {
      ...attachment,
      id: index?.toString() ?? '',
      type: audioItemType
    },
    message: message,
    showSpeedSettings: true,
    showTitle: false,
    styles: audioAttachmentStyles
  });
};
var useAudioAttachmentStyles = () => {
  var _useTheme = (0, _contexts.useTheme)(),
    semantics = _useTheme.theme.semantics;
  var _useMessageContext2 = (0, _MessageContext.useMessageContext)(),
    isMyMessage = _useMessageContext2.isMyMessage,
    message = _useMessageContext2.message,
    messageHasOnlySingleAttachment = _useMessageContext2.messageHasOnlySingleAttachment;
  var messageHasSingleAttachment = message.attachments?.length === 1;
  var messageHasCaption = !!message.text?.trim();
  var messageIsQuotedReply = !!(message.quoted_message || message.quoted_message_id);
  var shouldRemoveAudioAttachmentPadding = messageIsQuotedReply && messageHasSingleAttachment && !messageHasCaption;
  var showBackgroundTransparent = messageHasOnlySingleAttachment || shouldRemoveAudioAttachmentPadding;
  return (0, _react.useMemo)(() => {
    return _reactNative.StyleSheet.create({
      container: {
        paddingVertical: shouldRemoveAudioAttachmentPadding ? _theme.primitives.spacingXxs : _theme.primitives.spacingXs,
        paddingLeft: shouldRemoveAudioAttachmentPadding ? 0 : _theme.primitives.spacingXs,
        paddingRight: shouldRemoveAudioAttachmentPadding ? _theme.primitives.spacingXxs : _theme.primitives.spacingSm,
        borderWidth: 0,
        backgroundColor: showBackgroundTransparent ? 'transparent' : isMyMessage ? semantics.chatBgAttachmentOutgoing : semantics.chatBgAttachmentIncoming
      },
      playPauseButton: {
        borderColor: isMyMessage ? semantics.chatBorderOnChatOutgoing : semantics.chatBorderOnChatIncoming
      },
      speedSettingsButton: {
        borderColor: isMyMessage ? semantics.chatBorderOnChatOutgoing : semantics.chatBorderOnChatIncoming
      },
      durationText: {
        color: semantics.chatTextIncoming,
        fontWeight: _theme.primitives.typographyFontWeightSemiBold
      },
      leftContainer: {
        paddingVertical: shouldRemoveAudioAttachmentPadding ? 0 : _theme.primitives.spacingXxs,
        paddingHorizontal: _theme.primitives.spacingXxs
      }
    });
  }, [shouldRemoveAudioAttachmentPadding, showBackgroundTransparent, isMyMessage, semantics]);
};
//# sourceMappingURL=Attachment.js.map