treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,12 +8,14 @@ export default class ImageLoader extends React.PureComponent {
alt: PropTypes.string, alt: PropTypes.string,
src: PropTypes.string.isRequired, src: PropTypes.string.isRequired,
previewSrc: PropTypes.string.isRequired, previewSrc: PropTypes.string.isRequired,
width: PropTypes.number.isRequired, width: PropTypes.number,
height: PropTypes.number.isRequired, height: PropTypes.number,
} }
static defaultProps = { static defaultProps = {
alt: '', alt: '',
width: null,
height: null,
}; };
state = { state = {
@ -46,8 +48,8 @@ export default class ImageLoader extends React.PureComponent {
this.setState({ loading: true, error: false }); this.setState({ loading: true, error: false });
Promise.all([ Promise.all([
this.loadPreviewCanvas(props), this.loadPreviewCanvas(props),
this.loadOriginalImage(props), this.hasSize() && this.loadOriginalImage(props),
]) ].filter(Boolean))
.then(() => { .then(() => {
this.setState({ loading: false, error: false }); this.setState({ loading: false, error: false });
this.clearPreviewCanvas(); this.clearPreviewCanvas();
@ -106,6 +108,11 @@ export default class ImageLoader extends React.PureComponent {
this.removers = []; this.removers = [];
} }
hasSize () {
const { width, height } = this.props;
return typeof width === 'number' && typeof height === 'number';
}
setCanvasRef = c => { setCanvasRef = c => {
this.canvas = c; this.canvas = c;
} }
@ -116,6 +123,7 @@ export default class ImageLoader extends React.PureComponent {
const className = classNames('image-loader', { const className = classNames('image-loader', {
'image-loader--loading': loading, 'image-loader--loading': loading,
'image-loader--amorphous': !this.hasSize(),
}); });
return ( return (

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

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

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

@ -1117,6 +1117,20 @@
height: 100%; height: 100%;
background-image: none; 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 { .navigation-bar {