From 0d3612482e8b6fb27643dbcefce046897223e890 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Thu, 22 Nov 2018 16:43:41 +0100 Subject: [PATCH] Render placeholder instead of image when MediaGallery container width isn't known --- .../flavours/glitch/components/media_gallery.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index d637d7c8e..10afeb2eb 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -237,7 +237,7 @@ export default class MediaGallery extends React.PureComponent { } componentDidUpdate (prevProps) { - if (this.node && this.node.offsetWidth) { + if (this.node && this.node.offsetWidth && this.node.offsetWidth != this.state.width) { this.setState({ width: this.node.offsetWidth, }); @@ -254,8 +254,7 @@ export default class MediaGallery extends React.PureComponent { handleRef = (node) => { this.node = node; - if (node /*&& this.isStandaloneEligible()*/) { - // offsetWidth triggers a layout, so only calculate when we need to + if (node && node.offsetWidth && node.offsetWidth != this.state.width) { this.setState({ width: node.offsetWidth, }); @@ -276,10 +275,14 @@ export default class MediaGallery extends React.PureComponent { const style = {}; + const computedClass = classNames('media-gallery', { 'full-width': fullwidth }); + if (this.isStandaloneEligible() && width) { style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); } else if (width) { style.height = width / (16/9); + } else { + return (
); } if (!visible) { @@ -299,8 +302,6 @@ export default class MediaGallery extends React.PureComponent { } } - const computedClass = classNames('media-gallery', { 'full-width': fullwidth }); - return (
{visible ? (