@panoramax/web-viewer 3.2.3-develop-e277ccb9 → 3.2.3-develop-dbce84df

package/src/translations/nl.json

@@ -6,13 +6,13 @@
         "moveDown": "Naar beneden",
         "search_user": "Zoek een gebruikersnaam…",
         "moveUp": "Ga omhoog",
-        "share_rss": "RSS feed",
+        "share_rss": "RSS-feed",
         "loading_labels_serious": [
             "🗺️ Kaart aan het laden",
             "🖥️ API opvragen",
             "🖼️ Miniatuurweergaven laden",
             "🔍 EXIF metadata analyseren",
-            "🏘️ 3D rendering",
+            "🏘️ 3D-rendering",
             "📷 360° afbeelden initialiseren",
             "🟠 Kleur balancering",
             "💯 Bereken kwaliteits-score ©"
@@ -42,7 +42,7 @@
         "share_page": "Link naar deze pagina",
         "share_image": "HD afbeelding",
         "share_embed": "Embedden op uw website",
-        "share_print": "Print",
+        "share_print": "Afdrukken",
         "copy": "Kopieer",
         "copied": "Gekopieerd",
         "error": "We hebben een probleem…",
@@ -69,10 +69,102 @@
             "🚲 Fiets- en wandelpaden bijwerken",
             "🚉 Perron doorgang",
             "🛰️ Satellieten zoeken",
-            "👥 Personas opslaan"
+            "👥 Personas opslaan",
+            "🥞 Pannenkoekenhuizen localiseren",
+            "🧑‍💻 Interface debuggen",
+            "📈 Statistieken verhogen"
         ],
         "share_rss_title": "RSS-feed van nieuwe reeksen in het nu zichtbare kaartgebied",
