@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
74 lines (73 loc) • 4.13 kB
JavaScript
import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useMemo } from 'react';
import { styled } from '@mui/material/styles';
import { MEDIA_TYPE_VIDEO } from '../../../constants/Media';
import AutoPlayer from '../../AutoPlayer';
import Box from '@mui/material/Box';
import classNames from 'classnames';
import { PREFIX } from './constants';
import { CircularProgress } from '@mui/material';
import filter from './filter';
const classes = {
displayRoot: `${PREFIX}-display-root`,
displayLink: `${PREFIX}-link`,
displayHtmlWrap: `${PREFIX}-html-wrap`,
displayHtml: `${PREFIX}-html`,
displayHtmlPlaceholder: `${PREFIX}-html-placeholder`,
displayHtmlLoading: `${PREFIX}-html-loading`,
displayVideo: `${PREFIX}-video`,
thumbnail: `${PREFIX}-thumbnail`,
thumbnailFullWidth: `${PREFIX}-thumbnail`,
image: `${PREFIX}-image`,
snippet: `${PREFIX}-snippet`,
snippetTitle: `${PREFIX}-snippet-title`,
snippetDescription: `${PREFIX}-snippet-description`
};
const Root = styled(Box, {
name: PREFIX,
slot: 'DisplayRoot'
})(({ theme }) => ({}));
export default (props) => {
// PROPS
const { className = '', medias, fullWidth = false, onMediaClick = null } = props, rest = __rest(props, ["className", "medias", "fullWidth", "onMediaClick"]);
// HANDLERS
const handleLinkClick = (link) => {
onMediaClick && onMediaClick(link);
};
// MEMO
const _medias = useMemo(() => medias.filter(filter), [medias]);
// RENDER
/**
* Renders link display
* @param media
* @param key
*/
const renderPreview = (media, key) => {
// if (media.embed.metadata.html) {
// return renderHtml(media, key);
// }
const domain = new URL(media.embed.metadata.url).hostname.replace('www.', '');
return (_jsxs(Box, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && (_jsx(_Fragment, { children: fullWidth ? (_jsx(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : (_jsx(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), _jsxs(Box, Object.assign({ className: classes.snippet }, { children: [_jsx("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), _jsx("br", {}), _jsx("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), _jsx("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), _jsx("div", { style: { clear: 'both' } })] }), key));
};
/**
* Render html embed
* @param media
* @param key
*/
const renderHtml = (media, key) => {
return (_jsxs(Box, Object.assign({ className: classes.displayHtmlWrap }, { children: [_jsx("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), _jsx("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: _jsx(CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
};
/**
* Renders component
*/
if (_medias.length === 0) {
return null;
}
return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((l, i) => {
if (l.embed.metadata && l.embed.metadata.type === MEDIA_TYPE_VIDEO) {
return _jsx(AutoPlayer, { url: l.url, width: '100%', height: 360, onVideoWatch: () => handleLinkClick(l) }, i);
}
return _jsx(React.Fragment, { children: renderPreview(l, i) }, i);
}) })));
};