1 |
|
2 | const React = require('react');
|
3 | const propTypes = require('prop-types');
|
4 |
|
5 | const Favicon = ({ src, alt = 'favicon', ...attr }) => <img {...attr} alt={alt} height="14" src={src} width="14" />;
|
6 | Favicon.propTypes = {
|
7 | alt: propTypes.string,
|
8 | src: propTypes.string,
|
9 | };
|
10 |
|
11 | class Embed extends React.Component {
|
12 | render() {
|
13 | const { provider, url, title, html, iframe, image, favicon, ...attrs } = this.props;
|
14 |
|
15 | if ('iframe' in this.props) {
|
16 | return <iframe {...attrs} border="none" src={url} style={{ border: 'none' }} />;
|
17 | }
|
18 |
|
19 | const classes = ['embed', image && 'embed_hasImg'];
|
20 | return (
|
21 | <div className={classes.join(' ')}>
|
22 | {html ? (
|
23 | <div className="embed-media" dangerouslySetInnerHTML={{ __html: html }}></div>
|
24 | ) : (
|
25 | <a className="embed-link" href={url} rel="noopener noreferrer" target="_blank">
|
26 | {!image || <img alt={title} className="embed-img" loading="lazy" src={image} />}
|
27 | {title ? (
|
28 | <div className="embed-body">
|
29 | {!favicon || (
|
30 | <Favicon
|
31 | alt={provider}
|
32 | className="embed-favicon"
|
33 | loading="lazy"
|
34 | src={favicon}
|
35 | style={{ float: 'left' }}
|
36 | />
|
37 | )}
|
38 | {provider && (
|
39 | <small className="embed-provider">
|
40 | {provider.search(/^@{1}/) < 0 ? (
|
41 | provider
|
42 | ) : (
|
43 | <code style={{ fontFamily: 'var(--md-code-font, monospace)' }}>{url}</code>
|
44 | )}
|
45 | </small>
|
46 | )}
|
47 | <div className="embed-title">{title}</div>
|
48 | </div>
|
49 | ) : (
|
50 | <div className="embed-body">
|
51 | <b>View</b>: <span className="embed-body-url">{url}</span>
|
52 | </div>
|
53 | )}
|
54 | </a>
|
55 | )}
|
56 | </div>
|
57 | );
|
58 | }
|
59 | }
|
60 |
|
61 | Embed.propTypes = {
|
62 | children: propTypes.oneOfType([propTypes.string, propTypes.array, propTypes.shape({}), propTypes.element]),
|
63 | favicon: propTypes.string,
|
64 | height: propTypes.string,
|
65 | html: propTypes.string,
|
66 | iframe: propTypes.any,
|
67 | image: propTypes.string,
|
68 | provider: propTypes.string,
|
69 | title: propTypes.string,
|
70 | url: propTypes.oneOfType([propTypes.string, propTypes.shape({})]),
|
71 | width: propTypes.string,
|
72 | };
|
73 | Embed.defaultProps = {
|
74 | height: '300px',
|
75 | width: '100%',
|
76 | };
|
77 |
|
78 | module.exports = () => Embed;
|