diff options
author | Thibaut Girka <thib@sitedethib.com> | 2018-04-14 20:31:47 +0200 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2018-04-19 11:16:18 +0200 |
commit | dcc1c10937f0e8851c26a2b59873da819137e5fa (patch) | |
tree | 2e4cfd029c3786c8d0387d19a0633e138e2ac713 /app/javascript/flavours/glitch/components/media_gallery.js | |
parent | f1e25b672a800b2536624d9bee2e8badf50566f2 (diff) |
[Glitch] Center thumbnails on focus point
Port the display part of the following commits to glitch-soc: * 90f12f2e5a41115a9a756f9dd38054736080d4f9 * b170627ceb8838c358aef1fcca9673ce4aa61ab8 * 11697d68942db7b97a4c7384e4fb4148a97b9122 * 56eb5c3f344f0342ac6f26a05748bc21c585a729
Diffstat (limited to 'app/javascript/flavours/glitch/components/media_gallery.js')
-rw-r--r-- | app/javascript/flavours/glitch/components/media_gallery.js | 24 |
1 files changed, 18 insertions, 6 deletions
diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index 84bf4e39f..85949d49d 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -136,16 +136,21 @@ class Item extends React.PureComponent { let thumbnail = ''; if (attachment.get('type') === 'image') { - const previewUrl = attachment.get('preview_url'); + const previewUrl = attachment.get('preview_url'); const previewWidth = attachment.getIn(['meta', 'small', 'width']); - const originalUrl = attachment.get('url'); - const originalWidth = attachment.getIn(['meta', 'original', 'width']); + const originalUrl = attachment.get('url'); + const originalWidth = attachment.getIn(['meta', 'original', 'width']); const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number'; const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null; - const sizes = hasSize ? `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw` : null; + const sizes = hasSize ? `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw` : null; + + const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; + const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0; + const x = ((focusX / 2) + .5) * 100; + const y = ((focusY / -2) + .5) * 100; thumbnail = ( <a @@ -154,7 +159,14 @@ class Item extends React.PureComponent { onClick={this.handleClick} target='_blank' > - <img className={letterbox ? 'letterbox' : null} src={previewUrl} srcSet={srcSet} sizes={sizes} alt={attachment.get('description')} title={attachment.get('description')} /> + <img + className={letterbox ? 'letterbox' : null} + src={previewUrl} + srcSet={srcSet} + sizes={sizes} + alt={attachment.get('description')} + title={attachment.get('description')} + style={{ objectPosition: `${x}% ${y}%` }} /> </a> ); } else if (attachment.get('type') === 'gifv') { @@ -226,7 +238,7 @@ export default class MediaGallery extends React.PureComponent { } handleRef = (node) => { - if (node && this.isStandaloneEligible()) { + if (node /*&& this.isStandaloneEligible()*/) { // offsetWidth triggers a layout, so only calculate when we need to this.setState({ width: node.offsetWidth, |