diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-04-27 14:42:22 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-04-27 14:42:22 +0200 |
commit | 88725d6ce85115ea3b0652007db5d40a1c069be3 (patch) | |
tree | 7a8965abda1cfc3b6c319ea19ee216755ac2f2df /app/assets/javascripts/components/features | |
parent | be0a01145b5f303c5c506858146ccf6c6d5cee72 (diff) |
OEmbed support for PreviewCard (#2337)
* OEmbed support for PreviewCard * Improve ProviderDiscovery code failure treatment * Do not crawl links if there is a content warning, since those don't display a link card anyway * Reset db schema * Fresh migrate * Fix rubocop style issues Fix #1681 - return existing access token when applicable instead of creating new * Fix test * Extract http client to helper * Improve oembed controller
Diffstat (limited to 'app/assets/javascripts/components/features')
-rw-r--r-- | app/assets/javascripts/components/features/status/components/card.jsx | 59 |
1 files changed, 51 insertions, 8 deletions
diff --git a/app/assets/javascripts/components/features/status/components/card.jsx b/app/assets/javascripts/components/features/status/components/card.jsx index 1b5722b6a..a5ce7f08a 100644 --- a/app/assets/javascripts/components/features/status/components/card.jsx +++ b/app/assets/javascripts/components/features/status/components/card.jsx @@ -14,14 +14,11 @@ const getHostname = url => { class Card extends React.PureComponent { - render () { + renderLink () { const { card } = this.props; - if (card === null) { - return null; - } - - let image = ''; + let image = ''; + let provider = card.get('provider_name'); if (card.get('image')) { image = ( @@ -31,18 +28,64 @@ class Card extends React.PureComponent { ); } + if (provider.length < 1) { + provider = getHostname(card.get('url')) + } + return ( <a href={card.get('url')} className='status-card' target='_blank' rel='noopener'> {image} <div className='status-card__content'> <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong> - <p className='status-card__description'>{card.get('description').substring(0, 50)}</p> - <span className='status-card__host' style={hostStyle}>{getHostname(card.get('url'))}</span> + <p className='status-card__description'>{(card.get('description') || '').substring(0, 50)}</p> + <span className='status-card__host' style={hostStyle}>{provider}</span> </div> </a> ); } + + renderPhoto () { + const { card } = this.props; + + return ( + <a href={card.get('url')} className='status-card-photo' target='_blank' rel='noopener'> + <img src={card.get('url')} alt={card.get('title')} width={card.get('width')} height={card.get('height')} /> + </a> + ); + } + + renderVideo () { + const { card } = this.props; + const content = { __html: card.get('html') }; + + return ( + <div + className='status-card-video' + dangerouslySetInnerHTML={content} + /> + ); + } + + render () { + const { card } = this.props; + + if (card === null) { + return null; + } + + switch(card.get('type')) { + case 'link': + return this.renderLink(); + case 'photo': + return this.renderPhoto(); + case 'video': + return this.renderVideo(); + case 'rich': + default: + return null; + } + } } Card.propTypes = { |