@panoramax/web-viewer 5.0.0-develop-7f1fc6a0 → 5.0.0-develop-4a32f7a0

package/build/esm/components/core/Basic.js

@@ -9,7 +9,7 @@ import BasicStyles from "./Basic.css" with { type: "css" };
 document.adoptedStyleSheets.push(AtkinsonStyles);
 document.adoptedStyleSheets.push(BasicStyles);
 
-const __COMMIT_HASH__ = "7f1fc6a";
+const __COMMIT_HASH__ = "4a32f7a";
 const __PACKAGE_VERSION__ = "5.0.0";
 const __PACKAGE_ISSUES_URL__ = "https://gitlab.com/panoramax/clients/web-viewer/-/work_items";
 

package/build/esm/components/core/PhotoViewer.js

@@ -298,7 +298,16 @@ export default class PhotoViewer extends Basic {
 			if(this.psv.getPictureMetadata()) { return Promise.resolve(); }
 			else {
 				return new Promise(resolve => {
-					this.psv.addEventListener("picture-loaded", resolve, {once: true});
+					const onLoadSuccess = () => {
+						this.psv.removeEventListener("picture-failed", onLoadFailure);
+						resolve();
+					};
+					const onLoadFailure = () => {
+						this.psv.removeEventListener("picture-loaded", onLoadSuccess);
+						resolve();
+					};
+					this.psv.addEventListener("picture-loaded", onLoadSuccess, {once: true});
+					this.psv.addEventListener("picture-failed", onLoadFailure, {once: true});
 				});
 			}
 		});
