First init of adding caption to the uploaded media

Signed-off-by: Maksim Sukharev <[email protected]>

Author: Antreesy

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -78,7 +78,7 @@ the main body of the message as well as a quote.
 				</div>
 				<div v-else class="message-body__main__text" :class="{'system-message': isSystemMessage}">
 					<Quote v-if="parent" :parent-id="parent" v-bind="quote" />
-					<NcRichText :text="message"
+					<NcRichText :text="renderedMessage"
 						:arguments="richParameters"
 						:autolink="true"
 						:reference-limit="1" />
@@ -368,6 +368,13 @@ export default {
 			type: String,
 			required: true,
 		},
+		/**
+		 * The caption passed with media file.
+		 */
+		mediaCaption: {
+			type: String,
+			default: null,
+		},
 		/**
 		 * The parent message's id.
 		 */
@@ -429,6 +436,14 @@ export default {
 			return !this.isLastMessage && this.id === this.$store.getters.getVisualLastReadMessageId(this.token)
 		},
 
+		renderedMessage() {
+			if (!this.mediaCaption) {
+				return this.message
+			}
+			// TODO decide if we want to see caption above media or below it
+			return [this.message, this.mediaCaption].join(' ')
+		},
+
 		messageObject() {
 			return this.$store.getters.message(this.token, this.id)
 		},

src/components/MessagesList/MessagesList.vue

@@ -197,6 +197,12 @@ export default {
 					continue
 				}
 
