@panoramax/web-viewer 3.2.3 → 4.0.0-develop-39167b4d

package/src/components/{Photo.js → ui/Photo.js}

@@ -1,10 +1,11 @@
 import "./Photo.css";
-import LoaderImgBase from "../img/loader_base.jpg";
-import LogoDead from "../img/logo_dead.svg";
+import LoaderImgBase from "../../img/loader_base.jpg";
+import LogoDead from "../../img/logo_dead.svg";
 import {
 	getDistance, positionToXYZ, xyzToPosition,
-	apiFeatureToPSVNode, getRelativeHeading, BASE_PANORAMA_ID,
-} from "../utils/Utils";
+	getRelativeHeading, BASE_PANORAMA_ID, isNullId,
+} from "../../utils/utils";
+import { apiFeatureToPSVNode } from "../../utils/picture";
 
 // Photo Sphere Viewer imports
 import "@photo-sphere-viewer/core/index.css";
@@ -13,7 +14,7 @@ import "@photo-sphere-viewer/gallery-plugin/index.css";
 import "@photo-sphere-viewer/markers-plugin/index.css";
 import { Viewer as PSViewer } from "@photo-sphere-viewer/core";
 import { VirtualTourPlugin } from "@photo-sphere-viewer/virtual-tour-plugin";
-import PhotoAdapter from "../utils/PhotoAdapter";
+import PhotoAdapter from "../../utils/PhotoAdapter";
 
 
 // Default panorama (logo)
@@ -36,23 +37,48 @@ const BASE_PANORAMA_NODE = {
 	properties: {},
 };
 
-export const PSV_DEFAULT_ZOOM = 30;
+export const PSV_DEFAULT_ZOOM = 30; // eslint-disable-line import/no-unused-modules
 export const PSV_ANIM_DURATION = 250;
 export const PIC_MAX_STAY_DURATION = 3000;
 
 PSViewer.useNewAnglesOrder = true;
 
+/**
+ * Triggered once when the panorama image has been loaded and the viewer is ready to perform the first render.
+ * @see {@link https://photo-sphere-viewer.js.org/guide/events.html#ready|Photo Sphere Viewer documentation}
+ * @event Panoramax.components.ui.Photo#ready
+ * @memberof Panoramax.components.ui.Photo
+ * @type {Event}
+ */
+
 /**
  * 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](https://photo-sphere-viewer.js.org/api/classes/core.viewer) are available as well.
  * 
- * @param {CoreView} parent The parent view
+ * @class Panoramax.components.ui.Photo
+ * @extends [photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)
+ * @param {Panoramax.components.core.basic} parent The parent view
  * @param {Element} container The DOM element to create into
  * @param {object} [options] The viewer options. Can be any of [Photo Sphere Viewer options](https://photo-sphere-viewer.js.org/guide/config.html#standard-options)
  * @param {number} [options.transitionDuration] The number of milliseconds the transition animation should be.
+ * @param {number[]} [options.position] Initial geographical coordinates (as [latitude, longitude]) to find picture nearby. Only used if no picture ID is set.
  * @param {function} [options.shouldGoFast] Function returning a boolean to indicate if we may skip loading HD images.
+ * @param {string} [options.picturesNavigation=any] The allowed pictures navigation ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture)
+ * @fires Panoramax.components.ui.Photo#picture-loading
+ * @fires Panoramax.components.ui.Photo#picture-preview-started
+ * @fires Panoramax.components.ui.Photo#picture-preview-stopped
+ * @fires Panoramax.components.ui.Photo#view-rotated
+ * @fires Panoramax.components.ui.Photo#picture-loaded
+ * @fires Panoramax.components.ui.Photo#picture-tiles-loaded
+ * @fires Panoramax.components.ui.Photo#transition-duration-changed
+ * @fires Panoramax.components.ui.Photo#sequence-playing
+ * @fires Panoramax.components.ui.Photo#sequence-stopped
+ * @fires Panoramax.components.ui.Photo#pictures-navigation-changed
+ * @fires Panoramax.components.ui.Photo#ready
+ * @example
+ * const psv = new Panoramax.components.ui.Photo(viewer, psvNode, {transitionDuration: 500})
  */
 export default class Photo extends PSViewer {
 	constructor(parent, container, options = {}) {
@@ -64,8 +90,8 @@ export default class Photo extends PSViewer {
 				resolution: parent.isWidthSmall() ? 32 : 64,
 				shouldGoFast: options.shouldGoFast,
 			}],
-			withCredentials: parent._options?.fetchOptions?.credentials == "include",
-			requestHeaders: parent._options?.fetchOptions?.headers,
+			withCredentials: parent?.fetchOptions?.credentials == "include",
+			requestHeaders: parent?.fetchOptions?.headers,
 			panorama: BASE_PANORAMA,
 			lang: parent._t.psv,
 			minFov: 5,
@@ -91,7 +117,8 @@ export default class Photo extends PSViewer {
 		});
 
 		this._parent = parent;
