web/ProcessingQueue: add estimated storage usage

web/i18n/en/queue.json

@@ -7,5 +7,6 @@
     "state.waiting": "queued",
     "state.starting": "starting...",
     "state.running.remux": "remuxing",
-    "state.running.fetch": "downloading"
+    "state.running.fetch": "downloading",
+    "estimated_storage_usage": "estimated storage usage:"
 }

web/src/components/queue/ProcessingQueue.svelte

@@ -3,7 +3,8 @@
     import { onNavigate } from "$app/navigation";
     import { onMount, type SvelteComponent } from "svelte";
 
-    import { clearFileStorage } from "$lib/storage";
+    import { formatFileSize } from "$lib/util";
+    import { clearFileStorage, getStorageQuota } from "$lib/storage";
     import { currentTasks } from "$lib/state/queen-bee/current-tasks";
     import { clearQueue, queue as readableQueue } from "$lib/state/queen-bee/queue";
 
@@ -20,6 +21,13 @@
 
     $: queue = Object.entries($readableQueue);
 
+    let quotaUsage = 0;
+
+    const updateQuota = async () => {
+        const storageInfo = await getStorageQuota();
+        quotaUsage = storageInfo?.usage || 0;
+    }
+
     const totalItemProgress = (completed: number, current: number, total: number) => {
         return (completed * 100 + current) / total
     }
@@ -41,6 +49,7 @@
 
     const popoverAction = async () => {
         expanded = !expanded;
+        if (expanded) updateQuota();
     };
 
     onNavigate(() => {
@@ -68,20 +77,31 @@
         expandStart="right"
     >
         <div id="processing-header">
-            <SectionHeading
-                title={$t("queue.title")}
-                sectionId="queue"
-                beta
-                nolink
-            />
-            <div class="header-buttons">
-                {#if queue.length}
-                    <button class="clear-button" on:click={clearQueue}>
-                        <IconX />
-                        {$t("button.clear")}
-                    </button>
-                {/if}
+            <div class="header-top">
+                <SectionHeading
+                    title={$t("queue.title")}
+                    sectionId="queue"
+                    beta
+                    nolink
+                />
+                <div class="header-buttons">
+                    {#if queue.length}
+                        <button class="clear-button" on:click={() => {
+                            clearQueue();
+                            updateQuota();
+                        }}>
+                            <IconX />
+                            {$t("button.clear")}
+                        </button>
+                    {/if}
+                </div>
             </div>
+
+            {#if quotaUsage}
+                <div class="storage-info">
+                    {$t("queue.estimated_storage_usage")} {formatFileSize(quotaUsage)}
+                </div>
+            {/if}
         </div>
         <div id="processing-list">
             {#each queue as [id, item]}
@@ -127,6 +147,13 @@
     }
 
     #processing-header {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        gap: 4px;
+    }
+
+    .header-top {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
@@ -135,6 +162,11 @@
         gap: 6px;
     }
 
+    .storage-info {
+        font-size: 12px;
+        color: var(--gray);
+    }
+
     .header-buttons {
         display: flex;
         flex-direction: row;

web/src/lib/storage.ts

@@ -64,3 +64,10 @@ export const clearFileStorage = async () => {
     }
 }
 
+export const getStorageQuota = async () => {
+    let estimate;
+    if (navigator.storage.estimate) {
+        estimate = await navigator.storage.estimate();
+    }
+    return estimate;
+}