Composer: display uploaded video preview

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

@@ -108,7 +108,7 @@ 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 })}>
@@ -131,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/styles/components/compose-form.scss

@@ -277,15 +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-repeat: no-repeat;
-      height: 140px;
+      height: 160px;
       width: 100%;
       overflow: hidden;
+      position: relative;
 
       &.video {
         background-image: url('../images/video-placeholder.png');