@panoramax/web-viewer 3.2.3-develop-881b0162 → 3.2.3-develop-d26f8f3d

package/docs/reference/components/ui/widgets/Player.md

@@ -29,4 +29,5 @@ Component properties.
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | [playing] | <code>boolean</code> | <code>false</code> | Is sequence currently playing ? |
+| [size] | <code>string</code> | <code>&quot;xl&quot;</code> | Group size (md, xl) |
 

package/package.json

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

package/src/components/core/PhotoViewer.js

@@ -141,7 +141,12 @@ export default class PhotoViewer extends Basic {
 				picture: this._initParams.getParentPostInit().picture,
 			});
 			this.grid.appendChild(this.legend);
-			this.grid.appendChild(createWebComp("pnx-widget-player", {slot: "top", _parent: this, class: "pnx-only-psv pnx-print-hidden"}));
+			this.grid.appendChild(createWebComp("pnx-widget-player", {
+				slot: "top",
+				_parent: this,
+				class: "pnx-only-psv pnx-print-hidden",
+				size: this.isHeightSmall() ? "md": "xl",
+			}));
 		}
 	}
 

package/src/components/core/Viewer.js

@@ -154,7 +154,12 @@ export default class Viewer extends PhotoViewer {
 				picture: this._initParams.getParentPostInit().picture,
 			});
 			this.grid.appendChild(this.legend);
-			this.grid.appendChild(createWebComp("pnx-widget-player", {slot: "top", _parent: this, class: "pnx-only-psv pnx-print-hidden"}));
+			this.grid.appendChild(createWebComp("pnx-widget-player", {
+				slot: "top",
+				_parent: this,
+				class: "pnx-only-psv pnx-print-hidden",
+				size: this.isHeightSmall() ? "md": "xl",
+			}));
 
 			this.grid.appendChild(createWebComp("pnx-widget-geosearch", {
 				slot: this.isWidthSmall() ? "top-right" : "top-left",

package/src/components/ui/ButtonGroup.js

@@ -30,10 +30,10 @@ export default class ButtonGroup extends LitElement {
 
 		div.xl { line-height: 38px; font-size: 20px; }
 		div.row.xl { height: 38px; }
-		div.column.xl { width: 38px;}
+		div.column.xl { width: 38px; }
 
-		div.row ::slotted(*) { height: 100%; }
-		div.column ::slotted(*) { width: 100%; }
+		div.row ::slotted(*) { height: 100%; min-width: 24px; }
+		div.column ::slotted(*) { width: 100%; min-height: 24px; }
 
 		div.row.xl ::slotted(*) { min-width: 38px; }
 		div.column.xl ::slotted(*) { min-height: 38px; }

package/src/components/ui/Photo.js

@@ -45,7 +45,7 @@ PSViewer.useNewAnglesOrder = true;
 
 /**
  * Triggered once when the panorama image has been loaded and the viewer is ready to perform the first render.
- * @see [Photo Sphere Viewer documentation](https://photo-sphere-viewer.js.org/guide/events.html#ready)
+ * @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}

package/src/components/ui/widgets/Player.js

@@ -23,9 +23,11 @@ export default class Player extends LitElement {
 	 * @memberof Panoramax.components.ui.widgets.Player#
 	 * @type {Object}
 	 * @property {boolean} [playing=false] Is sequence currently playing ?
+	 * @property {string} [size=xl] Group size (md, xl)
 	 */
 	static properties = {
 		playing: {type: Boolean, reflect: true},
+		size: {type: String},
 		_activePrev: {state: true},
 		_activePlay: {state: true},
 		_activeNext: {state: true},
@@ -35,6 +37,7 @@ export default class Player extends LitElement {
 		super();
 
 		this.playing = false;
+		this.size = "xl";
 		this._activePrev = true;
 		this._activePlay = true;
 		this._activeNext = true;
@@ -100,7 +103,7 @@ export default class Player extends LitElement {
 			<pnx-button-group
 				id="pnx-widget-player"
 				dir="row"
-				size="xl"
+				size=${this.size}
 				class="pnx-print-hidden"
 			>
 				<pnx-button

package/tests/components/core/BasicMock.js

@@ -11,6 +11,7 @@ jest.mock("../../../src/components/core/Basic", () => (
 			this._t = { maplibre: {}, psv: {} };
 		}
 		isWidthSmall() { return false; }
+		isHeightSmall() { return false; }
 		getSubComponentsNames() {
 			return ["loader", "api"];
 		}

package/tests/components/core/Viewer.test.js

@@ -16,6 +16,7 @@ jest.mock("../../../src/components/core/PhotoViewer", () => (
 		}
 		getAttribute() { return null; }
 		isWidthSmall() { return false; }
+		isHeightSmall() { return false; }
 		getSubComponentsNames() {
 			return ["loader", "api", "psv", "grid", "popup", "urlHandler"];
 		}

package/tests/components/core/__snapshots__/PhotoViewer.test.js.snap

@@ -25,6 +25,7 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
     Array [
       <pnx-widget-player
         class="pnx-only-psv pnx-print-hidden"
+        size="xl"
         slot="top"
       />,
     ],
@@ -69,6 +70,7 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
     Array [
       <pnx-widget-player
         class="pnx-only-psv pnx-print-hidden"
+        size="xl"
         slot="top"
       />,
     ],

package/tests/components/core/__snapshots__/Viewer.test.js.snap

@@ -25,6 +25,7 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
     Array [
       <pnx-widget-player
         class="pnx-only-psv pnx-print-hidden"
+        size="xl"
         slot="top"
       />,
     ],
@@ -106,6 +107,7 @@ exports[`_initWidgets should handle widgets if width is small 1`] = `
     Array [
       <pnx-widget-player
         class="pnx-only-psv pnx-print-hidden"
+        size="xl"
         slot="top"
       />,
     ],