Improved user interaction with button

README.md

@@ -1,5 +1,6 @@
 # Confetti-Box 🎉
-A super simple file host. Inspired by [Catbox](https://catbox.moe) and [Uguu](https://uguu.se).
+A super simple file host. Inspired by [Catbox](https://catbox.moe) and 
+[Uguu](https://uguu.se).
 
 ## Features
 ### Current
@@ -7,6 +8,7 @@ A super simple file host. Inspired by [Catbox](https://catbox.moe) and [Uguu](ht
 - Customizable using a simple config file
 - Only stores one copy of a given hash on the backend
 - Chunked uploads of configurable size
+- Websocket uploads
 - Fast (enough), runs just fine on a Raspberry Pi
 - Simple API for interfacing with it programmatically
 - No database setup required, uses self-contained in memory database
@@ -18,10 +20,10 @@ A super simple file host. Inspired by [Catbox](https://catbox.moe) and [Uguu](ht
 
 ## Screenshot
 <p align="center">
-  <img width="500px" src="https://github.com/user-attachments/assets/9b12d65f-257d-448f-a7d0-43068cc3f8a3">
+  <img width="500px" src="./images/Confetti-Box Screenshot.png">
   <p align="center"><i>An example of a running instance</i></p>
 </p>
 
 ## License
-Confetti-Box is licensed under the terms of the GNU AGPL-3.0 license. Do what you want
-with it within the terms of that license.
+Confetti-Box is licensed under the terms of the GNU AGPL-3.0 license. Do what 
+you want with it within the terms of that license.

confetti-box/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "confetti_box"
-version = "0.2.1"
+version = "0.2.2"
 repository = "https://github.com/Dangoware/confetti-box"
 license = "AGPL-3.0-or-later"
 authors.workspace = true
@@ -16,7 +16,7 @@ chrono = { version = "0.4", features = ["serde"] }
 ciborium = "0.2"
 file-format = { version = "0.26", features = ["reader"] }
 log = "0.4"
-maud = { version = "0.26", features = ["rocket"] }
+maud = { version = "0.27", features = ["rocket"] }
 rand = "0.8"
 rocket = { version = "0.5", features = ["json"] }
 rocket_ws = "0.1"

confetti-box/web/main.css

@@ -55,7 +55,7 @@ hr {
 
 h1 {
     font-size: 3em;
-    font-weight: bolder;
+    font-weight: bold;
 }
 
 p {
@@ -75,6 +75,7 @@ button {
     cursor: pointer;
     margin: 5px;
     border-radius: 5px;
+    color: black;
 }
 
 button.button {
@@ -209,12 +210,15 @@ h2 code {
 .upload_failed {
     color: black;
     background-color: #ffb2ae;
+
     a:link {
         all: revert;
     }
+
     a:visited {
         all: revert;
     }
+
     a:hover {
         all: revert;
     }

confetti-box/web/request.js

@@ -17,6 +17,11 @@ async function formSubmit() {
 }
 
 async function dragDropSubmit(evt) {
+    fileButton.style.backgroundColor = "#84E5FF";
+    fileButton.style.removeProperty("transitionDuration");
+    fileButton.style.removeProperty("scale");
+    fileButton.style.removeProperty("transitionTimingFunction");
+
     const form = document.getElementById("uploadForm");
     const duration = form.elements.duration.value;
     const maxSize = form.elements.fileUpload.dataset.maxFilesize;
@@ -101,9 +106,13 @@ async function sendFiles(files, duration, maxSize) {
     let end = performance.now();
     console.log(end - start);
 
-    wakeLock.release().then(() => {
-        wakeLock = null;
-    });
+    try {
+        wakeLock.release().then(() => {
+            wakeLock = null;
+        });
+    } catch (err) {
+        console.warn("Failed to modify wake-lock!");
+    }
 }
 
 async function uploadFileChunked(file, duration, maxSize) {
@@ -209,7 +218,7 @@ async function uploadFileWebsocket(file, duration, maxSize) {
     new_uri += "/upload/websocket?name=" + file.name +"&size=" + file.size + "&duration=" + parseInt(duration);
     const socket = new WebSocket(new_uri);
 
-    const chunkSize = 10_000_000;
+    const chunkSize = 5_000_000;
     socket.addEventListener("open", (_event) => {
         for (let chunk_num = 0; chunk_num < Math.floor(file.size / chunkSize) + 1; chunk_num ++) {
             const offset = Math.floor(chunk_num * chunkSize);
@@ -359,7 +368,20 @@ document.addEventListener("DOMContentLoaded", function(_event) {
     let fileButton = document.getElementById("fileButton");
     document.addEventListener("drop", (e) => {e.preventDefault();}, false);
     document.addEventListener("dragover", (e) => {e.preventDefault()}, false);
-    fileButton.addEventListener("dragover", (e) => {e.preventDefault();}, false);
+    fileButton.addEventListener("dragover", (e) => {
+        e.preventDefault();
+        fileButton.style.backgroundColor = "#9cff7e";
+        fileButton.style.transitionDuration = "0.5s";
+        fileButton.style.scale = "1.1";
+        fileButton.style.transitionTimingFunction = "cubic-bezier(.23,-0.09,.52,1.62)";
+    }, false);
+    fileButton.addEventListener("dragleave", (e) => {
+        e.preventDefault();
+        fileButton.style.backgroundColor = "#84E5FF";
+        fileButton.style.removeProperty("transitionDuration");
+        fileButton.style.removeProperty("scale");
+        fileButton.style.removeProperty("transitionTimingFunction");
+    }, false);
     fileButton.addEventListener("drop", dragDropSubmit, false);
 
     initEverything();