import React from 'react' import PropTypes from 'prop-types' import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { NavLink } from 'react-router-dom' import { decode } from 'blurhash' import { autoPlayGif, displayMedia } from '../initial_state' import classNames from 'classnames/bind' import Icon from './icon' import Image from './image' import Text from './text' const cx = classNames.bind(_s) class MediaItem extends ImmutablePureComponent { state = { loaded: false, visible: displayMedia !== 'hide_all' && !this.props.attachment.getIn(['status', 'sensitive']) || displayMedia === 'show_all', } componentDidMount() { if (this.props.attachment.get('blurhash')) { this._decode() } } componentDidUpdate(prevProps) { if (prevProps.attachment.get('blurhash') !== this.props.attachment.get('blurhash') && this.props.attachment.get('blurhash')) { this._decode() } } _decode() { const hash = this.props.attachment.get('blurhash') const pixels = decode(hash, 160, 160) if (pixels && this.canvas) { const ctx = this.canvas.getContext('2d') const imageData = new ImageData(pixels, 160, 160) ctx.putImageData(imageData, 0, 0) } } setCanvasRef = c => { this.canvas = c } handleImageLoad = () => { this.setState({ loaded: true }) } hoverToPlay() { return !autoPlayGif && ['gifv', 'video'].indexOf(this.props.attachment.get('type')) !== -1 } render() { const { account, attachment, isSmall, } = this.props const { visible, loaded } = this.state const status = attachment.get('status') const title = status.get('spoiler_text') || attachment.get('description') const attachmentType = attachment.get('type') let badge = null if (attachmentType === 'video') { const duration = attachment.getIn(['meta', 'duration']) badge = (duration / 60).toFixed(2) } else if (attachmentType === 'gifv') { badge = 'GIF' } const containerClasses = cx({ default: 1, posAbs: 1, top0: 1, height100PC: 1, width100PC: 1, py2: !isSmall, px2: !isSmall, }) const linkClasses = cx({ default: 1, width100PC: 1, height100PC: 1, overflowHidden: 1, border1PX: 1, borderColorPrimary: 1, }) const statusUrl = `/${account.getIn(['acct'])}/posts/${status.get('id')}`; return (
{ (!loaded || !visible) && } { visible && {attachment.get('description')} }
{ !visible && } { !!badge &&
{badge}
}
) } } MediaItem.propTypes = { account: ImmutablePropTypes.map.isRequired, attachment: ImmutablePropTypes.map.isRequired, isSmall: PropTypes.bool, } export default MediaItem