Display voice message preview before uploading

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

@@ -43,17 +43,25 @@ export default {
 			type: String,
 			required: true,
 		},
+
 		link: {
 			type: String,
-			required: true,
+			default: '',
 		},
 		/**
-		 * File path relative to the user's home storage,
-		 * or link share root, includes the file name.
+		 * Link share root, includes the file name.
 		 */
 		path: {
 			type: String,
-			required: true,
+			default: '',
+		},
+		/**
+		 * File path relative to the user's home storage, used for previewing
+		 * the audio before upload
+		 */
+		localUrl: {
+			type: String,
+			default: '',
 		},
 	},
 
@@ -66,6 +74,9 @@ export default {
 		},
 
 		fileURL() {
+			if (this.localUrl) {
+				return this.localUrl
+			}
 			const userId = this.$store.getters.getUserId()
 			if (userId === null) {
 				// guest mode, use public link download URL

src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue

@@ -102,8 +102,6 @@ export default {
 			chunks: [],
 			// The final audio file blob
 			blob: null,
-			// The blob url
-			URL: '',
 			// Switched to true if the recording is aborted
 			aborted: false,
 			// recordTimer
@@ -237,14 +235,14 @@ export default {
 		generateFile() {
 			this.audioStream.getTracks().forEach(track => track.stop())
 			if (!this.aborted) {
-				this.blob = new Blob(this.chunks, { 'type': 'audio/mpeg-3' })
+				this.blob = new Blob(this.chunks, { type: 'audio/mpeg-3' })
 				// Generate file name
 				const fileName = this.generateFileName()
 				// Convert blob to file
 				const audioFile = new File([this.blob], fileName)
+				audioFile.localURL = window.URL.createObjectURL(this.blob)
 				this.$emit('audioFile', audioFile)
 				this.$emit('recording', false)
-				this.URL = window.URL.createObjectURL(this.blob)
 			}
 			this.resetComponentData()
 		},

src/components/NewMessageForm/NewMessageForm.vue

@@ -170,7 +170,7 @@ export default {
 		},
 	},
 
-	data: function() {
+	data() {
 		return {
 			text: '',
 			parsedText: '',

src/components/UploadEditor.vue

@@ -24,38 +24,45 @@
 		class="upload-editor"
 		container="#content-vue"
 		@close="handleDismiss">
-		<!--native file picker, hidden -->
-		<input id="file-upload"
-			ref="fileUploadInput"
-			multiple
-			type="file"
-			class="hidden-visually"
-			@change="handleFileInput">
-		<transition-group
-			class="upload-editor__previews"
-			name="fade"
-			tag="div">
-			<template v-for="file in files">
-				<FilePreview
-					:key="file.temporaryMessage.id"
-					v-bind="file.temporaryMessage.messageParameters.file"
-					:is-upload-editor="true"
-					@remove-file="handleRemoveFileFromSelection" />
-			</template>
-			<div v-if="!isVoiceMessage"
-				:key="'addMore'"
-				class="add-more">
-				<button :aria-label="addMoreAriaLabel"
-					class="add-more__button primary"
-					@click="clickImportInput">
-					<Plus
-						decorative
-						title=""
-						:size="48"
-						class="upload-editor__plus-icon" />
-				</button>
-			</div>
-		</transition-group>
+		<template v-if="!isVoiceMessage">
+			<!--native file picker, hidden -->
+			<input id="file-upload"
+				ref="fileUploadInput"
+				multiple
+				type="file"
+				class="hidden-visually"
+				@change="handleFileInput">
+			<transition-group
+				class="upload-editor__previews"
+				name="fade"
+				tag="div">
+				<template v-for="file in files">
+					<FilePreview
+						:key="file.temporaryMessage.id"
+						v-bind="file.temporaryMessage.messageParameters.file"
+						:is-upload-editor="true"
+						@remove-file="handleRemoveFileFromSelection" />
+				</template>
+				<div
+					:key="'addMore'"
+					class="add-more">
+					<button :aria-label="addMoreAriaLabel"
+						class="add-more__button primary"
+						@click="clickImportInput">
+						<Plus
+							decorative
+							title=""
+							:size="48"
+							class="upload-editor__plus-icon" />
+					</button>
+				</div>
+			</transition-group>
+		</template>
+		<template v-else>
+			<AudioPlayer
+				:name="voiceMessageName"
+				:local-url="voiceMessageLocalURL" />
+		</template>
 		<div class="upload-editor__actions">
 			<button @click="handleDismiss">
 				{{ t('spreed', 'Dismiss') }}
@@ -72,6 +79,7 @@
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
 import Plus from 'vue-material-design-icons/Plus'
+import AudioPlayer from './MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue'
 
 export default {
 	name: 'UploadEditor',
@@ -80,6 +88,7 @@ export default {
 		Modal,
 		FilePreview,
 		Plus,
+		AudioPlayer,
 	},
 
 	computed: {
@@ -106,14 +115,31 @@ export default {
 			return t('spreed', 'Add more files')
 		},
 
+		firstFile() {
+			return this.files[Object.keys(this.files)[0]]
+		},
+
 		// Hide the plus button in case this editor is used while sending a voice
 		// message
 		isVoiceMessage() {
-			const firstFile = this.files[Object.keys(this.files)[0]]
-			if (!firstFile) {
+			if (!this.firstFile) {
 				return false
 			}
-			return firstFile.temporaryMessage.messageType === 'voice-message'
+			return this.firstFile.temporaryMessage.messageType === 'voice-message'
+		},
+
+		voiceMessageName() {
+			if (!this.firstFile.file.name) {
+				return ''
+			}
+			return this.firstFile.file.name
+		},
+
+		voiceMessageLocalURL() {
+			if (!this.firstFile.file.localURL) {
+				return ''
+			}
+			return this.firstFile.file.localURL
 		},
 	},
 

src/store/fileUploadStore.js

@@ -211,6 +211,8 @@ const actions = {
 			let localUrl = ''
 			if (file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpeg') {
 				localUrl = URL.createObjectURL(file)
+			} else if (isVoiceMessage) {
+				localUrl = file.localUrl
 			} else {
 				localUrl = OC.MimeType.getIconUrl(file.type)
 			}
@@ -317,7 +319,7 @@ 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 = JSON.stringify({ messageType: temporaryMessage.messageType })
 				try {
 					const token = temporaryMessage.token
 					dispatch('markFileAsSharing', { uploadId, index })