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,6 +77,7 @@
         expandStart="right"
     >
         <div id="processing-header">
+            <div class="header-top">
                 <SectionHeading
                     title={$t("queue.title")}
                     sectionId="queue"
@@ -76,13 +86,23 @@
                 />
                 <div class="header-buttons">
                     {#if queue.length}
-                    <button class="clear-button" on:click={clearQueue}>
+                        <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]}
                 <ProcessingQueueItem
@@ -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;
+}