-        "josm_live": "Schakel JOSM automatische synchronisatie in bij het laden van afbeeldingen"
+        "josm_live": "Schakel JOSM automatische synchronisatie in bij het laden van afbeeldingen",
+        "minimize_short": "Verbergen",
+        "error_psv": "Photo Sphere Viewer werd niet correct geladen",
+        "error_nopic": "Geen foto beschikbaar op de aangegeven locatie",
+        "error_api": "De fotoserver is niet beschikbaar",
+        "error_webgl": "WebGL wordt niet ondersteund door je browser",
+        "error_api_compatibility": "De fotoserver is niet compatibel met deze viewer",
+        "filter_date_1month": "1 maand",
+        "filter_date_1year": "1 jaar",
+        "filter_user": "Gebruiker",
+        "filter_user_mypics": "Mijn foto's",
+        "filter_picture": "Afbeeldingstype",
+        "picture_flat": "Klassiek",
+        "picture_360": "360°",
+        "filter_qualityscore": "Kwaliteitsscore",
+        "qualityscore_doc_2": "De score wordt getoond als een letter A/B/C/D/E (waarbij A het beste is en E het slechtse), en wordt grafisch weergegeven volgens deze schaal:",
+        "qualityscore_doc_link": "Meer weten over de Kwaliteitsscore",
+        "map_background": "Kaartachtergrond",
+        "map_background_aerial": "Satelliet",
+        "map_background_streets": "Straten",
+        "map_theme": "Kaartthema",
+        "map_theme_default": "Klassiek",
+        "map_theme_age": "Opnamedatum",
+        "map_theme_age_3": "< 1 jaar",
+        "map_theme_age_4": "< 1 maand",
+        "filter_qualityscore_help": "Klik om aan- of uit te schakelen",
+        "report_failure": "Er is een fout opgetreden bij het aanmaken van het rapport: {e}. Probleem later opnieuw.",
+        "map_theme_score": "Kwaliteitsscore",
+        "contrast": "Afbeeldingscontrast verhogen",
+        "metadata": "Metadata van de foto",
+        "metadata_camera_make": "Fabrikant",
+        "filter_date": "Datum",
+        "filter_zoom_in": "Zoom in om deze filter te zien",
+        "metadata_general_license_link": "De volledige beschrijving van de licentie bekijken",
+        "metadata_general_seqid": "Identificator van de sequentie",
+        "metadata_general_picid_link": "Ga naar de JSON-beschrijving van de foto",
+        "metadata_general_seqid_link": "Ga naar de JSON-beschrijving van de sequentie",
+        "metadata_general_author": "Auteur",
+        "error_josm": "JOSM antwoord niet, is het actief en is afstandsbediening ingeschakeld?",
+        "qualityscore_title": "Over de kwaliteitsscore",
+        "metadata_general_license": "Licentie",
+        "error_pic": "The gevraagde foto werd niet gevonden",
+        "map_theme_age_2": "< 2 jaar",
+        "metadata_general_picid": "Identificator van de foto",
+        "metadata_general_date": "Opnamedatum",
+        "map_theme_type": "Cameratype",
+        "qualityscore_doc_1": "Panoramax toont een Kwaliteitsscore voor elke foto. Dit vergemakkelijkt filtering en laat toe om foto's van hoge kwaliteit te vinden.",
+        "qualityscore_doc_3": "Hij wordt berekend op basis van de GPS-nauwkeurigheid en resolutie van de foto. Een professioneel systeem zal een A-score hebben, een 360° actiecamera een B-score, en een smartphone een C/D/E-score.",
+        "map_theme_age_1": "> 2 jaar",
+        "report_details_placeholder": "Je kan, optioneel, details over het probleem toevoegen",
+        "metadata_camera": "Apparaat",
+        "metadata_camera_model": "Model",
+        "metadata_camera_type": "Type",
+        "metadata_camera_resolution": "Resolutie",
+        "metadata_camera_focal_length": "Brandpuntsafstand",
+        "metadata_location": "Locatie",
+        "metadata_location_longitude": "Longitude",
+        "metadata_location_latitude": "Latitude",
+        "metadata_location_orientation": "Opnamerichting",
+        "metadata_location_precision": "Nauwkeurigheid van de positionering",
+        "metadata_quality": "Kwaliteitsscore",
+        "metadata_quality_help": "Meer weten over de Kwaliteitsscore",
+        "metadata_quality_score": "Globale score",
+        "metadata_quality_gps_score": "Positioneringsscore",
+        "metadata_quality_resolution_score": "Resolutiescore",
+        "metadata_quality_missing": "geen info in de afbeelding",
+        "metadata_exif": "EXIF / XMP",
+        "metadata_exif_name": "Tag",
+        "metadata_exif_value": "Waarde",
+        "report": "Foto rapporteren",
+        "report_auth": "Dit rapport zal worden verstuurd met je account \"{a}\"",
+        "report_nature_label": "Aard van het probleem",
+        "report_nature": {
+            "": "Selecteer de aard van het probleem …",
+            "blur_missing": "Het gezicht van een persoon of een nummerplaat is zichtbaar",
+            "blur_excess": "Een object dat niet vervaagd moet worden is vervaagd",
+            "inappropriate": "De foto is ongepast (ongerelateerd, naaktheid …)",
+            "privacy": "Een private weg of een privaat eigendom is zichtbaar",
+            "picture_low_quality": "De foto is van slechte kwaliteit",
+            "mislocated": "De foto is slecht gepositioneerd",
+            "copyright": "De foto schendt het auteursrecht",
+            "other": "Een ander soort probleem"
+        },
+        "report_whole_sequence": "Dit betreft de volledige sequentie",
+        "report_details": "Aanvullende details",
+        "report_email": "Je e-mail",
+        "report_email_placeholder": "Optioneel",
+        "report_submit": "Verzenden",
+        "report_wait": "Rapport verzenden …",
+        "report_success": "Het rapport werd succesvol verzonden. Het zal zo snel mogelijk behandeld worden."
     },
     "psv": {
         "twoFingers": "Gebruik twee vingers om te navigeren",
@@ -82,5 +174,13 @@
     "maplibre": {
         "GeolocateControl.FindMyLocation": "Mijn locatie zoeken",
         "GeolocateControl.LocationNotAvailable": "Locatitie niet beschikbaar"
+    },
+    "map": {
+        "loading": "Laden …",
+        "slow_loading": "De kaart laadt traag en kan er gebroken uitzien",
+        "thumbnail": "Thumbnail van de aangeduide foto",
+        "not_public": "Niet openbaar zichtbaar",
+        "map_data": "Kaartdata:",
+        "more_panoramax": "Meer weten over Panoramax"
     }
 }

package/src/utils/API.js

@@ -1,5 +1,5 @@
 import { TILES_PICTURES_ZOOM } from "./map";
