diff --git a/app/soapbox/features/account_gallery/index.js b/app/soapbox/features/account_gallery/index.js index 4736f48aa..de2213b07 100644 --- a/app/soapbox/features/account_gallery/index.js +++ b/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')); diff --git a/app/soapbox/features/ui/components/audio_modal.js b/app/soapbox/features/ui/components/audio_modal.js deleted file mode 100644 index de8c71991..000000000 --- a/app/soapbox/features/ui/components/audio_modal.js +++ /dev/null @@ -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 && ; - - return ( -
-
-
-
- ); - } - -} diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js index e79b83d4e..d0e4a2f9e 100644 --- a/app/soapbox/features/ui/components/media_modal.js +++ b/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 && ); 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]) && (
1 })}>
diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js index 358befa8c..b6cfa5737 100644 --- a/app/soapbox/features/ui/components/modal_root.js +++ b/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 ? : null; + return ['MEDIA', 'VIDEO', 'BOOST', 'CONFIRM', 'ACTIONS'].indexOf(modalId) === -1 ? : null; } renderError = (props) => {