this repo has no description
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
+32
-31
+32
-31
src/components/status.jsx
+32
-31
src/components/status.jsx
···
872
872
},
873
873
);
874
874
875
+
const displayedMediaAttachments = mediaAttachments.slice(
876
+
0,
877
+
isSizeLarge ? undefined : 4,
878
+
);
879
+
875
880
return (
876
881
<article
877
882
ref={(node) => {
···
1270
1275
lang={language}
1271
1276
enabled={
1272
1277
mediaAttachments.length > 1 &&
1273
-
mediaAttachments.some(
1278
+
displayedMediaAttachments.some(
1274
1279
(media) =>
1275
1280
!!media.description &&
1276
1281
!isMediaCaptionLong(media.description),
1277
1282
)
1278
1283
}
1279
1284
captionChildren={() => {
1280
-
return mediaAttachments.map(
1285
+
return displayedMediaAttachments.map(
1281
1286
(media, i) =>
1282
-
!!media.description &&
1283
-
!isMediaCaptionLong(media.description) && (
1287
+
!!media.description && (
1284
1288
<div
1285
1289
key={media.id}
1286
1290
onClick={(e) => {
···
1305
1309
mediaAttachments.length > 2 ? 'media-gt2' : ''
1306
1310
} ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
1307
1311
>
1308
-
{mediaAttachments
1309
-
.slice(0, isSizeLarge ? undefined : 4)
1310
-
.map((media, i) => (
1311
-
<Media
1312
-
key={media.id}
1313
-
media={media}
1314
-
autoAnimate={isSizeLarge}
1315
-
showCaption={mediaAttachments.length === 1}
1316
-
lang={language}
1317
-
altIndex={
1318
-
mediaAttachments.length > 1 &&
1319
-
!!media.description &&
1320
-
!isMediaCaptionLong(media.description) &&
1321
-
i + 1
1322
-
}
1323
-
to={`/${instance}/s/${id}?${
1324
-
withinContext ? 'media' : 'media-only'
1325
-
}=${i + 1}`}
1326
-
onClick={
1327
-
onMediaClick
1328
-
? (e) => {
1329
-
onMediaClick(e, i, media, status);
1330
-
}
1331
-
: undefined
1332
-
}
1333
-
/>
1334
-
))}
1312
+
{displayedMediaAttachments.map((media, i) => (
1313
+
<Media
1314
+
key={media.id}
1315
+
media={media}
1316
+
autoAnimate={isSizeLarge}
1317
+
showCaption={mediaAttachments.length === 1}
1318
+
lang={language}
1319
+
altIndex={
1320
+
mediaAttachments.length > 1 &&
1321
+
!!media.description &&
1322
+
i + 1
1323
+
}
1324
+
to={`/${instance}/s/${id}?${
1325
+
withinContext ? 'media' : 'media-only'
1326
+
}=${i + 1}`}
1327
+
onClick={
1328
+
onMediaClick
1329
+
? (e) => {
1330
+
onMediaClick(e, i, media, status);
1331
+
}
1332
+
: undefined
1333
+
}
1334
+
/>
1335
+
))}
1335
1336
</div>
1336
1337
</MultipleMediaFigure>
1337
1338
)}