@panoramax/web-viewer 5.3.0-develop-75794ff1 → 5.3.0-develop-0f16c3a8

package/build/esm/components/core/Basic.js

@@ -9,7 +9,7 @@ import BasicStyles from "./Basic.css" with { type: "css" };
 document.adoptedStyleSheets.push(AtkinsonStyles);
 document.adoptedStyleSheets.push(BasicStyles);
 
-const __COMMIT_HASH__ = "75794ff";
+const __COMMIT_HASH__ = "0f16c3a";
 const __PACKAGE_VERSION__ = "5.3.0";
 const __PACKAGE_ISSUES_URL__ = "https://gitlab.com/panoramax/clients/web-viewer/-/work_items";
 

package/build/esm/components/ui/Photo.js

@@ -164,7 +164,7 @@ export default class Photo extends PSViewer {
 		this._myMarkers = this.getPlugin(MarkersPlugin);
 		this._annotationsVisible = this._options.displayAnnotations === true;
 		this._drawingAnnotation = null;
-		this._sequencePlaying = false;
+		this._sequencePlaying = 0;
 		this._picturesNavigation = this._options.picturesNavigation || "any";
 
 		// Cache to find sequence ID for a single picture
@@ -933,18 +933,20 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Goes continuously to next picture in sequence as long as possible
+	 * @param {boolean} [backward=false] Set true to play in reverse order.
 	 * @memberof Panoramax.components.ui.Photo#
 	 */
-	playSequence() {
-		this._sequencePlaying = true;
+	playSequence(backward = false) {
+		this._sequencePlaying = backward ? -1 : 1;
 		this.container.classList.add("pnx-psv-playing");
 
 		/**
 		 * Event for sequence starting to play
 		 * @event Panoramax.components.ui.Photo#sequence-playing
 		 * @type {CustomEvent}
+		 * @property {boolean} detail.backward True if sequence is playing backwards
 		 */
-		const event = new Event("sequence-playing", {bubbles: true, composed: true});
+		const event = new CustomEvent("sequence-playing", { detail: { backward }, bubbles: true, composed: true});
 		this.dispatchEvent(event);
 
 		const nextPicturePlay = () => {
@@ -956,7 +958,11 @@ export default class Photo extends PSViewer {
 				}, { once: true });
 
 				try {
-					this.goToNextPicture();
+					if(this._sequencePlaying === 1) {
+						this.goToNextPicture();
+					} else if(this._sequencePlaying === -1) {
+						this.goToPrevPicture();
+					}
 				}
 				catch(e) {
 					this.stopSequence();
@@ -975,7 +981,7 @@ export default class Photo extends PSViewer {
 	 * @memberof Panoramax.components.ui.Photo#
 	 */
 	stopSequence() {
-		this._sequencePlaying = false;
+		this._sequencePlaying = 0;
 		this.container.classList.remove("pnx-psv-playing");
 
 		// Next picture timer is pending
@@ -1002,7 +1008,7 @@ export default class Photo extends PSViewer {
 	 * @returns {boolean} True if sequence is playing
 	 */
 	isSequencePlaying() {
-		return this._sequencePlaying;
+		return this._sequencePlaying !== 0;
 	}
 
 	/**

package/build/esm/components/ui/widgets/Player.js

@@ -21,15 +21,16 @@ export default class Player extends LitElement {
 	 * Component properties.
 	 * @memberof Panoramax.components.ui.widgets.Player#
 	 * @type {Object}
-	 * @property {boolean} [playing=false] Is sequence currently playing ?
+	 * @property {number} [playing=0] Is sequence currently playing ? 0 = no, 1 = plays forward, -1 = plays backward
 	 * @property {string} [size=xl] Group size (md, xl)
 	 * @property {string} [more=depends] Should we display the "more options" button ("always", "never", "depends" = only on large screens (default))
 	 */
 	static properties = {
-		playing: {type: Boolean, reflect: true},
+		playing: {type: Number, reflect: true},
 		size: {type: String},
 		more: {type: String},
 		_activePrev: {state: true},
+		_activePlayBack: {state: true},
 		_activePlay: {state: true},
 		_activeNext: {state: true},
 	};
@@ -37,10 +38,11 @@ export default class Player extends LitElement {
 	constructor() {
 		super();
 
-		this.playing = false;
+		this.playing = 0;
 		this.size = "xl";
 		this.more = "depends";
 		this._activePrev = true;
+		this._activePlayBack = true;
 		this._activePlay = true;
 		this._activeNext = true;
 	}
@@ -55,8 +57,8 @@ export default class Player extends LitElement {
 		super.connectedCallback();
 
 		onceParentAvailable(this).then(() => this._parent?.oncePSVReady?.().then(() => {
-			this._parent.psv.addEventListener("sequence-playing", () => this.playing = true);
-			this._parent.psv.addEventListener("sequence-stopped", () => this.playing = false);
+			this._parent.psv.addEventListener("sequence-playing", e => this.playing = e.detail.backward ? -1 : 1);
+			this._parent.psv.addEventListener("sequence-stopped", () => this.playing = 0);
 			this._parent.psv.addEventListener("picture-loaded", this._changeActiveStates.bind(this));
 			this._parent.psv.addEventListener("pictures-navigation-changed", this._changeActiveStates.bind(this));
 			this._changeActiveStates();
@@ -67,38 +69,46 @@ export default class Player extends LitElement {
 	_changeActiveStates() {
 		if(this._parent.psv.getPicturesNavigation?.() === "pic") {
 			this._activeNext = false;
+			this._activePlayBack = false;
 			this._activePlay = false;
 			this._activePrev = false;
 		}
 		else {
 			// eslint-disable-next-line eqeqeq
 			this._activePrev = this._parent.psv.getPictureMetadata()?.sequence?.prevPic != null;
+			this._activePlayBack = this._activePrev;
 
 			// eslint-disable-next-line eqeqeq
-			if(this._parent.psv.getPictureMetadata()?.sequence?.nextPic != null) {
-				this._activeNext = true;
-				this._activePlay = true;
-			}
-			else {
-				this._activeNext = false;
-				this._activePlay = false;
-			}
+			this._activeNext = this._parent.psv.getPictureMetadata()?.sequence?.nextPic != null;
+			this._activePlay = this._activeNext;
 		}
 		this.requestUpdate();
 	}
 
 	/** @private */
 	_onPlayClick() {
-		if(this._parent?.psv?.isSequencePlaying()) {
-			this.playing = false;
+		if(this._parent?.psv?.isSequencePlaying() && this.playing === 1) {
+			this.playing = 0;
 			this._parent?.psv?.stopSequence();
 		}
 		else {
-			this.playing = true;
+			this.playing = 1;
 			this._parent?.psv?.playSequence();
 		}
 	}
 
+	/** @private */
+	_onPlayBackClick() {
+		if(this._parent?.psv?.isSequencePlaying() && this.playing === -1) {
+			this.playing = 0;
+			this._parent?.psv?.stopSequence();
+		}
+		else {
+			this.playing = -1;
+			this._parent?.psv?.playSequence(true);
+		}
+	}
+
 	/** @private */
 	render() {
 		if(!this._parent?.psv?.addEventListener) { return nothing; }
@@ -119,13 +129,21 @@ export default class Player extends LitElement {
 					.disabled=${!this._activePrev}
 				>${fa(faBackward)}</pnx-button>
 
+				<pnx-button
+					kind="superflat"
+					id="pnx-player-play-backward"
+					title=${this.playing === -1 ? this._parent?._t.pnx.sequence_pause : this._parent?._t.pnx.sequence_play_backwards}
+					.disabled=${!this._activePlayBack}
+					@click=${this._onPlayBackClick.bind(this)}
+				>${this.playing === -1 ? fa(faPause) : fa(faPlay, {transform: {rotate: 180}})}</pnx-button>
+
 				<pnx-button
 					kind="superflat"
 					id="pnx-player-play"
-					title=${this.playing ? this._parent?._t.pnx.sequence_pause : this._parent?._t.pnx.sequence_play}
+					title=${this.playing === 1 ? this._parent?._t.pnx.sequence_pause : this._parent?._t.pnx.sequence_play}
 					.disabled=${!this._activePlay}
 					@click=${this._onPlayClick.bind(this)}
-				>${this.playing ? fa(faPause) : fa(faPlay)}</pnx-button>
+				>${this.playing === 1 ? fa(faPause) : fa(faPlay)}</pnx-button>
 
 				<pnx-button
 					kind="superflat"

package/build/esm/translations/en.json

@@ -50,6 +50,7 @@
         "error_retry": "Please retry later",
         "sequence_next": "Next picture in sequence",
         "sequence_play": "Play along this sequence",
+        "sequence_play_backwards": "Play along this sequence, backwards",
         "sequence_pause": "Pause sequence",
         "sequence_prev": "Previous picture in sequence",
         "sequence_more": "More play options",

package/build/esm/translations/fr.json

@@ -50,6 +50,7 @@
         "error_retry": "Merci de réessayer plus tard",
         "sequence_next": "Photo suivante dans la séquence",
         "sequence_play": "Parcourir cette séquence",
+        "sequence_play_backwards": "Parcourir cette séquence, à l'envers",
         "sequence_pause": "Mettre en pause la séquence",
         "sequence_prev": "Photo précédente dans la séquence",
         "sequence_more": "Plus d'options de lecture",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "5.3.0-develop-75794ff1",
+  "version": "5.3.0-develop-0f16c3a8",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "./build/cjs/index.js",
   "module": "./build/esm/index.js",