From 93da22569ca1c3ab0a11e9a808d299276e72db5c Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Thu, 28 Apr 2022 02:19:43 -0400
Subject: [PATCH] per-file progress bars

---
 static/transbeam.css |  6 ++++++
 static/transbeam.js  | 12 ++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/static/transbeam.css b/static/transbeam.css
index 3a7402b..37d82df 100644
--- a/static/transbeam.css
+++ b/static/transbeam.css
@@ -31,6 +31,12 @@ table {
     margin: 20px auto;
 }
 
+tr {
+    background-image: linear-gradient(0deg, #7af, #7af);
+    background-repeat: no-repeat;
+    background-size: 0;
+}
+
 tr + tr td {
     border-top: 1px solid #ddd;
 }
diff --git a/static/transbeam.js b/static/transbeam.js
index 340d529..e065a1c 100644
--- a/static/transbeam.js
+++ b/static/transbeam.js
@@ -41,6 +41,7 @@ function finishSending() {
     }
     socket.close();
     progressContainer.textContent = "Upload complete!";
+    fileList.style.backgroundColor = "#7af";
 }
 
 function sendData() {
@@ -72,6 +73,17 @@ function updateProgress() {
     }
     progress.textContent = percentage;
     progressBarFilled.style.width = percentage;
+
+    const fileEntries = Array.from(fileList.children);
+    for (entry of fileEntries.slice(0, fileIndex)) {
+        entry.style.backgroundSize = "100%";
+    }
+    if (fileIndex < files.length) {
+        const currentFile = files[fileIndex];
+        if (currentFile.size > 0) {
+            fileEntries[fileIndex].style.backgroundSize = `${(byteIndex*100/currentFile.size)}%`;
+        }
+    }
 }
 
 function updateFiles() {