kosmos/mastodon
kosmos
/
mastodon
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use preview image in <ImageLoader /> to provide immediate visual feedback (#3595) 

before the full-size image is loaded
This commit is contained in:
Eugen Rochko 2017-06-06 19:30:17 +02:00 committed by GitHub
parent 722d152082
commit b623dd12c1
3 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/javascript/mastodon/features/ui/components/image_loader.js
View File

@ -5,6 +5,9 @@ class ImageLoader extends React.PureComponent {
static propTypes = { static propTypes = {
src: PropTypes.string.isRequired, src: PropTypes.string.isRequired,
previewSrc: PropTypes.string.isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
} }
state = { state = {
@ -13,31 +16,45 @@ class ImageLoader extends React.PureComponent {
} }
componentWillMount() { componentWillMount() {
this.loadImage(this.props.src); this._loadImage(this.props.src);
} }
componentWillReceiveProps(props) { componentWillReceiveProps(props) {
this.loadImage(props.src); this._loadImage(props.src);
} }
loadImage(src) { _loadImage(src) {
const image = new Image(); const image = new Image();
image.onerror = () => this.setState({ loading: false, error: true }); 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; image.src = src;
this.lastSrc = src;
this.setState({ loading: true }); this.setState({ loading: true });
} }
render() { render() {
const { src } = this.props; const { src, previewSrc, width, height } = this.props;
const { loading, error } = this.state; const { loading, error } = this.state;
// TODO: handle image error state return (
<div className='image-loader'>
<img // eslint-disable-line jsx-a11y/img-has-alt
className='image-loader__img'
src={src}
width={width}
height={height}
/>
const imageClass = `image-loader__img ${loading ? 'image-loader__img-loading' : ''}`; {loading &&
<img // eslint-disable-line jsx-a11y/img-has-alt
return <img className={imageClass} src={src} />; // eslint-disable-line jsx-a11y/img-has-alt src={previewSrc}
className='image-loader__preview-img'
/>
}
</div>
);
} }
} }

2
app/javascript/mastodon/features/ui/components/media_modal.js
View File

@ -73,7 +73,7 @@ class MediaModal extends ImmutablePureComponent {
} }
if (attachment.get('type') === 'image') { 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') { } else if (attachment.get('type') === 'gifv') {
content = <ExtendedVideoPlayer src={url} muted controls={false} />; content = <ExtendedVideoPlayer src={url} muted controls={false} />;
} }

21
app/javascript/styles/components.scss
View File

@ -1137,13 +1137,22 @@
} }
} }
.image-loader__img { .image-loader {
transition: opacity 0.3s linear; position: relative;
opacity: 1;
} }
.image-loader__img-loading { .image-loader__preview-img {
opacity: 0.7; 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 { .navigation-bar {
@ -2951,6 +2960,8 @@ button.icon-button.active i.fa-retweet {
video { video {
max-width: 80vw; max-width: 80vw;
max-height: 80vh; max-height: 80vh;
width: auto;
height: auto;
} }
img { img {