about summary refs log tree commit diff
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2018-11-22 16:43:41 +0100
committerThibG <thib@sitedethib.com>2018-11-25 11:29:56 +0100
commit0d3612482e8b6fb27643dbcefce046897223e890 (patch)
tree5093b1a54ab387fae34eedd51d2a9b7738d6e73a
parentb3ff35a75cf04e4aba2712a9d0897257cf79af82 (diff)
Render placeholder instead of image when MediaGallery container width isn't known
-rw-r--r--app/javascript/flavours/glitch/components/media_gallery.js11
1 files 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 (<div className={computedClass} ref={this.handleRef}></div>);
     }
 
     if (!visible) {
@@ -299,8 +302,6 @@ export default class MediaGallery extends React.PureComponent {
       }
     }
 
-    const computedClass = classNames('media-gallery', { 'full-width': fullwidth });
-
     return (
       <div className={computedClass} style={style} ref={this.handleRef}>
         {visible ? (