-		container.classList.add("gvs-psv");
+		this._options = options;
+		container.classList.add("pnx-psv");
 		this._shouldGoFast = options?.shouldGoFast || (() => false);
 		this._transitionDuration = options?.transitionDuration || PSV_ANIM_DURATION;
 		this._myVTour = this.getPlugin(VirtualTourPlugin);
@@ -99,6 +126,8 @@ export default class Photo extends PSViewer {
 		this._myVTour.config.transitionOptions = this._psvNodeTransition.bind(this);
 		this._clearArrows = this._myVTour.arrowsRenderer.clear.bind(this._myVTour.arrowsRenderer);
 		this._myVTour.arrowsRenderer.clear = () => {};
+		this._sequencePlaying = false;
+		this._picturesNavigation = this._options.picturesNavigation || "any";
 
 		// Cache to find sequence ID for a single picture
 		this._picturesSequences = {};
@@ -119,6 +148,11 @@ export default class Photo extends PSViewer {
 		this.loader.thickness = 10;
 		this.loader.canvas.setAttribute("viewBox", "0 0 150 150");
 		this.loader.__updateContent();
+
+		// Handle initial parameters
+		if(this._options.position && !this._parent.picture) {
+			this.goToPosition(...this._options.position);
+		}
 	}
 
 	/**
@@ -127,20 +161,21 @@ export default class Photo extends PSViewer {
 	 * @private
 	 * @param {string} picId The picture UUID
 	 * @returns {Promise} Resolves on PSV node metadata
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	async _getNodeFromAPI(picId) {
-		if(!picId || picId === BASE_PANORAMA_ID) { return BASE_PANORAMA_NODE; }
+		if(isNullId(picId)) { return BASE_PANORAMA_NODE; }
 
 		const picApiResponse = await fetch(
-			this._parent._api.getPictureMetadataUrl(picId, this._picturesSequences[picId]),
-			this._parent._api._getFetchOptions()
+			this._parent.api.getPictureMetadataUrl(picId, this._picturesSequences[picId]),
+			this._parent.api._getFetchOptions()
 		);
 		let metadata = await picApiResponse.json();
 
 		if(metadata.features) { metadata = metadata.features.pop(); }
 		if(!metadata || Object.keys(metadata).length === 0 || !picApiResponse.ok) {
-			if(this._parent._loader) {
-				this._parent._loader.dismiss(true, this._parent._t.gvs.error_pic);
+			if(this._parent.loader) {
+				this._parent.loader.dismiss(true, this._parent._t.pnx.error_pic);
 			}
 			throw new Error("Picture with ID " + picId + " was not found");
 		}
@@ -150,7 +185,7 @@ export default class Photo extends PSViewer {
 			metadata,
 			this._parent._t,
 			this._parent._isInternetFast,
-			this._parent._picturesNavFilter?.bind(this._parent)
+			this._picturesNavFilter.bind(this)
 		);
 		if(node?.sequence?.prevPic) { this._picturesSequences[node?.sequence?.prevPic] = metadata.collection; }
 		if(node?.sequence?.nextPic) { this._picturesSequences[node?.sequence?.nextPic] = metadata.collection; }
@@ -164,6 +199,7 @@ export default class Photo extends PSViewer {
 	 * @param {*} [fromNode] Currently shown node (previous)
 	 * @param {*} [fromLink] Link clicked by user to go from current to next node
 	 * @private
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	_psvNodeTransition(toNode, fromNode, fromLink) {
 		let nodeTransition = {};
@@ -174,14 +210,16 @@ export default class Photo extends PSViewer {
 		const sameSequence = fromNode && toNode.sequence.id === fromNode.sequence.id;
 		const fromNodeHeading = (fromNode?.properties?.["view:azimuth"] || 0) * (Math.PI / 180);
 		const toNodeHeading = (toNode?.properties?.["view:azimuth"] || 0) * (Math.PI / 180);
+		const toNodeRelHeading = getRelativeHeading(toNode) * (Math.PI / 180);
 
 		this.setOption("maxFov", Math.min(toNode.horizontalFov * 3/4, 90));
 
-		const centerNoAnim = {
+		const forwardNoAnim = {
+			showLoader: false,
+			effect: "none",
 			speed: 0,
-			fadeIn: false,
 			rotation: false,
-			rotateTo: { pitch: 0, yaw: 0 },
+			rotateTo: { pitch: 0, yaw: -toNodeRelHeading },
 			zoomTo: PSV_DEFAULT_ZOOM
 		};
 
@@ -189,19 +227,19 @@ export default class Photo extends PSViewer {
 		if(toNode.horizontalFov == 360) {
 			// No previous sequence -> Point to center + no animation
 			if(!fromNode) {
-				nodeTransition = centerNoAnim;
+				nodeTransition = forwardNoAnim;
 			}
 			// Has a previous sequence
 			else {
 				// Far away sequences -> Point to center + no animation
 				if(getDistance(fromNode.gps, toNode.gps) >= 0.001) {
-					nodeTransition = centerNoAnim;
+					nodeTransition = forwardNoAnim;
 				}
 				// Nearby sequences -> Keep orientation
 				else {
 					nodeTransition = {
 						speed: animationDuration,
-						fadeIn: following && animated,
+						effect: following && animated ? "fade" : "none",
 						rotation: following && sameSequence && animated,
 						rotateTo: this.getPosition()
 					};
@@ -220,7 +258,7 @@ export default class Photo extends PSViewer {
 				const notTooMuchRotation = Math.abs(fromNodeHeading - toNodeHeading) <= Math.PI / 4;
 				nodeTransition = {
 					speed: animationDuration,
-					fadeIn: following && notTooMuchRotation && animated,
+					effect: following && notTooMuchRotation && animated ? "fade" : "none",
 					rotation: following && notTooMuchRotation && animated,
 					rotateTo: keepZoomPos ? this.getPosition() : { pitch: 0, yaw: 0 },
 					zoomTo: keepZoomPos ? this.getZoomLevel() :  PSV_DEFAULT_ZOOM,
@@ -228,11 +266,11 @@ export default class Photo extends PSViewer {
 			}
 			// Different sequence -> Point to center + no animation
 			else {
-				nodeTransition = centerNoAnim;
+				nodeTransition = forwardNoAnim;
 			}
 		}
 
-		if(nodeTransition.fadeIn && nodeTransition.speed >= 150) {
+		if(nodeTransition.effect === "fade" && nodeTransition.speed >= 150) {
 			setTimeout(this._clearArrows, nodeTransition.speed-100);
 		}
 		else {
@@ -243,18 +281,17 @@ export default class Photo extends PSViewer {
 		/**
 		 * Event for picture starting to load
 		 *
-		 * @event psv:picture-loading
-		 * @memberof CoreView
-		 * @type {object}
-		 * @property {object} detail Event information
+		 * @event Panoramax.components.ui.Photo#picture-loading
+		 * @type {CustomEvent}
 		 * @property {string} detail.picId The picture unique identifier
 		 * @property {number} detail.lon Longitude (WGS84)
 		 * @property {number} detail.lat Latitude (WGS84)
 		 * @property {number} detail.x New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
 		 * @property {number} detail.y New y position (in degrees)
 		 * @property {number} detail.z New z position (0-100)
+		 * @property {boolean} detail.first True if first picture loaded
 		 */
-		const event = new CustomEvent("psv:picture-loading", {
+		const event = new CustomEvent("picture-loading", {
 			detail: {
 				...Object.assign({},
 					this.getXYZ(),
@@ -263,10 +300,11 @@ export default class Photo extends PSViewer {
 				),
 				picId: toNode.id,
 				lon: toNode.gps[0],
-				lat: toNode.gps[1]
+				lat: toNode.gps[1],
+				first: this._parent._initParams?.getParentPostInit().picture == toNode.id,
 			}
 		});
-		this._parent.dispatchEvent(event);
+		this.dispatchEvent(event);
 
 		return nodeTransition;
 	}
@@ -276,6 +314,7 @@ export default class Photo extends PSViewer {
 	 * It creates a custom event "picture-preview-started"
 	 * @private
 	 * @param {object} e The event data
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	_onEnterArrow(e) {
 		const fromLink = e.link;
@@ -295,20 +334,18 @@ export default class Photo extends PSViewer {
 		/**
 		 * Event for picture preview
 		 *
-		 * @event psv:picture-preview-started
-		 * @memberof CoreView
-		 * @type {object}
-		 * @property {object} detail Event information
+		 * @event Panoramax.components.ui.Photo#picture-preview-started
+		 * @type {CustomEvent}
 		 * @property {string} detail.picId The picture ID
 		 * @property {number[]} detail.coordinates [x,y] coordinates
 		 * @property {number} detail.direction The theorical picture orientation
 		 */
-		const event = new CustomEvent("psv:picture-preview-started", { detail: {
+		const event = new CustomEvent("picture-preview-started", { detail: {
 			picId: fromLink.nodeId,
 			coordinates: fromLink.gps,
 			direction,
 		}});
-		this._parent.dispatchEvent(event);
+		this.dispatchEvent(event);
 	}
 
 	/**
@@ -316,47 +353,44 @@ export default class Photo extends PSViewer {
 	 * It creates a custom event "picture-preview-stopped"
 	 * @private
 	 * @param {object} e The event data
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	_onLeaveArrow(e) {
 		const fromLink = e.link;
 		
 		/**
 		 * Event for end of picture preview
-		 *
-		 * @event psv:picture-preview-stopped
-		 * @memberof CoreView
-		 * @type {object}
-		 * @property {object} detail Event information
+		 * @event Panoramax.components.ui.Photo#picture-preview-stopped
+		 * @type {CustomEvent}
 		 * @property {string} detail.picId The picture ID
 		 */
-		const event = new CustomEvent("psv:picture-preview-stopped", { detail: {
+		const event = new CustomEvent("picture-preview-stopped", { detail: {
 			picId: fromLink.nodeId,
 		}});
-		this._parent.dispatchEvent(event);
+		this.dispatchEvent(event);
 	}
 
 	/**
 	 * Event handler for position update in PSV.
 	 * Allows to send a custom "view-rotated" event.
 	 * @private
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	_onPositionUpdated({position}) {
 		const pos = positionToXYZ(position, this.getZoomLevel());
 		pos.x += this.getPictureOriginalHeading();
 		pos.x = pos.x % 360;
+
 		/**
 		 * Event for viewer rotation
-		 *
-		 * @event psv:view-rotated
-		 * @memberof CoreView
-		 * @type {object}
-		 * @property {object} detail Event information
+		 * @event Panoramax.components.ui.Photo#view-rotated
+		 * @type {CustomEvent}
 		 * @property {number} detail.x New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
 		 * @property {number} detail.y New y position (in degrees)
 		 * @property {number} detail.z New Z position (between 0 and 100)
 		 */
-		const event = new CustomEvent("psv:view-rotated", { detail: pos });
-		this._parent.dispatchEvent(event);
+		const event = new CustomEvent("view-rotated", { detail: pos });
+		this.dispatchEvent(event);
 
 		this._onTilesStartLoading();
 	}
@@ -365,57 +399,59 @@ export default class Photo extends PSViewer {
 	 * Event handler for zoom updates in PSV.
 	 * Allows to send a custom "view-rotated" event.
 	 * @private
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	_onZoomUpdated({zoomLevel}) {
-		const event = new CustomEvent("psv:view-rotated", { detail: { ...this.getXY(), z: zoomLevel} });
-		this._parent.dispatchEvent(event);
+		const event = new CustomEvent("view-rotated", { detail: { ...this.getXY(), z: zoomLevel} });
+		this.dispatchEvent(event);
 
 		this._onTilesStartLoading();
 	}
 
 	/**
 	 * Event handler for node change in PSV.
-	 * Allows to send a custom "psv:picture-loaded" event.
+	 * Allows to send a custom "picture-loaded" event.
 	 * @private
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	_onNodeChanged(e) {
 		// Clean up clicked arrows
-		for(let d of document.getElementsByClassName("gvs-psv-tour-arrows")) {
-			d.classList.remove("gvs-clicked");
+		for(let d of document.getElementsByClassName("pnx-psv-tour-arrows")) {
+			d.classList.remove("pnx-clicked");
 		}
 		
 		if(e.node.id) {
+			const isFirst = this._parent._initParams?.getParentPostInit().picture == e.node.id;
 			this._parent.select(e.node?.sequence?.id, e.node.id);
 			const picMeta = this.getPictureMetadata();
 			if(!picMeta) {
-				this._parent.dispatchEvent(new CustomEvent("psv:picture-loaded", {detail: {}}));
+				this.dispatchEvent(new CustomEvent("picture-loaded", {detail: {}}));
 				return;
 			}
 			this._prevSequence = picMeta.sequence.id;
 
 			/**
 			 * Event for picture load (low-resolution image is loaded)
-			 *
-			 * @event psv:picture-loaded
-			 * @memberof CoreView
-			 * @type {object}
-			 * @property {object} detail Event information
+			 * @event Panoramax.components.ui.Photo#picture-loaded
+			 * @type {CustomEvent}
 			 * @property {string} detail.picId The picture unique identifier
 			 * @property {number} detail.lon Longitude (WGS84)
 			 * @property {number} detail.lat Latitude (WGS84)
 			 * @property {number} detail.x New x position (in degrees, 0-360), corresponds to heading (0° = North, 90° = East, 180° = South, 270° = West)
 			 * @property {number} detail.y New y position (in degrees)
 			 * @property {number} detail.z New z position (0-100)
+			 * @property {boolean} detail.first True if first picture loaded
 			 */
-			const event = new CustomEvent("psv:picture-loaded", {
+			const event = new CustomEvent("picture-loaded", {
 				detail: {
 					...this.getXYZ(),
 					picId: e.node.id,
 					lon: picMeta.gps[0],
-					lat: picMeta.gps[1]
-				}
+					lat: picMeta.gps[1],
+					first: isFirst
+				},
 			});
-			this._parent.dispatchEvent(event);
+			this.dispatchEvent(event);
 
 			// Change download URL
 			if(picMeta.panorama.hdUrl) {
@@ -432,7 +468,7 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Event handler for loading a new range of tiles
-	 *
+	 * @memberof Panoramax.components.ui.Photo#
 	 * @private
 	 */
 	_onTilesStartLoading() {
@@ -445,15 +481,12 @@ export default class Photo extends PSViewer {
 				if(this._myVTour.state.currentNode) {
 					/**
 					 * Event launched when all visible tiles of a picture are loaded
-					 *
-					 * @event psv:picture-tiles-loaded
-					 * @memberof CoreView
-					 * @type {object}
-					 * @property {object} detail Event information
+					 * @event Panoramax.components.ui.Photo#picture-tiles-loaded
+					 * @type {CustomEvent}
 					 * @property {string} detail.picId The picture unique identifier
 					 */
-					const event = new Event("psv:picture-tiles-loaded", { picId: this._myVTour.state.currentNode.id });
-					this._parent.dispatchEvent(event);
+					const event = new CustomEvent("picture-tiles-loaded", { detail: { picId: this._myVTour.state.currentNode.id }});
+					this.dispatchEvent(event);
 				}
 				clearInterval(this._tilesQueueTimer);
 				delete this._tilesQueueTimer;
@@ -463,17 +496,28 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Access currently shown picture metadata
-	 *
+	 * @memberof Panoramax.components.ui.Photo#
 	 * @returns {object} Picture metadata
 	 */
 	getPictureMetadata() {
-		if(this._myVTour?.state?.currentNode?.id === BASE_PANORAMA_ID) { return null; }
+		if(isNullId(this._myVTour?.state?.currentNode?.id)) { return null; }
 		return this._myVTour.state.currentNode ? Object.assign({}, this._myVTour.state.currentNode) : null;
 	}
 
+	/**
+	 * Get current picture ID, or loading picture ID if any.
+	 * @memberof Panoramax.components.ui.Photo#
+	 * @returns {string|null} Picture ID (current or loading), or null if none is selected.
+	 */
+	getPictureId() {
+		const id = this._myVTour?.state?.loadingNode || this._myVTour?.state?.currentNode?.id;
+		return isNullId(id) ? null : id;
+	}
+
 	/**
 	 * Handler for select event.
 	 * @private
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	_onSelect(e) {
 		if(e.detail.seqId) {
@@ -483,13 +527,15 @@ export default class Photo extends PSViewer {
 		if(this._myVTour.getCurrentNode()?.id !== e.detail.picId) {
 			this.loader.show();
 			this._myVTour.setCurrentNode(e.detail.picId).catch(e => {
-				this.showErrorOverlay(e, this._parent._t.gvs.error_pic, true);
+				this.showErrorOverlay(e, this._parent._t.pnx.error_pic, true);
 			});
 		}
 	}
 
 	/**
 	 * Displays next picture in current sequence (if any)
+	 * @memberof Panoramax.components.ui.Photo#
+	 * @throws {Error} If no picture is selected, or no next picture available
 	 */
 	goToNextPicture() {
 		if(!this.getPictureMetadata()) {
@@ -507,6 +553,8 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Displays previous picture in current sequence (if any)
+	 * @memberof Panoramax.components.ui.Photo#
+	 * @throws {Error} If no picture is selected, or no previous picture available
 	 */
 	goToPrevPicture() {
 		if(!this.getPictureMetadata()) {
@@ -524,13 +572,15 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Displays in viewer a picture near to given coordinates
-	 *
+	 * @memberof Panoramax.components.ui.Photo#
 	 * @param {number} lat Latitude (WGS84)
 	 * @param {number} lon Longitude (WGS84)
-	 * @returns {Promise} Resolves on picture ID if picture found, otherwise rejects
+	 * @returns {Promise}
+	 * @fulfil {string} Picture ID if picture found
+	 * @reject {Error} If no picture found
 	 */
 	async goToPosition(lat, lon) {
-		return this._parent._api.getPicturesAroundCoordinates(lat, lon)
+		return this._parent.api.getPicturesAroundCoordinates(lat, lon)
 			.then(res => {
 				if(res.features.length > 0) {
 					const f = res.features.pop();
@@ -548,7 +598,7 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Get 2D position of sphere currently shown to user
-	 *
+	 * @memberof Panoramax.components.ui.Photo#
 	 * @returns {object} Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top) }
 	 */
 	getXY() {
@@ -559,7 +609,7 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Get 3D position of sphere currently shown to user
-	 *
+	 * @memberof Panoramax.components.ui.Photo#
 	 * @returns {object} Position in format { x: heading in degrees (0° = North, 90° = East, 180° = South, 270° = West), y: top/bottom position in degrees (-90° = bottom, 0° = front, 90° = top), z: zoom (0 = wide, 100 = zoomed in) }
 	 */
 	getXYZ() {
@@ -570,7 +620,8 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Get capture orientation of current picture, based on its GPS.
-	 * @returns Picture original heading in degrees (0 to 360°)
+	 * @returns {number} Picture original heading in degrees (0 to 360°)
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	getPictureOriginalHeading() {
 		return this.getPictureMetadata()?.properties?.["view:azimuth"] || 0;
@@ -579,8 +630,8 @@ export default class Photo extends PSViewer {
 	/**
 	 * Computes the relative heading of currently selected picture.
 	 * This gives the angle of capture compared to sequence path (vehicle movement).
-	 * 
-	 * @returns Relative heading in degrees (-180 to 180)
+	 * @memberof Panoramax.components.ui.Photo#
+	 * @returns {number} Relative heading in degrees (-180 to 180)
 	 */
 	getPictureRelativeHeading() {
 		return getRelativeHeading(this.getPictureMetadata());
@@ -589,6 +640,7 @@ export default class Photo extends PSViewer {
 	/**
 	 * Clears the Photo Sphere Viewer metadata cache.
 	 * It is useful when current picture or sequence has changed server-side after first load.
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	clearPictureMetadataCache() {
 		const oldPicId = this.getPictureMetadata()?.id;
@@ -609,7 +661,7 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Change the shown position in picture
-	 *
+	 * @memberof Panoramax.components.ui.Photo#
 	 * @param {number} x X position (in degrees)
 	 * @param {number} y Y position (in degrees)
 	 * @param {number} z Z position (0-100)
@@ -623,6 +675,7 @@ export default class Photo extends PSViewer {
 	/**
 	 * Enable or disable higher contrast on picture
 	 * @param {boolean} enable True to enable higher contrast
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	setHigherContrast(enable) {
 		this.renderer.renderer.toneMapping = enable ? 3 : 0;
@@ -633,6 +686,7 @@ export default class Photo extends PSViewer {
 	/**
 	 * Get the duration of stay on a picture during a sequence play.
 	 * @returns {number} The duration (in milliseconds)
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	getTransitionDuration() {
 		return this._transitionDuration;
@@ -640,7 +694,7 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Changes the duration of stay on a picture during a sequence play.
-	 * 
+	 * @memberof Panoramax.components.ui.Photo#
 	 * @param {number} value The new duration (in milliseconds, between 100 and 3000)
 	 */
 	setTransitionDuration(value) {
@@ -652,19 +706,17 @@ export default class Photo extends PSViewer {
 
 		/**
 		 * Event for transition duration change
-		 *
-		 * @event psv:transition-duration-changed
-		 * @memberof CoreView
-		 * @type {object}
-		 * @property {object} detail Event information
+		 * @event Panoramax.components.ui.Photo#transition-duration-changed
+		 * @type {CustomEvent}
 		 * @property {string} detail.duration New duration (in milliseconds)
 		 */
-		const event = new CustomEvent("psv:transition-duration-changed", { detail: { value } });
-		this._parent.dispatchEvent(event);
+		const event = new CustomEvent("transition-duration-changed", { detail: { value } });
+		this.dispatchEvent(event);
 	}
 
+	/** @private */
 	setPanorama(path, options) {
-		const onFailure = e => this.showErrorOverlay(e, this._parent._t.gvs.error_pic, true);
+		const onFailure = e => this.showErrorOverlay(e, this._parent?._t.pnx.error_pic, true);
 		try {
 			return super.setPanorama(path, options).catch(onFailure);
 		}
@@ -678,14 +730,15 @@ export default class Photo extends PSViewer {
 	 * @param {object} e The initial error
 	 * @param {str} label The main error label to display
 	 * @param {boolean} dissmisable Is error dissmisable
+	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	showErrorOverlay(e, label, dissmisable) {
-		if(this._parent._loader.isVisible() || !this.overlay.isVisible()) {
-			this._parent._loader.dismiss(
+		if(this._parent?.loader.isVisible() || !this.overlay.isVisible()) {
+			this._parent?.loader.dismiss(
 				e,
 				label,
 				dissmisable ? () => {
-					this._parent._loader.dismiss();
+					this._parent?.loader.dismiss();
 					this.overlay.hide();
 				} : undefined
 			);
@@ -694,10 +747,169 @@ export default class Photo extends PSViewer {
 			console.error(e);
 			this.overlay.show({
 				image: `<img style="width: 200px" src="${LogoDead}" alt="" />`,
-				title: this._parent._t.gvs.error, 
-				text: label + "<br />" + this._parent._t.gvs.error_click,
+				title: this._parent?._t.pnx.error, 
+				text: label + "<br />" + this._parent?._t.pnx.error_click,
 				dissmisable,
 			});
 		}
 	}
+
+	/**
+	 * Goes continuously to next picture in sequence as long as possible
+	 * @memberof Panoramax.components.ui.Photo#
+	 */
+	playSequence() {
+		this._sequencePlaying = true;
+
+		/**
+		 * Event for sequence starting to play
+		 * @event Panoramax.components.ui.Photo#sequence-playing
+		 * @type {CustomEvent}
+		 */
+		const event = new Event("sequence-playing", {bubbles: true, composed: true});
+		this.dispatchEvent(event);
+
+		const nextPicturePlay = () => {
+			if(this._sequencePlaying) {
+				this.addEventListener("picture-loaded", () => {
+					this._playTimer = setTimeout(() => {
+						nextPicturePlay();
+					}, this.getTransitionDuration());
+				}, { once: true });
+
+				try {
+					this.goToNextPicture();
+				}
+				catch(e) {
+					this.stopSequence();
+				}
+			}
+		};
+
+		// Stop playing if user clicks on image
+		this.addEventListener("click", () => this.stopSequence());
+
+		nextPicturePlay();
+	}
+
+	/**
+	 * Stops playing current sequence
+	 * @memberof Panoramax.components.ui.Photo#
+	 */
+	stopSequence() {
+		this._sequencePlaying = false;
+
+		// Next picture timer is pending
+		if(this._playTimer) {
+			clearTimeout(this._playTimer);
+			delete this._playTimer;
+		}
+
+		// Force refresh of PSV to eventually load tiles
+		this.forceRefresh();
+
+		/**
+		 * Event for sequence stopped playing
+		 * @event Panoramax.components.ui.Photo#sequence-stopped
+		 * @type {CustomEvent}
+		 */
+		const event = new Event("sequence-stopped", {bubbles: true, composed: true});
+		this.dispatchEvent(event);
+	}
+
+	/**
+	 * Is there any sequence being played right now ?
+	 * @memberof Panoramax.components.ui.Photo#
+	 * @returns {boolean} True if sequence is playing
+	 */
+	isSequencePlaying() {
+		return this._sequencePlaying;
+	}
+
+	/**
+	 * Starts/stops the reading of pictures in a sequence
+	 * @memberof Panoramax.components.ui.Photo#
+	 */
+	toggleSequencePlaying() {
+		if(this.isSequencePlaying()) {
+			this.stopSequence();
+		}
+		else {
+			this.playSequence();
+		}
+	}
+
+	/**
+	 * Get current pictures navigation mode.
+	 * @returns {string} The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture)
+	 * @memberof Panoramax.components.ui.Photo#
+	 */
+	getPicturesNavigation() {
+		return this._picturesNavigation;
+	}
+
+	/**
+	 * Switch the allowed navigation between pictures.
+	 * @param {string} pn The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture)
+	 * @memberof Panoramax.components.ui.Photo#
+	 */
+	setPicturesNavigation(pn) {
+		if(pn === "none") { pn = "pic"; }
+		this._picturesNavigation = pn;
+
+		/**
+		 * Event for pictures navigation mode change
+		 * @event Panoramax.components.ui.Photo#pictures-navigation-changed
+		 * @type {CustomEvent}
+		 * @property {string} detail.value New mode (any, pic, seq)
+		 */
+		const event = new CustomEvent("pictures-navigation-changed", { detail: { value: pn } });
+		this.dispatchEvent(event);
+	}
+
+	/**
+	 * Filter function
+	 * @param {object} link A STAC next/prev/related link definition
+	 * @returns {boolean} True if link should be kept
+	 * @private
+	 */
+	_picturesNavFilter(link) {
+		switch(this._picturesNavigation) {
+		case "seq":
+			return ["next", "prev"].includes(link.rel);
+		case "pic":
+		case "none":
+			return false;
+		case "any":
+		default:
+			return true;
+		}
+	}
+
+	/**
+	 * Force reload of texture and tiles.
+	 * @memberof Panoramax.components.ui.Photo#
+	 */
+	forceRefresh() {
+		const cn = this._myVTour.getCurrentNode();
+
+		// Refresh mode for flat pictures
+		if(cn && cn.panorama.baseUrl !== cn?.panorama?.origBaseUrl) {
+			const prevZoom = this.getZoomLevel();
+			const prevPos = this.getPosition();
+			this._myVTour.state.currentNode = null;
+			this._myVTour.setCurrentNode(cn.id, {
+				zoomTo: prevZoom,
+				rotateTo: prevPos,
+				fadeIn: false,
+				speed: 0,
+				rotation: false,
+			});
+		}
+
+		// Refresh mode for 360 pictures
+		if(cn && cn.panorama.rows > 1) {
+			this.adapter.__refresh();
+		}
+	}
 }