diff options
author | pluralcafe-docker <git@plural.cafe> | 2018-10-13 01:09:02 +0000 |
---|---|---|
committer | pluralcafe-docker <git@plural.cafe> | 2018-10-13 01:09:02 +0000 |
commit | 7c96ee7815c216d6ac3b748d7dd6959376d3914e (patch) | |
tree | fd36bade02afa1536198e7f3beafb208973b68c5 /app/javascript/flavours/glitch/features/account_gallery/components/media_item.js | |
parent | f9275cb762a311cbf298b3929552a153703c0726 (diff) | |
parent | 70d346ea951ebfa002225759310d72882a435a5c (diff) |
Merge branch 'glitch'
Diffstat (limited to 'app/javascript/flavours/glitch/features/account_gallery/components/media_item.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/account_gallery/components/media_item.js | 40 |
1 files changed, 35 insertions, 5 deletions
diff --git a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js index c2cf48d7b..89778e123 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js +++ b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.js @@ -2,6 +2,7 @@ import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Permalink from 'flavours/glitch/components/permalink'; +import { displayMedia } from 'flavours/glitch/util/initial_state'; export default class MediaItem extends ImmutablePureComponent { @@ -9,8 +10,22 @@ export default class MediaItem extends ImmutablePureComponent { media: ImmutablePropTypes.map.isRequired, }; + state = { + visible: displayMedia !== 'hide_all' && !this.props.media.getIn(['status', 'sensitive']) || displayMedia === 'show_all', + }; + + 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']); @@ -18,21 +33,36 @@ export default class MediaItem extends ImmutablePureComponent { const y = ((focusY / -2) + .5) * 100; const style = {}; - let content; + let label, icon, title; if (media.get('type') === 'gifv') { - content = <span className='media-gallery__gifv__label'>GIF</span>; + label = <span className='media-gallery__gifv__label'>GIF</span>; } - if (!status.get('sensitive')) { + if (visible) { style.backgroundImage = `url(${media.get('preview_url')})`; style.backgroundPosition = `${x}% ${y}%`; + title = media.get('description'); + } else { + icon = ( + <span className='account-gallery__item__icons'> + <i className='fa fa-eye-slash' /> + </span> + ); + title = status.get('spoiler_text') || media.get('description'); } return ( <div className='account-gallery__item'> - <Permalink to={`/statuses/${status.get('id')}`} href={status.get('url')} style={style}> - {content} + <Permalink + to={`/statuses/${status.get('id')}`} + href={status.get('url')} + style={style} + title={title} + onInterceptClick={this.handleClick} + > + {icon} + {label} </Permalink> </div> ); |