@panoramax/web-viewer 3.2.3-develop-7e5ca4d2 → 3.2.3-develop-587a6b56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.3-develop-7e5ca4d2",
+  "version": "3.2.3-develop-587a6b56",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/Basic.js

@@ -60,8 +60,8 @@ export default class Basic extends LitElement {
 		this.mapstyle = this.getAttribute("mapstyle") || DEFAULT_TILES;
 		this.lang = this.getAttribute("lang") || null;
 		this.endpoint = this.getAttribute("endpoint") || null; // No default
-		this.picture = null;
-		this.sequence = null;
+		this.picture = this.getAttribute("picture") || null;
+		this.sequence = this.getAttribute("sequence") || null;
 
 		// Display version in logs
 		console.info(`📷 Panoramax ${this.getClassName()} - Version ${PACKAGE_JSON.version} (${__COMMIT_HASH__})

package/src/components/menus/PictureMetadata.js

@@ -127,8 +127,18 @@ export default class PictureMetadata extends LitElement {
 			this._meta?.caption?.date && {
 				title: this._parent?._t.pnx.metadata_general_date,
 				content: html`
-					<strong>${new Intl.DateTimeFormat(undefined, {dateStyle: "short"}).format(this._meta.caption.date)}</strong>
-					<br />${new Intl.DateTimeFormat(undefined, {hour: "numeric", minute: "numeric", second: "numeric", fractionalSecondDigits: 3, timeZoneName: "longOffset"}).format(this._meta.caption.date)}
+					<strong>${new Intl.DateTimeFormat(undefined, {
+						timeZone: this._meta.caption.tz,
+						dateStyle: "short"
+					}).format(this._meta.caption.date)}</strong>
+					<br />${new Intl.DateTimeFormat(undefined, {
+						timeZone: this._meta.caption.tz,
+						hour: "numeric",
+						minute: "numeric",
+						second: "numeric",
+						fractionalSecondDigits: 3,
+						timeZoneName: "longOffset"
+					}).format(this._meta.caption.date)}
 				`
 			}
 		];
@@ -216,8 +226,8 @@ export default class PictureMetadata extends LitElement {
 			this._meta?.caption?.date && {
 				title: this._parent?._t.pnx.metadata_general_date,
 				content: html`
-					<strong>${new Intl.DateTimeFormat(undefined, {dateStyle: "long"}).format(this._meta.caption.date)}</strong>
-					<br />${new Intl.DateTimeFormat(undefined, {hour: "numeric",minute:"numeric"}).format(this._meta.caption.date)}
+					<strong>${new Intl.DateTimeFormat(undefined, {timeZone: this._meta.caption.tz, dateStyle: "long"}).format(this._meta.caption.date)}</strong>
+					<br />${new Intl.DateTimeFormat(undefined, {timeZone: this._meta.caption.tz, hour: "numeric",minute:"numeric"}).format(this._meta.caption.date)}
 				`
 			},
 			// Camera

package/src/utils/InitParameters.js

@@ -358,7 +358,7 @@ export function alterPhotoViewerState(viewer, params) {
 			console.warn("Multiple picture IDs passed in URL, only first one kept");
 		}
 
-		viewer.select(null, picIds[0]);
+		viewer.select(null, picIds[0], true);
 	}
 	else {
 		viewer.select();

package/src/utils/picture.js

@@ -235,6 +235,14 @@ export function getNodeCaption(metadata, t) {
 	// Timestamp
 	if(metadata?.properties?.datetimetz) {
 		caption.date = new Date(metadata.properties.datetimetz);
+		const timeZoneMatch = metadata.properties.datetimetz.match(/([+-]\d{2}):(\d{2})$|Z$/);
+		if (timeZoneMatch) {
+			if (timeZoneMatch[0] === "Z") {
+				caption.tz = "UTC";
+			} else {
+				caption.tz = timeZoneMatch[0];
+			}
+		}
 	}
 	else if(metadata?.properties?.datetime) {
 		caption.date = new Date(metadata.properties.datetime);

package/tests/utils/InitParameters.test.js

@@ -451,7 +451,7 @@ describe("alterViewerState", () => {
 	it("should select the first picture ID when picture param is provided", () => {
 		const params = { picture: "pic1;pic2" };
 		alterViewerState(viewer, params);
-		expect(viewer.select).toHaveBeenCalledWith(null, "pic1");
+		expect(viewer.select).toHaveBeenCalledWith(null, "pic1", true);
 		expect(console.warn).toHaveBeenCalledWith("Multiple picture IDs passed in URL, only first one kept");
 	});
 
@@ -492,7 +492,7 @@ describe("alterViewerState", () => {
 		const params = { picture: "pic1", focus: "map", forceFocus: true };
 		viewer.map = {};
 		alterViewerState(viewer, params);
-		expect(viewer.select).toHaveBeenCalledWith(null, "pic1");
+		expect(viewer.select).toHaveBeenCalledWith(null, "pic1", true);
 		expect(viewer.setPopup).toHaveBeenCalledWith(false);
 		expect(viewer._setFocus).toHaveBeenCalledWith("map", null, true);
 	});

package/tests/utils/__snapshots__/picture.test.js.snap

@@ -8,6 +8,7 @@ Object {
     "producer": Array [
       "Hopen111",
     ],
+    "tz": "+00:00",
   },
   "gps": Array [
     -92.70188245,
@@ -297,6 +298,7 @@ Object {
   "date": Object {
     "toLocaleDateString": [Function],
   },
+  "tz": "-03:00",
 }
 `;