Refactor Audio modal and make View context actually work

app/soapbox/features/account_gallery/index.js

@@ -133,8 +133,6 @@ class AccountGallery extends ImmutablePureComponent {
   handleOpenMedia = attachment => {
     if (attachment.get('type') === 'video') {
       this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status') }));
-    } else if (attachment.get('type') === 'audio') {
-      this.props.dispatch(openModal('AUDIO', { media: attachment, status: attachment.get('status') }));
     } else {
       const media = attachment.getIn(['status', 'media_attachments']);
       const index = media.findIndex(x => x.get('id') === attachment.get('id'));

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import PropTypes from 'prop-types';
-import Audio from 'soapbox/features/audio';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage } from 'react-intl';
-
-export const previewState = 'previewAudioModal';
-
-export default class AudioModal extends ImmutablePureComponent {
-
-  static propTypes = {
-    media: ImmutablePropTypes.map.isRequired,
-    status: ImmutablePropTypes.map,
-    time: PropTypes.number,
-    onClose: PropTypes.func.isRequired,
-  };
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
-  handleStatusClick = e => {
-    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
-    }
-  }
-
-  render() {
-    const { media, status, time, onClose } = this.props;
-
-    const link = status && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>;
-
-    return (
-      <div className='modal-root__modal audio-modal'>
-        <div>
-          <Audio
-            src={media.get('url')}
-            startTime={time}
-            onCloseAudio={onClose}
-            link={link}
-            detailed
-            alt={media.get('description')}
-          />
-        </div>
-      </div>
-    );
-  }
-
-}

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

@@ -139,9 +139,18 @@ class MediaModal extends ImmutablePureComponent {
       });
     }
 
+    const isMultiMedia = media.map((image) => {
+      if (image.get('type') !== 'image') {
+        return true;
+      }
+
+      return false;
+    }).toArray();
+
     const content = media.map((image) => {
       const width  = image.getIn(['meta', 'original', 'width']) || null;
       const height = image.getIn(['meta', 'original', 'height']) || null;
+      const link = (status && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>);
 
       if (image.get('type') === 'image') {
         return (
@@ -168,6 +177,7 @@ class MediaModal extends ImmutablePureComponent {
             startTime={time || 0}
             onCloseVideo={onClose}
             detailed
+            link={link}
             alt={image.get('description')}
             key={image.get('url')}
           />
@@ -180,6 +190,7 @@ class MediaModal extends ImmutablePureComponent {
             src={image.get('url')}
             startTime={time || 0}
             detailed
+            link={link}
             alt={image.get('description')}
             key={image.get('url')}
           />
@@ -191,6 +202,7 @@ class MediaModal extends ImmutablePureComponent {
             muted
             controls={false}
             width={width}
+            link={link}
             height={height}
             key={image.get('preview_url')}
             alt={image.get('description')}
@@ -243,7 +255,7 @@ class MediaModal extends ImmutablePureComponent {
           {leftNav}
           {rightNav}
 
-          {status && (
+          {(status && !isMultiMedia[index]) && (
             <div className={classNames('media-modal__meta', { 'media-modal__meta--shifted': media.size > 1 })}>
               <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>
             </div>

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

@@ -7,7 +7,6 @@ import ModalLoading from './modal_loading';
 import ActionsModal from './actions_modal';
 import MediaModal from './media_modal';
 import VideoModal from './video_modal';
-import AudioModal from './audio_modal';
 import BoostModal from './boost_modal';
 import ConfirmationModal from './confirmation_modal';
 import FocalPointModal from './focal_point_modal';
@@ -26,7 +25,6 @@ import {
 const MODAL_COMPONENTS = {
   'MEDIA': () => Promise.resolve({ default: MediaModal }),
   'VIDEO': () => Promise.resolve({ default: VideoModal }),
-  'AUDIO': () => Promise.resolve({ default: AudioModal }),
   'BOOST': () => Promise.resolve({ default: BoostModal }),
   'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
   'MUTE': MuteModal,
@@ -62,7 +60,7 @@ export default class ModalRoot extends React.PureComponent {
   }
 
   renderLoading = modalId => () => {
-    return ['MEDIA', 'VIDEO', 'AUDIO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
+    return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? <ModalLoading /> : null;
   }
 
   renderError = (props) => {