From b623dd12c1eea2a78d1010d20ac8b31431d56501 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Tue, 6 Jun 2017 19:30:17 +0200 Subject: [PATCH] Use preview image in to provide immediate visual feedback (#3595) before the full-size image is loaded --- .../features/ui/components/image_loader.js | 37 ++++++++++++++----- .../features/ui/components/media_modal.js | 2 +- app/javascript/styles/components.scss | 21 ++++++++--- 3 files changed, 44 insertions(+), 16 deletions(-) diff --git a/app/javascript/mastodon/features/ui/components/image_loader.js b/app/javascript/mastodon/features/ui/components/image_loader.js index 2a2cbb9bf1..b357f28a0d 100644 --- a/app/javascript/mastodon/features/ui/components/image_loader.js +++ b/app/javascript/mastodon/features/ui/components/image_loader.js @@ -5,6 +5,9 @@ class ImageLoader extends React.PureComponent { static propTypes = { src: PropTypes.string.isRequired, + previewSrc: PropTypes.string.isRequired, + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, } state = { @@ -13,31 +16,45 @@ class ImageLoader extends React.PureComponent { } componentWillMount() { - this.loadImage(this.props.src); + this._loadImage(this.props.src); } componentWillReceiveProps(props) { - this.loadImage(props.src); + this._loadImage(props.src); } - loadImage(src) { + _loadImage(src) { const image = new Image(); + image.onerror = () => this.setState({ loading: false, error: true }); - image.onload = () => this.setState({ loading: false, error: false }); + image.onload = () => this.setState({ loading: false, error: false }); + image.src = src; - this.lastSrc = src; + this.setState({ loading: true }); } render() { - const { src } = this.props; + const { src, previewSrc, width, height } = this.props; const { loading, error } = this.state; - // TODO: handle image error state + return ( +
+ - const imageClass = `image-loader__img ${loading ? 'image-loader__img-loading' : ''}`; - - return ; // eslint-disable-line jsx-a11y/img-has-alt + {loading && + + } +
+ ); } } diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js index f94c76a215..cff1a0cf52 100644 --- a/app/javascript/mastodon/features/ui/components/media_modal.js +++ b/app/javascript/mastodon/features/ui/components/media_modal.js @@ -73,7 +73,7 @@ class MediaModal extends ImmutablePureComponent { } if (attachment.get('type') === 'image') { - content = ; + content = ; } else if (attachment.get('type') === 'gifv') { content = ; } diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index 4ff19e0ef9..5026742255 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1137,13 +1137,22 @@ } } -.image-loader__img { - transition: opacity 0.3s linear; - opacity: 1; +.image-loader { + position: relative; } -.image-loader__img-loading { - opacity: 0.7; +.image-loader__preview-img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + filter: blur(2px); +} + +.media-modal img.image-loader__preview-img { + width: 100%; + height: 100%; } .navigation-bar { @@ -2951,6 +2960,8 @@ button.icon-button.active i.fa-retweet { video { max-width: 80vw; max-height: 80vh; + width: auto; + height: auto; } img {