Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Fixed the rendering of object attachments (#21001)

Browse source 
Pulled out the logic of finding the attachment(s) into a shared
function, which will only return an array if there are multiple
attachments, otherwise either null or an object will be returned.

This fixes an issue where the code assumed that an array meant
we have multiple attachments
This commit is contained in:
Fabien 'egg' O'Carroll 2024-09-13 16:14:23 +07:00 committed by GitHub
parent 971d497c1e
commit 9e4704a75f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 25 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
apps/admin-x-activitypub/src/components/feed/FeedItem.tsx
View file

@ -9,7 +9,7 @@ import getUsername from '../../utils/get-username';
import {type Activity} from '../activities/ActivityItem';
import {useLikeMutationForUser, useUnlikeMutationForUser} from '../../hooks/useActivityPubQueries';
export function renderFeedAttachment(object: ObjectProperties, layout: string) {
function getAttachment(object: ObjectProperties) {
let attachment;
if (object.image) {
attachment = object.image;
@ -23,6 +23,25 @@ export function renderFeedAttachment(object: ObjectProperties, layout: string) {
return null;
}
if (Array.isArray(attachment)) {
if (attachment.length === 0) {
return null;
}
if (attachment.length === 1) {
return attachment[0];
}
}
return attachment;
}
export function renderFeedAttachment(object: ObjectProperties, layout: string) {
const attachment = getAttachment(object);
if (!attachment) {
return null;
}
if (Array.isArray(attachment)) {
const attachmentCount = attachment.length;
@ -66,14 +85,7 @@ export function renderFeedAttachment(object: ObjectProperties, layout: string) {
}
function renderInboxAttachment(object: ObjectProperties) {
let attachment;
if (object.image) {
attachment = object.image;
}
if (object.type === 'Note' && !attachment) {
attachment = object.attachment;
}
const attachment = getAttachment(object);
if (!attachment) {
return null;
@ -81,18 +93,13 @@ function renderInboxAttachment(object: ObjectProperties) {
if (Array.isArray(attachment)) {
const attachmentCount = attachment.length;
// let gridClass = '';
// if (attachmentCount === 2) {
// gridClass = 'grid-cols-2 auto-rows-[150px]'; // Two images, side by side
// } else if (attachmentCount === 3 || attachmentCount === 4) {
// gridClass = 'grid-cols-2 auto-rows-[150px]'; // Three or four images, two per row
// }
return (
<div className='min-w-[160px]'>
{attachment[0] && <div className='relative'>
<div className='relative'>
<img className={`h-[100px] w-[160px] rounded-md object-cover`} src={attachment[0].url} />
<div className='absolute bottom-1 right-1 z-10 rounded-full border border-[rgba(255,255,255,0.25)] bg-black px-2 py-0.5 font-semibold text-white'>+ {attachmentCount - 1}</div>
</div>}
</div>
</div>
);
}
@ -103,7 +110,7 @@ function renderInboxAttachment(object: ObjectProperties) {
case 'image/gif':
return (
<div className='min-w-[160px]'>
{attachment && <img className={`h-[100px] w-[160px] rounded-md object-cover`} src={attachment.url} />}
<img className={`h-[100px] w-[160px] rounded-md object-cover`} src={attachment.url} />
</div>
);
case 'video/mp4':