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}%` }}
>
@@ -131,6 +131,14 @@ class Upload extends ImmutablePureComponent {
/>
+
+
+ {mediaType === 'video' && (
+
+ )}
+
)}
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');