monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Render placeholder instead of image when MediaGallery container width isn't known

This commit is contained in:
Thibaut Girka 2018-11-22 16:43:41 +01:00 committed by ThibG
parent b3ff35a75c
commit 0d3612482e
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/flavours/glitch/components/media_gallery.js
View File

@ -237,7 +237,7 @@ export default class MediaGallery extends React.PureComponent {
} }
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
if (this.node && this.node.offsetWidth) { if (this.node && this.node.offsetWidth && this.node.offsetWidth != this.state.width) {
this.setState({ this.setState({
width: this.node.offsetWidth, width: this.node.offsetWidth,
}); });
@ -254,8 +254,7 @@ export default class MediaGallery extends React.PureComponent {
handleRef = (node) => { handleRef = (node) => {
this.node = node; this.node = node;
if (node /*&& this.isStandaloneEligible()*/) { if (node && node.offsetWidth && node.offsetWidth != this.state.width) {
// offsetWidth triggers a layout, so only calculate when we need to
this.setState({ this.setState({
width: node.offsetWidth, width: node.offsetWidth,
}); });
@ -276,10 +275,14 @@ export default class MediaGallery extends React.PureComponent {
const style = {}; const style = {};
const computedClass = classNames('media-gallery', { 'full-width': fullwidth });
if (this.isStandaloneEligible() && width) { if (this.isStandaloneEligible() && width) {
style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']); style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
} else if (width) { } else if (width) {
style.height = width / (16/9); style.height = width / (16/9);
} else {
return (<div className={computedClass} ref={this.handleRef}></div>);
} }
if (!visible) { if (!visible) {
@ -299,8 +302,6 @@ export default class MediaGallery extends React.PureComponent {
} }
} }
const computedClass = classNames('media-gallery', { 'full-width': fullwidth });
return ( return (
<div className={computedClass} style={style} ref={this.handleRef}> <div className={computedClass} style={style} ref={this.handleRef}>
{visible ? ( {visible ? (