Use javascript to set MediaGallery height automatically

1 files changed, 21 insertions, 2 deletions

diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js
index a2219378e..84bf4e39f 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.js
+++ b/app/javascript/flavours/glitch/components/media_gallery.js
@@ -225,6 +225,15 @@ export default class MediaGallery extends React.PureComponent {
     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() {
     const { media, standalone } = this.props;
     return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
@@ -232,11 +241,21 @@ export default class MediaGallery extends React.PureComponent {
 
   render () {
     const { media, intl, sensitive, letterbox, fullwidth } = this.props;
-    const { visible } = this.state;
+    const { width, visible } = this.state;
     const size = media.take(4).size;
 
     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) {
       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 });
 
     return (
-      <div className={computedClass}>
+      <div className={computedClass} style={style} ref={this.handleRef}>
         {visible ? (
           <div className='sensitive-info'>
             <IconButton