make overall progress bar nicer too

.gitignore

@@ -1,3 +1,5 @@
 /target
 /storage
-/result
+/result
+flamegraph.svg
+perf.data*

flake.nix

@@ -51,7 +51,13 @@
           packages."${name}-unwrapped" = project.rootCrate.build;
 
           devShell = pkgs.mkShell {
-            nativeBuildInputs = with pkgs; [ rustc cargo cargo-audit stdenv.cc ];
+            nativeBuildInputs = with pkgs; [
+              stdenv.cc
+              rustc
+              cargo
+              cargo-audit
+              cargo-flamegraph
+            ];
             RUST_SRC_PATH = "${pkgs.rust.packages.stable.rustPlatform.rustLibSrc}";
           };
         }

src/download.rs

@@ -45,6 +45,7 @@ impl DownloadingFile {
 
         let mut res = HttpResponse::build(StatusCode::OK);
 
+        res.insert_header((header::CONTENT_SECURITY_POLICY, "sandbox"));
         res.insert_header((header::CONTENT_TYPE, mime::APPLICATION_OCTET_STREAM));
         res.insert_header((
             header::CONTENT_DISPOSITION,

static/index.html

@@ -21,9 +21,7 @@
       </div>
       <div id="progress_container" style="display: none;">
         <div id="progress"></div>
-        <div id="progress_bar">
-          <div id="progress_bar_filled"></div>
-        </div>
+        <div id="progress_bar"></div>
       </div>
       <div id="file_list_container" style="display: none;">
         <table id="file_list">

static/transbeam.css

@@ -14,16 +14,13 @@ body {
     margin: 10px auto;
 }
 
-#progress_bar, #progress_bar_filled {
-    height: 20px;
-    border-radius: 8px;
-}
 #progress_bar {
+    height: 20px;
+    border-radius: 10px;
     border: 1px solid #48f;
-}
-#progress_bar_filled {
-    width: 0;
-    background-color: #27f;
+    background-image: linear-gradient(0deg, #27f, #27f);
+    background-repeat: no-repeat;
+    background-size: 0;
 }
 
 table {
@@ -31,6 +28,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;
 }

static/transbeam.js

@@ -15,7 +15,7 @@ const downloadLink = document.getElementById('download_link');
 
 const progressContainer = document.getElementById('progress_container');
 const progress = document.getElementById('progress');
-const progressBarFilled = document.getElementById('progress_bar_filled');
+const progressBar = document.getElementById('progress_bar');
 
 let files = [];
 
@@ -41,6 +41,7 @@ function finishSending() {
     }
     socket.close();
     progressContainer.textContent = "Upload complete!";
+    fileList.style.backgroundColor = "#7af";
 }
 
 function sendData() {
@@ -70,8 +71,19 @@ function updateProgress() {
     } else {
         percentage = `${(bytesSent*100/totalBytes).toFixed(1)}%`;
     }
-    progress.textContent = percentage;
-    progressBarFilled.style.width = percentage;
+    progress.textContent = `${percentage} (${displaySize(bytesSent)}/${displaySize(totalBytes)})`;
+    progressBar.style.backgroundSize = 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() {