logo

mastofe

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

media_item.js (1719B)


  1. import React from 'react';
  2. import ImmutablePropTypes from 'react-immutable-proptypes';
  3. import ImmutablePureComponent from 'react-immutable-pure-component';
  4. import Permalink from '../../../components/permalink';
  5. import { displaySensitiveMedia } from '../../../initial_state';
  6. export default class MediaItem extends ImmutablePureComponent {
  7. static propTypes = {
  8. media: ImmutablePropTypes.map.isRequired,
  9. };
  10. state = {
  11. visible: !this.props.media.getIn(['status', 'sensitive']) || displaySensitiveMedia,
  12. };
  13. handleClick = () => {
  14. if (!this.state.visible) {
  15. this.setState({ visible: true });
  16. return true;
  17. }
  18. return false;
  19. }
  20. render () {
  21. const { media } = this.props;
  22. const { visible } = this.state;
  23. const status = media.get('status');
  24. const focusX = media.getIn(['meta', 'focus', 'x']);
  25. const focusY = media.getIn(['meta', 'focus', 'y']);
  26. const x = ((focusX / 2) + .5) * 100;
  27. const y = ((focusY / -2) + .5) * 100;
  28. const style = {};
  29. let label, icon;
  30. if (media.get('type') === 'gifv') {
  31. label = <span className='media-gallery__gifv__label'>GIF</span>;
  32. }
  33. if (visible) {
  34. style.backgroundImage = `url(${media.get('preview_url')})`;
  35. style.backgroundPosition = `${x}% ${y}%`;
  36. } else {
  37. icon = (
  38. <span className='account-gallery__item__icons'>
  39. <i className='fa fa-eye-slash' />
  40. </span>
  41. );
  42. }
  43. return (
  44. <div className='account-gallery__item'>
  45. <Permalink to={`/statuses/${status.get('id')}`} href={status.get('url')} style={style} onInterceptClick={this.handleClick}>
  46. {icon}
  47. {label}
  48. </Permalink>
  49. </div>
  50. );
  51. }
  52. }