@selfcommunity/react-ui 0.8.0-alpha.1 → 0.8.0-alpha.11

package/lib/esm/shared/Media/Link/DisplayComponent.js

@@ -10,10 +10,15 @@ import { DEFAULT_PRELOAD_OFFSET_VIEWPORT } from '../../../constants/LazyLoad';
 import Skeleton from '@mui/material/Skeleton';
 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`,
@@ -38,12 +43,23 @@ export default (props) => {
     // RENDER
     /**
      * Renders link display
-     * @param (link)
-     * @param(key)
+     * @param media
+     * @param key
      */
-    const renderPreview = (link, key) => {
-        const domain = new URL(link.embed.metadata.url).hostname.replace('www.', '');
-        return (_jsxs(Box, Object.assign({ className: classes.displayLink }, { children: [link.embed.metadata.images && link.embed.metadata.images.length > 0 && (_jsx(_Fragment, { children: fullWidth ? (_jsx(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${link.image})`, paddingBottom: `${100 / link.image_width / link.image_height}%` } })) : (_jsx(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${link.image})` } })) })), _jsxs(Box, Object.assign({ className: classes.snippet }, { children: [_jsx("b", Object.assign({ className: classes.snippetTitle }, { children: link.embed.metadata.title })), _jsx("br", {}), _jsx("p", Object.assign({ className: classes.snippetDescription }, { children: link.embed.metadata.description })), _jsx("a", Object.assign({ href: link.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(link) }, { children: domain }))] })), _jsx("div", { style: { clear: 'both' } })] }), 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