From 84718945c67ce622e9152ce0e306a5eb64a3ec3d Mon Sep 17 00:00:00 2001
From: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
Date: Thu, 13 Mar 2025 13:27:42 +0000
Subject: [PATCH] [bugfix] Fix blurhash losing proportion when more than one
 item (#17)

Fixes #14

The style changes I made in #11 didn't take hidden media in consideration. This PR fixes it.

![Captura de tela de 2025-03-12 11-19-12.png](/attachments/f395e341-9a31-4459-adb5-46439b4b3003)

![Captura de tela de 2025-03-12 11-54-24.png](/attachments/00b01da2-712d-43f7-99a6-e53241663339)

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/17
Co-authored-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
Co-committed-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
---
 .../flavours/glitch/components/media_gallery.jsx     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/media_gallery.jsx b/app/javascript/flavours/glitch/components/media_gallery.jsx
index 9ea2d244e..560a73718 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.jsx
+++ b/app/javascript/flavours/glitch/components/media_gallery.jsx
@@ -52,7 +52,7 @@ class Item extends PureComponent {
     visible: PropTypes.bool.isRequired,
     autoplay: PropTypes.bool,
     useBlurhash: PropTypes.bool,
-    imageStyle: PropTypes.object,
+    contentStyles: PropTypes.object,
   };
 
   static defaultProps = {
@@ -117,7 +117,7 @@ class Item extends PureComponent {
       displayWidth,
       visible,
       useBlurhash,
-      imageStyle
+      contentStyles
     } = this.props;
 
     let badges = [], thumbnail;
@@ -129,7 +129,7 @@ class Item extends PureComponent {
       width = 100;
     }
 
-    if (size === 4 || (size === 3 && index > 0)) {
+    if (size >= 4 || (size === 3 && index > 0)) {
       height = 50;
     }
 
@@ -184,7 +184,7 @@ class Item extends PureComponent {
             alt={description}
             title={description}
             lang={lang}
-            style={{ ...imageStyle, objectPosition: letterbox ? null : `${x}% ${y}%` }}
+            style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }}
             onLoad={this.handleImageLoad}
           />
         </a>
@@ -216,7 +216,7 @@ class Item extends PureComponent {
     }
 
     return (
-      <div className={classNames('media-gallery__item', { standalone, letterbox, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
+      <div className={classNames('media-gallery__item', { standalone, letterbox, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')} style={contentStyles}>
         <Blurhash
           hash={attachment.get('blurhash')}
           dummy={!useBlurhash}
@@ -384,7 +384,7 @@ class MediaGallery extends PureComponent {
           displayWidth={width}
           visible={visible || uncached}
           useBlurhash={useBlurhash}
-          imageStyle={{ aspectRatio: '16 / 9' }}
+          contentStyles={{ aspectRatio: '16 / 9' }}
         />
       ));
     }