Maintain aspect ratio for preview image (#3966)

app/javascript/mastodon/features/ui/components/image_loader.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 export default class ImageLoader extends React.PureComponent {
 
@@ -20,46 +21,121 @@ export default class ImageLoader extends React.PureComponent {
     error: false,
   }
 
-  componentWillMount() {
+  removers = [];
-    this._loadImage(this.props.src);
+
+  get canvasContext() {
+    if (!this.canvas) {
+      return null;
+    }
+    this._canvasContext = this._canvasContext || this.canvas.getContext('2d');
+    return this._canvasContext;
   }
 
-  componentWillReceiveProps(props) {
+  componentDidMount () {
-    this._loadImage(props.src);
+    this.loadImage(this.props);
   }
 
-  _loadImage(src) {
+  componentWillReceiveProps (nextProps) {
+    if (this.props.src !== nextProps.src) {
+      this.loadImage(nextProps);
+    }
+  }
+
+  loadImage (props) {
+    this.removeEventListeners();
+    this.setState({ loading: true, error: false });
+    Promise.all([
+      this.loadPreviewCanvas(props),
+      this.loadOriginalImage(props),
+    ])
+      .then(() => {
+        this.setState({ loading: false, error: false });
+        this.clearPreviewCanvas();
+      })
+      .catch(() => this.setState({ loading: false, error: true }));
+  }
+
+  loadPreviewCanvas = ({ previewSrc, width, height }) => new Promise((resolve, reject) => {
     const image = new Image();
+    const removeEventListeners = () => {
+      image.removeEventListener('error', handleError);
+      image.removeEventListener('load', handleLoad);
+    };
+    const handleError = () => {
+      removeEventListeners();
+      reject();
+    };
+    const handleLoad = () => {
+      removeEventListeners();
+      this.canvasContext.drawImage(image, 0, 0, width, height);
+      resolve();
+    };
+    image.addEventListener('error', handleError);
+    image.addEventListener('load', handleLoad);
+    image.src = previewSrc;
+    this.removers.push(removeEventListeners);
+  })
 
-    image.onerror = () => this.setState({ loading: false, error: true });
+  clearPreviewCanvas () {
-    image.onload  = () => this.setState({ loading: false, error: false });
+    const { width, height } = this.canvas;
-
+    this.canvasContext.clearRect(0, 0, width, height);
-    image.src = src;
-
-    this.setState({ loading: true });
   }
 
-  render() {
+  loadOriginalImage = ({ src }) => new Promise((resolve, reject) => {
-    const { alt, src, previewSrc, width, height } = this.props;
+    const image = new Image();
+    const removeEventListeners = () => {
+      image.removeEventListener('error', handleError);
+      image.removeEventListener('load', handleLoad);
+    };
+    const handleError = () => {
+      removeEventListeners();
+      reject();
+    };
+    const handleLoad = () => {
+      removeEventListeners();
+      resolve();
+    };
+    image.addEventListener('error', handleError);
+    image.addEventListener('load', handleLoad);
+    image.src = src;
+    this.removers.push(removeEventListeners);
+  });
+
+  removeEventListeners () {
+    this.removers.forEach(listeners => listeners());
+    this.removers = [];
+  }
+
+  setCanvasRef = c => {
+    this.canvas = c;
+  }
+
+  render () {
+    const { alt, src, width, height } = this.props;
     const { loading } = this.state;
 
+    const className = classNames('image-loader', {
+      'image-loader--loading': loading,
+    });
+
     return (
-      <div className='image-loader'>
+      <div className={className}>
-        <img
+        <canvas
-          alt={alt}
+          className='image-loader__preview-canvas'
-          className='image-loader__img'
-          src={src}
           width={width}
           height={height}
+          ref={this.setCanvasRef}
         />
 
-        {loading &&
+        {!loading && (
           <img
-            alt=''
+            alt={alt}
-            src={previewSrc}
+            className='image-loader__img'
-            className='image-loader__preview-img'
+            src={src}
+            width={width}
+            height={height}
           />
-        }
+        )}
       </div>
     );
   }

app/javascript/styles/components.scss

@@ -1099,20 +1099,22 @@
 
 .image-loader {
   position: relative;
-}
 
-.image-loader__preview-img {
+  &.image-loader--loading {
-  position: absolute;
+    .image-loader__preview-canvas {
-  top: 0;
+      filter: blur(2px);
-  left: 0;
+    }
-  width: 100%;
+  }
-  height: 100%;
-  filter: blur(2px);
-}
 
-.media-modal img.image-loader__preview-img {
+  .image-loader__img {
-  width: 100%;
+    position: absolute;
-  height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-image: none;
+  }
 }
 
 .navigation-bar {
@@ -2933,6 +2935,7 @@ button.icon-button.active i.fa-retweet {
   position: relative;
 
   img,
+  canvas,
   video {
     max-width: 80vw;
     max-height: 80vh;
@@ -2940,7 +2943,8 @@ button.icon-button.active i.fa-retweet {
     height: auto;
   }
 
-  img {
+  img,
+  canvas {
     display: block;
     background: url('../images/void.png') repeat;
   }