Don't use preview when image size is unknown (#4113)

diff --git a/app/javascript/mastodon/features/ui/components/image_loader.js b/app/javascript/mastodon/features/ui/components/image_loader.js
index 52c3a898b75de0b7215e863b39814f2f4a13da4d..5ea55d1d26f1c4b7f9e0c3f1c6b9ef2f46a71ad9 100644 (file)
--- a/app/javascript/mastodon/features/ui/components/image_loader.js
+++ b/app/javascript/mastodon/features/ui/components/image_loader.js
@@ -8,12 +8,14 @@ export default class ImageLoader extends React.PureComponent {
     alt: PropTypes.string,
     src: PropTypes.string.isRequired,
     previewSrc: PropTypes.string.isRequired,
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired,
+    width: PropTypes.number,
+    height: PropTypes.number,
   }
 
   static defaultProps = {
     alt: '',
+    width: null,
+    height: null,
   };
 
   state = {
@@ -46,8 +48,8 @@ export default class ImageLoader extends React.PureComponent {
     this.setState({ loading: true, error: false });
     Promise.all([
       this.loadPreviewCanvas(props),
-      this.loadOriginalImage(props),
-    ])
+      this.hasSize() && this.loadOriginalImage(props),
+    ].filter(Boolean))
       .then(() => {
         this.setState({ loading: false, error: false });
         this.clearPreviewCanvas();
@@ -106,6 +108,11 @@ export default class ImageLoader extends React.PureComponent {
     this.removers = [];
   }
 
+  hasSize () {
+    const { width, height } = this.props;
+    return typeof width === 'number' && typeof height === 'number';
+  }
+
   setCanvasRef = c => {
     this.canvas = c;
   }
@@ -116,6 +123,7 @@ export default class ImageLoader extends React.PureComponent {
 
     const className = classNames('image-loader', {
       'image-loader--loading': loading,
+      'image-loader--amorphous': !this.hasSize(),
     });
 
     return (

diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js
index 8bb81ca01d15da14ecb18d5483222c29b8d819f5..a5b9dc19f3095b983056e63560040d694dd349bb 100644 (file)
--- a/app/javascript/mastodon/features/ui/components/media_modal.js
+++ b/app/javascript/mastodon/features/ui/components/media_modal.js
@@ -74,7 +74,10 @@ export default class MediaModal extends ImmutablePureComponent {
     }
 
     if (attachment.get('type') === 'image') {
-      content = <ImageLoader previewSrc={attachment.get('preview_url')} src={url} width={attachment.getIn(['meta', 'original', 'width'])} height={attachment.getIn(['meta', 'original', 'height'])} />;
+      const width  = attachment.getIn(['meta', 'original', 'width']) || null;
+      const height = attachment.getIn(['meta', 'original', 'height']) || null;
+
+      content = <ImageLoader previewSrc={attachment.get('preview_url')} src={url} width={width} height={height} />;
     } else if (attachment.get('type') === 'gifv') {
       content = <ExtendedVideoPlayer src={url} muted controls={false} />;
     }

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 9b500c7ad9985a6fa078df162544c3bc8e8e46af..66d2715da07c10471271a845177b7dba14fcf7f8 100644 (file)
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -1117,6 +1117,20 @@
     height: 100%;
     background-image: none;
   }
+
+  &.image-loader--amorphous {
+    position: static;
+
+    .image-loader__preview-canvas {
+      display: none;
+    }
+
+    .image-loader__img {
+      position: static;
+      width: auto;
+      height: auto;
+    }
+  }
 }
 
 .navigation-bar {