From 76a1160713da7e9127b7eb01a97b25e585399eac Mon Sep 17 00:00:00 2001 From: gabriellsh <40830821+gabriellsh@users.noreply.github.com> Date: Thu, 9 Apr 2020 18:10:17 -0300 Subject: [PATCH] [CHORE] Use REST API for sending audio messages (#17237) --- .../messageBox/messageBoxAudioMessage.js | 76 +-------- app/ui/client/lib/fileUpload.js | 149 +++++++++--------- 2 files changed, 78 insertions(+), 147 deletions(-) diff --git a/app/ui-message/client/messageBox/messageBoxAudioMessage.js b/app/ui-message/client/messageBox/messageBoxAudioMessage.js index 1bcf4f8c7df8..a96832d1b01c 100644 --- a/app/ui-message/client/messageBox/messageBoxAudioMessage.js +++ b/app/ui-message/client/messageBox/messageBoxAudioMessage.js @@ -1,12 +1,9 @@ import { ReactiveVar } from 'meteor/reactive-var'; -import { Session } from 'meteor/session'; -import { Tracker } from 'meteor/tracker'; import { Template } from 'meteor/templating'; -import { fileUploadHandler } from '../../../file-upload'; +import { uploadFileWithMessage } from '../../../ui/client/lib/fileUpload'; import { settings } from '../../../settings'; import { AudioRecorder } from '../../../ui'; -import { call } from '../../../ui-utils'; import { t } from '../../../utils'; import './messageBoxAudioMessage.html'; @@ -15,74 +12,6 @@ const startRecording = () => new Promise((resolve, reject) => const stopRecording = () => new Promise((resolve) => AudioRecorder.stop(resolve)); -const registerUploadProgress = (upload) => { - const uploads = Session.get('uploading') || []; - Session.set('uploading', [...uploads, { - id: upload.id, - name: upload.getFileName(), - percentage: 0, - }]); -}; - -const updateUploadProgress = (upload, { progress, error: { message: error } = {} }) => { - const uploads = Session.get('uploading') || []; - const item = uploads.find(({ id }) => id === upload.id) || { - id: upload.id, - name: upload.getFileName(), - }; - item.percentage = Math.round(progress * 100) || 0; - item.error = error; - Session.set('uploading', uploads); -}; - -const unregisterUploadProgress = (upload) => setTimeout(() => { - const uploads = Session.get('uploading') || []; - Session.set('uploading', uploads.filter(({ id }) => id !== upload.id)); -}, 2000); - -const uploadRecord = async ({ rid, tmid, blob }) => { - const upload = fileUploadHandler('Uploads', { - name: `${ t('Audio record') }.mp3`, - size: blob.size, - type: 'audio/mpeg', - rid, - description: '', - }, blob); - - upload.onProgress = (progress) => { - updateUploadProgress(upload, { progress }); - }; - - registerUploadProgress(upload); - - try { - const [file, storage] = await new Promise((resolve, reject) => { - upload.start((error, ...args) => (error ? reject(error) : resolve(args))); - }); - - await call('sendFileMessage', rid, storage, file, { tmid }); - - unregisterUploadProgress(upload); - } catch (error) { - updateUploadProgress(upload, { error, progress: 0 }); - unregisterUploadProgress(upload); - } - - Tracker.autorun((c) => { - const cancel = Session.get(`uploading-cancel-${ upload.id }`); - - if (!cancel) { - return; - } - - upload.stop(); - c.stop(); - - updateUploadProgress(upload, { progress: 0 }); - unregisterUploadProgress(upload); - }); -}; - const recordingInterval = new ReactiveVar(null); const recordingRoomId = new ReactiveVar(null); @@ -206,6 +135,7 @@ Template.messageBoxAudioMessage.events({ instance.state.set(null); const { rid, tmid } = this; - await uploadRecord({ rid, tmid, blob }); + + await uploadFileWithMessage(rid, tmid, { file: { file: blob }, fileName: `${ t('Audio record') }.mp3` }); }, }); diff --git a/app/ui/client/lib/fileUpload.js b/app/ui/client/lib/fileUpload.js index dae0bd618a10..41107998582d 100644 --- a/app/ui/client/lib/fileUpload.js +++ b/app/ui/client/lib/fileUpload.js @@ -16,6 +16,75 @@ const readAsDataURL = (file, callback) => { return reader.readAsDataURL(file); }; +export const uploadFileWithMessage = async (rid, tmid, { description, fileName, msg, file }) => { + const data = new FormData(); + description && data.append('description', description); + msg && data.append('msg', msg); + tmid && data.append('tmid', tmid); + data.append('file', file.file, fileName); + + const uploads = Session.get('uploading') || []; + + const upload = { + id: Random.id(), + name: fileName, + percentage: 0, + }; + + uploads.push(upload); + Session.set('uploading', uploads); + + const { xhr, promise } = APIClient.upload(`v1/rooms.upload/${ rid }`, {}, data, { + progress(progress) { + const uploads = Session.get('uploading') || []; + + if (progress === 100) { + return; + } + uploads.filter((u) => u.id === upload.id).forEach((u) => { + u.percentage = Math.round(progress) || 0; + }); + Session.set('uploading', uploads); + }, + error(error) { + const uploads = Session.get('uploading') || []; + uploads.filter((u) => u.id === upload.id).forEach((u) => { + u.error = error.message; + u.percentage = 0; + }); + Session.set('uploading', uploads); + }, + }); + + Tracker.autorun((computation) => { + const isCanceling = Session.get(`uploading-cancel-${ upload.id }`); + if (!isCanceling) { + return; + } + computation.stop(); + Session.delete(`uploading-cancel-${ upload.id }`); + + xhr.abort(); + + const uploads = Session.get('uploading') || {}; + Session.set('uploading', uploads.filter((u) => u.id !== upload.id)); + }); + + try { + await promise; + const uploads = Session.get('uploading') || []; + return Session.set('uploading', uploads.filter((u) => u.id !== upload.id)); + } catch (error) { + const uploads = Session.get('uploading') || []; + uploads.filter((u) => u.id === upload.id).forEach((u) => { + u.error = (error.xhr && error.xhr.responseJSON && error.xhr.responseJSON.error) || error.message; + u.percentage = 0; + }); + Session.set('uploading', uploads); + } +}; + + const showUploadPreview = (file, callback) => { // If greater then 10MB don't try and show a preview if (file.file.size > (10 * 1000000)) { @@ -197,84 +266,16 @@ export const fileUpload = async (files, input, { rid, tmid }) => { return; } - const record = { - name: document.getElementById('file-name').value || file.name || file.file.name, - size: file.file.size, - type: file.file.type, - rid, - description: document.getElementById('file-description').value, - }; - const fileName = document.getElementById('file-name').value || file.name || file.file.name; - const data = new FormData(); - record.description && data.append('description', record.description); - msg && data.append('msg', msg); - tmid && data.append('tmid', tmid); - data.append('file', file.file, fileName); - - - const uploads = Session.get('uploading') || []; - - const upload = { - id: Random.id(), - name: fileName, - percentage: 0, - }; - - uploads.push(upload); - Session.set('uploading', uploads); - - uploadNextFile(); - - const { xhr, promise } = APIClient.upload(`v1/rooms.upload/${ rid }`, {}, data, { - progress(progress) { - const uploads = Session.get('uploading') || []; - - if (progress === 100) { - return; - } - uploads.filter((u) => u.id === upload.id).forEach((u) => { - u.percentage = Math.round(progress) || 0; - }); - Session.set('uploading', uploads); - }, - error(error) { - const uploads = Session.get('uploading') || []; - uploads.filter((u) => u.id === upload.id).forEach((u) => { - u.error = error.message; - u.percentage = 0; - }); - Session.set('uploading', uploads); - }, - }); - - Tracker.autorun((computation) => { - const isCanceling = Session.get(`uploading-cancel-${ upload.id }`); - if (!isCanceling) { - return; - } - computation.stop(); - Session.delete(`uploading-cancel-${ upload.id }`); - - xhr.abort(); - - const uploads = Session.get('uploading') || {}; - Session.set('uploading', uploads.filter((u) => u.id !== upload.id)); + uploadFileWithMessage(rid, tmid, { + description: document.getElementById('file-description').value || undefined, + fileName, + msg: msg || undefined, + file, }); - try { - await promise; - const uploads = Session.get('uploading') || []; - return Session.set('uploading', uploads.filter((u) => u.id !== upload.id)); - } catch (error) { - const uploads = Session.get('uploading') || []; - uploads.filter((u) => u.id === upload.id).forEach((u) => { - u.error = (error.xhr && error.xhr.responseJSON && error.xhr.responseJSON.error) || error.message; - u.percentage = 0; - }); - Session.set('uploading', uploads); - } + uploadNextFile(); })); };