@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
76 lines (75 loc) • 5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const styles_1 = require("@mui/material/styles");
const Media_1 = require("../../../constants/Media");
const AutoPlayer_1 = tslib_1.__importDefault(require("../../AutoPlayer"));
const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const constants_1 = require("./constants");
const material_1 = require("@mui/material");
const filter_1 = tslib_1.__importDefault(require("./filter"));
const classes = {
displayRoot: `${constants_1.PREFIX}-display-root`,
displayLink: `${constants_1.PREFIX}-link`,
displayHtmlWrap: `${constants_1.PREFIX}-html-wrap`,
displayHtml: `${constants_1.PREFIX}-html`,
displayHtmlPlaceholder: `${constants_1.PREFIX}-html-placeholder`,
displayHtmlLoading: `${constants_1.PREFIX}-html-loading`,
displayVideo: `${constants_1.PREFIX}-video`,
thumbnail: `${constants_1.PREFIX}-thumbnail`,
thumbnailFullWidth: `${constants_1.PREFIX}-thumbnail`,
image: `${constants_1.PREFIX}-image`,
snippet: `${constants_1.PREFIX}-snippet`,
snippetTitle: `${constants_1.PREFIX}-snippet-title`,
snippetDescription: `${constants_1.PREFIX}-snippet-description`
};
const Root = (0, styles_1.styled)(Box_1.default, {
name: constants_1.PREFIX,
slot: 'DisplayRoot'
})(({ theme }) => ({}));
exports.default = (props) => {
// PROPS
const { className = '', medias, fullWidth = false, onMediaClick = null } = props, rest = tslib_1.__rest(props, ["className", "medias", "fullWidth", "onMediaClick"]);
// HANDLERS
const handleLinkClick = (link) => {
onMediaClick && onMediaClick(link);
};
// MEMO
const _medias = (0, react_1.useMemo)(() => medias.filter(filter_1.default), [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 ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fullWidth ? ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.snippet }, { children: [(0, jsx_runtime_1.jsx)("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), (0, jsx_runtime_1.jsx)("div", { style: { clear: 'both' } })] }), key));
};
/**
* Render html embed
* @param media
* @param key
*/
const renderHtml = (media, key) => {
return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayHtmlWrap }, { children: [(0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
};
/**
* Renders component
*/
if (_medias.length === 0) {
return null;
}
return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest, { children: _medias.map((l, i) => {
if (l.embed.metadata && l.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO) {
return (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: l.url, width: '100%', height: 360, onVideoWatch: () => handleLinkClick(l) }, i);
}
return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: renderPreview(l, i) }, i);
}) })));
};