From 80c18f0feda0ea087bdc80d2551b781275c58b82 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 17 May 2021 16:43:55 -0500
Subject: [PATCH] Composer: display uploaded video preview

---
 .../features/compose/components/upload.js     | 10 +++++++++-
 .../containers/upload_button_container.js     |  2 +-
 app/styles/components/compose-form.scss       | 20 ++++++++++++++++++-
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/compose/components/upload.js b/app/soapbox/features/compose/components/upload.js
index b0fbcae51..f947c3c97 100644
--- a/app/soapbox/features/compose/components/upload.js
+++ b/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>
diff --git a/app/soapbox/features/compose/containers/upload_button_container.js b/app/soapbox/features/compose/containers/upload_button_container.js
index 8bf1c9047..de8ec86e9 100644
--- a/app/soapbox/features/compose/containers/upload_button_container.js
+++ b/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']),
 });
 
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index a1834ce60..ee31b8f66 100644
--- a/app/styles/components/compose-form.scss
+++ b/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');