From 1e3b2f853f5122eeb791eab1ecc2581be7611e3d Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 17 May 2021 15:13:42 -0500 Subject: [PATCH 1/3] Composer: don't collapse if non-empty --- app/soapbox/features/compose/components/compose_form.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js index da9e142ab..899b6ae12 100644 --- a/app/soapbox/features/compose/components/compose_form.js +++ b/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); From 3bae6e25e16d5fb4f8f546546a574a42be3a6d79 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 17 May 2021 15:15:46 -0500 Subject: [PATCH 2/3] Preview uploaded media --- app/soapbox/features/compose/components/upload.js | 7 +++++-- .../features/compose/containers/upload_container.js | 7 +++++-- app/styles/components/compose-form.scss | 1 - 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/app/soapbox/features/compose/components/upload.js b/app/soapbox/features/compose/components/upload.js index 29e60d8ca..b0fbcae51 100644 --- a/app/soapbox/features/compose/components/upload.js +++ b/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 { >
- {this.props.features.focalPoint && media.get('type') === 'image' && } +
diff --git a/app/soapbox/features/compose/containers/upload_container.js b/app/soapbox/features/compose/containers/upload_container.js index 500a8f2f5..7d8bbd1e2 100644 --- a/app/soapbox/features/compose/containers/upload_container.js +++ b/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)); }, diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss index 4a50acb44..a1834ce60 100644 --- a/app/styles/components/compose-form.scss +++ b/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%; From 80c18f0feda0ea087bdc80d2551b781275c58b82 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 17 May 2021 16:43:55 -0500 Subject: [PATCH 3/3] 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}%` }} >
@@ -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');