Skip to content

Commit

Permalink
[CHORE] Use REST API for sending audio messages (#17237)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gabriellsh
gabriellsh authored Apr 9, 2020
1 parent 7692896 commit 76a1160
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 147 deletions.
76 changes: 3 additions & 73 deletions app/ui-message/client/messageBox/messageBoxAudioMessage.js
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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);

Expand Down Expand Up @@ -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` });
},
});
149 changes: 75 additions & 74 deletions app/ui/client/lib/fileUpload.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down Expand Up @@ -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();
}));
};

Expand Down

0 comments on commit 76a1160

Please sign in to comment.