forked from treehouse/mastodon
Don't use preview when image size is unknown (#4113)
parent
852bda3d32
commit
76318f8830
|
@ -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 (
|
||||
|
|
|
@ -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} />;
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue