Improved progress bars and element alignment while uploading

src/main.rs

@@ -2,7 +2,7 @@ mod database;
 mod strings;
 mod settings;
 
-use std::{fs, path::Path, sync::{Arc, RwLock}};
+use std::{fs, path::Path, sync::{Arc, RwLock}, thread, time::Duration};
 use blake3::Hash;
 use chrono::{DateTime, TimeDelta, Utc};
 use database::{clean_loop, Database, MochiFile};
@@ -167,8 +167,19 @@ async fn handle_upload(
         expire_time
     );
 
-    if db.read().unwrap().files.contains_key(&constructed_file.get_key()) {
+    if !settings.overwrite
-        info!("Key already in DB");
+        && db.read().unwrap().files.contains_key(&constructed_file.get_key())
+    {
+        info!("Key already in DB, NOT ADDING");
+        return Ok(Json(ClientResponse {
+            status: true,
+            response: "File already exists",
+            name: constructed_file.name().clone(),
+            url: "files/".to_string() + &filename,
+            hash: hash.0.to_hex()[0..10].to_string(),
+            expires: Some(constructed_file.get_expiry()),
+            ..Default::default()
+        }))
     }
 
     // Move it to the new proper place

web/main.css

@@ -32,7 +32,7 @@ button p {
     margin: 0;
 }
 
-.button {
+button {
     display: block;
     width: fit-content;
     padding: 2px;
@@ -89,23 +89,6 @@ button.main_file_upload {
     vertical-align: center;
 }
 
-.progress_box {
-    display: flex;
-    width: 300px;
-    gap: 5px;
-    align-items: center;
-    height: 70px;
-
-    progress {
-        width: 100%;
-    }
-
-    .progress_value {
-        width: 90px;
-        margin: 0;
-    }
-}
-
 #uploadedFilesDisplay {
     text-align: left;
     min-height: 2em;
@@ -116,14 +99,21 @@ button.main_file_upload {
     overflow: clip;
     text-overflow: ellipsis;
     white-space: nowrap;
+    display: block;
 }
 
 #uploadedFilesDisplay p.status {
+    font-family: monospace;
+    font-size: 11pt;
     overflow: clip;
     text-overflow: ellipsis;
     white-space: nowrap;
     text-align: right;
-    width: 100%;
+    margin: auto 0;
+    margin-left: auto;
+    width: min-content;
+    flex-shrink: 2;
+    display: block;
 }
 
 #uploadedFilesDisplay div {
@@ -132,21 +122,24 @@ button.main_file_upload {
     gap: 10px;
     padding: 10px;
     margin-bottom: 10px;
+    justify-content: end;
 }
 
 #uploadedFilesDisplay > div > progress {
-    flex-grow: 2;
     height: 20px;
     margin: auto;
+    flex-grow: 2;
+    display: block;
 }
 
 #uploadedFilesDisplay button {
-    height: fit-content;
+    height: 30px;
-    margin: auto;
+    width: 30px;
+    margin: auto 0;
     background-color: white;
 }
 
-progress[value] {
+progress {
     --color: #84FFAE;  /* the progress color */
     --background: lightgrey; /* the background color */
 
@@ -155,22 +148,52 @@ progress[value] {
     appearance: none;
     border-radius: 5px;
     background-color: var(--background);
+    position: relative;
 }
 
-progress[value]::-moz-progress-bar {
+progress::-moz-progress-bar {
     background-color: var(--color);
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
 }
 
-progress[value]::-webkit-progress-bar {
+progress::-webkit-progress-bar {
     background-color: var(--background);
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
 }
 
-progress[value]::-webkit-progress-value {
+progress::-webkit-progress-value {
     border-radius: 5px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
     background-color: var(--color);
 }
+
+progress:not([value])::-webkit-progress-bar {
+    background-color: var(--color);
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+}
+
+progress:not([value])::-webkit-progress-value {
+    width: 20%;
+    position: absolute;
+    left: 50%;
+}
+
+progress:not([value])::-moz-progress-bar {
+    background-color: var(--color);
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
+    width: 20%;
+    animation-name: example;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-timing-function: cubic-bezier(.17,.67,.83,.67);
+}
+
+@keyframes example {
+    from {margin-left: 0%}
+    to {margin-left: 80%}
+}

web/request.js

@@ -61,10 +61,18 @@ function makeFinished(progressBar, progressText, linkRow, linkAddress, hash) {
 
     let button = linkRow.appendChild(document.createElement("button"));
     button.textContent = "📝";
+    let buttonTimeout = null;
     button.addEventListener('click', function(e) {
+        if (buttonTimeout) {
+            clearTimeout(buttonTimeout)
+        }
         navigator.clipboard.writeText(
             encodeURI("https://" + window.location.host + "/" + linkAddress)
         )
+        button.textContent = "✅";
+        buttonTimeout = setTimeout(function() {
+            button.textContent = "📝";
+        }, 500);
     })
 
     progressBar.style.display = "none";
@@ -113,10 +121,15 @@ function addNewToList(origFileName) {
 function uploadProgress(progress, progressBar, progressText, linkRow) {
     if (progress.lengthComputable) {
         const progressPercent = Math.floor((progress.loaded / progress.total) * 100);
+        if (progressPercent == 100) {
+            progressBar.removeAttribute("value");
+            progressText.textContent = "⏳";
+        } else {
             progressBar.value = progressPercent;
             progressText.textContent = progressPercent + "%";
         }
     }
+}
 
 // This is the entrypoint for everything basically
 document.addEventListener("DOMContentLoaded", function(_event){