From dedac70e5883074e2466e915453d44bf756087e4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 16 Jun 2021 15:20:14 -0500
Subject: [PATCH] Fix display of multiple rich media items

---
 app/soapbox/components/status.js                         | 9 ++++++---
 .../features/status/components/detailed_status.js        | 7 ++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index 78b170bfe..1ff0b1e03 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -341,7 +341,10 @@ class Status extends ImmutablePureComponent {
     if (status.get('poll')) {
       poll = <PollContainer pollId={status.get('poll')} />;
     }
-    if (status.get('media_attachments').size > 0) {
+
+    const size = status.get('media_attachments').size;
+
+    if (size > 0) {
       if (this.props.muted) {
         media = (
           <AttachmentList
@@ -349,7 +352,7 @@ class Status extends ImmutablePureComponent {
             media={status.get('media_attachments')}
           />
         );
-      } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
+      } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
         const video = status.getIn(['media_attachments', 0]);
 
         media = (
@@ -373,7 +376,7 @@ class Status extends ImmutablePureComponent {
             )}
           </Bundle>
         );
-      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
+      } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
         const audio = status.getIn(['media_attachments', 0]);
 
         media = (
diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index 5cf1ef79a..c26a634b1 100644
--- a/app/soapbox/features/status/components/detailed_status.js
+++ b/app/soapbox/features/status/components/detailed_status.js
@@ -89,6 +89,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
     const { compact } = this.props;
     const favicon = status.getIn(['account', 'pleroma', 'favicon']);
     const domain = getDomain(status.get('account'));
+    const size = status.get('media_attachments').size;
 
     if (!status) {
       return null;
@@ -105,8 +106,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
     if (status.get('poll')) {
       poll = <PollContainer pollId={status.get('poll')} />;
     }
-    if (status.get('media_attachments').size > 0) {
-      if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
+    if (size > 0) {
+      if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
         const video = status.getIn(['media_attachments', 0]);
 
         media = (
@@ -125,7 +126,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             onToggleVisibility={this.props.onToggleMediaVisibility}
           />
         );
-      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
+      } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
         const audio = status.getIn(['media_attachments', 0]);
 
         media = (