diff --git a/app/gabsocial/components/media_gallery.js b/app/gabsocial/components/media_gallery.js
index 8d9662d38..b2cb6f8b4 100644
--- a/app/gabsocial/components/media_gallery.js
+++ b/app/gabsocial/components/media_gallery.js
@@ -10,6 +10,7 @@ import classNames from 'classnames';
import { displayMedia } from '../initial_state';
import { decode } from 'blurhash';
import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
+import { Map as ImmutableMap } from 'immutable';
const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
@@ -279,16 +280,12 @@ class MediaGallery extends React.PureComponent {
}
}
- render() {
- const { media, intl, sensitive, height, defaultWidth } = this.props;
- const { visible } = this.state;
-
+ getSizeData = () => {
+ const { media, height, defaultWidth } = this.props;
const width = this.state.width || defaultWidth;
-
- let children, spoilerButton;
+ const size = media.take(4).size;
const style = {};
- const size = media.take(4).size;
const panoSize = Math.floor(width / maximumAspectRatio);
const panoSize_px = `${Math.floor(width / maximumAspectRatio)}px`;
@@ -488,16 +485,30 @@ class MediaGallery extends React.PureComponent {
style.height = height;
}
+ return ImmutableMap({
+ style,
+ itemsDimensions,
+ size,
+ width,
+ });
+ }
+
+ render() {
+ const { media, intl, sensitive } = this.props;
+ const { visible } = this.state;
+ const sizeData = this.getSizeData();
+ let children, spoilerButton;
+
children = media.take(4).map((attachment, i) => (