UX: add proper error message when loading an image fails + add detection for strict tracking protection to show an error message for that; fix #2408

This commit is contained in:
Pieter Vander Vennet 2025-06-07 01:56:15 +02:00
parent 6f66556cf3
commit 45c0f1a8d6
6 changed files with 77 additions and 13 deletions

View file

@ -23,6 +23,7 @@
import ThemeViewState from "../../Models/ThemeViewState"
import Panorama360 from "../../assets/svg/Panorama360.svelte"
import { ExternalLinkIcon } from "@rgossiaux/svelte-heroicons/solid"
import { ExclamationTriangle as TriangleOutline } from "@babeard/svelte-heroicons/outline/ExclamationTriangle"
export let image: Partial<ProvidedImage> & { id: string; url: string }
let fallbackImage: string = undefined
@ -41,21 +42,32 @@
| Store<Feature<Geometry, HotspotProperties>[]> = []
let loaded = false
let error = false
let ignoreHidden = false
let isInStrictMode = new UIEventSource(false)
function onError() {
error = true
Mapillary.isInStrictMode().addCallbackAndRunD(isStrict => {
isInStrictMode.set(isStrict)
return true // unregister
})
}
let visitUrl = image.provider?.visitUrl(image)
let showBigPreview = new UIEventSource(false)
onDestroy(
showBigPreview.addCallbackAndRun((shown) => {
state?.guistate?.setPreviewedImage(shown ? image : undefined)
})
}),
)
if (previewedImage) {
onDestroy(
previewedImage.addCallbackAndRun((previewedImage) => {
showBigPreview.set(
previewedImage !== undefined &&
(previewedImage?.id ?? previewedImage?.url) === (image.id ?? image.url)
(previewedImage?.id ?? previewedImage?.url) === (image.id ?? image.url),
)
})
}),
)
}
@ -98,14 +110,26 @@
/>
</div>
</Popup>
{#if image.status !== undefined && image.status !== "ready" && image.status !== "hidden"}
{#if error}
<div class="h-80 w-60 interactive flex flex-col justify-center items-center p-4 text-center">
<div class="alert flex items-center">
<TriangleOutline class="shrink-0 h-8 w-8" />
<Tr t={Translations.t.image.loadingFailed}/>
</div>
{#if image.provider.name.toLowerCase() === "mapillary" && $isInStrictMode}
<Tr t={Translations.t.image.mapillaryTrackingProtection}/>
{:else if $isInStrictMode}
<Tr t={Translations.t.image.strictProtectionDetected}/>
<div class="subtle text-sm mt-8">{image.url}</div>
{/if}
</div>
{:else if image.status !== undefined && image.status !== "ready" && image.status !== "hidden"}
<div class="flex h-full flex-col justify-center p-4">
<Loading>
<Tr t={Translations.t.image.processing} />
</Loading>
</div>
{:else if image.status !== "hidden"}
{:else if image.status !== "hidden" || ignoreHidden}
<div class="relative shrink-0">
<div
class={"relative w-fit"}
@ -136,9 +160,7 @@
previewedImage?.set(image)
}}
on:error={() => {
if (fallbackImage) {
imgEl.src = fallbackImage
}
onError()
}}
src={image.url}
/>
@ -169,5 +191,11 @@
</div>
</div>
{:else if image.status === "hidden"}
<div class="subtle">This image has been reported</div>
<div class="h-80 w-60 flex flex-col justify-center items-center break-words p-4 text-center">
<TriangleOutline class="w-8 h-8 subtle" />
<Tr t={Translations.t.image.reported} />
<button class="text-sm" on:click={() => ignoreHidden = true}>
<Tr t={Translations.t.image.showAnyway} />
</button>
</div>
{/if}