@panoramax/web-viewer 3.2.2 → 3.2.3-develop-557df57a

package/docs/02_Usage.md

@@ -291,6 +291,12 @@ Note that all functions of [MapLibre GL JS class Map][16] are also available.
 
 Destroy any form of life in this component
 
+### waitForEnoughMapLoaded
+
+Helper to know when enough map background and Panoramax tiles are loaded for a proper display.
+
+Returns **[Promise][19]** Resolves when enough is loaded
+
 ### reloadVectorTiles
 
 Force refresh of vector tiles data
@@ -360,16 +366,16 @@ This is useful after a map theme change.
 Photo is the component showing a single picture.
 It uses Photo Sphere Viewer as a basis, and pre-configure dialog with STAC API.
 
-Note that all functions of [PhotoSphereViewer Viewer class][19] are available as well.
+Note that all functions of [PhotoSphereViewer Viewer class][20] are available as well.
 
 ### Parameters
 
 *   `parent` **[CoreView][1]** The parent view
 *   `container` **[Element][8]** The DOM element to create into
-*   `options` **[object][10]?** The viewer options. Can be any of [Photo Sphere Viewer options][20] (optional, default `{}`)
+*   `options` **[object][10]?** The viewer options. Can be any of [Photo Sphere Viewer options][21] (optional, default `{}`)
 
     *   `options.transitionDuration` **[number][15]?** The number of milliseconds the transition animation should be.
-    *   `options.shouldGoFast` **[function][21]?** Function returning a boolean to indicate if we may skip loading HD images.
+    *   `options.shouldGoFast` **[function][22]?** Function returning a boolean to indicate if we may skip loading HD images.
 
 ### getPictureMetadata
 
@@ -394,7 +400,7 @@ Displays in viewer a picture near to given coordinates
 *   `lat` **[number][15]** Latitude (WGS84)
 *   `lon` **[number][15]** Longitude (WGS84)
 
-Returns **[Promise][22]** Resolves on picture ID if picture found, otherwise rejects
+Returns **[Promise][19]** Resolves on picture ID if picture found, otherwise rejects
 
 ### getXY
 
@@ -676,7 +682,7 @@ Enable or disable JOSM live editing using [Remote][24]
 
 *   `enabled` **[boolean][14]** Set to true to enable JOSM live
 
-Returns **[Promise][22]** Resolves on JOSM live being enabled or disabled
+Returns **[Promise][19]** Resolves on JOSM live being enabled or disabled
 
 ### setFocus
 
@@ -812,13 +818,13 @@ Type: [object][10]
 
 [18]: https://maplibre.org/maplibre-style-spec/sources/#raster
 
-[19]: https://photo-sphere-viewer.js.org/api/classes/core.viewer
+[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise
 
-[20]: https://photo-sphere-viewer.js.org/guide/config.html#standard-options
+[20]: https://photo-sphere-viewer.js.org/api/classes/core.viewer
 
-[21]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[21]: https://photo-sphere-viewer.js.org/guide/config.html#standard-options
 
-[22]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise
+[22]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
 
 [23]: #CoreView
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.2",
+  "version": "3.2.3-develop-557df57a",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -252,4 +252,4 @@
       ]
     ]
   }
-}
+}

package/public/editor.html

