From 221b572a1f224a9ef86f074ed509cbe019244f6e Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Wed, 7 May 2025 16:31:00 +0200 Subject: [PATCH] UX: add progress bar for uploading images --- package-lock.json | 8 ++++---- package.json | 2 +- .../ImageProviders/ImageUploadManager.ts | 8 ++++++-- src/Logic/ImageProviders/ImageUploader.ts | 5 ++++- src/Logic/ImageProviders/Panoramax.ts | 15 ++++++++++++-- src/UI/Base/Loading.svelte | 3 +-- src/UI/Image/UploadingImageCounter.svelte | 20 ++++++++++++++----- src/UI/ThemeViewGUI.svelte | 2 +- 8 files changed, 45 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7bd1a17dc..4a9b76155 100644 --- a/package-lock.json +++ b/package-lock.json @@ -72,7 +72,7 @@ "osm-auth": "^2.6.0", "osmtogeojson": "^3.0.0-beta.5", "pannellum": "^2.5.6", - "panoramax-js": "^0.4.12", + "panoramax-js": "^0.5.5", "panzoom": "^9.4.3", "papaparse": "^5.5.2", "pg": "^8.11.3", @@ -22012,9 +22012,9 @@ "license": "MIT" }, "node_modules/panoramax-js": { - "version": "0.4.12", - "resolved": "https://registry.npmjs.org/panoramax-js/-/panoramax-js-0.4.12.tgz", - "integrity": "sha512-BFNMGFumMmBfL7QC3IQxgWjy1nr2AWrcNcQY9n1y0UGGNLrDxv9+i6EzuZ3slgGP+qvb7tKx8mqfZaN6U/O/4g==", + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/panoramax-js/-/panoramax-js-0.5.5.tgz", + "integrity": "sha512-gIGeBFszIvtW2DhOHHQ9FtTzwkOv8MEBY2Lu9n+QxbGOlkiCbUpfA7afcv6XEbbEJ4HM8ffAVpcZgHLJFIFkvQ==", "license": "GPL-3.0-or-later", "dependencies": { "@ogcapi-js/features": "^1.1.1", diff --git a/package.json b/package.json index 76c0bb1fa..17e555b7a 100644 --- a/package.json +++ b/package.json @@ -235,7 +235,7 @@ "osm-auth": "^2.6.0", "osmtogeojson": "^3.0.0-beta.5", "pannellum": "^2.5.6", - "panoramax-js": "^0.4.12", + "panoramax-js": "^0.5.5", "panzoom": "^9.4.3", "papaparse": "^5.5.2", "pg": "^8.11.3", diff --git a/src/Logic/ImageProviders/ImageUploadManager.ts b/src/Logic/ImageProviders/ImageUploadManager.ts index ab299ef0b..14da95323 100644 --- a/src/Logic/ImageProviders/ImageUploadManager.ts +++ b/src/Logic/ImageProviders/ImageUploadManager.ts @@ -57,6 +57,9 @@ export class ImageUploadManager { extramessage?: string ) => Promise + private readonly _progressCurrentImage: UIEventSource = new UIEventSource(0) + public readonly progressCurrentImage: Store = this._progressCurrentImage + constructor( layout: ThemeConfig, uploader: ImageUploader, @@ -276,11 +279,12 @@ export class ImageUploadManager { let absoluteUrl: string try { - ;({ key, value, absoluteUrl } = await this._uploader.uploadImage( + ({ key, value, absoluteUrl } = await this._uploader.uploadImage( blob, location, author, - noblur + noblur, + this._progressCurrentImage )) } catch (e) { console.error("Could again not upload image due to", e) diff --git a/src/Logic/ImageProviders/ImageUploader.ts b/src/Logic/ImageProviders/ImageUploader.ts index d8f8028ff..3b883296d 100644 --- a/src/Logic/ImageProviders/ImageUploader.ts +++ b/src/Logic/ImageProviders/ImageUploader.ts @@ -1,3 +1,5 @@ +import { UIEventSource } from "../UIEventSource" + export interface ImageUploader { maxFileSizeInMegabytes?: number /** @@ -8,7 +10,8 @@ export interface ImageUploader { blob: File, currentGps: [number, number], author: string, - noblur: boolean + noblur: boolean, + progress?: UIEventSource ): Promise } diff --git a/src/Logic/ImageProviders/Panoramax.ts b/src/Logic/ImageProviders/Panoramax.ts index 7d6241786..96ea1fa1e 100644 --- a/src/Logic/ImageProviders/Panoramax.ts +++ b/src/Logic/ImageProviders/Panoramax.ts @@ -252,6 +252,7 @@ export class PanoramaxUploader implements ImageUploader { currentGps: [number, number], author: string, noblur: boolean = false, + progress?: UIEventSource, sequenceId?: string, datetime?: string ): Promise<{ @@ -319,15 +320,25 @@ export class PanoramaxUploader implements ImageUploader { const sequence: { id: string; "stats:items": { count: number } } = ( await p.mySequences() ).find((s) => s.id === sequenceId) - const img = await p.addImage(blob, sequence, { + const options = { lon, lat, datetime, isBlurred: noblur, + onProgress: undefined, exifOverride: { Artist: author, }, - }) + } + if (progress) { + options.onProgress = (e: ProgressEvent) => { + if (e.lengthComputable) { + const percentage = (e.loaded / e.total) * 100 + progress.set(Math.round(percentage)) + } + } + } + const img = await p.addImage(blob, sequence, options) PanoramaxImageProvider.singleton.addKnownMeta(img) return { key: "panoramax", diff --git a/src/UI/Base/Loading.svelte b/src/UI/Base/Loading.svelte index 5a787642c..9ba2309a4 100644 --- a/src/UI/Base/Loading.svelte +++ b/src/UI/Base/Loading.svelte @@ -1,5 +1,4 @@ {#if $debugging} @@ -53,11 +54,20 @@ {#if $pending - $failed > 0}
- {#if $pending - $failed === 1} - - {:else if $pending - $failed > 1} - - {/if} +
+ +
+ {#if $pending - $failed === 1} + + {:else if $pending - $failed > 1} + + {/if} + {$progress}% +
+
+
+
+
{/if} diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte index 663f155f3..03ead9eaa 100644 --- a/src/UI/ThemeViewGUI.svelte +++ b/src/UI/ThemeViewGUI.svelte @@ -18,7 +18,7 @@ import LevelSelector from "./BigComponents/LevelSelector.svelte" import type { RasterLayerPolygon } from "../Models/RasterLayers" import { AvailableRasterLayers } from "../Models/RasterLayers" - import { onDestroy, setContext } from "svelte" + import { onDestroy } from "svelte" import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte" import StateIndicator from "./BigComponents/StateIndicator.svelte" import UploadingImageCounter from "./Image/UploadingImageCounter.svelte"