nicer display of upload progress info

static/css/transbeam.css

@@ -27,6 +27,27 @@ body {
     margin: 10px auto;
 }
 
+#progress {
+    display: flex;
+    align-items: center;
+    column-gap: 15px;
+    row-gap: 5px;
+    flex-wrap: wrap;
+}
+
+#progress_percentage {
+    flex-grow: 1;
+}
+#progress_size {
+    flex-grow: 3;
+}
+#progress_rate {
+    flex-grow: 2;
+}
+#progress_eta {
+    flex-grow: 3;
+}
+
 #progress_bar {
     height: 20px;
     border-radius: 10px;

static/index.html

@@ -71,7 +71,12 @@
           <div id="copied_message">Link copied!</div>
         </div>
         <div id="progress_container">
-          <div id="progress"></div>
+          <div id="progress">
+            <div id="progress_percentage"></div>
+            <div id="progress_size"></div>
+            <div id="progress_rate"></div>
+            <div id="progress_eta"></div>
+          </div>
           <div id="progress_bar"></div>
         </div>
         <table id="file_list">

static/js/upload.js

@@ -1,7 +1,7 @@
 const FILE_CHUNK_SIZE = 16384;
 const MAX_FILES = 256;
 const SAMPLE_WINDOW = 100;
-const STALL_THRESHOLD = 1;
+const STALL_THRESHOLD = 1000;
 
 let files = [];
 
@@ -22,7 +22,11 @@ let fileList;
 let uploadButton;
 let lifetimeInput;
 let downloadCode;
-let progress;
+
+let progressPercentage;
+let progressSize;
+let progressRate;
+let progressEta;
 let progressBar;
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -34,7 +38,10 @@ document.addEventListener('DOMContentLoaded', () => {
     uploadButton = document.getElementById('upload_button');
     lifetimeInput = document.getElementById('lifetime');
     downloadCode = document.getElementById('download_code');
-    progress = document.getElementById('progress');
+    progressPercentage = document.getElementById('progress_percentage');
+    progressSize = document.getElementById('progress_size');
+    progressRate = document.getElementById('progress_rate');
+    progressEta = document.getElementById('progress_eta');
     progressBar = document.getElementById('progress_bar');
 
     fetch('/upload/limits.json')
@@ -278,22 +285,28 @@ function updateProgress() {
     } else {
         percentage = `${(bytesSent*100/totalBytes).toFixed(1)}%`;
     }
-    let progressString = `${percentage} - ${displaySize(bytesSent)}/${displaySize(totalBytes)}`;
+    progressPercentage.textContent = percentage;
+
+    progressSize.textContent = `${displaySize(bytesSent)}/${displaySize(totalBytes)}`;
+
     if (timestamps.length >= 2) {
         const start = timestamps.at(0);
         const end = timestamps.at(-1);
-        if (end[0] - start[0] > 0) {
-            const rate = (end[1] - start[1])/(end[0] - start[0]);
-            if (rate > STALL_THRESHOLD) {
-                // Use the value from timestamps rather than bytesSent to avoid awkward UI thrashing
-                const remaining = (totalBytes - end[1]) / rate;
-                progressString += ` - ${displaySize(rate)}/s - ${displayTime(remaining)} remaining`;
-            } else {
-                progressString += " - stalled";
-            }
+        const rate = (end[1] - start[1])/(end[0] - start[0]);
+        progressRate.textContent = `${displaySize(rate)}/s`;
+
+        if (rate > STALL_THRESHOLD) {
+            // Use the value from timestamps rather than bytesSent to avoid awkward UI thrashing
+            const remaining = (totalBytes - end[1]) / rate;
+            progressEta.textContent = `${displayTime(remaining)} remaining`;
+        } else {
+            progressEta.textContent = "stalled";
         }
+    } else {
+        progressRate.textContent = "???B/s";
+        progressEta.textContent = "??? remaining";
     }
-    progress.textContent = progressString;
+
     progressBar.style.backgroundSize = percentage;
 
     const fileEntries = Array.from(fileList.children);