diff options
5 files changed, 82 insertions, 45 deletions
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue index 61f4fc37d..a5f38038c 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue +++ b/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 diff --git a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue index 74b31da29..75db41114 100644 --- a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue +++ b/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() }, diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index a21b2cebc..d1fd2064b 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -170,7 +170,7 @@ export default { }, }, - data: function() { + data() { return { text: '', parsedText: '', diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue index 77e3487c8..acb58e7e0 100644 --- a/src/components/UploadEditor.vue +++ b/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 }, }, diff --git a/src/store/fileUploadStore.js b/src/store/fileUploadStore.js index b24aebcf4..19bfc10e6 100644 --- a/src/store/fileUploadStore.js +++ b/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 }) |