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

lolsob-rspec
Yamagishi Kazutoshi 2017-07-09 00:21:59 +09:00 committed by Eugen Rochko
parent aaa7f3ff41
commit a45154d725
3 changed files with 30 additions and 5 deletions

View File

@ -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 (

View File

@ -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} />;
}

View File

@ -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 {