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",
|
"mitt": "^3.0.1",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"sass": "^1.66.1",
|
"sass": "^1.66.1",
|
||||||
|
"simple-eta": "^3.0.2",
|
||||||
"sirv-cli": "^2.0.2",
|
"sirv-cli": "^2.0.2",
|
||||||
"sswr": "^1.11.0",
|
"sswr": "^1.11.0",
|
||||||
"svelte-i18next": "^1.2.2",
|
"svelte-i18next": "^1.2.2",
|
||||||
|
|
|
@ -95,6 +95,9 @@ importers:
|
||||||
sass:
|
sass:
|
||||||
specifier: ^1.66.1
|
specifier: ^1.66.1
|
||||||
version: 1.69.0
|
version: 1.69.0
|
||||||
|
simple-eta:
|
||||||
|
specifier: ^3.0.2
|
||||||
|
version: 3.0.2
|
||||||
sirv-cli:
|
sirv-cli:
|
||||||
specifier: ^2.0.2
|
specifier: ^2.0.2
|
||||||
version: 2.0.2
|
version: 2.0.2
|
||||||
|
@ -5100,6 +5103,9 @@ packages:
|
||||||
resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
|
resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
|
||||||
engines: {node: '>=14'}
|
engines: {node: '>=14'}
|
||||||
|
|
||||||
|
simple-eta@3.0.2:
|
||||||
|
resolution: {integrity: sha512-+OmPgi01yHK/bRNQDoehUcV8fqs9nNJkG2DoWCnnLvj0lmowab7BH3v9776BG0y7dGEOLh0F7mfd37k+ht26Yw==}
|
||||||
|
|
||||||
sirv-cli@2.0.2:
|
sirv-cli@2.0.2:
|
||||||
resolution: {integrity: sha512-OtSJDwxsF1NWHc7ps3Sa0s+dPtP15iQNJzfKVz+MxkEo3z72mCD+yu30ct79rPr0CaV1HXSOBp+MIY5uIhHZ1A==}
|
resolution: {integrity: sha512-OtSJDwxsF1NWHc7ps3Sa0s+dPtP15iQNJzfKVz+MxkEo3z72mCD+yu30ct79rPr0CaV1HXSOBp+MIY5uIhHZ1A==}
|
||||||
engines: {node: '>= 10'}
|
engines: {node: '>= 10'}
|
||||||
|
@ -11641,6 +11647,8 @@ snapshots:
|
||||||
|
|
||||||
signal-exit@4.1.0: {}
|
signal-exit@4.1.0: {}
|
||||||
|
|
||||||
|
simple-eta@3.0.2: {}
|
||||||
|
|
||||||
sirv-cli@2.0.2:
|
sirv-cli@2.0.2:
|
||||||
dependencies:
|
dependencies:
|
||||||
console-clear: 1.1.1
|
console-clear: 1.1.1
|
||||||
|
|
|
@ -22,6 +22,8 @@
|
||||||
import Modal from '$lib/components/layout/Modal.svelte';
|
import Modal from '$lib/components/layout/Modal.svelte';
|
||||||
import Selector, { type SelectorValue } from '$lib/components/utils/Selector.svelte';
|
import Selector, { type SelectorValue } from '$lib/components/utils/Selector.svelte';
|
||||||
import { ATTR_IN } from '@upnd/upend/constants';
|
import { ATTR_IN } from '@upnd/upend/constants';
|
||||||
|
import makeEta from 'simple-eta';
|
||||||
|
import { formatDuration, intervalToDuration } from 'date-fns';
|
||||||
|
|
||||||
let files: File[] = [];
|
let files: File[] = [];
|
||||||
let URLs: string[] = [];
|
let URLs: string[] = [];
|
||||||
|
@ -32,6 +34,7 @@
|
||||||
|
|
||||||
let progress: Record<string, number> = {};
|
let progress: Record<string, number> = {};
|
||||||
let totalProgress: number | undefined;
|
let totalProgress: number | undefined;
|
||||||
|
let eta: ReturnType<typeof makeEta> | undefined;
|
||||||
|
|
||||||
let filesElement: HTMLDivElement;
|
let filesElement: HTMLDivElement;
|
||||||
|
|
||||||
|
@ -61,6 +64,8 @@
|
||||||
async function upload() {
|
async function upload() {
|
||||||
uploading = true;
|
uploading = true;
|
||||||
|
|
||||||
|
eta = makeEta({ min: 0, max: 100 });
|
||||||
|
|
||||||
try {
|
try {
|
||||||
abortController = new AbortController();
|
abortController = new AbortController();
|
||||||
const addresses: string[] = [];
|
const addresses: string[] = [];
|
||||||
|
@ -74,6 +79,7 @@
|
||||||
onProgress: (p) => {
|
onProgress: (p) => {
|
||||||
progress[file.name] = (p.loaded / p.total) * 100;
|
progress[file.name] = (p.loaded / p.total) * 100;
|
||||||
totalProgress = Object.values(progress).reduce((a, b) => a + b, 0) / files.length;
|
totalProgress = Object.values(progress).reduce((a, b) => a + b, 0) / files.length;
|
||||||
|
eta?.report(totalProgress);
|
||||||
},
|
},
|
||||||
timeout: -1
|
timeout: -1
|
||||||
});
|
});
|
||||||
|
@ -200,7 +206,16 @@
|
||||||
</div>
|
</div>
|
||||||
{#if uploading}
|
{#if uploading}
|
||||||
<div class="progress">
|
<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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
Loading…
Reference in a new issue