gab-social/app/javascript/gabsocial/components/media_item.js

163 lines
4.2 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
2020-03-04 22:26:01 +00:00
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 { CX } from '../constants'
2020-03-04 22:26:01 +00:00
import Icon from './icon'
import Image from './image'
import Text from './text'
class MediaItem extends ImmutablePureComponent {
2020-03-04 22:26:01 +00:00
state = {
loaded: false,
2020-04-28 06:33:58 +01:00
visible: displayMedia !== 'hide_all' && !this.props.attachment.getIn(['status', 'sensitive']) || displayMedia === 'show_all',
2020-03-04 22:26:01 +00:00
}
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() {
2020-04-28 06:33:58 +01:00
const {
account,
attachment,
isSmall,
} = this.props
2020-03-04 22:26:01 +00:00
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({
d: 1,
2020-04-23 07:13:29 +01:00
posAbs: 1,
2020-03-07 04:53:28 +00:00
top0: 1,
h100PC: 1,
w100PC: 1,
2020-04-28 06:33:58 +01:00
py2: !isSmall,
px2: !isSmall,
2020-03-07 04:53:28 +00:00
})
const linkClasses = CX({
d: 1,
w100PC: 1,
h100PC: 1,
2020-03-07 04:53:28 +00:00
overflowHidden: 1,
border1PX: 1,
2020-04-28 06:33:58 +01:00
borderColorPrimary: 1,
2020-03-07 04:53:28 +00:00
})
2020-04-28 06:33:58 +01:00
const statusUrl = `/${account.getIn(['acct'])}/posts/${status.get('id')}`;
2020-03-04 22:26:01 +00:00
return (
<div className={[_s.d, _s.w25PC, _s.pt25PC].join(' ')}>
2020-03-07 04:53:28 +00:00
<div className={containerClasses}>
2020-03-04 22:26:01 +00:00
<NavLink
2020-04-28 06:33:58 +01:00
to={statusUrl}
2020-03-04 22:26:01 +00:00
title={title}
2020-03-07 04:53:28 +00:00
className={linkClasses}
2020-03-04 22:26:01 +00:00
>
{
(!loaded || !visible) &&
<canvas
height='100%'
width='100%'
ref={this.setCanvasRef}
className={[_s.d, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
2020-03-04 22:26:01 +00:00
/>
}
{
visible &&
<Image
height='100%'
src={attachment.get('preview_url')}
alt={attachment.get('description')}
title={attachment.get('description')}
onLoad={this.handleImageLoad}
className={_s.z1}
/>
}
<div className={[_s.d, _s.aiCenter, _s.jcCenter, _s.h100PC, _s.w100PC, _s.z3, _s.posAbs].join(' ')}>
2020-03-04 22:26:01 +00:00
{
!visible &&
<Icon
id='hidden'
2020-04-23 07:13:29 +01:00
size='22px'
className={[_s.cWhite].join('')}
2020-03-04 22:26:01 +00:00
/>
}
{
!!badge &&
<div className={[_s.d, _s.posAbs, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr5, _s.mt5, _s.mb5, _s.bottom0, _s.right0].join(' ')}>
2020-03-04 22:26:01 +00:00
<Text size='extraSmall' color='white'>
{badge}
</Text>
</div>
}
</div>
</NavLink>
</div>
</div>
)
}
}
MediaItem.propTypes = {
account: ImmutablePropTypes.map.isRequired,
attachment: ImmutablePropTypes.map.isRequired,
isSmall: PropTypes.bool,
}
export default MediaItem