diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2017-06-06 19:30:17 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-06-06 19:30:17 +0200 |
commit | b623dd12c1eea2a78d1010d20ac8b31431d56501 (patch) | |
tree | 136f662b29c6f7120dc07cac6fca7de058cac67e | |
parent | 722d152082a20c96ca6f1db92c172f9d3772d737 (diff) |
Use preview image in <ImageLoader /> to provide immediate visual feedback (#3595)
before the full-size image is loaded
-rw-r--r-- | app/javascript/mastodon/features/ui/components/image_loader.js | 39 | ||||
-rw-r--r-- | app/javascript/mastodon/features/ui/components/media_modal.js | 2 | ||||
-rw-r--r-- | app/javascript/styles/components.scss | 21 |
3 files changed, 45 insertions, 17 deletions
diff --git a/app/javascript/mastodon/features/ui/components/image_loader.js b/app/javascript/mastodon/features/ui/components/image_loader.js index 2a2cbb9bf..b357f28a0 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 - - const imageClass = `image-loader__img ${loading ? 'image-loader__img-loading' : ''}`; - - return <img className={imageClass} src={src} />; // eslint-disable-line jsx-a11y/img-has-alt + return ( + <div className='image-loader'> + <img // eslint-disable-line jsx-a11y/img-has-alt + className='image-loader__img' + src={src} + width={width} + height={height} + /> + + {loading && + <img // eslint-disable-line jsx-a11y/img-has-alt + src={previewSrc} + className='image-loader__preview-img' + /> + } + </div> + ); } } diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js index f94c76a21..cff1a0cf5 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 = <ImageLoader src={url} />; + content = <ImageLoader previewSrc={attachment.get('preview_url')} src={url} width={attachment.getIn(['meta', 'original', 'width'])} height={attachment.getIn(['meta', 'original', '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 4ff19e0ef..502674225 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 { |