mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Chats: support displaying multiple attachments

environments/review-chat-compo-mzhk1s/deployments/2500
Alex Gleason 2023-02-02 14:43:47 -06:00
rodzic 7fe4b34e6f
commit 1b8d118217
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
2 zmienionych plików z 12 dodań i 10 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

11
app/soapbox/features/chats/components/chat-message-list.tsx
Wyświetl plik

@ -195,13 +195,12 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
}; };
const maybeRenderMedia = (chatMessage: ChatMessageEntity) => { const maybeRenderMedia = (chatMessage: ChatMessageEntity) => {
const { attachment } = chatMessage; if (!chatMessage.media_attachments.size) return null;
if (!attachment) return null;
return ( return (
<Bundle fetchComponent={MediaGallery}> <Bundle fetchComponent={MediaGallery}>
{(Component: any) => ( {(Component: any) => (
<Component <Component
media={ImmutableList([attachment])} media={chatMessage.media_attachments}
onOpenMedia={onOpenMedia} onOpenMedia={onOpenMedia}
visible visible
/> />
@ -316,7 +315,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
space={0.5} space={0.5}
className={classNames({ className={classNames({
'max-w-[85%]': true, 'max-w-[85%]': true,
'flex-1': chatMessage.attachment, 'flex-1': !!chatMessage.media_attachments.size,
'order-2': isMyMessage, 'order-2': isMyMessage,
'order-1': !isMyMessage, 'order-1': !isMyMessage,
})} })}
@ -331,8 +330,8 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
className={ className={
classNames({ classNames({
'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true, 'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true,
'rounded-tr-sm': chatMessage.attachment && isMyMessage, 'rounded-tr-sm': (!!chatMessage.media_attachments.size) && isMyMessage,
'rounded-tl-sm': chatMessage.attachment && !isMyMessage, 'rounded-tl-sm': (!!chatMessage.media_attachments.size) && !isMyMessage,
'[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage, '[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage,
'[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage, '[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage,
'bg-primary-500 text-white': isMyMessage, 'bg-primary-500 text-white': isMyMessage,

11
app/soapbox/normalizers/chat-message.ts
Wyświetl plik

@ -11,7 +11,7 @@ import type { Attachment, Card, Emoji } from 'soapbox/types/entities';
export const ChatMessageRecord = ImmutableRecord({ export const ChatMessageRecord = ImmutableRecord({
account_id: '', account_id: '',
attachment: null as Attachment | null, media_attachments: ImmutableList<Attachment>(),
card: null as Card | null, card: null as Card | null,
chat_id: '', chat_id: '',
content: '', content: '',
@ -24,12 +24,15 @@ export const ChatMessageRecord = ImmutableRecord({
}); });
const normalizeMedia = (status: ImmutableMap<string, any>) => { const normalizeMedia = (status: ImmutableMap<string, any>) => {
const attachments = status.get('media_attachments');
const attachment = status.get('attachment'); const attachment = status.get('attachment');
if (attachment) { if (attachments) {
return status.set('attachment', normalizeAttachment(attachment)); return status.set('media_attachments', ImmutableList(attachments.map(normalizeAttachment)));
} else if (attachment) {
return status.set('media_attachments', ImmutableList([normalizeAttachment(attachment)]));
} else { } else {
return status; return status.set('media_attachments', ImmutableList());
} }
}; };