Start refactoring media aspect ratio code

app/gabsocial/components/media_gallery.js

@@ -280,20 +280,13 @@ class MediaGallery extends React.PureComponent {
     }
   }
 
-  getSizeData = () => {
+  getSizeDataSingle = () => {
-    const { media, height, defaultWidth } = this.props;
+    const { media, defaultWidth } = this.props;
     const width = this.state.width || defaultWidth;
-    const size = media.take(4).size;
+    const aspectRatio = media.getIn([0, 'meta', 'small', 'aspect']);
 
     const style = {};
 
-    const panoSize = Math.floor(width / maximumAspectRatio);
-    const panoSize_px = `${Math.floor(width / maximumAspectRatio)}px`;
-    let itemsDimensions = [];
-
-    if (size === 1 && width) {
-      const aspectRatio = media.getIn([0, 'meta', 'small', 'aspect']);
-
     if (isPanoramic(aspectRatio)) {
       style.height = Math.floor(width / maximumAspectRatio);
     } else if (isPortrait(aspectRatio)) {
@@ -301,11 +294,29 @@ class MediaGallery extends React.PureComponent {
     } else {
       style.height = Math.floor(width / aspectRatio);
     }
-    } else if (size > 1 && width) {
+
-      const ar1 = media.getIn([0, 'meta', 'small', 'aspect']);
+    return ImmutableMap({
-      const ar2 = media.getIn([1, 'meta', 'small', 'aspect']);
+      style,
-      const ar3 = media.getIn([2, 'meta', 'small', 'aspect']);
+      itemsDimensions: [],
-      const ar4 = media.getIn([3, 'meta', 'small', 'aspect']);
+      size: 1,
+      width,
+    });
+  }
+
+  getSizeDataMultiple = size => {
+    const { media, defaultWidth } = this.props;
+    const width = this.state.width || defaultWidth;
+    const panoSize = Math.floor(width / maximumAspectRatio);
+    const panoSize_px = `${Math.floor(width / maximumAspectRatio)}px`;
+
+    const style = {};
+    let itemsDimensions = [];
+
+    const ratios = Array(size).fill().map((_, i) =>
+      media.getIn([i, 'meta', 'small', 'aspect'])
+    );
+
+    const [ar1, ar2, ar3, ar4] = ratios;
 
     if (size === 2) {
       if (isPortrait(ar1) && isPortrait(ar2)) {
@@ -481,13 +492,29 @@ class MediaGallery extends React.PureComponent {
         ];
       }
     }
-    } else {
-      style.height = height;
-    }
 
     return ImmutableMap({
       style,
       itemsDimensions,
+      size: size,
+      width,
+    });
+
+  }
+
+  getSizeData = size => {
+    const { height, defaultWidth } = this.props;
+    const width = this.state.width || defaultWidth;
+
+    if (width) {
+      if (size === 1) return this.getSizeDataSingle();
+      if (size > 1)   return this.getSizeDataMultiple(size);
+    }
+
+    // Default
+    return ImmutableMap({
+      style: { height },
+      itemsDimensions: [],
       size,
       width,
     });
@@ -496,7 +523,7 @@ class MediaGallery extends React.PureComponent {
   render() {
     const { media, intl, sensitive } = this.props;
     const { visible } = this.state;
-    const sizeData = this.getSizeData();
+    const sizeData = this.getSizeData(media.size);
     let children, spoilerButton;
 
     children = media.take(4).map((attachment, i) => (