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/Logic/ImageProviders/Mapillary.ts

@@ -6,6 +6,7 @@ import Constants from "../../Models/Constants"
 import SvelteUIElement from "../../UI/Base/SvelteUIElement"
 import MapillaryIcon from "./MapillaryIcon.svelte"
 import { Feature, Point } from "geojson"
+import { Store, UIEventSource } from "../UIEventSource"
 
 export class Mapillary extends ImageProvider {
     public static readonly singleton = new Mapillary()
@@ -257,4 +258,34 @@ export class Mapillary extends ImageProvider {
         }
         return Mapillary.createLink(location, 17, image.id)
     }
+
+
+    /**
+     * Returns true if we are in firefox strict mode (or if we are offline)
+     * @private
+     */
+    private static async checkStrictMode(): Promise<boolean> {
+        try {
+            const result = await fetch("https://scontent-bru2-1.xx.fbcdn.net/m1/v/t6/Xn8-ISUUYQyBD9FyACzPFRGZnBJRqIFmnQ_yd7FU6vxFYwD21fvAcZwDQoMzsScxcQyCWeBviKpWO4nX8yf--neJDvVjC4JlQtfBYb6TrpXQTniyafSFeZeePT_NVx3H6gMjceEvXHyvBqOOcCB_xQ?stp=c2048.2048.2000.988a_s1000x1000&_nc_gid=E2oHnrAtHutVvjaIm9qDLg&_nc_oc=AdkcScR9HuKt1X_K5-GrUeR5Paj8d7MsNFFYEBSmgc0IiBey_wS3RiNJpflWIKaQzNE&ccb=10-5&oh=00_AfNJ1Ki1IeGdUMxdFUc3ZX9VYIVFxVfXZ9MUATU3vj_RJw&oe=686AF002&_nc_sid=201bca")
+            console.log("Not blocked, got a forbidden", result.status)
+            return false
+        } catch (e) {
+            console.log("Mapillary blocked - probably a scriptblocker")
+            return true
+        }
+    }
+
+    private static _isInStrictMode: UIEventSource<boolean> = undefined
+
+    /**
+     * Creates a store which contains true if strict tracking protection is probably enabled.
+     * This will attempt to fetch a bit of content from mapillary - as that is probably the main culprit
+     * Loads lazy, so will only attempt to fetch the _first time_ this method is called
+     */
+    public static isInStrictMode(): Store<boolean> {
+        if (this._isInStrictMode === undefined) {
+            this._isInStrictMode = UIEventSource.FromPromise(this.checkStrictMode())
+        }
+        return this._isInStrictMode
+    }
 }