@panoramax/web-viewer 3.2.2-develop-19a0de46 → 3.2.2-develop-ef6bf81f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.2-develop-19a0de46",
+  "version": "3.2.2-develop-ef6bf81f",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

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/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/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",

package/src/viewer/URLHash.js

@@ -277,6 +277,7 @@ export default class URLHash extends EventTarget {
 
 		// Change focus
 		if(vals.focus && ["map", "pic"].includes(vals.focus)) {
+			this._viewer.setPopup(false);
 			this._viewer.setFocus(vals.focus);
 		}
 		if(vals.focus && vals.focus == "meta") {
@@ -434,11 +435,18 @@ export default class URLHash extends EventTarget {
 			const prevPic = this._getCurrentHash().pic || "";
 			const nextPic = this._viewer?.psv?.getPictureMetadata()?.id || "";
 
+			const prevFocus = this._getCurrentHash().focus || "";
+			const nextFocus = nextUrl.hash.includes("focus=meta") ? "meta" : (nextUrl.hash.includes("focus=map") ? "map" : "pic");
+
 			try {
 				// If different pic, add entry in browser history
 				if(prevPic != nextPic) {
 					window.history.pushState(window.history.state, null, nextUrl.href);
 				}
+				// If metadata popup is open, come back to pic/map
+				else if(prevFocus != nextFocus && nextFocus == "meta") {
+					window.history.pushState(window.history.state, null, nextUrl.href);
+				}
 				// If same pic, just update viewer params
 				else {
 					window.history.replaceState(window.history.state, null, nextUrl.href);

package/tests/viewer/URLHash.test.js

@@ -319,6 +319,7 @@ describe("_onHashChange", () => {
 			select: jest.fn(),
 			setFocus: jest.fn(),
 			setFilters: jest.fn(),
+			setPopup: jest.fn(),
 		};
 		const uh = new URLHash(v);
 		uh._getCurrentHash = () => ({
@@ -383,6 +384,7 @@ describe("_onHashChange", () => {
 			select: jest.fn(),
 			setFocus: jest.fn(),
 			setFilters: jest.fn(),
+			setPopup: jest.fn(),
 		};
 		const uh = new URLHash(v);
 		uh._getCurrentHash = () => ({
@@ -414,6 +416,7 @@ describe("_onHashChange", () => {
 			select: jest.fn(),
 			setFocus: jest.fn(),
 			setFilters: jest.fn(),
+			setPopup: jest.fn(),
 		};
 		const uh = new URLHash(v);
 		uh._getCurrentHash = () => ({