From 769a5cb09963ff3df58a52d0d67704bdb963c0d6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 6 Oct 2023 23:57:12 +0800
Subject: [PATCH] Change caption display logic for multiple media

- Show all of them or none of them
- If there's at least one caption < 140 chars, show all of them
- Fix potential bug when there are > 4 media
---
 src/components/status.jsx | 63 ++++++++++++++++++++-------------------
 1 file changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index 030bcf47..81075576 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -872,6 +872,11 @@ function Status({
     },
   );
 
+  const displayedMediaAttachments = mediaAttachments.slice(
+    0,
+    isSizeLarge ? undefined : 4,
+  );
+
   return (
     <article
       ref={(node) => {
@@ -1270,17 +1275,16 @@ function Status({
               lang={language}
               enabled={
                 mediaAttachments.length > 1 &&
-                mediaAttachments.some(
+                displayedMediaAttachments.some(
                   (media) =>
                     !!media.description &&
                     !isMediaCaptionLong(media.description),
                 )
               }
               captionChildren={() => {
-                return mediaAttachments.map(
+                return displayedMediaAttachments.map(
                   (media, i) =>
-                    !!media.description &&
-                    !isMediaCaptionLong(media.description) && (
+                    !!media.description && (
                       <div
                         key={media.id}
                         onClick={(e) => {
@@ -1305,33 +1309,30 @@ function Status({
                   mediaAttachments.length > 2 ? 'media-gt2' : ''
                 } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
               >
-                {mediaAttachments
-                  .slice(0, isSizeLarge ? undefined : 4)
-                  .map((media, i) => (
-                    <Media
-                      key={media.id}
-                      media={media}
-                      autoAnimate={isSizeLarge}
-                      showCaption={mediaAttachments.length === 1}
-                      lang={language}
-                      altIndex={
-                        mediaAttachments.length > 1 &&
-                        !!media.description &&
-                        !isMediaCaptionLong(media.description) &&
-                        i + 1
-                      }
-                      to={`/${instance}/s/${id}?${
-                        withinContext ? 'media' : 'media-only'
-                      }=${i + 1}`}
-                      onClick={
-                        onMediaClick
-                          ? (e) => {
-                              onMediaClick(e, i, media, status);
-                            }
-                          : undefined
-                      }
-                    />
-                  ))}
+                {displayedMediaAttachments.map((media, i) => (
+                  <Media
+                    key={media.id}
+                    media={media}
+                    autoAnimate={isSizeLarge}
+                    showCaption={mediaAttachments.length === 1}
+                    lang={language}
+                    altIndex={
+                      mediaAttachments.length > 1 &&
+                      !!media.description &&
+                      i + 1
+                    }
+                    to={`/${instance}/s/${id}?${
+                      withinContext ? 'media' : 'media-only'
+                    }=${i + 1}`}
+                    onClick={
+                      onMediaClick
+                        ? (e) => {
+                            onMediaClick(e, i, media, status);
+                          }
+                        : undefined
+                    }
+                  />
+                ))}
               </div>
             </MultipleMediaFigure>
           )}