@@ -33,10 +33,10 @@
   window.onload = () => {
     editor = new Panoramax.Editor(
       "editor",
-      "https://api.panoramax.xyz/api",
+      "https://panoramax.openstreetmap.fr/api",
       {
-        selectedSequence: "561a5056-78a4-499d-9138-26b259f0765c",
-        selectedPicture: "b9c51504-b25c-40da-bb47-e696b93233fc",
+        selectedSequence: "ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8",
+        selectedPicture:  "329af5c6-4761-4a6d-9c1e-674fd6daa8b6",
         background: "aerial",
         raster: {
           type: "raster",

package/src/Editor.js

@@ -59,14 +59,11 @@ export default class Editor extends CoreView {
 					raster: options.raster,
 					background: options.background,
 					supplementaryStyle: this._createMapStyle(),
+					zoom: 15, // Hack to avoid _initMapPosition call
 				});
 				linkMapAndPhoto(this);
 				this._loadSequence();
 				this.map.once("load", () => {
-					this.map.setPaintProperty("geovisio_editor_sequences", "line-color", this.map._getLayerColorStyle("sequences"));
-					this.map.setPaintProperty("geovisio_editor_pictures", "circle-color", this.map._getLayerColorStyle("pictures"));
-					this.map.setLayoutProperty("geovisio_editor_sequences", "visibility", "visible");
-					this.map.setLayoutProperty("geovisio_editor_pictures", "visibility", "visible");
 					if(options.raster) { this._addMapBackgroundWidget(); }
 					this._bindPicturesEvents();
 				});
@@ -153,6 +150,15 @@ export default class Editor extends CoreView {
 	 */
 	_loadSequence() {
 		return this._api.getSequenceItems(this._selectedSeqId).then(seq => {
+			// Hide loader after source load
+			this.map.once("sourcedata", () => {
+				this.map.setPaintProperty("geovisio_editor_sequences", "line-color", this.map._getLayerColorStyle("sequences"));
+				this.map.setPaintProperty("geovisio_editor_pictures", "circle-color", this.map._getLayerColorStyle("pictures"));
+				this.map.setLayoutProperty("geovisio_editor_sequences", "visibility", "visible");
+				this.map.setLayoutProperty("geovisio_editor_pictures", "visibility", "visible");
+				this.map.once("styledata", () => this._loader.dismiss());
+			});
+
 			// Create data source
 			this._sequenceData = seq.features;
 			this.map.getSource("geovisio_editor_sequences").setData({
@@ -177,40 +183,34 @@ export default class Editor extends CoreView {
 				]
 			});
 
-			const onMapLoad = () => {
-				// Select picture if any
-				if(this._selectedPicId) {
-					const pic = seq.features.find(p => p.id === this._selectedPicId);
-					if(pic) {
-						this.select(this._selectedSeqId, this._selectedPicId, true);
-						this.map.jumpTo({ center: pic.geometry.coordinates, zoom: 18 });
-					}
-					else {
-						console.log("Picture with ID", pic, "was not found");
-					}
+			// Select picture if any
+			if(this._selectedPicId) {
+				const pic = seq.features.find(p => p.id === this._selectedPicId);
+				if(pic) {
+					this.select(this._selectedSeqId, this._selectedPicId, true);
+					this.map.jumpTo({ center: pic.geometry.coordinates, zoom: 18 });
 				}
-				// Show area of sequence otherwise
 				else {
-					const bbox = [
-						...seq.features[0].geometry.coordinates,
-						...seq.features[0].geometry.coordinates
-					];
-
-					for(let i=1; i < seq.features.length; i++) {
-						const c = seq.features[i].geometry.coordinates;
-						if(c[0] < bbox[0]) { bbox[0] = c[0]; }
-						if(c[1] < bbox[1]) { bbox[1] = c[1]; }
-						if(c[0] > bbox[2]) { bbox[2] = c[0]; }
-						if(c[1] > bbox[3]) { bbox[3] = c[1]; }
-					}
-
-					this.map.fitBounds(bbox, {animate: false});
+					console.log("Picture with ID", pic, "was not found");
+				}
+			}
+			// Show area of sequence otherwise
+			else {
+				const bbox = [
+					...seq.features[0].geometry.coordinates,
+					...seq.features[0].geometry.coordinates
+				];
+
+				for(let i=1; i < seq.features.length; i++) {
+					const c = seq.features[i].geometry.coordinates;
+					if(c[0] < bbox[0]) { bbox[0] = c[0]; }
+					if(c[1] < bbox[1]) { bbox[1] = c[1]; }
+					if(c[0] > bbox[2]) { bbox[2] = c[0]; }
+					if(c[1] > bbox[3]) { bbox[3] = c[1]; }
 				}
-				this._loader.dismiss();
-			};
 
-			if(this.map.loaded()) { onMapLoad(); }
-			else { this.map.once("load", onMapLoad); }
+				this.map.fitBounds(bbox, {animate: false});
+			}
 		}).catch(e => this._loader.dismiss(e, this._t.gvs.error_api));
 	}
 

package/src/StandaloneMap.js

@@ -84,7 +84,7 @@ class StandaloneMap extends CoreView {
 		
 		this.map = new MyMap(this, this.mapContainer, this._options);
 		this.map.addControl(new NavigationControl({ showCompass: false }));
-		this.map.on("load", () => {
+		this.map.waitForEnoughMapLoaded().then(() => {
 			this.map.reloadLayersStyles();
 			this._loader.dismiss();
 		});

package/src/Viewer.js

@@ -192,8 +192,8 @@ class Viewer extends CoreView {
 		const onceStuffReady = () => {
 			this._widgets = new Widgets(this, this._options.widgets);
 			
-			// Hide mini component if small width
-			if(this.map && this.isWidthSmall()) {
+			// Hide mini component if no selected picture
+			if(this.map && !this._options.selectedPicture) {
 				this.setUnfocusedVisible(false);
 			}
 
@@ -286,7 +286,9 @@ class Viewer extends CoreView {
 		delete this._widgets;
 		this._hash.destroy();
 		delete this._hash;
-		this.map.destroy();
+		if (this.map) {
+			this.map.destroy();
+		}
 		delete this.map;
 		delete this._mapFilters;
 		this.psv.destroy();
@@ -347,8 +349,11 @@ class Viewer extends CoreView {
 			this.map._getLayerSortStyle = this._getLayerSortStyle.bind(this);
 			this.addEventListener("map:users-changed", resolve, { once: true });
 			this.container.classList.add("gvs-has-mini");
+
+			// Map double-click: unselect if focused, toggle focus if unfocused
 			this.map.on("dblclick", () => {
 				if(!this.isMapWide()) { this.setFocus("map"); }
+				else { this.select(); }
 			});
 
 			if (typeof this._options.map === "object" && this._options.map.startWide) {
@@ -1003,8 +1008,8 @@ class Viewer extends CoreView {
 			this.dispatchEvent(event);
 
 			if(this._josmListener) {
-				this.removeEventListener("picture-loading", this._josmListener);
-				this.removeEventListener("picture-loaded", this._josmListener);
+				this.removeEventListener("psv:picture-loading", this._josmListener);
+				this.removeEventListener("psv:picture-loaded", this._josmListener);
 				delete this._josmListener;
 			}
 			return Promise.resolve();

package/src/components/CoreView.js

@@ -2,7 +2,7 @@ import "./CoreView.css";
 import API from "../utils/API";
 import { getTranslations } from "../utils/I18n";
 import { DEFAULT_TILES } from "../utils/Map";
-import { isInIframe, isInternetFast } from "../utils/Utils";
+import { BASE_PANORAMA_ID, isInIframe, isInternetFast } from "../utils/Utils";
 import PACKAGE_JSON from "../../package.json";
 import Loader from "./Loader";
 
@@ -143,6 +143,7 @@ export default class CoreView extends EventTarget {
 	 * @param {boolean} [force=false] Force select even if already selected
 	 */
 	select(seqId = null, picId = null, force = false) {
+		if(picId === BASE_PANORAMA_ID) { picId = null; }
 		const prevSeqId = this._selectedSeqId || null;
 		const prevPicId = this._selectedPicId || null;
 		if(!force && prevPicId == picId && prevSeqId == seqId) { return; } // Avoid running if already selected

package/src/components/Loader.css

@@ -22,7 +22,7 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
-	gap: 40px;
+	gap: 20px;
 	align-items: center;
 	background: #37474F;
 	z-index: 9000;
@@ -53,4 +53,22 @@
 @keyframes rotating {
 	from { transform: rotate(0deg); }
 	to { transform: rotate(360deg); }
+}
+
+/* Call to action button */
+.gvs .gvs-loader .gvs-loader-cta {
+	border: none;
+	border-radius: 7px;
+	font-weight: 500;
+	font-size: 1.0em;
+	color: white;
+	background-color: #EF6C00;
+	cursor: pointer;
+	margin: 10px;
+	padding: 5px 30px;
+	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
+}
+
+.gvs .gvs-loader .gvs-loader-cta:hover {
+	background-color: #F57C00;
 }

package/src/components/Loader.js

@@ -83,7 +83,15 @@ export default class Loader {
 			this.container.children[0].src = LogoDead;
 			this.container.children[0].style.width = "200px";
 			this.container.children[0].style.animation = "unset";
-			let errHtml = `<small>${next ? this._parent._t.gvs.error_click : this._parent._t.gvs.error_retry}</small>`;
+
+			let errHtml;
+			if(next) {
+				errHtml = `<button class="gvs-loader-cta">${this._parent._t.gvs.error_click}</button>`;
+			}
+			else {
+				errHtml = `<small>${this._parent._t.gvs.error_retry}</small>`;
+			}
+
 			if(errMeaningful) { errHtml = errMeaningful + "<br />" + errHtml; }
 			this.container.children[1].innerHTML = `${this._parent._t.gvs.error}<br />${errHtml}`;
 			if(next) {

package/src/components/Map.js

@@ -110,11 +110,16 @@ export default class Map extends maplibregl.Map {
 			}
 		}, 15000);
 
-		this.on("load", async () => {
-			await this.setVisibleUsers(this._parent._options.users);
-			this.reloadLayersStyles();
-			this.resize();
-		});
+		this.waitForEnoughMapLoaded().then(async () => await this._postLoad());
+	}
+
+	/**
+	 * @private
+	 */
+	async _postLoad() {
+		this.resize();
+		await this.setVisibleUsers(this._parent._options.users);
+		this.reloadLayersStyles();
 	}
 
 	/**
@@ -132,6 +137,54 @@ export default class Map extends maplibregl.Map {
 		delete this._userLayers;
 	}
 
+	/**
+	 * Helper to know when enough map background and Panoramax tiles are loaded for a proper display.
+	 * @returns {Promise} Resolves when enough is loaded
+	 */
+	waitForEnoughMapLoaded() {
+		return new Promise((resolve) => {
+			let nbBgTiles = 0;
+			let nbFgTiles = 0;
+			let nbLoadedBgTiles = 0;
+			let nbLoadedFgTiles = 0;
+
+			const onSourceDataLoading = e => {
+				if(e.dataType === "source" && e.tile) {
+					if(e.sourceId.startsWith("geovisio")) {
+						nbFgTiles++;
+					}
+					else {
+						nbBgTiles++;
+					}
+				}
+			};
+			const onSourceData = e => {
+				if(e.dataType === "source" && e.tile) {
+					if(e.sourceId.startsWith("geovisio")) {
+						nbLoadedFgTiles++;
+						if(e.isSourceLoaded) { nbLoadedFgTiles = nbFgTiles; }
+					}
+					else {
+						nbLoadedBgTiles++;
+						if(e.isSourceLoaded) { nbLoadedBgTiles = nbBgTiles; }
+					}
+				}
+				checkEnoughLoaded();
+			};
+
+			const checkEnoughLoaded = () => {
+				if(nbLoadedBgTiles / nbBgTiles >= 0.75 && nbLoadedFgTiles / nbFgTiles >= 0.75) {
+					this.off("sourcedata", onSourceData);
+					this.off("sourcedataloading", onSourceDataLoading);
+					resolve();
+				}
+			};
+
+			this.on("sourcedataloading", onSourceDataLoading);
+			this.on("sourcedata", onSourceData);
+		});
+	}
+
 	/**
 	 * Sets map view based on returned API bbox (if no precise option given by user).
 	 * @private
@@ -148,7 +201,7 @@ export default class Map extends maplibregl.Map {
 					try {
 						bbox = new maplibregl.LngLatBounds(bbox);
 						if(this.loaded()) { this.fitBounds(bbox, { "animate": false }); }
-						else { this.on("load", () => this.fitBounds(bbox, { "animate": false })); }
+						else { this.waitForEnoughMapLoaded().then(() => this.fitBounds(bbox, { "animate": false })); }
 					}
 					catch(e) {
 						console.warn("Received invalid bbox: "+bbox);
@@ -344,20 +397,27 @@ export default class Map extends maplibregl.Map {
 		this._picMarkerPreview.remove();
 
 		// Show marker corresponding to selection
-		this._picMarker
-			.setLngLat([lon, lat])
-			.setRotation(heading)
-			.addTo(this);
+		if(lon !== undefined && lat !== undefined) {
+			this._picMarker
+				.setLngLat([lon, lat])
+				.setRotation(heading)
+				.addTo(this);
+		}
+		else {
+			this._picMarker.remove();
+		}
 		
 		// Update map style to see selected sequence
 		this.reloadLayersStyles();
 
 		// Move map to picture coordinates
-		this.flyTo({
-			center: [lon, lat],
-			zoom: this.getZoom() < TILES_PICTURES_ZOOM+2 ? TILES_PICTURES_ZOOM+2 : this.getZoom(),
-			maxDuration: 2000
-		});
+		if(lon !== undefined && lat !== undefined) {
+			this.flyTo({
+				center: [lon, lat],
+				zoom: this.getZoom() < TILES_PICTURES_ZOOM+2 ? TILES_PICTURES_ZOOM+2 : this.getZoom(),
+				maxDuration: 2000
+			});
+		}
 	}
 
 	/**

package/src/components/Photo.js

@@ -3,7 +3,7 @@ import LoaderImgBase from "../img/loader_base.jpg";
 import LogoDead from "../img/logo_dead.svg";
 import {
 	getDistance, positionToXYZ, xyzToPosition,
-	apiFeatureToPSVNode, getRelativeHeading,
+	apiFeatureToPSVNode, getRelativeHeading, BASE_PANORAMA_ID,
 } from "../utils/Utils";
 
 // Photo Sphere Viewer imports
@@ -24,6 +24,17 @@ const BASE_PANORAMA = {
 	rows: 1,
 	tileUrl: () => null,
 };
+const BASE_PANORAMA_NODE = {
+	id: BASE_PANORAMA_ID,
+	caption: "",
+	panorama: BASE_PANORAMA,
+	links: [],
+	gps: [0,0],
+	sequence: {},
+	sphereCorrection: {},
+	horizontalFov: 360,
+	properties: {},
+};
 
 export const PSV_DEFAULT_ZOOM = 30;
 export const PSV_ANIM_DURATION = 250;
@@ -118,7 +129,7 @@ export default class Photo extends PSViewer {
 	 * @returns {Promise} Resolves on PSV node metadata
 	 */
 	async _getNodeFromAPI(picId) {
-		if(!picId) { return; }
+		if(!picId || picId === BASE_PANORAMA_ID) { return BASE_PANORAMA_NODE; }
 
 		const picApiResponse = await fetch(
 			this._parent._api.getPictureMetadataUrl(picId, this._picturesSequences[picId]),
@@ -364,7 +375,7 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Event handler for node change in PSV.
-	 * Allows to send a custom "picture-loaded" event.
+	 * Allows to send a custom "psv:picture-loaded" event.
 	 * @private
 	 */
 	_onNodeChanged(e) {
@@ -376,7 +387,10 @@ export default class Photo extends PSViewer {
 		if(e.node.id) {
 			this._parent.select(e.node?.sequence?.id, e.node.id);
 			const picMeta = this.getPictureMetadata();
-			if(!picMeta) { return; }
+			if(!picMeta) {
+				this._parent.dispatchEvent(new CustomEvent("psv:picture-loaded", {detail: {}}));
+				return;
+			}
 			this._prevSequence = picMeta.sequence.id;
 
 			/**
@@ -453,6 +467,7 @@ export default class Photo extends PSViewer {
 	 * @returns {object} Picture metadata
 	 */
 	getPictureMetadata() {
+		if(this._myVTour?.state?.currentNode?.id === BASE_PANORAMA_ID) { return null; }
 		return this._myVTour.state.currentNode ? Object.assign({}, this._myVTour.state.currentNode) : null;
 	}
 

package/src/translations/br.json

@@ -0,0 +1 @@
+{}

package/src/translations/da.json

@@ -41,7 +41,7 @@
         "sequence_speed": "Afspillerens hastighed",
         "legend_license": "Licens: {l}",
         "legend_title": "Vis detaljer om billedet",
-        "error_click": "Klik for at fortsætte",
+        "error_click": "Fortsæt",
         "error": "Vi har et problem…",
         "search_address": "Søg efter en adresse, by…",
         "sequence_pause": "Sæt sekvensen på pause",
@@ -88,7 +88,7 @@
         "filter_user": "Bruger",
         "filter_user_mypics": "Mine billeder",
         "filter_picture": "Billedtype",
-        "filter_zoom_in": "Zoom ind for at gøre filtre synlige",
+        "filter_zoom_in": "Zoom ind for at se dette filter",
         "picture_flat": "Klassisk",
         "picture_360": "360°",
         "filter_qualityscore_help": "Klik for at aktivere eller deaktivere",

package/src/translations/de.json

@@ -42,7 +42,7 @@
         "show_psv": "Bildbetrachter anzeigen",
         "show_map": "Karte anzeigen",
         "search_user": "Benutzernamen suchen…",
-        "filter_zoom_in": "Hereinzoomen um Filter sichtbar zu machen",
+        "filter_zoom_in": "Hereinzoomen um diesen Filter zu sehen",
         "picture_flat": "Klassisch",
         "picture_360": "360°",
         "filter_camera_model": "Nach Kameramodell",
@@ -146,7 +146,7 @@
         "report": "Foto melden",
         "legend_title": "Zeige Bilderdetails",
         "report_wait": "Bericht senden…",
-        "error_click": "Klicken um fortzufahren",
+        "error_click": "Weiter",
         "error_retry": "Bitte später erneut versuchen",
         "metadata_camera_resolution": "Auflösung",
         "filter_user_mypics": "Meine Fotos",
@@ -165,7 +165,8 @@
         "qualityscore_doc_link": "Weitere Informationen zur Berechnung des Qualitätsfaktors findest du in unserer Dokumentation.",
         "qualityscore_doc_1": "Panoramax bietet einen Qualitätsfaktor für jedes Bild. Es ermöglicht eine einfache Kartenfilterung und eine umfassende Anzeige der Verfügbarkeit hochwertiger Bilder.",
         "qualityscore_doc_2": "Die Note wird den Benutzern als A/B/C/D/E-Bewertung angezeigt (A ist die beste, E die schlechteste) und anhand dieser Skala grafisch dargestellt:",
-        "qualityscore_doc_3": "Die Berechnung erfolgt auf der Grundlage der GPS-Genauigkeit und der Bildauflösung. Ein professionelles System wird mit A bewertet, eine 360-Grad-Action-Kamera mit B und ein Smartphone mit C/D/E."
+        "qualityscore_doc_3": "Die Berechnung erfolgt auf der Grundlage der GPS-Genauigkeit und der Bildauflösung. Ein professionelles System wird mit A bewertet, eine 360-Grad-Action-Kamera mit B und ein Smartphone mit C/D/E.",
+        "minimize_short": "Verbergen"
     },
     "psv": {
         "twoFingers": "Nutzen sie zwei Finger zum navigieren",

package/src/translations/en.json

@@ -42,7 +42,7 @@
         "copy": "Copy",
         "copied": "Copied",
         "error": "We have a problem…",
-        "error_click": "Click to continue",
+        "error_click": "Continue",
         "error_retry": "Please retry later",
         "sequence_next": "Next picture in sequence",
         "sequence_play": "Play along this sequence",

package/src/translations/eo.json

@@ -27,7 +27,7 @@
         "copy": "Kopii",
         "copied": "Kopiita",
         "error": "Ni havas problemon…",
-        "error_click": "Alkliku por kontinui",
+        "error_click": "Kontinui",
         "error_retry": "Bonvolu reprovi poste",
         "search_address": "Serĉi adreson, urbon…",
         "filters": "Filtriloj",
@@ -124,7 +124,7 @@
         "contrast": "Pliigi bildkontraston",
         "metadata_general_picid": "Fotoidentigilo",
         "filter_picture": "Bilda tipo",
-        "filter_zoom_in": "Zomu por vidi pli da filtriloj",
+        "filter_zoom_in": "Zomu por vidi tiu filtrilo",
         "map_background": "Bazmapo",
         "map_background_aerial": "Aera",
         "map_background_streets": "Stratoj",
@@ -161,7 +161,13 @@
         "report_success": "La raporto estis sukcese sendita. Ĝi estos reviziita baldaŭ.",
         "report_details_placeholder": "Opcie, vi povas aldoni detalojn pri la problemo",
         "report_email_placeholder": "Opcie",
-        "report_failure": "Eraro okazis dum kreo de la raporto: {e}. Bonvolu provi denove poste."
+        "report_failure": "Eraro okazis dum kreo de la raporto: {e}. Bonvolu provi denove poste.",
+        "qualityscore_doc_3": "Ĝi estas kalkulita surbaze de GPS-precizeco kaj bildrezolucio. Profesiaj sistemoj havos A-poentaron, 360°-akcifotilo havos B-poentaron, kaj poŝtelefono havos C/D/E-poentaron.",
+        "qualityscore_title": "Pri la kvalita poentaro",
+        "qualityscore_doc_1": "Panoramax ofertas Kvalitan Poentaron por ĉiu bildo. Ĝi ebligas facilan mapfiltradon kaj ampleksan vidigon de la havebleco de altkvalitaj bildoj.",
+        "qualityscore_doc_link": "Pli da detaloj pri la kalkulo de la Kvalita Poentaro estas disponeblaj en nia dokumentado.",
+        "minimize_short": "Maski",
+        "qualityscore_doc_2": "La poentaro estas montrita al uzantoj kiel litero A/B/C/D/E (A estas la plej bona, E la plej malbona) kaj grafike prezentita per ĉi tiu skalo:"
     },
     "maplibre": {
         "GeolocateControl.FindMyLocation": "Trovi mian pozicion",

package/src/translations/es.json

@@ -95,7 +95,7 @@
         "sequence_play": "Reproducir esta secuencia",
         "sequence_pause": "Pausar la secuencia",
         "sequence_prev": "Imagen anterior de la secuencia",
-        "error_click": "Haz click para continuar",
+        "error_click": "Continuar",
         "error_retry": "Por favor, inténtalo más tarde",
         "error_psv": "El visor de fotos esféricas no se carga correctamente",
         "error_pic": "No se encuentra la imagen que queríamos",

package/src/translations/fr.json

@@ -42,7 +42,7 @@
         "copy": "Copier",
         "copied": "Copié",
         "error": "On a un problème…",
-        "error_click": "Cliquez pour continuer",
+        "error_click": "Continuer",
         "error_retry": "Merci de réessayer plus tard",
         "sequence_next": "Photo suivante dans la séquence",
         "sequence_play": "Parcourir cette séquence",

package/src/translations/it.json

@@ -26,7 +26,7 @@
         "copy": "Copia",
         "copied": "Copiato",
         "error": "Abbiamo un problema…",
-        "error_click": "Clicca per continuare",
+        "error_click": "Continuare",
         "error_retry": "Riprovare più tardi",
         "sequence_play": "Riproduci questa sequenza",
         "sequence_pause": "Pausa la sequenza",
@@ -76,7 +76,7 @@
         "filter_date_1year": "1 anno",
         "filter_user_mypics": "Le mie foto",
         "filter_picture": "Tipo di foto",
-        "filter_zoom_in": "Ingrandisci per rendere visibili i filtri",
+        "filter_zoom_in": "Ingrandisci per vedere questo filtro",
         "picture_flat": "Classica",
         "picture_360": "360°",
         "filter_qualityscore_help": "Clicca per abilitare o disabilitare",
@@ -156,7 +156,13 @@
         "metadata_exif_value": "Valore",
         "report": "Segnala foto",
         "report_details_placeholder": "Facoltativo, puoi aggiungere dei dettagli sul problema e sul perché lo ritieni rilevante",
-        "report_success": "La segnalazione è stata inviata correttamente. Non appena possibile verrà esaminata."
+        "report_success": "La segnalazione è stata inviata correttamente. Non appena possibile verrà esaminata.",
+        "minimize_short": "Nascondi",
+        "qualityscore_title": "Informazioni sul punteggio di qualità",
+        "qualityscore_doc_1": "Panoramax propone un Punteggio della qualità per ogni foto. Ciò permette di filtrare facilmente la mappa e mostrare le foto di alta qualità disponibili.",
+        "qualityscore_doc_2": "Il voto è mostrato agli utenti con un valore tipo A/B/C/D/E (A è il voto migliore, E il peggiore) e graficamente viene mostrato con la seguente scala:",
+        "qualityscore_doc_link": "Nella nostra documentazione sono presenti maggiori dettagli sul calcolo del Punteggio della qualità.",
+        "qualityscore_doc_3": "Esso è calcolato basandosi sulla precisione del GPS e sulla risoluzione della foto. Un sistema professionale avrà un punteggio A, un action camera a 360° avrà un punteggio B e uno smartphone verrà classificato come C, D o E."
     },
     "psv": {
         "loadError": "Impossibile caricare l’immagine panoramica",