From f1e25b672a800b2536624d9bee2e8badf50566f2 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 14 Apr 2018 19:38:00 +0200 Subject: [PATCH] Use javascript to set MediaGallery height automatically --- .../glitch/components/media_gallery.js | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index a2219378e..84bf4e39f 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -225,6 +225,15 @@ export default class MediaGallery extends React.PureComponent { this.props.onOpenMedia(this.props.media, index); } + handleRef = (node) => { + if (node && this.isStandaloneEligible()) { + // offsetWidth triggers a layout, so only calculate when we need to + this.setState({ + width: node.offsetWidth, + }); + } + } + isStandaloneEligible() { const { media, standalone } = this.props; return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']); @@ -232,11 +241,21 @@ export default class MediaGallery extends React.PureComponent { render () { const { media, intl, sensitive, letterbox, fullwidth } = this.props; - const { visible } = this.state; + const { width, visible } = this.state; const size = media.take(4).size; let children; + const style = {}; + + if (this.isStandaloneEligible()) { + if (width) { + style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); + } + } else if (width) { + style.height = width / (16/9); + } + if (!visible) { let warning = ; @@ -257,7 +276,7 @@ export default class MediaGallery extends React.PureComponent { const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth }); return ( -
+
{visible ? (