simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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 ( 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,33 +1309,30 @@ 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) <Media
.map((media, i) => ( key={media.id}
<Media media={media}
key={media.id} autoAnimate={isSizeLarge}
media={media} showCaption={mediaAttachments.length === 1}
autoAnimate={isSizeLarge} lang={language}
showCaption={mediaAttachments.length === 1} altIndex={
lang={language} mediaAttachments.length > 1 &&
altIndex={ !!media.description &&
mediaAttachments.length > 1 && i + 1
!!media.description && }
!isMediaCaptionLong(media.description) && to={`/${instance}/s/${id}?${
i + 1 withinContext ? 'media' : 'media-only'
} }=${i + 1}`}
to={`/${instance}/s/${id}?${ onClick={
withinContext ? 'media' : 'media-only' onMediaClick
}=${i + 1}`} ? (e) => {
onClick={ onMediaClick(e, i, media, status);
onMediaClick }
? (e) => { : undefined
onMediaClick(e, i, media, status); }
} />
: undefined ))}
}
/>
))}
</div> </div>
</MultipleMediaFigure> </MultipleMediaFigure>
)} )}