Merge branch 'media-upload-preview' into 'develop'

Media upload preview

See merge request soapbox-pub/soapbox-fe!508

app/soapbox/features/compose/components/compose_form.js

@@ -99,6 +99,11 @@ class ComposeForm extends ImmutablePureComponent {
     return clickableAreaRef ? clickableAreaRef.current : this.form;
   }
 
+  isEmpty = () => {
+    const { text, spoilerText, anyMedia } = this.props;
+    return !(text || spoilerText || anyMedia);
+  }
+
   isClickOutside = (e) => {
     return ![
       // List of elements that shouldn't collapse the composer when clicked
@@ -111,7 +116,7 @@ class ComposeForm extends ImmutablePureComponent {
   }
 
   handleClick = (e) => {
-    if (this.isClickOutside(e)) {
+    if (this.isEmpty() && this.isClickOutside(e)) {
       this.handleClickOutside();
     }
   }
@@ -238,7 +243,7 @@ class ComposeForm extends ImmutablePureComponent {
 
   render() {
     const { intl, onPaste, showSearch, anyMedia, shouldCondense, autoFocus, isModalOpen, maxTootChars } = this.props;
-    const condensed = shouldCondense && !this.props.text && !this.state.composeFocused;
+    const condensed = shouldCondense && !this.state.composeFocused && this.isEmpty() && !this.props.isUploading;
     const disabled = this.props.isSubmitting;
     const text     = [this.props.spoilerText, countableText(this.props.text)].join('');
     const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > maxTootChars || (text.length !== 0 && text.trim().length === 0 && !anyMedia);

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;
@@ -105,12 +108,12 @@ class Upload extends ImmutablePureComponent {
               className={classNames('compose-form__upload-thumbnail',  `${mediaType}`)}
               style={{
                 transform: `scale(${scale})`,
-                backgroundImage: (mediaType !== 'video' && mediaType !== 'audio' ? `url(${media.get('preview_url')})` : null),
+                backgroundImage: mediaType === 'image' ? `url(${media.get('preview_url')})`: null,
                 backgroundPosition: `${x}% ${y}%` }}
             >
               <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 })}>
@@ -128,6 +131,14 @@ class Upload extends ImmutablePureComponent {
                   />
                 </label>
               </div>
+
+              <div className='compose-form__upload-preview'>
+                {mediaType === 'video' && (
+                  <video autoPlay playsInline muted loop>
+                    <source src={media.get('preview_url')} />
+                  </video>
+                )}
+              </div>
             </div>
           )}
         </Motion>

app/soapbox/features/compose/containers/upload_button_container.js

@@ -3,7 +3,7 @@ import UploadButton from '../components/upload_button';
 import { uploadCompose } from '../../../actions/compose';
 
 const mapStateToProps = state => ({
-  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
+  disabled: state.getIn(['compose', 'is_uploading']),
   resetFileKey: state.getIn(['compose', 'resetFileKey']),
 });
 

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

@@ -277,16 +277,33 @@
         }
         &.active { opacity: 1; }
       }
+
+      &-preview {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+
+        video {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
     }
 
     .compose-form__upload-thumbnail {
       border-radius: 4px;
       background-position: center;
-      background-size: contain;
       background-repeat: no-repeat;
-      height: 140px;
+      height: 160px;
       width: 100%;
       overflow: hidden;
+      position: relative;
 
       &.video {
         background-image: url('../images/video-placeholder.png');