feat(webui): add ETA calculation to uploads

webui/package.json

@@ -73,6 +73,7 @@
 		"mitt": "^3.0.1",
 		"normalize.css": "^8.0.1",
 		"sass": "^1.66.1",
+		"simple-eta": "^3.0.2",
 		"sirv-cli": "^2.0.2",
 		"sswr": "^1.11.0",
 		"svelte-i18next": "^1.2.2",

webui/pnpm-lock.yaml

@@ -95,6 +95,9 @@ importers:
       sass:
         specifier: ^1.66.1
         version: 1.69.0
+      simple-eta:
+        specifier: ^3.0.2
+        version: 3.0.2
       sirv-cli:
         specifier: ^2.0.2
         version: 2.0.2
@@ -5100,6 +5103,9 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  simple-eta@3.0.2:
+    resolution: {integrity: sha512-+OmPgi01yHK/bRNQDoehUcV8fqs9nNJkG2DoWCnnLvj0lmowab7BH3v9776BG0y7dGEOLh0F7mfd37k+ht26Yw==}
+
   sirv-cli@2.0.2:
     resolution: {integrity: sha512-OtSJDwxsF1NWHc7ps3Sa0s+dPtP15iQNJzfKVz+MxkEo3z72mCD+yu30ct79rPr0CaV1HXSOBp+MIY5uIhHZ1A==}
     engines: {node: '>= 10'}
@@ -11641,6 +11647,8 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  simple-eta@3.0.2: {}
+
   sirv-cli@2.0.2:
     dependencies:
       console-clear: 1.1.1

webui/src/lib/components/AddModal.svelte

@@ -22,6 +22,8 @@
 	import Modal from '$lib/components/layout/Modal.svelte';
 	import Selector, { type SelectorValue } from '$lib/components/utils/Selector.svelte';
 	import { ATTR_IN } from '@upnd/upend/constants';
+	import makeEta from 'simple-eta';
+	import { formatDuration, intervalToDuration } from 'date-fns';
 
 	let files: File[] = [];
 	let URLs: string[] = [];
@@ -32,6 +34,7 @@
 
 	let progress: Record<string, number> = {};
 	let totalProgress: number | undefined;
+	let eta: ReturnType<typeof makeEta> | undefined;
 
 	let filesElement: HTMLDivElement;
 
@@ -61,6 +64,8 @@
 	async function upload() {
 		uploading = true;
 
+		eta = makeEta({ min: 0, max: 100 });
+
 		try {
 			abortController = new AbortController();
 			const addresses: string[] = [];
@@ -74,6 +79,7 @@
 					onProgress: (p) => {
 						progress[file.name] = (p.loaded / p.total) * 100;
 						totalProgress = Object.values(progress).reduce((a, b) => a + b, 0) / files.length;
+						eta?.report(totalProgress);
 					},
 					timeout: -1
 				});
@@ -200,7 +206,16 @@
 		</div>
 		{#if uploading}
 			<div class="progress">
-				<ProgressBar value={totalProgress} />
+				<ProgressBar value={totalProgress}>
+					{#key totalProgress}
+						{totalProgress ? Math.round(totalProgress) : '?'}% (ETA:
+						{eta && eta.estimate() < Infinity
+							? formatDuration(
+									intervalToDuration({ start: 0, end: Math.floor(eta.estimate() * 1000) })
+								)
+							: '?'})
+					{/key}
+				</ProgressBar>
 			</div>
 		{/if}
 	</Modal>