diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js index baa50a08f..d8568d385 100644 --- a/app/soapbox/features/chats/components/chat_message_list.js +++ b/app/soapbox/features/chats/components/chat_message_list.js @@ -9,6 +9,8 @@ import { fetchChatMessages } from 'soapbox/actions/chats'; import emojify from 'soapbox/features/emoji/emoji'; import classNames from 'classnames'; import { escape, throttle } from 'lodash'; +import { MediaGallery } from 'soapbox/features/ui/util/async-components'; +import Bundle from 'soapbox/features/ui/components/bundle'; const scrollBottom = (elem) => elem.scrollHeight - elem.offsetHeight - elem.scrollTop; @@ -115,6 +117,21 @@ class ChatMessageList extends ImmutablePureComponent { trailing: true, }); + maybeRenderMedia = chatMessage => { + const attachment = chatMessage.get('attachment'); + if (!attachment) return null; + return ( + + {Component => ( + + )} + + ); + } + parsePendingContent = content => { return escape(content).replace(/(?:\r\n|\r|\n)/g, '
'); } @@ -145,12 +162,17 @@ class ChatMessageList extends ImmutablePureComponent { })} key={chatMessage.get('id')} > - + > + + {this.maybeRenderMedia(chatMessage)} + ))} diff --git a/app/styles/chats.scss b/app/styles/chats.scss index 38550ac3b..f49450155 100644 --- a/app/styles/chats.scss +++ b/app/styles/chats.scss @@ -290,3 +290,8 @@ } } } + +.chat-message .media-gallery__item-thumbnail img, +.chat-message .media-gallery__item-thumbnail .still-image img { + object-fit: contain; +}