Use javascript to set MediaGallery height automatically

This commit is contained in:
Thibaut Girka 2018-04-14 19:38:00 +02:00
parent a95f8271be
commit f1e25b672a
1 changed files with 21 additions and 2 deletions

View File

@ -225,6 +225,15 @@ export default class MediaGallery extends React.PureComponent {
this.props.onOpenMedia(this.props.media, index); this.props.onOpenMedia(this.props.media, index);
} }
handleRef = (node) => {
if (node && this.isStandaloneEligible()) {
// offsetWidth triggers a layout, so only calculate when we need to
this.setState({
width: node.offsetWidth,
});
}
}
isStandaloneEligible() { isStandaloneEligible() {
const { media, standalone } = this.props; const { media, standalone } = this.props;
return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']); return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
@ -232,11 +241,21 @@ export default class MediaGallery extends React.PureComponent {
render () { render () {
const { media, intl, sensitive, letterbox, fullwidth } = this.props; const { media, intl, sensitive, letterbox, fullwidth } = this.props;
const { visible } = this.state; const { width, visible } = this.state;
const size = media.take(4).size; const size = media.take(4).size;
let children; let children;
const style = {};
if (this.isStandaloneEligible()) {
if (width) {
style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
}
} else if (width) {
style.height = width / (16/9);
}
if (!visible) { if (!visible) {
let warning = <FormattedMessage {...(sensitive ? messages.warning : messages.hidden)} />; let warning = <FormattedMessage {...(sensitive ? messages.warning : messages.hidden)} />;
@ -257,7 +276,7 @@ export default class MediaGallery extends React.PureComponent {
const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth }); const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth });
return ( return (
<div className={computedClass}> <div className={computedClass} style={style} ref={this.handleRef}>
{visible ? ( {visible ? (
<div className='sensitive-info'> <div className='sensitive-info'>
<IconButton <IconButton