From 1e6b1cb20163d21f075b02c19739e29ba9a714ea Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sat, 25 Jan 2025 02:06:50 +0600
Subject: [PATCH] web/ProcessingQueueItem: format file size to be readable

---
 .../components/queue/ProcessingQueueItem.svelte    | 10 ++++++----
 web/src/lib/util.ts                                | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 web/src/lib/util.ts

diff --git a/web/src/components/queue/ProcessingQueueItem.svelte b/web/src/components/queue/ProcessingQueueItem.svelte
index ce4ac82a..7a6095fe 100644
--- a/web/src/components/queue/ProcessingQueueItem.svelte
+++ b/web/src/components/queue/ProcessingQueueItem.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { formatFileSize } from "$lib/util";
     import { downloadFile } from "$lib/download";
     import { removeItem } from "$lib/state/queen-bee/queue";
 
@@ -27,6 +28,7 @@
     $: state = info.state;
 
     $: progress = runningWorker?.progress;
+    $: size = formatFileSize(runningWorker?.progress?.size);
 
     const download = (file: File) =>
         downloadFile({
@@ -58,12 +60,12 @@
         {/if}
         <div class="file-status">
             {#if info.state === "done"}
-                done: {info.resultFile?.size} bytes
+                done: {formatFileSize(info.resultFile?.size)}
             {:else if info.state === "running"}
                 {#if progress && progress.percentage}
-                    processing: {Math.ceil(progress.percentage)}%, {progress.size} bytes
-                {:else if progress && progress.size}
-                    processing: {progress.size}
+                    processing: {Math.ceil(progress.percentage)}%, {size}
+                {:else if progress && size}
+                    processing: {size}
                 {:else}
                     processing...
                 {/if}
diff --git a/web/src/lib/util.ts b/web/src/lib/util.ts
new file mode 100644
index 00000000..c590f22e
--- /dev/null
+++ b/web/src/lib/util.ts
@@ -0,0 +1,14 @@
+export const formatFileSize = (size: number | undefined) => {
+    size ||= 0;
+
+    // gigabyte, megabyte, kilobyte, byte
+    const units = ['G', 'M', 'K', ''];
+    while (size >= 1024 && units.length > 1) {
+        size /= 1024;
+        units.pop();
+    }
+
+    const roundedSize = parseFloat(size.toFixed(2));
+    const unit = units[units.length - 1] + "B";
+    return `${roundedSize} ${unit}`;
+}