Reports: display media

app/soapbox/features/admin/components/report.js

@@ -125,7 +125,7 @@ class Report extends ImmutablePureComponent {
                 expanded={accordionExpanded}
                 onToggle={this.handleAccordionToggle}
               >
-                {statuses.map(status => <ReportStatus report={report} status={status} />)}
+                {statuses.map(status => <ReportStatus report={report} status={status} key={status.get('id')} />)}
               </Accordion>
             )}
           </div>

app/soapbox/features/admin/components/report_status.js

@@ -8,6 +8,9 @@ import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 import { deleteStatus } from 'soapbox/actions/admin';
 import snackbar from 'soapbox/actions/snackbar';
 import { openModal } from 'soapbox/actions/modal';
+import noop from 'lodash/noop';
+import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
+import Bundle from 'soapbox/features/ui/components/bundle';
 
 const messages = defineMessages({
   viewStatus: { id: 'admin.reports.actions.view_status', defaultMessage: 'View post' },
@@ -39,6 +42,66 @@ class ReportStatus extends ImmutablePureComponent {
     }];
   }
 
+  getMedia = () => {
+    const { status } = this.props;
+
+    if (status.get('media_attachments').size > 0) {
+      if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
+
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
+        const video = status.getIn(['media_attachments', 0]);
+
+        return (
+          <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
+            {Component => (
+              <Component
+                preview={video.get('preview_url')}
+                blurhash={video.get('blurhash')}
+                src={video.get('url')}
+                alt={video.get('description')}
+                aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
+                width={239}
+                height={110}
+                inline
+                sensitive={status.get('sensitive')}
+                onOpenVideo={noop}
+              />
+            )}
+          </Bundle>
+        );
+      } else if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+        const audio = status.getIn(['media_attachments', 0]);
+
+        return (
+          <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
+            {Component => (
+              <Component
+                src={audio.get('url')}
+                alt={audio.get('description')}
+                inline
+                sensitive={status.get('sensitive')}
+                onOpenAudio={noop}
+              />
+            )}
+          </Bundle>
+        );
+      } else {
+        return (
+          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery} >
+            {Component => <Component media={status.get('media_attachments')} sensitive={status.get('sensitive')} height={110} onOpenMedia={this.handleOpenMedia} />}
+          </Bundle>
+        );
+      }
+    }
+
+    return null;
+  }
+
+  handleOpenMedia = (media, index) => {
+    const { dispatch } = this.props;
+    dispatch(openModal('MEDIA', { media, index }));
+  }
+
   handleDeleteStatus = () => {
     const { intl, dispatch, status } = this.props;
     const nickname = status.getIn(['account', 'acct']);
@@ -58,11 +121,15 @@ class ReportStatus extends ImmutablePureComponent {
 
   render() {
     const { status } = this.props;
+    const media = this.getMedia();
     const menu = this.makeMenu();
 
     return (
       <div className='admin-report__status'>
-        <StatusContent status={status} />
+        <div className='admin-report__status-content'>
+          <StatusContent status={status} />
+          {media}
+        </div>
         <div className='admin-report__status-actions'>
           <DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
         </div>

app/soapbox/features/admin/reports.js

@@ -20,7 +20,7 @@ const mapStateToProps = state => {
   const ids = state.getIn(['admin', 'openReports']);
 
   return {
-    reports: ids.map(id => getReport(state, id)),
+    reports: ids.toList().map(id => getReport(state, id)),
   };
 };
 
@@ -57,7 +57,7 @@ class Reports extends ImmutablePureComponent {
           scrollKey='admin-reports'
           emptyMessage={intl.formatMessage(messages.emptyMessage)}
         >
-          {reports.map(report => <Report report={report} />)}
+          {reports.map(report => <Report report={report} key={report.get('id')} />)}
         </ScrollableList>
       </Column>
     );

app/soapbox/features/ui/components/accordion.js

@@ -12,7 +12,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
 
   static propTypes = {
     headline: PropTypes.node.isRequired,
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),
     expanded: PropTypes.bool,
     onToggle: PropTypes.func,
     intl: PropTypes.object.isRequired,