@panoramax/web-viewer 4.0.3-develop-e6a52885 → 4.0.3-develop-85c1e9c4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3-develop-e6a52885",
+  "version": "4.0.3-develop-85c1e9c4",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -93,15 +93,15 @@
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@photo-sphere-viewer/core": "5.12.1",
-    "@photo-sphere-viewer/equirectangular-tiles-adapter": "5.12.1",
-    "@photo-sphere-viewer/gallery-plugin": "5.12.1",
-    "@photo-sphere-viewer/markers-plugin": "5.12.1",
-    "@photo-sphere-viewer/virtual-tour-plugin": "5.12.1",
+    "@photo-sphere-viewer/core": "5.13.3",
+    "@photo-sphere-viewer/equirectangular-tiles-adapter": "5.13.3",
+    "@photo-sphere-viewer/gallery-plugin": "5.13.3",
+    "@photo-sphere-viewer/markers-plugin": "5.13.3",
+    "@photo-sphere-viewer/virtual-tour-plugin": "5.13.3",
     "iconify-icon": "^3.0.0",
     "json5": "^2.2.3",
     "lit": "^3.2.1",
-    "maplibre-gl": "^5.3.0",
+    "maplibre-gl": "^5.6.0",
     "pmtiles": "^4.3.0",
     "query-selector-shadow-dom": "^1.0.1"
   },

package/src/components/core/PhotoViewer.js

@@ -14,6 +14,7 @@ import PresetManager from "../../utils/PresetsManager";
 
 export const PSV_ZOOM_DELTA = 20;
 const PSV_MOVE_DELTA = Math.PI / 6;
+export const KEYBOARD_SKIP_FOCUS_WIDGETS = ["pnx-mini", "pnx-widget-player", "pnx-widget-zoom"];
 
 
 /**
@@ -333,13 +334,17 @@ export default class PhotoViewer extends Basic {
 		const keytopsv = () => this.psv.startKeyboardControl();
 
 		// Popup
-		this.popup.addEventListener("open", () => keytonone());
-		this.popup.addEventListener("close", () => keytopsv());
+		this.popup.addEventListener("open", keytonone);
+		this.popup.addEventListener("close", keytopsv);
+		this.psv.addEventListener("click", keytopsv);
 
 		// Widgets
 		for(let cn of this.grid.childNodes) {
-			if(cn.getAttribute("slot") !== "bg") {
-				cn.addEventListener("focusin", () => keytonone());
+			if(
+				cn.getAttribute("slot") !== "bg"
+				&& !KEYBOARD_SKIP_FOCUS_WIDGETS.includes(cn.tagName.toLowerCase())
+			) {
+				cn.addEventListener("focusin", keytonone);
 				cn.addEventListener("focusout", () => {
 					if(this.popup.getAttribute("visible") === null) {
 						keytopsv();

package/src/components/core/Viewer.js

@@ -2,7 +2,7 @@
 
 import "./Viewer.css";
 import { linkMapAndPhoto, saveMapParamsToLocalStorage, getMapParamsFromLocalStorage } from "../../utils/map";
-import PhotoViewer from "./PhotoViewer";
+import PhotoViewer, {KEYBOARD_SKIP_FOCUS_WIDGETS} from "./PhotoViewer";
 import Basic from "./Basic";
 import MapMore from "../ui/MapMore";
 import { initMapKeyboardHandler } from "../../utils/map";
@@ -371,7 +371,10 @@ export default class Viewer extends PhotoViewer {
 
 		// Widgets
 		for(let cn of this.grid.childNodes) {
-			if(cn.getAttribute("slot") !== "bg") {
+			if(
+				cn.getAttribute("slot") !== "bg"
+				&& !KEYBOARD_SKIP_FOCUS_WIDGETS.includes(cn.tagName.toLowerCase())
+			) {
 				cn.addEventListener("focusin", () => keytonone());
 				cn.addEventListener("focusout", () => {
 					if(this.popup.getAttribute("visible") === null) {

package/src/components/ui/Photo.js

@@ -94,7 +94,7 @@ export default class Photo extends PSViewer {
 				resolution: parent.isWidthSmall() ? 32 : 64,
 				shouldGoFast: options.shouldGoFast,
 			}],
-			withCredentials: parent?.fetchOptions?.credentials == "include",
+			withCredentials: parent.api._getPSVWithCredentials(),
 			requestHeaders: parent?.fetchOptions?.headers,
 			panorama: BASE_PANORAMA,
 			lang: parent._t.psv,

package/src/utils/API.js

@@ -369,6 +369,22 @@ export default class API extends EventTarget {
 		}
 	}
 
+	/**
+	 * Get the withCredentials function for PhotoSphereViewer to handle fetch credentials parameter.
+	 * @memberOf Panoramax.utils.API#
+	 * @private
+	 * @returns {function} The withCredentials function
+	 */
+	_getPSVWithCredentials() {
+		const fetchOpts = this._getFetchOptions();
+		if(fetchOpts.credentials === "include") {
+			return (url) => url.startsWith(this._endpoint);
+		}
+		else {
+			return undefined;
+		}
+	}
+
 	/**
 	 * Get sequence GeoJSON representation
 	 * @memberOf Panoramax.utils.API#

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

@@ -10,6 +10,7 @@ const createParent = () => ({
 	_t: { pnx: {} },
 	api: {
 		_getFetchOptions: jest.fn(),
+		_getPSVWithCredentials: () => false,
 		getPictureMetadataUrl: (picId, seqId) => `https://geovisio.fr/api/collections/${seqId}/items/${picId}`
 	},
 });