audio-recording: custom progress bar

website/agenda/planung/css/audio-recordings.css

@@ -32,6 +32,7 @@ tr.inactive{
     height: 1rem;
     border: 0;
     box-shadow: #888 2px 2px 1px 1px;
+    transition : width 1s ease;
 }
 
 #content div.ok, 
@@ -42,4 +43,30 @@ tr.inactive{
     margin: 1px;
     border-radius: 4px;
     text-align: center;
-}
+}
+
+#progress_container{
+    display:flex;
+    box-shadow: #888 2px 2px 1px 1px;
+    width:100%;
+    padding:0;
+}
+
+#progress_container div{
+    transition : width 3s linear;
+    text-align: center;
+    padding: 1rem;
+    color:white;
+    overflow:none;
+    white-space: nowrap;
+}
+
+#progress_container #progress_done{
+    background:#004f9b;
+}
+
+#progress_container #progress_todo{
+    color: #004f9b;
+    background:#ccc;
+}
+

website/agenda/planung/js/audio-recordings.js

@@ -45,13 +45,19 @@ function hideFinished(){
 }
 
 function roundSize(size){
-    var MB=1000*1000;
-    var value= Math.round(size*10/MB)/10;
-    value+='';
-    if (value.indexOf('.')<0)value+='.0';
+    const MB = 1000*1000;
+    var value= Math.round(size/MB);
+    value += '';
+    //if (value.indexOf('.')<0)value+='.0';
     return value;
 }
 
+function formatTime(duration){
+    if (duration > 3600) return Math.ceil(duration/3600) + " hours";
+    if (duration > 60)   return Math.ceil(duration/60)   + " minutes";
+    return duration += " seconds";
+}
+
 function uploadFile(uploadButton){
     hideFinished();
     hideError();
@@ -64,39 +70,42 @@ function uploadFile(uploadButton){
         contentType: false,
         processData: false,
         xhr: function() {
-            var start = new Date();
+            var start = Math.floor(Date.now()/1000);
+            var update = start;
             var xhr = new window.XMLHttpRequest();
+            $('#uploadButton').hide();
             if (xhr.upload) {
-                var c=0;
-                var oldRemaining=0;
+                $('#progress_done').html(0);
+                $('#progress_todo').html(100);
+                $('#progress_done').css("width", 0 + "%")
+                $('#progress_todo').css("width", (100)+ "%")
+                $('#progress_container').show();
+
                 xhr.upload.addEventListener(
                     'progress', 
                     function(data) {
                         if (!data.lengthComputable) return;
-                        c++;
+                        let now = Math.floor(Date.now()/1000);
+                        if (now == update) return;
+                        update = now;
 
-                        var loaded=roundSize(data.loaded);
-                        var total=roundSize(data.total);
-                        $('#progressBar').attr("value", loaded);
-                        $('#progressBar').attr("max", total);
+                        let loaded = roundSize(data.loaded);
+                        if (loaded == 0) return;
+                        let total = roundSize(data.total);
+                        let duration = now - start;
+                        if (duration == 0) return;
+                        let remaining = Math.round( (duration * data.total / data.loaded) - duration );
+                        remaining = formatTime(remaining);
+                        duration = formatTime(duration);
+  
+                        var perc = Math.round(100*loaded/total);
+                        $('#progress_done').css("width", perc + "%")
+                        $('#progress_todo').css("width", (100-perc)+ "%")
+                        $('#progress_done').html(loaded + " MB");
+                        $('#progress_todo').html(remaining+" left");
 
-                        if (c<2)return;
-                        c=0;
-
-                        var duration=(new Date().getTime() - start.getTime()) / 1000 ;
-                        var bitrate = loaded / duration;
-
-                        var remaining = Math.round( (duration * data.total / data.loaded) - duration );
-                        if (oldRemaining == 0) oldRemaining = remaining;
-                        if (duration>30) remaining= oldRemaining*0.5 + remaining*0.5;
-                        oldRemaining=remaining;
-
-                        var content = loaded + " of " + total + " MB<br>";
-                        content += '<div class="thin">';
-                        content += "finished in " + Math.round(remaining) + " seconds<br>";
-                        content += "took " + Math.round(duration) + " seconds<br>";
-                        content += '</div>'
-                        $('#progressLabel').html(content);
+                        let content = total + " MB<br>";
+                         $('#progressLabel').html(content);
                     } , 
                     false
                 );
@@ -110,6 +119,7 @@ function uploadFile(uploadButton){
             showError("error: "+errorThrown);
             hideProgress();
             hideFinished();
+            $('#uploadButton').show();
         }
     );
 
@@ -118,6 +128,7 @@ function uploadFile(uploadButton){
             showFinished();
             hideProgress();
             hideError();
+            $('#uploadButton').show();
         }
     );
 }

website/agenda/planung/templates/upload-audio-recordings.html

@@ -20,7 +20,13 @@
             <div>Ich lade jetzt die Datei hoch... Pieps.</div>
             <div><img src="/agenda/planung/image/upload/bird9.gif" /></div>
             <div>Ist das aufregend!</div>
-            <progress id="progressBar"></progress>
+            <!--<progress id="progressBar"></progress>-->
+
+            <div id="progress_container">
+                <div id="progress_done"></div>
+                <div id="progress_todo"></div>
+            </div>
+
             <div id="progressLabel"></div>
         </div>