import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Permalink from '../../../components/permalink'; import { displaySensitiveMedia } from '../../../initial_state'; export default class MediaItem extends ImmutablePureComponent { static propTypes = { media: ImmutablePropTypes.map.isRequired, }; state = { visible: !this.props.media.getIn(['status', 'sensitive']) || displaySensitiveMedia, }; handleClick = () => { if (!this.state.visible) { this.setState({ visible: true }); return true; } return false; } render () { const { media } = this.props; const { visible } = this.state; const status = media.get('status'); const focusX = media.getIn(['meta', 'focus', 'x']); const focusY = media.getIn(['meta', 'focus', 'y']); const x = ((focusX / 2) + .5) * 100; const y = ((focusY / -2) + .5) * 100; const style = {}; let label, icon; if (media.get('type') === 'gifv') { label = GIF; } if (visible) { style.backgroundImage = `url(${media.get('preview_url')})`; style.backgroundPosition = `${x}% ${y}%`; } else { icon = ( ); } return (
{icon} {label}
); } }