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
This commit is contained in:
Lim Chee Aun 2023-10-06 23:57:12 +08:00
parent d6d10d091e
commit 769a5cb099

View file

@ -872,6 +872,11 @@ function Status({
}, },
); );
const displayedMediaAttachments = mediaAttachments.slice(
0,
isSizeLarge ? undefined : 4,
);
return ( return (
<article <article
ref={(node) => { ref={(node) => {
@ -1270,17 +1275,16 @@ function Status({
lang={language} lang={language}
enabled={ enabled={
mediaAttachments.length > 1 && mediaAttachments.length > 1 &&
mediaAttachments.some( displayedMediaAttachments.some(
(media) => (media) =>
!!media.description && !!media.description &&
!isMediaCaptionLong(media.description), !isMediaCaptionLong(media.description),
) )
} }
captionChildren={() => { captionChildren={() => {
return mediaAttachments.map( return displayedMediaAttachments.map(
(media, i) => (media, i) =>
!!media.description && !!media.description && (
!isMediaCaptionLong(media.description) && (
<div <div
key={media.id} key={media.id}
onClick={(e) => { onClick={(e) => {
@ -1305,9 +1309,7 @@ function Status({
mediaAttachments.length > 2 ? 'media-gt2' : '' mediaAttachments.length > 2 ? 'media-gt2' : ''
} ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`} } ${mediaAttachments.length > 4 ? 'media-gt4' : ''}`}
> >
{mediaAttachments {displayedMediaAttachments.map((media, i) => (
.slice(0, isSizeLarge ? undefined : 4)
.map((media, i) => (
<Media <Media
key={media.id} key={media.id}
media={media} media={media}
@ -1317,7 +1319,6 @@ function Status({
altIndex={ altIndex={
mediaAttachments.length > 1 && mediaAttachments.length > 1 &&
!!media.description && !!media.description &&
!isMediaCaptionLong(media.description) &&
i + 1 i + 1
} }
to={`/${instance}/s/${id}?${ to={`/${instance}/s/${id}?${