stream-chat-react
Version:
React components to create chat conversations or livestream style chat
134 lines (133 loc) • 8.73 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 clsx from 'clsx';
import ReactPlayer from 'react-player';
import { PlayButton, ProgressBar } from './Audio';
import { ImageComponent } from '../Gallery';
import { SafeAnchor } from '../SafeAnchor';
import { useAudioController } from './hooks/useAudioController';
import { useChatContext } from '../../context/ChatContext';
import { useChannelStateContext } from '../../context/ChannelStateContext';
import { useTranslationContext } from '../../context/TranslationContext';
var getHostFromURL = function (url) {
if (url !== undefined && url !== null) {
var trimmedUrl = url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '').split('/')[0];
return trimmedUrl;
}
return null;
};
var UnableToRenderCard = function (_a) {
var _b;
var type = _a.type;
var t = useTranslationContext('Card').t;
return (React.createElement("div", { className: clsx('str-chat__message-attachment-card', (_b = {},
_b["str-chat__message-attachment-card--".concat(type)] = type,
_b)) },
React.createElement("div", { className: 'str-chat__message-attachment-card--content' },
React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, t('this content could not be displayed')))));
};
var CardV1 = function (props) {
var giphy = props.giphy, image_url = props.image_url, og_scrape_url = props.og_scrape_url, text = props.text, thumb_url = props.thumb_url, title = props.title, title_link = props.title_link, type = props.type;
var giphyVersionName = useChannelStateContext('Card').giphyVersion;
var image = thumb_url || image_url;
var dimensions = {};
if (type === 'giphy' && typeof giphy !== 'undefined') {
var giphyVersion = giphy[giphyVersionName];
image = giphyVersion.url;
dimensions.height = giphyVersion.height;
dimensions.width = giphyVersion.width;
}
if (!title && !title_link && !image) {
return React.createElement(UnableToRenderCard, { type: type });
}
if (!title_link && !og_scrape_url) {
return null;
}
return (React.createElement("div", { className: "str-chat__message-attachment-card str-chat__message-attachment-card--".concat(type) },
image && (React.createElement("div", { className: 'str-chat__message-attachment-card--header' },
React.createElement("img", __assign({ alt: image, src: image }, dimensions)))),
React.createElement("div", { className: 'str-chat__message-attachment-card--content' },
React.createElement("div", { className: 'str-chat__message-attachment-card--flex' },
title && React.createElement("div", { className: 'str-chat__message-attachment-card--title' }, title),
text && React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, text),
(title_link || og_scrape_url) && (React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: title_link || og_scrape_url, rel: 'noopener noreferrer', target: '_blank' }, getHostFromURL(title_link || og_scrape_url)))))));
};
var SourceLink = function (_a) {
var author_name = _a.author_name, url = _a.url;
return (React.createElement("div", { className: 'str-chat__message-attachment-card--source-link', "data-testid": 'card-source-link' },
React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: url, rel: 'noopener noreferrer', target: '_blank' }, author_name || getHostFromURL(url))));
};
var CardHeader = function (props) {
var asset_url = props.asset_url, dimensions = props.dimensions, image = props.image, image_url = props.image_url, thumb_url = props.thumb_url, title = props.title, type = props.type;
var visual = null;
if (asset_url && type === 'video') {
visual = (React.createElement(ReactPlayer, { className: 'react-player', controls: true, height: '100%', url: asset_url, width: '100%' }));
}
else if (image) {
visual = (React.createElement(ImageComponent, { dimensions: dimensions, fallback: title || image, image_url: image_url, thumb_url: thumb_url }));
}
return visual ? (React.createElement("div", { className: 'str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header', "data-testid": 'card-header' }, visual)) : null;
};
var CardContent = function (props) {
var author_name = props.author_name, og_scrape_url = props.og_scrape_url, text = props.text, title = props.title, title_link = props.title_link, type = props.type;
var url = title_link || og_scrape_url;
return (React.createElement("div", { className: 'str-chat__message-attachment-card--content' }, type === 'audio' ? (React.createElement(CardAudio, { og: props })) : (React.createElement("div", { className: 'str-chat__message-attachment-card--flex' },
url && React.createElement(SourceLink, { author_name: author_name, url: url }),
title && React.createElement("div", { className: 'str-chat__message-attachment-card--title' }, title),
text && React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, text)))));
};
var CardV2 = function (props) {
var asset_url = props.asset_url, giphy = props.giphy, image_url = props.image_url, thumb_url = props.thumb_url, title = props.title, title_link = props.title_link, type = props.type;
var giphyVersionName = useChannelStateContext('CardHeader').giphyVersion;
var image = thumb_url || image_url;
var dimensions = {};
if (type === 'giphy' && typeof giphy !== 'undefined') {
var giphyVersion = giphy[giphyVersionName];
image = giphyVersion.url;
dimensions.height = giphyVersion.height;
dimensions.width = giphyVersion.width;
}
if (!title && !title_link && !asset_url && !image) {
return React.createElement(UnableToRenderCard, null);
}
return (React.createElement("div", { className: "str-chat__message-attachment-card str-chat__message-attachment-card--".concat(type) },
React.createElement(CardHeader, __assign({}, props, { dimensions: dimensions, image: image })),
React.createElement(CardContent, __assign({}, props))));
};
export var CardAudio = function (_a) {
var _b = _a.og, asset_url = _b.asset_url, author_name = _b.author_name, og_scrape_url = _b.og_scrape_url, text = _b.text, title = _b.title, title_link = _b.title_link;
var _c = useAudioController(), audioRef = _c.audioRef, isPlaying = _c.isPlaying, progress = _c.progress, seek = _c.seek, togglePlay = _c.togglePlay;
var url = title_link || og_scrape_url;
var dataTestId = 'card-audio-widget';
var rootClassName = 'str-chat__message-attachment-card-audio-widget';
return (React.createElement("div", { className: rootClassName, "data-testid": dataTestId },
asset_url && (React.createElement(React.Fragment, null,
React.createElement("audio", { ref: audioRef },
React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: 'audio/mp3' })),
React.createElement("div", { className: 'str-chat__message-attachment-card-audio-widget--first-row' },
React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--play-controls' },
React.createElement(PlayButton, { isPlaying: isPlaying, onClick: togglePlay })),
React.createElement(ProgressBar, { onClick: seek, progress: progress })))),
React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--second-row' },
url && React.createElement(SourceLink, { author_name: author_name, url: url }),
title && React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--title' }, title),
text && (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--description' }, text)))));
};
var UnMemoizedCard = function (props) {
var themeVersion = useChatContext('Card').themeVersion;
return themeVersion === '2' ? React.createElement(CardV2, __assign({}, props)) : React.createElement(CardV1, __assign({}, props));
};
/**
* Simple Card Layout for displaying links
*/
export var Card = React.memo(UnMemoizedCard);