app/javascript/mastodon/features/status/components/card.js

   1 import React from 'react';
   2 import ImmutablePropTypes from 'react-immutable-proptypes';
   3 import punycode from 'punycode';
   4
   5 const IDNA_PREFIX = 'xn--';
   6
   7 const decodeIDNA = domain => {
   8   return domain
   9     .split('.')
  10     .map(part => part.indexOf(IDNA_PREFIX) === 0 ? punycode.decode(part.slice(IDNA_PREFIX.length)) : part)
  11     .join('.');
  12 };
  13
  14 const getHostname = url => {
  15   const parser = document.createElement('a');
  16   parser.href = url;
  17   return parser.hostname;
  18 };
  19
  20 class Card extends React.PureComponent {
  21
  22   static propTypes = {
  23     card: ImmutablePropTypes.map,
  24   };
  25
  26   renderLink () {
  27     const { card } = this.props;
  28
  29     let image    = '';
  30     let provider = card.get('provider_name');
  31
  32     if (card.get('image')) {
  33       image = (
  34         <div className='status-card__image'>
  35           <img src={card.get('image')} alt={card.get('title')} className='status-card__image-image' />
  36         </div>
  37       );
  38     }
  39
  40     if (provider.length < 1) {
  41       provider = decodeIDNA(getHostname(card.get('url')));
  42     }
  43
  44     return (
  45       <a href={card.get('url')} className='status-card' target='_blank' rel='noopener'>
  46         {image}
  47
  48         <div className='status-card__content'>
  49           <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
  50           <p className='status-card__description'>{(card.get('description') || '').substring(0, 50)}</p>
  51           <span className='status-card__host'>{provider}</span>
  52         </div>
  53       </a>
  54     );
  55   }
  56
  57   renderPhoto () {
  58     const { card } = this.props;
  59
  60     return (
  61       <a href={card.get('url')} className='status-card-photo' target='_blank' rel='noopener'>
  62         <img src={card.get('url')} alt={card.get('title')} width={card.get('width')} height={card.get('height')} />
  63       </a>
  64     );
  65   }
  66
  67   renderVideo () {
  68     const { card } = this.props;
  69     const content  = { __html: card.get('html') };
  70
  71     return (
  72       <div
  73         className='status-card-video'
  74         dangerouslySetInnerHTML={content}
  75       />
  76     );
  77   }
  78
  79   render () {
  80     const { card } = this.props;
  81
  82     if (card === null) {
  83       return null;
  84     }
  85
  86     switch(card.get('type')) {
  87     case 'link':
  88       return this.renderLink();
  89     case 'photo':
  90       return this.renderPhoto();
  91     case 'video':
  92       return this.renderVideo();
  93     case 'rich':
  94     default:
  95       return null;
  96     }
  97   }
  98
  99 }
 100
 101 export default Card;