diff options
author | David Yip <yipdw@member.fsf.org> | 2018-03-18 20:17:15 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-03-18 20:17:15 -0500 |
commit | a387f99659e9a1dde11b6a8f6f3dd5a433b55f45 (patch) | |
tree | f3050987a16c776d144a61a07299a5fb9f2c4ace /app/javascript/flavours/glitch/features/account_gallery/components/media_item.js | |
parent | 9341b982b611ed3655489a01ba32720b84dfefdc (diff) | |
parent | 6f0e50f9a0f8decc64acc92e02faace8e29153ad (diff) |
Merge pull request #388 from ThibG/glitch-soc/federated-pinned-toots
Port WebUI toots/with reply/media tabs and pinned toots to 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 | 16 |
1 files changed, 9 insertions, 7 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 e52d3b0bb..c2cf48d7b 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 @@ -12,24 +12,26 @@ export default class MediaItem extends ImmutablePureComponent { render () { const { media } = this.props; 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 content, style; + let content; if (media.get('type') === 'gifv') { content = <span className='media-gallery__gifv__label'>GIF</span>; } if (!status.get('sensitive')) { - style = { backgroundImage: `url(${media.get('preview_url')})` }; + style.backgroundImage = `url(${media.get('preview_url')})`; + style.backgroundPosition = `${x}% ${y}%`; } return ( <div className='account-gallery__item'> - <Permalink - to={`/statuses/${status.get('id')}`} - href={status.get('url')} - style={style} - > + <Permalink to={`/statuses/${status.get('id')}`} href={status.get('url')} style={style}> {content} </Permalink> </div> |