logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

detailed_status.js (4898B)


  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';
  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. export default class DetailedStatus extends ImmutablePureComponent {
  15. static contextTypes = {
  16. router: PropTypes.object,
  17. };
  18. static propTypes = {
  19. status: ImmutablePropTypes.map.isRequired,
  20. onOpenMedia: PropTypes.func.isRequired,
  21. onOpenVideo: PropTypes.func.isRequired,
  22. onToggleHidden: PropTypes.func.isRequired,
  23. };
  24. handleAccountClick = (e) => {
  25. if (e.button === 0) {
  26. e.preventDefault();
  27. this.context.router.history.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
  28. }
  29. e.stopPropagation();
  30. }
  31. handleOpenVideo = startTime => {
  32. this.props.onOpenVideo(this.props.status.getIn(['media_attachments', 0]), startTime);
  33. }
  34. handleExpandedToggle = () => {
  35. this.props.onToggleHidden(this.props.status);
  36. }
  37. render () {
  38. const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
  39. let media = '';
  40. let applicationLink = '';
  41. let reblogLink = '';
  42. let reblogIcon = 'retweet';
  43. if (status.get('media_attachments').size > 0) {
  44. if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
  45. media = <AttachmentList media={status.get('media_attachments')} />;
  46. } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
  47. const video = status.getIn(['media_attachments', 0]);
  48. media = (
  49. <Video
  50. preview={video.get('preview_url')}
  51. src={video.get('url')}
  52. width={300}
  53. height={150}
  54. inline
  55. onOpenVideo={this.handleOpenVideo}
  56. sensitive={status.get('sensitive')}
  57. />
  58. );
  59. } else {
  60. media = (
  61. <MediaGallery
  62. standalone
  63. sensitive={status.get('sensitive')}
  64. media={status.get('media_attachments')}
  65. height={300}
  66. onOpenMedia={this.props.onOpenMedia}
  67. />
  68. );
  69. }
  70. } else if (status.get('spoiler_text').length === 0) {
  71. media = <CardContainer onOpenMedia={this.props.onOpenMedia} statusId={status.get('id')} />;
  72. }
  73. if (status.get('application')) {
  74. applicationLink = <span> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener'>{status.getIn(['application', 'name'])}</a></span>;
  75. }
  76. if (status.get('visibility') === 'direct') {
  77. reblogIcon = 'envelope';
  78. } else if (status.get('visibility') === 'private') {
  79. reblogIcon = 'lock';
  80. }
  81. if (status.get('visibility') === 'private') {
  82. reblogLink = <i className={`fa fa-${reblogIcon}`} />;
  83. } else {
  84. reblogLink = (<Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'>
  85. <i className={`fa fa-${reblogIcon}`} />
  86. <span className='detailed-status__reblogs'>
  87. <FormattedNumber value={status.get('reblogs_count')} />
  88. </span>
  89. </Link>);
  90. }
  91. return (
  92. <div className='detailed-status'>
  93. <a href={status.getIn(['account', 'url'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
  94. <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
  95. <DisplayName account={status.get('account')} />
  96. </a>
  97. <StatusContent status={status} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} />
  98. {media}
  99. <div className='detailed-status__meta'>
  100. <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
  101. <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
  102. </a>{applicationLink} · {reblogLink} · <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. }