From 20cf8d0a15c07b91d18d50063397eb430ca31d72 Mon Sep 17 00:00:00 2001 From: Danny Coates Date: Sun, 23 Jul 2017 22:26:06 -0700 Subject: [PATCH] added messages for processing phases --- frontend/src/download.js | 33 +++---- frontend/src/upload.js | 156 +++++++++++++++++----------------- public/locales/send.en-US.ftl | 4 + 3 files changed, 99 insertions(+), 94 deletions(-) diff --git a/frontend/src/download.js b/frontend/src/download.js index f879bcc5..76fd6b5f 100644 --- a/frontend/src/download.js +++ b/frontend/src/download.js @@ -46,7 +46,7 @@ $(document).ready(function() { storage.referrer = 'errored-download'; }); - const filename = $('#dl-filename').html(); + const filename = $('#dl-filename').text(); const bytelength = Number($('#dl-bytelength').text()); const timeToExpiry = Number($('#dl-ttl').text()); @@ -83,31 +83,24 @@ $(document).ready(function() { const percent = progress[0] / progress[1]; // update progress bar $('#dl-progress').circleProgress('value', percent); - $('.percent-number').html(`${Math.floor(percent * 100)}`); + $('.percent-number').text(`${Math.floor(percent * 100)}`); $('.progress-text').text( `${filename} (${bytes(progress[0], { decimalPlaces: 1, fixedDecimals: true })} of ${bytes(progress[1], { decimalPlaces: 1 })})` ); - //on complete - if (percent === 1) { - fileReceiver.removeAllListeners('progress'); - document.l10n - .formatValues('downloadNotification', 'downloadFinish') - .then(translated => { - notify(translated[0]); - $('.title').html(translated[1]); - }); - window.onunload = null; - } }); let downloadEnd; fileReceiver.on('decrypting', isStillDecrypting => { // The file is being decrypted if (isStillDecrypting) { - console.log('Decrypting'); + fileReceiver.removeAllListeners('progress'); + window.onunload = null; + document.l10n.formatValue('decryptingFile').then(decryptingFile => { + $('.progress-text').text(decryptingFile); + }); } else { console.log('Done decrypting'); downloadEnd = Date.now(); @@ -117,9 +110,17 @@ $(document).ready(function() { fileReceiver.on('hashing', isStillHashing => { // The file is being hashed to make sure a malicious user hasn't tampered with it if (isStillHashing) { - console.log('Checking file integrity'); + document.l10n.formatValue('verifyingFile').then(verifyingFile => { + $('.progress-text').text(verifyingFile); + }); } else { - console.log('Integrity check done'); + $('.progress-text').text(' '); + document.l10n + .formatValues('downloadNotification', 'downloadFinish') + .then(translated => { + notify(translated[0]); + $('.title').text(translated[1]); + }); } }); diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 7e3b8e66..b2b9d835 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -77,7 +77,6 @@ $(document).ready(function() { $copyBtn.attr('data-l10n-id', 'copyUrlFormButton'); const files = storage.files; - console.log(files); if (files.length === 0) { toggleHeader(); } else { @@ -134,7 +133,6 @@ $(document).ready(function() { // on file upload by browse or drag & drop function onUpload(event) { event.preventDefault(); - storage.totalUploads += 1; let file = ''; @@ -163,9 +161,11 @@ $(document).ready(function() { $('#page-one').attr('hidden', true); $('#upload-error').attr('hidden', true); $('#upload-progress').removeAttr('hidden'); + document.l10n.formatValue('importingFile').then(importingFile => { + $('.progress-text').text(importingFile); + }); //don't allow drag and drop when not on page-one $('body').off('drop', onUpload); - const expiration = 24 * 60 * 60 * 1000; //will eventually come from a field const fileSender = new FileSender(file); $('#cancel-upload').click(() => { @@ -192,7 +192,7 @@ $(document).ready(function() { // update progress bar $('#ul-progress').circleProgress('value', percent); $('#ul-progress').circleProgress().on('circle-animation-end', function() { - $('.percent-number').html(`${Math.floor(percent * 100)}`); + $('.percent-number').text(`${Math.floor(percent * 100)}`); }); $('.progress-text').text( `${file.name} (${bytes(progress[0], { @@ -202,19 +202,12 @@ $(document).ready(function() { ); }); - fileSender.on('loading', isStillLoading => { - // The file is loading into Firefox at this stage - if (isStillLoading) { - console.log('Processing'); - } else { - console.log('Finished processing'); - } - }); - fileSender.on('hashing', isStillHashing => { // The file is being hashed if (isStillHashing) { - console.log('Hashing'); + document.l10n.formatValue('verifyingFile').then(verifyingFile => { + $('.progress-text').text(verifyingFile); + }); } else { console.log('Finished hashing'); } @@ -224,7 +217,9 @@ $(document).ready(function() { fileSender.on('encrypting', isStillEncrypting => { // The file is being encrypted if (isStillEncrypting) { - console.log('Encrypting'); + document.l10n.formatValue('encryptingFile').then(encryptingFile => { + $('.progress-text').text(encryptingFile); + }); } else { console.log('Finished encrypting'); uploadStart = Date.now(); @@ -245,76 +240,81 @@ $(document).ready(function() { cd5: window.referrer }); - fileSender - .upload() - .then(info => { - const endTime = Date.now(); - const totalTime = endTime - startTime; - const uploadTime = endTime - uploadStart; - const uploadSpeed = file.size / (uploadTime / 1000); + // For large files we need to give the ui a tick to breathe and update + // before we kick off the FileSender + setTimeout(() => { + fileSender + .upload() + .then(info => { + const endTime = Date.now(); + const totalTime = endTime - startTime; + const uploadTime = endTime - uploadStart; + const uploadSpeed = file.size / (uploadTime / 1000); + const expiration = 24 * 60 * 60 * 1000; //will eventually come from a field - // record upload-stopped (completed) by sender - sendEvent('sender', 'upload-stopped', { - cm1: file.size, - cm2: totalTime, - cm3: uploadSpeed, - cm5: storage.totalUploads, - cm6: unexpiredFiles, - cm7: storage.totalDownloads, - cd1: event.type === 'drop' ? 'drop' : 'click', - cd2: 'completed' - }); + // record upload-stopped (completed) by sender + sendEvent('sender', 'upload-stopped', { + cm1: file.size, + cm2: totalTime, + cm3: uploadSpeed, + cm5: storage.totalUploads, + cm6: unexpiredFiles, + cm7: storage.totalDownloads, + cd1: event.type === 'drop' ? 'drop' : 'click', + cd2: 'completed' + }); - const fileData = { - name: file.name, - size: file.size, - fileId: info.fileId, - url: info.url, - secretKey: info.secretKey, - deleteToken: info.deleteToken, - creationDate: new Date(), - expiry: expiration, - totalTime: totalTime, - typeOfUpload: event.type === 'drop' ? 'drop' : 'click', - uploadSpeed: uploadSpeed - }; + const fileData = { + name: file.name, + size: file.size, + fileId: info.fileId, + url: info.url, + secretKey: info.secretKey, + deleteToken: info.deleteToken, + creationDate: new Date(), + expiry: expiration, + totalTime: totalTime, + typeOfUpload: event.type === 'drop' ? 'drop' : 'click', + uploadSpeed: uploadSpeed + }; - storage.addFile(info.fileId, fileData); - $('#upload-filename').attr( - 'data-l10n-id', - 'uploadSuccessConfirmHeader' - ); - t = window.setTimeout(() => { + storage.addFile(info.fileId, fileData); + $('#upload-filename').attr( + 'data-l10n-id', + 'uploadSuccessConfirmHeader' + ); + t = window.setTimeout(() => { + $('#page-one').attr('hidden', true); + $('#upload-progress').attr('hidden', true); + $('#upload-error').attr('hidden', true); + $('#share-link').removeAttr('hidden'); + }, 1000); + + populateFileList(fileData); + document.l10n.formatValue('notifyUploadDone').then(str => { + notify(str); + }); + }) + .catch(err => { + Raven.captureException(err); + console.log(err); $('#page-one').attr('hidden', true); $('#upload-progress').attr('hidden', true); - $('#upload-error').attr('hidden', true); - $('#share-link').removeAttr('hidden'); - }, 1000); + $('#upload-error').removeAttr('hidden'); + window.clearTimeout(t); - populateFileList(fileData); - document.l10n.formatValue('notifyUploadDone').then(str => { - notify(str); + // record upload-stopped (errored) by sender + sendEvent('sender', 'upload-stopped', { + cm1: file.size, + cm5: storage.totalUploads, + cm6: unexpiredFiles, + cm7: storage.totalDownloads, + cd1: event.type === 'drop' ? 'drop' : 'click', + cd2: 'errored', + cd6: err + }); }); - }) - .catch(err => { - Raven.captureException(err); - console.log(err); - $('#page-one').attr('hidden', true); - $('#upload-progress').attr('hidden', true); - $('#upload-error').removeAttr('hidden'); - window.clearTimeout(t); - - // record upload-stopped (errored) by sender - sendEvent('sender', 'upload-stopped', { - cm1: file.size, - cm5: storage.totalUploads, - cm6: unexpiredFiles, - cm7: storage.totalDownloads, - cd1: event.type === 'drop' ? 'drop' : 'click', - cd2: 'errored', - cd6: err - }); - }); + }, 10); } function allowDrop(ev) { diff --git a/public/locales/send.en-US.ftl b/public/locales/send.en-US.ftl index e249f5d1..fe6ae46c 100644 --- a/public/locales/send.en-US.ftl +++ b/public/locales/send.en-US.ftl @@ -13,6 +13,10 @@ uploadPageMultipleFilesAlert = Uploading multiple files or a folder is currently uploadPageBrowseButtonTitle = Upload file uploadingPageHeader = Uploading Your File +importingFile = Importing... +verifyingFile = Verifying... +encryptingFile = Encrypting... +decryptingFile = Decrypting... notifyUploadDone = Your upload has finished.