@@ -324,7 +333,16 @@ export default class PhotoViewer extends Basic {
 				this.loader.dismiss();
 			}
 			else {
-				this.psv.addEventListener("picture-loaded", () => this.loader.dismiss(), {once: true});
+				const onLoadSuccess = () => {
+					this.loader.dismiss();
+					this.psv.removeEventListener("picture-failed", onLoadFailure);
+				};
+				const onLoadFailure = () => {
+					this.loader.dismiss(true, this._t.pnx.error_pic);
+					this.psv.removeEventListener("picture-loaded", onLoadSuccess);
+				};
+				this.psv.addEventListener("picture-loaded", onLoadSuccess, {once: true});
+				this.psv.addEventListener("picture-failed", onLoadFailure, {once: true});
 			}
 		}
 		else {
@@ -374,6 +392,9 @@ export default class PhotoViewer extends Basic {
 			this.psv.addEventListener("sequence-playing", () => this.classList.add("pnx-playing"));
 			this.psv.addEventListener("sequence-stopped", () => this.classList.remove("pnx-playing"));
 
+			// Pic loading failures
+			this.psv.addEventListener("picture-failed", () => this.select(null, null));
+
 			// One-click focusing
 			this.psv.addEventListener("dblclick", () => clearTimeout(this._gridFocus));
 			this.psv.addEventListener("click", e => {

package/build/esm/components/core/Viewer.js

@@ -329,6 +329,10 @@ export default class Viewer extends PhotoViewer {
 		if(name === "picture") {
 			this.legend?.setAttribute?.("picture", value);
 
+			// Look for eventual GeoSearch input
+			const geosearch = document.getElementById("pnx-widget-search-bar");
+			const isNotGeosearch = (!geosearch || geosearch.value !== value);
+
 			// First pic load : show map in mini component
 			if(isNullId(old) && !isNullId(value)) {
 				this.mini.removeAttribute("collapsed");
@@ -345,6 +349,7 @@ export default class Viewer extends PhotoViewer {
 				// eslint-disable-next-line eqeqeq
 				&& this.sequence == this._initParams.getParentPostInit().sequence
 				&& !this._initParams.getParentPostInit().picture
+				&& isNotGeosearch
 			) {
 				this.mini.classList.remove("pnx-hidden");
 				this.mini.removeAttribute("collapsed");
@@ -354,13 +359,22 @@ export default class Viewer extends PhotoViewer {
 			}
 			// Select after none selected -> show pic wide
 			else {
-				this.mini.classList.remove("pnx-hidden");
-				if(isNullId(old)) {
-					this._setFocus("pic");
-					if(this.bottomDrawer?.getAttribute?.("openness") === "closed") {
-						this.bottomDrawer.setAttribute("openness", "half-opened");
+				const postLoad = () => {
+					this.mini.classList.remove("pnx-hidden");
+					if(isNullId(old)) {
+						this._setFocus("pic");
+						if(this.bottomDrawer?.getAttribute?.("openness") === "closed") {
+							this.bottomDrawer.setAttribute("openness", "half-opened");
+						}
 					}
-				}
+				};
+				this.psv.addEventListener("picture-loaded", postLoad, {once: true});
+				this.psv.addEventListener("picture-failed", () => {
+					if(isNotGeosearch) {
+						alert(this._t.pnx.error_pic_load);
+					}
+					this.psv.removeEventListener("picture-loaded", postLoad);
+				}, {once: true});
 			}
 		}
 
@@ -436,7 +450,15 @@ export default class Viewer extends PhotoViewer {
 	 */
 	getAPI() {
 		let apiToUse = this.mapStyleComposer.panoramax || this._initParams.getParentPostInit().users || (this.hasTwoAPIs() ? "metacatalog" : "default");
-		if(apiToUse === "metacatalog" && this.metacatalog === "false") { apiToUse = "default"; }
+
+		// Fallbacks & checks
+		if(
+			apiToUse.startsWith("metacatalog")
+			&& (!this.hasTwoAPIs() || this.metacatalog === "false")
+		) {
+			apiToUse = apiToUse.replace("metacatalog", "default");
+		}
+
 		return apiToUse?.startsWith("metacatalog") ? this.apiMC : this.api;
 	}
 
@@ -450,7 +472,7 @@ export default class Viewer extends PhotoViewer {
 		// Load Panoramax endpoints in map style
 		const loadDefault = [null, undefined, "", "default"].includes(myPostInitParams.users);
 		await this._lookForMetacatalog(!loadDefault);
-		this.mapStyleComposer._createPanoramaxEndpointFromAPI("default", this.api, loadDefault);
+		this.mapStyleComposer._createPanoramaxEndpointFromAPI("default", this.api, loadDefault || !this.apiMC);
 
 		this._initPSV();
 		await this._initMap();
@@ -466,10 +488,19 @@ export default class Viewer extends PhotoViewer {
 		}
 
 		if(myPostInitParams.willLoadPicture) {
-			this.psv.addEventListener("picture-loaded", () => {
+			const onLoadSuccess = () => {
 				alterViewerState(this, myPostInitParams); // Do it again for forcing focus
 				this.loader.dismiss();
-			}, {once: true});
+				this.psv.removeEventListener("picture-failed", onLoadFailure);
+			};
+			const onLoadFailure = () => {
+				alterViewerState(this, myPostInitParams); // Do it again for forcing focus
+				this.select();
+				this.psv.removeEventListener("picture-loaded", onLoadSuccess);
+				this.loader.dismiss(true, this._t.pnx.error_pic, () => this.loader.dismiss());
+			};
+			this.psv.addEventListener("picture-loaded", onLoadSuccess, {once: true});
+			this.psv.addEventListener("picture-failed", onLoadFailure, {once: true});
 		}
 		else {
 			this.map.waitForEnoughMapLoaded().then(() => {
@@ -479,11 +510,21 @@ export default class Viewer extends PhotoViewer {
 	}
 
 	/** @private */
-	async _lookForMetacatalog(switchOn) {
+	_lookForMetacatalog(switchOn) {
 		if(this.hasTwoAPIs()) {
 			this.apiMC = new API(this.metacatalog+"/api");
-			await this.apiMC.onceReady();
-			this.mapStyleComposer._createPanoramaxEndpointFromAPI("metacatalog", this.apiMC, switchOn);
+			return new Promise(resolve => {
+				this.apiMC.onceReady().then(() => {
+					this.mapStyleComposer._createPanoramaxEndpointFromAPI("metacatalog", this.apiMC, switchOn);
+					resolve();
+				}).catch(() => {
+					console.error("Metacatalog API is not available, fallback to local instance");
+					this.apiMC = null;
+					this["endpoint-to-use"] = (this["endpoint-to-use"] || "default").replace("metacatalog", "default");
+					this.metacatalog = "false";
+					resolve();
+				});
+			});
 		}
 	}
 

package/build/esm/components/ui/Map.js

@@ -404,7 +404,7 @@ export default class Map extends maplibregl.Map {
 				.setLngLat([lon, lat])
 				.setRotation(heading)
 				.addTo(this);
-			this._picMarker.picId = picId ;
+			this._picMarker.picId = picId;
 		}
 		else {
 			this._picMarker.remove();

package/build/esm/components/ui/Photo.js

@@ -95,6 +95,7 @@ const keepOnlyPSVOptions = opts => Object.fromEntries(
  * @fires Panoramax.components.ui.Photo#picture-preview-stopped
  * @fires Panoramax.components.ui.Photo#view-rotated
  * @fires Panoramax.components.ui.Photo#picture-loaded
+ * @fires Panoramax.components.ui.Photo#picture-failed
  * @fires Panoramax.components.ui.Photo#picture-tiles-loaded
  * @fires Panoramax.components.ui.Photo#transition-duration-changed
  * @fires Panoramax.components.ui.Photo#sequence-playing
@@ -210,9 +211,6 @@ export default class Photo extends PSViewer {
 
 		if(metadata.features) { metadata = metadata.features.pop(); }
 		if(!metadata || Object.keys(metadata).length === 0 || !picApiResponse.ok) {
-			if(this._parent.loader) {
-				this._parent.loader.dismiss(true, this._parent._t.pnx.error_pic);
-			}
 			throw new Error("Picture with ID " + picId + " was not found");
 		}
 
@@ -601,6 +599,18 @@ export default class Photo extends PSViewer {
 			this._picturesSequences[e.detail.picId] = e.detail.seqId;
 		}
 
+		const onLoadFail = e => {
+			/**
+			 * Event for picture load failure
+			 * @event Panoramax.components.ui.Photo#picture-failed
+			 * @type {CustomEvent}
+			 * @property {string} detail.picId The failing picture unique identifier
+			 * @property {Error} detail.error The original error
+			 */
+			const event = new CustomEvent("picture-failed", { detail: { picId: this._parent.picture, error: e } });
+			this.dispatchEvent(event);
+		};
+
 		if(e.detail.seqId && !e.detail.picId) {
 			// Call API to find first picture ID in sequence
 			this.loader.show();
@@ -611,18 +621,16 @@ export default class Photo extends PSViewer {
 						this._picturesSequences[picId] = e.detail.seqId;
 						this._parent.select(e.detail.seqId, picId);
 					}
-				}).catch(e => this.showErrorOverlay(e, this._parent._t.pnx.error_pic, true));
+				}).catch(onLoadFail);
 		}
 		else if(!e.detail.picId) {
-			this._myVTour.setCurrentNode(null);
-			this._myVTour.state.currentNode.id = null;
+			this._myVTour.state.currentNode = null;
 			this._myVTour.state.loadingNode = null;
+			this._myVTour.setCurrentNode(null);
 		}
 		else if(this.getPictureId() !== e.detail.picId) {
 			this.loader.show();
-			this._myVTour.setCurrentNode(e.detail.picId).catch(e => {
-				this.showErrorOverlay(e, this._parent._t.pnx.error_pic, true);
-			});
+			this._myVTour.setCurrentNode(e.detail.picId).catch(onLoadFail);
 		}
 	}
 

package/build/esm/components/ui/SearchBar.js

@@ -173,8 +173,10 @@ export default class SearchBar extends LitElement {
 
 	/** @private */
 	_onInputChange(e) {
-		this.value = e.target.value;
-		this._throttledSearch();
+		if(this.value !== e.target.value) {
+			this.value = e.target.value;
+			this._throttledSearch();
+		}
 	}
 
 	/** @private */

package/build/esm/components/ui/widgets/GeoSearch.js

@@ -89,14 +89,16 @@ export default class GeoSearch extends LitElement {
 			return Promise.resolve(true);
 		}
 		else if(uuidMatch) {
-			this._parent.select(null, query);
-			return Promise.resolve(true);
+			return new Promise((resolve, reject) => {
+				this._parent.psv.addEventListener("picture-failed", reject, {once: true});
+				this._parent.psv.addEventListener("picture-loaded", () => resolve(true), {once: true});
+				this._parent.select(null, query);
+			});
 		}
 		else {
 			return this._geocoderEngine({
 				query,
 				limit: 5,
-				//Bbox: this._parent.map.getBounds().toArray().map(d => d.join(",")).join(","),
 				proximity: this._parent.map.getCenter().lat+","+this._parent.map.getCenter().lng,
 			}).then(data => {
 				data = data.features.map(f => ({

package/build/esm/translations/en.json

@@ -102,6 +102,7 @@
         "error_pic": "Requested picture wasn't found",
         "error_nopic": "No picture available at given position",
         "error_api": "The pictures server is not available",
+        "error_pic_load": "The picture can't be loaded for now.\nPlease check your Internet connection. If you're connected, make sure the picture ID is valid.",
         "error_webgl": "WebGL is not supported by your browser",
         "error_josm": "JOSM doesn't respond, is it running and is remote enabled?",
         "error_api_compatibility": "The pictures server is not compatible with this viewer version",

package/build/esm/translations/fr.json

@@ -102,6 +102,7 @@
         "error_pic": "La photo demandée est introuvable",
         "error_nopic": "Aucune photo disponible autour de la localisation recherchée",
         "error_api": "Le serveur de photos n'est pas disponible",
+        "error_pic_load": "La photo n'a pas pu être chargée.\nVérifiez votre connexion Internet. Si vous êtes bien connecté, vérifiez que l'identifiant de photo est bien valide.",
         "error_webgl": "WebGL n'est pas supporté par votre navigateur",
         "error_josm": "JOSM n'a pas répondu, est-il bien lancé et la télécommande activée ?",
         "error_api_compatibility": "Le serveur de photos n'est pas compatible avec cette visionneuse",

package/build/esm/utils/URLHandler.js

@@ -1,3 +1,4 @@
+/* eslint-disable class-methods-use-this */
 import {
 	MAP_FILTERS_JS2URL, alterMapState, alterPSVState, alterPhotoViewerState, alterViewerState
 } from "./InitParameters.js";
@@ -12,7 +13,10 @@ const MANAGED_PARAMETERS = [
 
 // Events to listen on parent and PSV
 const UPDATE_PARENT_EVENTS = ["focus-changed", "pictures-navigation-changed"];
-const UPDATE_PSV_EVENTS = ["position-updated", "zoom-updated", "view-rotated", "picture-loaded", "transition-duration-changed", "annotation-focused", "annotations-unfocused"];
+const UPDATE_PSV_EVENTS = [
+	"position-updated", "zoom-updated", "view-rotated", "picture-loaded", "picture-failed",
+	"transition-duration-changed", "annotation-focused", "annotations-unfocused"
+];
 const UPDATE_MAP_EVENTS = ["moveend", "zoomend", "boxzoomend", "styledata"];
 const UPDATE_MSC_EVENTS = ["filters-changed", "theme-changed", "panoramax-changed", "basemap-changed"];
 

package/build/esm/utils/map.js

@@ -471,12 +471,12 @@ export function mapFiltersToLayersFilters(filters, hasGridStats = false, feature
 	}
 
 
-	if(mapSeqFilters.length == 0) { mapSeqFilters = null; }
+	if(mapSeqFilters.length === 0) { mapSeqFilters = null; }
 	else {
 		mapSeqFilters.unshift("all");
 	}
 
-	if(mapPicFilters.length == 0) { mapPicFilters = null; }
+	if(mapPicFilters.length === 0) { mapPicFilters = null; }
 	else {
 		mapPicFilters.unshift("all");
 		mapPicFilters = ["step", ["zoom"],
@@ -553,6 +553,7 @@ export function linkMapAndPhoto(parent) {
 	};
 	parent.psv.addEventListener("picture-loading", onPicLoad);
 	parent.psv.addEventListener("picture-loaded", onPicLoad);
+	parent.psv.addEventListener("picture-failed", onPicLoad);
 
 	// Picture view rotated
 	parent.psv.addEventListener("view-rotated", () => {
@@ -575,7 +576,7 @@ export function linkMapAndPhoto(parent) {
 	});
 
 	parent.psv.addEventListener("picture-loaded", e => {
-		if (parent.isWidthSmall() && parent._picPopup && e.detail.picId == parent._picPopup._picId) {
+		if (parent.isWidthSmall() && parent._picPopup && e.detail.picId === parent._picPopup._picId) {
 			parent._picPopup.remove();
 		}
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "5.0.0-develop-7f1fc6a0",
+  "version": "5.0.0-develop-4a32f7a0",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",