oreolek/phanpy
1
0
Fork 0
Code Activity

Change caption display logic for multiple media

Browse source 
- 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
1 changed files with 32 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/components/status.jsx
View file

@ -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>
)}