From 3bae6e25e16d5fb4f8f546546a574a42be3a6d79 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 17 May 2021 15:15:46 -0500
Subject: [PATCH] Preview uploaded media

---
 app/soapbox/features/compose/components/upload.js          | 7 +++++--
 .../features/compose/containers/upload_container.js        | 7 +++++--
 app/styles/components/compose-form.scss                    | 1 -
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/compose/components/upload.js b/app/soapbox/features/compose/components/upload.js
index 29e60d8ca..b0fbcae51 100644
--- a/app/soapbox/features/compose/components/upload.js
+++ b/app/soapbox/features/compose/components/upload.js
@@ -27,7 +27,6 @@ class Upload extends ImmutablePureComponent {
     onDescriptionChange: PropTypes.func.isRequired,
     onOpenFocalPoint: PropTypes.func.isRequired,
     onSubmit: PropTypes.func.isRequired,
-    features: PropTypes.object,
   };
 
   state = {
@@ -87,6 +86,10 @@ class Upload extends ImmutablePureComponent {
     }
   }
 
+  handleOpenModal = () => {
+    this.props.onOpenModal(this.props.media);
+  }
+
   render() {
     const { intl, media } = this.props;
     const active          = this.state.hovered || this.state.focused;
@@ -110,7 +113,7 @@ class Upload extends ImmutablePureComponent {
             >
               <div className={classNames('compose-form__upload__actions', { active })}>
                 <button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
-                {this.props.features.focalPoint && media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Change preview' /></button>}
+                <button className='icon-button' onClick={this.handleOpenModal}><Icon id='search-plus' /> <FormattedMessage id='upload_form.preview' defaultMessage='Preview' /></button>
               </div>
 
               <div className={classNames('compose-form__upload-description', { active })}>
diff --git a/app/soapbox/features/compose/containers/upload_container.js b/app/soapbox/features/compose/containers/upload_container.js
index 500a8f2f5..7d8bbd1e2 100644
--- a/app/soapbox/features/compose/containers/upload_container.js
+++ b/app/soapbox/features/compose/containers/upload_container.js
@@ -3,11 +3,10 @@ import Upload from '../components/upload';
 import { undoUploadCompose, changeUploadCompose } from '../../../actions/compose';
 import { openModal } from '../../../actions/modal';
 import { submitCompose } from '../../../actions/compose';
-import { getFeatures } from 'soapbox/utils/features';
+import { List as ImmutableList } from 'immutable';
 
 const mapStateToProps = (state, { id }) => ({
   media: state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id),
-  features: getFeatures(state.get('instance')),
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -24,6 +23,10 @@ const mapDispatchToProps = dispatch => ({
     dispatch(openModal('FOCAL_POINT', { id }));
   },
 
+  onOpenModal: media => {
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(media), index: 0 }));
+  },
+
   onSubmit(router) {
     dispatch(submitCompose(router));
   },
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index 4a50acb44..a1834ce60 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -282,7 +282,6 @@
     .compose-form__upload-thumbnail {
       border-radius: 4px;
       background-position: center;
-      background-size: contain;
       background-repeat: no-repeat;
       height: 140px;
       width: 100%;