+				// FIXME delete when could be received from backend
+				if (message.message === '{file}' && message.messageType === 'comment' && !message.mediaCaption) {
+					message.mediaCaption = 'You can also add mentions: {mention-user1} and emojis 😍'
+					message.messageParameters['mention-user1'] = { type: 'user', id: 'bob', name: 'bob' }
+				}
+
 				if (!this.messagesShouldBeGrouped(message, lastMessage)) {
 					// Add the date separator for different days
 					if (this.messagesHaveDifferentDate(message, lastMessage)) {

src/components/UploadEditor.vue

@@ -21,6 +21,7 @@
 
 <template>
 	<NcModal v-if="showModal"
+		ref="modal"
 		:size="isVoiceMessage ? 'small' : 'normal'"
 		class="upload-editor"
 		:container="container"
@@ -60,14 +61,16 @@
 				<AudioPlayer :name="voiceMessageName"
 					:local-url="voiceMessageLocalURL" />
 			</template>
-			<div class="upload-editor__actions">
-				<NcButton type="tertiary" @click="handleDismiss">
-					{{ t('spreed', 'Dismiss') }}
-				</NcButton>
-				<NcButton ref="submitButton" type="primary" @click="handleUpload">
-					{{ t('spreed', 'Send') }}
-				</NcButton>
-			</div>
+			<NewMessageForm v-if="modalContainerId"
+				class="upload-editor__message-form"
+				role="region"
+				:token="token"
+				:breakout-room="true"
+				:container-id="modalContainerId"
+				:aria-label="t('spreed', 'Post message')"
+				:broadcast="true"
+				@sent="handleUpload"
+				@failure="handleDismiss" />
 		</div>
 	</NcModal>
 </template>
@@ -81,16 +84,25 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import AudioPlayer from './MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue'
 import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
+import NewMessageForm from './NewMessageForm/NewMessageForm.vue'
 
 export default {
 	name: 'UploadEditor',
 
 	components: {
-		NcModal,
-		FilePreview,
-		Plus,
 		AudioPlayer,
+		FilePreview,
 		NcButton,
+		NcModal,
+		NewMessageForm,
+		Plus,
+	},
+
+	data() {
+		return {
+			mediaCaption: '',
+			modalContainerId: null,
+		}
 	},
 
 	computed: {
@@ -125,8 +137,7 @@ export default {
 			return this.files[Object.keys(this.files)[0]]
 		},
 
-		// Hide the plus button in case this editor is used while sending a voice
-		// message
+		// Hide the plus button in case this editor is used while sending a voice message
 		isVoiceMessage() {
 			if (!this.firstFile) {
 				return false
@@ -152,15 +163,16 @@ export default {
 	watch: {
 		showModal(show) {
 			if (show) {
-				this.focus()
+				this.getContainerId()
 			}
 		},
 	},
 
 	methods: {
-		focus() {
+		getContainerId() {
 			this.$nextTick(() => {
-				this.$refs.submitButton.$el.focus()
+				// Postpone render of NewMessageForm until modal container is mounted
+				this.modalContainerId = `#modal-description-${this.$refs.modal.randId}`
 			})
 		},
 
@@ -169,7 +181,7 @@ export default {
 		},
 
 		handleUpload() {
-			this.$store.dispatch('uploadFiles', this.currentUploadId)
+			this.$store.dispatch('uploadFiles', { uploadId: this.currentUploadId, mediaCaption: this.mediaCaption })
 		},
 		/**
 		 * Clicks the hidden file input when clicking the correspondent NcActionButton,
@@ -202,20 +214,15 @@ export default {
 	padding: 16px;
 
 	&__previews {
-		overflow-x: hidden !important;
 		display: flex;
 		position: relative;
 		overflow: auto;
 		flex-wrap: wrap;
 	}
-	&__actions {
-		display: flex;
-		justify-content: space-between;
+	&__message-form {
 		margin-top: 16px;
 		margin-bottom: 4px;
-		button {
-			margin: 0 4px 0 4px;
-		}
+		width: 100%;
 	}
 }
 
@@ -229,4 +236,9 @@ export default {
 	}
 }
 
+:deep(.modal-container) {
+	// Fix visibility for popovers, like EmojiPicker
+	overflow: visible !important;
+}
+
 </style>

src/store/fileUploadStore.js

@@ -278,9 +278,11 @@ const actions = {
 	 * @param {Function} context.dispatch the contexts dispatch function.
 	 * @param {object} context.getters the contexts getters object.
 	 * @param {object} context.state the contexts state object.
-	 * @param {string} uploadId The unique uploadId
+	 * @param {object} data the wrapping object
+	 * @param {string} data.uploadId The unique uploadId
+	 * @param {string} [data.mediaCaption] The text caption to the media
 	 */
-	async uploadFiles({ commit, dispatch, state, getters }, uploadId) {
+	async uploadFiles({ commit, dispatch, state, getters }, { uploadId, mediaCaption }) {
 		if (state.currentUploadId === uploadId) {
 			commit('setCurrentUploadId', undefined)
 		}
@@ -353,7 +355,9 @@ const actions = {
 			for (const index in shareableFiles) {
 				const path = shareableFiles[index].sharePath
 				const temporaryMessage = shareableFiles[index].temporaryMessage
-				const metadata = JSON.stringify({ messageType: temporaryMessage.messageType })
+				const metadata = mediaCaption
+					? JSON.stringify({ messageType: temporaryMessage.messageType, mediaCaption })
+					: JSON.stringify({ messageType: temporaryMessage.messageType })
 				try {
 					const token = temporaryMessage.token
 					dispatch('markFileAsSharing', { uploadId, index })

src/store/fileUploadStore.spec.js

@@ -161,7 +161,7 @@ describe('fileUploadStore', () => {
 			client.putFileContents.mockResolvedValue()
 			shareFile.mockResolvedValue()
 
-			await store.dispatch('uploadFiles', 'upload-id1')
+			await store.dispatch('uploadFiles', { uploadId: 'upload-id1' })
 
 			expect(client.putFileContents).toHaveBeenCalledTimes(2)
 			expect(shareFile).toHaveBeenCalledTimes(2)
@@ -204,7 +204,7 @@ describe('fileUploadStore', () => {
 				},
 			})
 
-			await store.dispatch('uploadFiles', 'upload-id1')
+			await store.dispatch('uploadFiles', { uploadId: 'upload-id1' })
 
 			expect(client.putFileContents).toHaveBeenCalledTimes(1)
 			expect(shareFile).not.toHaveBeenCalled()
@@ -242,7 +242,7 @@ describe('fileUploadStore', () => {
 				},
 			})
 
-			await store.dispatch('uploadFiles', 'upload-id1')
+			await store.dispatch('uploadFiles', { uploadId: 'upload-id1' })
 
 			expect(client.putFileContents).toHaveBeenCalledTimes(1)
 			expect(shareFile).toHaveBeenCalledTimes(1)