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;
+}