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

src/UI/Image/AttributedImage.svelte

@@ -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}