From 4bb7992d4cb62329d5246fd9d2ad2617c2ea078b Mon Sep 17 00:00:00 2001
From: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
Date: Tue, 4 Mar 2025 19:45:04 +0000
Subject: [PATCH] [Feature] Remove hardcoded limit of media (#11)

Fixes #7

The limit of upload and remote display media was hard coded to 4.

In this PR, I did the following changes:
- Status form now respects instance's upload limit config.
- Remove the limit of images shown on statuses
    - Remote statuses may have more than local instance's limit

Also, I kept the 16:9 aspect ratio of the images. I can change to more complex layouts in future PRs if needed.

This works, but it needs more tests. I don't have how to change the config of my instance, so I had to test forcing duplicates on the post. Any help to validate configuration would be nice.

![image](/attachments/f073ac59-c6d5-4d4c-a01a-17d0c6855094)

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/11
Co-authored-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
Co-committed-by: Thiago 'Jedi' Cerqueira <thiagoa7@gmail.com>
---
 app/javascript/flavours/glitch/actions/compose.js    |  2 +-
 .../flavours/glitch/components/media_gallery.jsx     | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/javascript/flavours/glitch/actions/compose.js b/app/javascript/flavours/glitch/actions/compose.js
index f0dff3170..c2a33fdb8 100644
--- a/app/javascript/flavours/glitch/actions/compose.js
+++ b/app/javascript/flavours/glitch/actions/compose.js
@@ -319,7 +319,7 @@ export function uploadCompose(files) {
     dispatch(uploadComposeRequest());
 
     for (const [i, f] of Array.from(files).entries()) {
-      if (media.size + i > 3) break;
+      if (media.size + i >= uploadLimit) break;
 
       resizeImage(f).then(file => {
         const data = new FormData();
diff --git a/app/javascript/flavours/glitch/components/media_gallery.jsx b/app/javascript/flavours/glitch/components/media_gallery.jsx
index 6f27aba26..9ea2d244e 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.jsx
+++ b/app/javascript/flavours/glitch/components/media_gallery.jsx
@@ -52,6 +52,7 @@ class Item extends PureComponent {
     visible: PropTypes.bool.isRequired,
     autoplay: PropTypes.bool,
     useBlurhash: PropTypes.bool,
+    imageStyle: PropTypes.object,
   };
 
   static defaultProps = {
@@ -116,6 +117,7 @@ class Item extends PureComponent {
       displayWidth,
       visible,
       useBlurhash,
+      imageStyle
     } = this.props;
 
     let badges = [], thumbnail;
@@ -182,7 +184,7 @@ class Item extends PureComponent {
             alt={description}
             title={description}
             lang={lang}
-            style={{ objectPosition: letterbox ? null : `${x}% ${y}%` }}
+            style={{ ...imageStyle, objectPosition: letterbox ? null : `${x}% ${y}%` }}
             onLoad={this.handleImageLoad}
           />
         </a>
@@ -353,8 +355,6 @@ class MediaGallery extends PureComponent {
 
     if (this.isStandaloneEligible()) { // TODO: cropImages setting
       style.aspectRatio = `${this.props.media.getIn([0, 'meta', 'small', 'aspect'])}`;
-    } else {
-      style.aspectRatio = '16 / 9';
     }
 
     if (this.isStandaloneEligible()) {
@@ -371,7 +371,7 @@ class MediaGallery extends PureComponent {
         />
       );
     } else {
-      children = media.take(4).map((attachment, i) => (
+      children = media.map((attachment, i) => (
         <Item
           key={attachment.get('id')}
           autoplay={autoplay}
@@ -383,7 +383,9 @@ class MediaGallery extends PureComponent {
           letterbox={letterbox}
           displayWidth={width}
           visible={visible || uncached}
-          useBlurhash={useBlurhash} />
+          useBlurhash={useBlurhash}
+          imageStyle={{ aspectRatio: '16 / 9' }}
+        />
       ));
     }