Preview uploaded media

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 })}>

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));
   },

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%;