about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features/account_gallery/components
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2018-03-16 19:54:00 +0100
committerThibaut Girka <thib@sitedethib.com>2018-03-16 23:16:20 +0100
commitf00af46d706f22e1e24d229e3c3f8f959ffaf22e (patch)
treea3fb075ae3aa34643dbdfed7d1e26f1a3de3ebbb /app/javascript/flavours/glitch/features/account_gallery/components
parentd75a6054a04820610d8386338faed256e59c143e (diff)
[Glitch] Add "Toots/Toots with replies/Media" tab below profile header
Port 51310125051a75ef7af4e8ffc8b6532c151e96b6 to glitch
Diffstat (limited to 'app/javascript/flavours/glitch/features/account_gallery/components')
-rw-r--r--app/javascript/flavours/glitch/features/account_gallery/components/media_item.js16
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>