-import { BASE_PANORAMA_ID } from "./utils";
+import { isNullId } from "./utils";
 
 /**
  * API contains various utility functions to communicate with Panoramax/STAC API
@@ -772,7 +772,7 @@ export default class API {
 	 * @throws {Error} If not valid
 	 */
 	static isIdValid(id) {
-		if(!id || typeof id !== "string" || id.length === 0 || id === BASE_PANORAMA_ID) {
+		if(isNullId(id)) {
 			throw new Error("id should be a valid picture unique identifier");
 		}
 		return true;

package/src/utils/InitParameters.js

@@ -306,13 +306,15 @@ export function alterPSVState(psv, params) {
 	}
 
 	// Change transitionDuration
-	if(params.transitionDuration !== undefined) {
-		psv.setTransitionDuration(params.transitionDuration);
+	let td = params.transitionDuration || params.speed;
+	if(td !== undefined) {
+		psv.setTransitionDuration(td);
 	}
 
 	// Change pictures navigation mode
-	if(["none", "pic", "any", "seq"].includes(params.picturesNavigation)) {
-		psv.setPicturesNavigation(params.picturesNavigation);
+	let nav = params.picturesNavigation || params.nav;
+	if(["none", "pic", "any", "seq"].includes(nav)) {
+		psv.setPicturesNavigation(nav);
 	}
 }
 
@@ -343,39 +345,50 @@ export function alterMapState(map, params) {
 }
 
 /**
- * Change Viewer current state based on standardized parameters.
- * @param {Viewer} viewer The Viewer component to change.
+ * Change PhotoViewer current state based on standardized parameters.
+ * @param {PhotoViewer} viewer The PhotoViewer component to change.
  * @param {object} params The parameters to apply.
  */
-export function alterViewerState(viewer, params) {
+export function alterPhotoViewerState(viewer, params) {
 	// Restore selected picture
-	if(params.picture) {
-		const picIds = params.picture.split(";"); // Handle multiple IDs coming from OSM
+	let pic = params.picture || params.pic;
+	if(pic) {
+		const picIds = pic.split(";"); // Handle multiple IDs coming from OSM
 		if(picIds.length > 1) {
 			console.warn("Multiple picture IDs passed in URL, only first one kept");
 		}
 
-		// Post-load changes
-		if(params.focus && params.focus == "meta") {
-			viewer.psv.addEventListener("picture-loaded", () => viewer._showPictureMetadata(), { once: true });
-		}
-
 		viewer.select(null, picIds[0]);
 	}
 	else {
 		viewer.select();
 	}
+}
+
+/**
+ * Change Viewer current state based on standardized parameters.
+ * @param {Viewer} viewer The Viewer component to change.
+ * @param {object} params The parameters to apply.
+ */
+export function alterViewerState(viewer, params) {
+	alterPhotoViewerState(viewer, params);
+
+	// Restore selected picture
+	let pic = params.picture || params.pic;
+	if(pic && params.focus && params.focus == "meta") {
+		viewer.psv.addEventListener("picture-loaded", () => viewer._showPictureMetadata(), { once: true });
+	}
 
 	// Change focus
 	if(params.focus === "map" && viewer?.map) {
 		viewer.setPopup(false);
 		viewer._setFocus("map", null, params.forceFocus);
 	}
-	else if(params.focus === "pic") {
+	else if(params.focus === "pic" && viewer?.mini) {
 		viewer.setPopup(false);
 		viewer._setFocus("pic", null, params.forceFocus);
 	}
-	else if(params.focus && params.focus === "meta") {
+	else if(params.focus && params.focus === "meta" && viewer?.mini) {
 		viewer._setFocus("pic", null, params.forceFocus);
 	}
 }

package/src/utils/URLHandler.js

@@ -1,6 +1,7 @@
 import {
-	alterPSVState, MAP_FILTERS_JS2URL, alterMapState, alterViewerState
+	alterPSVState, MAP_FILTERS_JS2URL, alterMapState, alterViewerState, alterPhotoViewerState
 } from "./InitParameters";
+import Viewer from "../components/core/Viewer";
 
 // List of supported parameters
 const MANAGED_PARAMETERS = [
@@ -61,9 +62,11 @@ export default class URLHandler extends EventTarget {
 			hashParts.nav = this._parent.psv.getPicturesNavigation();
 		}
 
+		if(this._parent.psv.getPictureId()) {
+			hashParts.pic = this._parent.psv.getPictureId();
+		}
 		const picMeta = this._parent.psv.getPictureMetadata();
 		if (picMeta) {
-			hashParts.pic = picMeta.id;
 			hashParts.xyz = this.currentPSVString();
 		}
 
@@ -93,7 +96,7 @@ export default class URLHandler extends EventTarget {
 				}
 			}
 		}
-		else {
+		else if(this._parent instanceof Viewer) {
 			hashParts.map = "none";
 		}
 		return hashParts;
@@ -256,7 +259,10 @@ export default class URLHandler extends EventTarget {
 	 */
 	_onURLChange() {
 		let vals = this.currentURLParams();
-		alterViewerState(this._parent, vals);
+
+		if(this._parent instanceof Viewer) { alterViewerState(this._parent, vals); }
+		else { alterPhotoViewerState(this._parent, vals); }
+		
 		alterPSVState(this._parent.psv, vals);
 		if(this._parent.map) { alterMapState(this._parent.map, vals); }
 	}
@@ -329,7 +335,7 @@ export default class URLHandler extends EventTarget {
 			if(prevUrl.search == nextUrl.search) { return; }
 
 			const prevPic = this.currentURLParams().pic || "";
-			const nextPic = this._parent?.psv?.getPictureMetadata()?.id || "";
+			const nextPic = this._parent?.psv?.getPictureId?.() || "";
 
 			const prevFocus = this.currentURLParams().focus || "";
 			const nextFocus = nextUrl.search.includes("focus=meta") ? "meta" : (nextUrl.search.includes("focus=map") ? "map" : "pic");

package/src/utils/map.js

@@ -1,7 +1,7 @@
 import LoaderImg from "../img/marker.svg";
 import { COLORS, QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_RES_360_VALUES, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_POND_RES, QUALITYSCORE_POND_GPS } from "./utils";
 import { autoDetectLocale } from "./i18n";
-import { BASE_PANORAMA_ID } from "./utils";
+import { isNullId } from "./utils";
 
 export const DEFAULT_TILES = "https://panoramax.openstreetmap.fr/pmtiles/basic.json";
 export const RASTER_LAYER_ID = "pnx-aerial";
@@ -398,7 +398,7 @@ export function switchCoefValue(expr, newCoefVal) {
 export function linkMapAndPhoto(parent) {
 	// Switched picture
 	const onPicLoad = e => {
-		if(!e.detail.picId || e.detail.picId === BASE_PANORAMA_ID) {
+		if(isNullId(e.detail.picId)) {
 			parent.map.displayPictureMarker();
 			if(parent?.isMapWide?.()) {
 				parent?.mini?.setAttribute("collapsed", "");

package/tests/components/ui/Photo.test.js

@@ -66,8 +66,8 @@ describe("getPictureMetadata", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const ph = new Photo(p, c);
-		ph._myVTour.state.currentNode = { bla: "bla" };
-		expect(ph.getPictureMetadata()).toStrictEqual({ bla: "bla" });
+		ph._myVTour.state.currentNode = { id: "1234", bla: "bla" };
+		expect(ph.getPictureMetadata()).toStrictEqual({ id: "1234", bla: "bla" });
 	});
 
 	it("nulls when no pic is selected", () => {
@@ -111,7 +111,7 @@ describe("goToNextPicture", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const ph = new Photo(p, c);
-		ph._myVTour = { state: { currentNode: { sequence: { id: "seq", nextPic: "idnext" } } } };
+		ph._myVTour = { state: { currentNode: { id: "bla", sequence: { id: "seq", nextPic: "idnext" } } } };
 		ph.goToNextPicture();
 		expect(p.select.mock.calls).toEqual([["seq", "idnext"]]);
 	});
@@ -120,7 +120,7 @@ describe("goToNextPicture", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const ph = new Photo(p, c);
-		ph._myVTour = { state: { currentNode: { sequence: {} } } };
+		ph._myVTour = { state: { currentNode: { id: "bla", sequence: {} } } };
 		expect(() => ph.goToNextPicture()).toThrow(new Error("No next picture available"));
 	});
 });
@@ -138,7 +138,7 @@ describe("goToPrevPicture", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const ph = new Photo(p, c);
-		ph._myVTour = { state: { currentNode: { sequence: { id: "seq", prevPic: "idprev" } } } };
+		ph._myVTour = { state: { currentNode: { id: "bla", sequence: { id: "seq", prevPic: "idprev" } } } };
 		ph.goToPrevPicture();
 		expect(p.select.mock.calls).toEqual([["seq", "idprev"]]);
 	});
@@ -147,7 +147,7 @@ describe("goToPrevPicture", () => {
 		const p = createParent();
 		const c = document.createElement("div");
 		const ph = new Photo(p, c);
-		ph._myVTour = { state: { currentNode: { sequence: {} } } };
+		ph._myVTour = { state: { currentNode: { id: "bla", sequence: {} } } };
 		expect(() => ph.goToPrevPicture()).toThrow(new Error("No previous picture available"));
 	});
 });

package/tests/utils/InitParameters.test.js

@@ -443,6 +443,7 @@ describe("alterViewerState", () => {
 			setPopup: jest.fn(),
 			_setFocus: jest.fn(),
 			_showPictureMetadata: jest.fn(),
+			mini: {},
 		};
 	});
 

package/tests/utils/URLHandler.test.js

@@ -31,10 +31,11 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 		};
 		const uh = new URLHandler(v);
-		expect(uh.nextURLString()).toBe("?map=none");
+		expect(uh.nextURLString()).toBe("?");
 	});
 
 	it("works with picture metadata", () => {
@@ -43,12 +44,13 @@ describe("nextURLString", () => {
 			psv: {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
-				getPictureMetadata: () => ({ "id": "cbfc3add-8173-4464-98c8-de2a43c6a50f" })
+				getPictureMetadata: () => ({}),
+				getPictureId: () => "cbfc3add-8173-4464-98c8-de2a43c6a50f",
 			},
 		};
 		const uh = new URLHandler(v);
 		uh.currentPSVString = () => "0/1/2";
-		expect(uh.nextURLString()).toBe("?map=none&pic=cbfc3add-8173-4464-98c8-de2a43c6a50f&xyz=0/1/2");
+		expect(uh.nextURLString()).toBe("?pic=cbfc3add-8173-4464-98c8-de2a43c6a50f&xyz=0/1/2");
 	});
 
 	it("works with map started + wide", () => {
@@ -58,6 +60,7 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 			map: {
 				getVisibleUsers: () => ["geovisio"],
@@ -78,7 +81,8 @@ describe("nextURLString", () => {
 			psv: {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
-				getPictureMetadata: () => ({ "id": "cbfc3add-8173-4464-98c8-de2a43c6a50f" }),
+				getPictureMetadata: () => ({}),
+				getPictureId: () => "cbfc3add-8173-4464-98c8-de2a43c6a50f",
 			},
 			map: {
 				getVisibleUsers: () => ["geovisio"],
@@ -101,6 +105,7 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 			map: {
 				getVisibleUsers: () => ["geovisio"],
@@ -129,10 +134,11 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => 250,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 		};
 		const uh = new URLHandler(v);
-		expect(uh.nextURLString()).toBe("?map=none&speed=250");
+		expect(uh.nextURLString()).toBe("?speed=250");
 	});
 
 	it("works with popup", () => {
@@ -142,6 +148,7 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => null,
 				getTransitionDuration: () => null,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 			map: {
 				getVisibleUsers: () => ["geovisio"],
@@ -163,10 +170,11 @@ describe("nextURLString", () => {
 				getPicturesNavigation: () => "pic",
 				getTransitionDuration: () => null,
 				getPictureMetadata: () => null,
+				getPictureId: () => null,
 			},
 		};
 		const uh = new URLHandler(v);
-		expect(uh.nextURLString()).toBe("?map=none&nav=pic");
+		expect(uh.nextURLString()).toBe("?nav=pic");
 	});
 });
 
@@ -312,6 +320,7 @@ describe("currentPSVString", () => {
 			addEventListener: jest.fn(),
 			psv: {
 				getXYZ: () => ({ x: 12.123456, y: 50.789456, z: 75 }),
+				getPictureId: () => null,
 			},
 		};
 		const uh = new URLHandler(v);
@@ -323,6 +332,7 @@ describe("currentPSVString", () => {
 			addEventListener: jest.fn(),
 			psv: {
 				getXYZ: () => ({ x: 12, y: 50 }),
+				getPictureId: () => null,
 			},
 		};
 		const uh = new URLHandler(v);