feat(webui): add ETA calculation to uploads
This commit is contained in:
parent
d30c675aa0
commit
feb9659dc1
3 changed files with 25 additions and 1 deletions
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue