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

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import ImmutablePropTypes from 'react-immutable-proptypes';
   4 import Avatar from '../../../components/avatar';
   5 import DisplayName from '../../../components/display_name';
   6 import StatusContent from '../../../components/status_content';
   7 import MediaGallery from '../../../components/media_gallery';
   8 import AttachmentList from '../../../components/attachment_list';
   9 import Link from 'react-router-dom/Link';
  10 import { FormattedDate, FormattedNumber } from 'react-intl';
  11 import CardContainer from '../containers/card_container';
  12 import ImmutablePureComponent from 'react-immutable-pure-component';
  13 import Video from '../../video';
  14
  15 export default class DetailedStatus extends ImmutablePureComponent {
  16
  17   static contextTypes = {
  18     router: PropTypes.object,
  19   };
  20
  21   static propTypes = {
  22     status: ImmutablePropTypes.map.isRequired,
  23     onOpenMedia: PropTypes.func.isRequired,
  24     onOpenVideo: PropTypes.func.isRequired,
  25     autoPlayGif: PropTypes.bool,
  26   };
  27
  28   handleAccountClick = (e) => {
  29     if (e.button === 0) {
  30       e.preventDefault();
  31       this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
  32     }
  33
  34     e.stopPropagation();
  35   }
  36
  37   handleOpenVideo = startTime => {
  38     this.props.onOpenVideo(this.props.status.getIn(['media_attachments', 0]), startTime);
  39   }
  40
  41   render () {
  42     const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
  43
  44     let media           = '';
  45     let applicationLink = '';
  46
  47     if (status.get('media_attachments').size > 0) {
  48       if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
  49         media = <AttachmentList media={status.get('media_attachments')} />;
  50       } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
  51         const video = status.getIn(['media_attachments', 0]);
  52
  53         media = (
  54           <Video
  55             preview={video.get('preview_url')}
  56             src={video.get('url')}
  57             width={300}
  58             height={150}
  59             onOpenVideo={this.handleOpenVideo}
  60             sensitive={status.get('sensitive')}
  61           />
  62         );
  63       } else {
  64         media = (
  65           <MediaGallery
  66             standalone
  67             sensitive={status.get('sensitive')}
  68             media={status.get('media_attachments')}
  69             height={300}
  70             onOpenMedia={this.props.onOpenMedia}
  71             autoPlayGif={this.props.autoPlayGif}
  72           />
  73         );
  74       }
  75     } else if (status.get('spoiler_text').length === 0) {
  76       media = <CardContainer statusId={status.get('id')} />;
  77     }
  78
  79     if (status.get('application')) {
  80       applicationLink = <span> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener'>{status.getIn(['application', 'name'])}</a></span>;
  81     }
  82
  83     return (
  84       <div className='detailed-status'>
  85         <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
  86           <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
  87           <DisplayName account={status.get('account')} />
  88         </a>
  89
  90         <StatusContent status={status} />
  91
  92         {media}
  93
  94         <div className='detailed-status__meta'>
  95           <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
  96             <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
  97           </a>{applicationLink} · <Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'>
  98             <i className='fa fa-retweet' />
  99             <span className='detailed-status__reblogs'>
 100               <FormattedNumber value={status.get('reblogs_count')} />
 101             </span>
 102           </Link> · <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'>
 103             <i className='fa fa-star' />
 104             <span className='detailed-status__favorites'>
 105               <FormattedNumber value={status.get('favourites_count')} />
 106             </span>
 107           </Link>
 108         </div>
 109       </div>
 110     );
 111   }
 112
 113 }