stream-chat-react
Version:
React components to create chat conversations or livestream style chat
182 lines (181 loc) • 9.52 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React from 'react';
import ReactPlayer from 'react-player';
import clsx from 'clsx';
import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
import { Audio as DefaultAudio } from './Audio';
import { Card as DefaultCard } from './Card';
import { FileAttachment as DefaultFile } from './FileAttachment';
import { Gallery as DefaultGallery, ImageComponent as DefaultImage } from '../Gallery';
export var SUPPORTED_VIDEO_FORMATS = ['video/mp4', 'video/ogg', 'video/webm', 'video/quicktime'];
export var isScrapedContent = function (attachment) { return attachment.og_scrape_url || attachment.title_link; };
export var isUploadedImage = function (attachment) { return attachment.type === 'image' && !isScrapedContent(attachment); };
export var isGalleryAttachmentType = function (output) { return Array.isArray(output.images); };
export var isAudioAttachment = function (attachment) { return attachment.type === 'audio'; };
export var isFileAttachment = function (attachment) {
return attachment.type === 'file' ||
(attachment.mime_type &&
SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) === -1 &&
attachment.type !== 'video');
};
export var isMediaAttachment = function (attachment) {
return (attachment.mime_type && SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) !== -1) ||
attachment.type === 'video';
};
export var isSvgAttachment = function (attachment) {
var filename = attachment.fallback || '';
return filename.toLowerCase().endsWith('.svg');
};
/**
* @deprecated will be removed in the next major release,
* replaced with the proper component equivalent `AttachmentContainer/AttachmentWithinContainer`
*/
export var renderAttachmentWithinContainer = function (props) {
var _a;
var _b;
var attachment = props.attachment, children = props.children, componentType = props.componentType;
var isGAT = isGalleryAttachmentType(attachment);
var extra = '';
if (!isGAT) {
extra =
componentType === 'card' && !(attachment === null || attachment === void 0 ? void 0 : attachment.image_url) && !(attachment === null || attachment === void 0 ? void 0 : attachment.thumb_url)
? 'no-image'
: ((_b = attachment === null || attachment === void 0 ? void 0 : attachment.actions) === null || _b === void 0 ? void 0 : _b.length)
? 'actions'
: '';
}
var classNames = clsx('str-chat__message-attachment', (_a = {},
_a["str-chat__message-attachment--".concat(componentType)] = componentType,
_a["str-chat__message-attachment--".concat(attachment === null || attachment === void 0 ? void 0 : attachment.type)] = attachment === null || attachment === void 0 ? void 0 : attachment.type,
_a["str-chat__message-attachment--".concat(componentType, "--").concat(extra)] = componentType && extra,
_a['str-chat__message-attachment--svg-image'] = isSvgAttachment(attachment),
_a['str-chat__message-attachment-with-actions'] = extra === 'actions',
_a));
return React.createElement("div", { className: classNames }, children);
};
/**
* @deprecated will be removed in the next major release,
* replaced with the proper component equivalent `AttachmentContainer/AttachmentActionsContainer`
*/
export var renderAttachmentActions = function (props) {
var _a;
var actionHandler = props.actionHandler, attachment = props.attachment, _b = props.AttachmentActions, AttachmentActions = _b === void 0 ? DefaultAttachmentActions : _b;
if (!((_a = attachment.actions) === null || _a === void 0 ? void 0 : _a.length))
return null;
return (React.createElement(AttachmentActions, __assign({}, attachment, { actionHandler: function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(event, name, value); }, actions: attachment.actions, id: attachment.id || '', key: "key-actions-".concat(attachment.id), text: attachment.text || '' })));
};
/**
* @deprecated will be removed in the next major release,
* replaced with the proper component equivalent `AttachmentContainer/GalleryContainer`
*/
export var renderGallery = function (props) {
var attachment = props.attachment, _a = props.Gallery, Gallery = _a === void 0 ? DefaultGallery : _a;
return renderAttachmentWithinContainer({
attachment: attachment,
children: React.createElement(Gallery, { images: attachment.images || [], key: 'gallery' }),
componentType: 'gallery',
});
};
/**
* @deprecated will be removed in the next major release,
* replaced with the proper component equivalent `AttachmentContainer/ImageContainer`
*/
export var renderImage = function (props) {
var attachment = props.attachment, _a = props.Image, Image = _a === void 0 ? DefaultImage : _a;
if (attachment.actions && attachment.actions.length) {
return renderAttachmentWithinContainer({
attachment: attachment,
children: (React.createElement("div", { className: 'str-chat__attachment', key: "key-image-".concat(attachment.id) },
React.createElement(Image, __assign({}, attachment)),
renderAttachmentActions(props))),
componentType: 'image',
});
}
return renderAttachmentWithinContainer({
attachment: attachment,
children: React.createElement(Image, __assign({}, attachment, { key: "key-image-".concat(attachment.id) })),
componentType: 'image',
});
};
/**
* @deprecated will be removed in the next major release,
* replaced with the proper component equivalent `AttachmentContainer/CardContainer`
*/
export var renderCard = function (props) {
var attachment = props.attachment, _a = props.Card, Card = _a === void 0 ? DefaultCard : _a;
if (attachment.actions && attachment.actions.length) {
return renderAttachmentWithinContainer({
attachment: attachment,
children: (React.createElement("div", { className: 'str-chat__attachment', key: "key-image-".concat(attachment.id) },
React.createElement(Card, __assign({}, attachment, { key: "key-card-".concat(attachment.id) })),
renderAttachmentActions(props))),
componentType: 'card',
});
}
return renderAttachmentWithinContainer({
attachment: attachment,
children: React.createElement(Card, __assign({}, attachment, { key: "key-card-".concat(attachment.id) })),
componentType: 'card',
});
};
/**
* @deprecated will be removed in the next major release,
* replaced with the proper component equivalent `AttachmentContainer/FileContainer`
*/
export var renderFile = function (props) {
var attachment = props.attachment, _a = props.File, File = _a === void 0 ? DefaultFile : _a;
if (!attachment.asset_url)
return null;
return renderAttachmentWithinContainer({
attachment: attachment,
children: React.createElement(File, { attachment: attachment, key: "key-file-".concat(attachment.id) }),
componentType: 'file',
});
};
/**
* @deprecated will be removed in the next major release,
* replaced with the proper component equivalent `AttachmentContainer/AudioContainer`
*/
export var renderAudio = function (props) {
var attachment = props.attachment, _a = props.Audio, Audio = _a === void 0 ? DefaultAudio : _a;
return renderAttachmentWithinContainer({
attachment: attachment,
children: (React.createElement("div", { className: 'str-chat__attachment', key: "key-video-".concat(attachment.id) },
React.createElement(Audio, { og: attachment }))),
componentType: 'audio',
});
};
/**
* @deprecated will be removed in the next major release,
* replaced with the proper component equivalent `AttachmentContainer/MediaContainer`
*/
export var renderMedia = function (props) {
var _a;
var attachment = props.attachment, _b = props.Media, Media = _b === void 0 ? ReactPlayer : _b;
if ((_a = attachment.actions) === null || _a === void 0 ? void 0 : _a.length) {
return renderAttachmentWithinContainer({
attachment: attachment,
children: (React.createElement("div", { className: 'str-chat__attachment str-chat__attachment-media', key: "key-video-".concat(attachment.id) },
React.createElement("div", { className: 'str-chat__player-wrapper' },
React.createElement(Media, { className: 'react-player', controls: true, height: '100%', url: attachment.asset_url, width: '100%' })),
renderAttachmentActions(props))),
componentType: 'media',
});
}
return renderAttachmentWithinContainer({
attachment: attachment,
children: (React.createElement("div", { className: 'str-chat__player-wrapper', key: "key-video-".concat(attachment.id) },
React.createElement(Media, { className: 'react-player', controls: true, height: '100%', url: attachment.asset_url, width: '100%' }))),
componentType: 'media',
});
};