forked from MapComplete/MapComplete
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:
parent
6f66556cf3
commit
45c0f1a8d6
6 changed files with 77 additions and 13 deletions
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue