⚡️ — Smoother progress of progress bar (use smaller chunks)

CHANGELOG

@@ -1,6 +1,7 @@
 Revision history for Lufi
 
 ?.??.? ????-??-??
+	- Smoother progress of progress bar (use smaller chunks)
 
 0.04.4 2019-10-11
 	- Fix invitations sorting order (#163)

themes/default/public/js/lufi-down.js

@@ -81,9 +81,12 @@ function spawnWebsocket(pa) {
         } else {
             console.log('Getting slice '+(data.part + 1)+' of '+data.total);
             var slice   = JSON.parse(res.shift());
-            var percent = Math.round(100 * (data.part + 1)/data.total);
+            var percent = Math.round(1000 * (data.part + 1)/data.total)/10;
+            var wClass  = percent.toString().replace('.', '-');
             var pb      = $('#pb');
-            pb.css('width', percent+'%');
+            pb.removeClass();
+            pb.addClass('determinate');
+            pb.addClass('width-'+wClass);
             pb.attr('aria-valuenow', percent);
             $('#pbt').html(percent+'%');
             try {

themes/default/public/js/lufi-up.js

@@ -6,8 +6,8 @@ window.fc = 0;
 window.cancelled = [];
 // Set websocket
 window.ws = spawnWebsocket(0, function() {return null;});
-// Use slice of 2MB
-window.sliceLength = 2000000;
+// Use slice of 0.75MB
+window.sliceLength = 750000;
 // Global zip objects for currently created zip file
 window.zip = null;
 window.zipSize = 0;
@@ -363,7 +363,6 @@ function sliceAndUpload(randomkey, i, parts, j, delay, del_at_first_view, short,
             var b         = window.btoa(bin);
 
             // Encrypt it
-            sl.html(i18n.encrypting.replace(/XX1(.*)XX2/, (j+1)+'$1'+parts));
             var encrypted = sjcl.encrypt(randomkey, b);
 
             // Prepare json
@@ -390,9 +389,10 @@ function sliceAndUpload(randomkey, i, parts, j, delay, del_at_first_view, short,
             }
             data = JSON.stringify(data)+'XXMOJOXX'+JSON.stringify(encrypted);;
 
-            console.log('sending slice '+(j + 1)+'/'+parts+' of file '+file.name);
+            var percent = Math.round(1000 * j/parts)/10;
+            console.log('sending slice '+(j + 1)+'/'+parts+' of file '+file.name+' ('+percent+'%)');
 
-            sl.html(i18n.sending.replace(/XX1(.*)XX2/, (j+1)+'$1'+parts));
+            sl.html(percent.toFixed(1)+'%');
 
             // Verify that we have a websocket and send json
             if (window.ws.readyState === 3) {
@@ -568,10 +568,11 @@ function updateProgressBar(data) {
             } else {
                 j++;
                 // Update progress bar
-                var percent    = Math.round(100 * j/parts);
+                var percent = Math.round(1000 * j/parts)/10;
+                var wClass  = percent.toString().replace('.', '-');
                 dp.removeClass();
                 dp.addClass('determinate');
-                dp.addClass('width-'+percent);
+                dp.addClass('width-'+wClass);
                 dp.attr('aria-valuenow', percent);
 
                 // Encrypt and upload next slice

themes/default/templates/render.html.ep

@@ -33,7 +33,7 @@
             <p id="please-wait"><%= l('Please wait while we are getting your file. We first need to download and decrypt all parts before you can get it.') %></p>
             <p id="loading"></p>
             <div class="progress" id="pbd">
-                <div id="pb" class="determinate" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+                <div id="pb" class="determinate width-0" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                     <span id="pbt" class="sr-only">0%</span>
                 </div>
             </div>