@panoramax/web-viewer 4.0.3 → 4.1.0-develop-e5370cde

package/docs/reference/utils/URLHandler.md

@@ -7,6 +7,7 @@
 * [.URLHandler](#Panoramax.utils.URLHandler)
     * [new URLHandler(parent)](#new_Panoramax.utils.URLHandler_new)
     * [.listenToChanges()](#Panoramax.utils.URLHandler+listenToChanges)
+    * [.destroy()](#Panoramax.utils.URLHandler+destroy)
     * [.nextURLParams()](#Panoramax.utils.URLHandler+nextURLParams) ⇒ <code>object</code>
     * [.nextURLString()](#Panoramax.utils.URLHandler+nextURLString) ⇒ <code>string</code>
     * [.currentURLParams([readFromHash])](#Panoramax.utils.URLHandler+currentURLParams) ⇒ <code>object</code>
@@ -34,6 +35,12 @@ Note that you may call `listenToChanges()` for this class to be effective once p
 Start listening to URL & parent changes through events.
 This leads to parent & URL updates.
 
+**Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
+<a name="Panoramax.utils.URLHandler+destroy"></a>
+
+### urlHandler.destroy()
+Call this function to stop listening to global events.
+
 **Kind**: instance method of [<code>URLHandler</code>](#Panoramax.utils.URLHandler)  
 <a name="Panoramax.utils.URLHandler+nextURLParams"></a>
 

package/docs/reference.md

@@ -30,6 +30,7 @@ All-in-one, ready-to-use menus for complex operations. Note that they don't embe
 - [MapFilters](./reference/components/menus/MapFilters.md) : set map filters.
 - [MapLayers](./reference/components/menus/MapLayers.md) : change map theme and background.
 - [MapLegend](./reference/components/menus/MapLegend.md) : display map sources and Panoramax info.
+- [MiniPictureLegend](./reference/components/menus/PictureLegend.md) : display date of a picture when it's shown reduced.
 - [PictureLegend](./reference/components/menus/PictureLegend.md) : display date, author and info for a picture.
 - [PictureMetadata](./reference/components/menus/PictureMetadata.md) : display full details about a picture.
 - [PlayerOptions](./reference/components/menus/PlayerOptions.md) : speed and constrast settings for play sequence feature.
@@ -41,11 +42,11 @@ All-in-one, ready-to-use menus for complex operations. Note that they don't embe
 
 Basic UI components:
 
+- [AnnotationsSwitch](./reference/components/ui/AnnotationsSwitch.md) : a switch button for showing/hiding picture annotations.
 - [Button](./reference/components/ui/Button.md) : a simple button.
 - [ButtonGroup](./reference/components/ui/ButtonGroup.md) : button bar.
 - [CopyButton](./reference/components/ui/CopyButton.md) : a copy-to-clipboard button.
 - [Grade](./reference/components/ui/Grade.md) : a 5-star rating display.
-- [HashTags](./reference/components/ui/HashTags.md) : a list of hashtags associated to a picture.
 - [LinkButton](./reference/components/ui/LinkButton.md) : a link button.
 - [ListGroup](./reference/components/ui/ListGroup.md) : a menu-like list of buttons and links.
 - [ListItem](./reference/components/ui/ListItem.md) : a Material Design-like list entry.
@@ -57,6 +58,7 @@ Basic UI components:
 - [ProgressBar](./reference/components/ui/ProgressBar.md) : a progress bar.
 - [QualityScore](./reference/components/ui/QualityScore.md) : a A/B/C/D/E grade display and input.
 - [SearchBar](./reference/components/ui/SearchBar.md) : a search bar.
+- [SemanticsEditor](./reference/components/ui/SemanticsEditor.md) : input field for editing semantic tags of a picture/annotation.
 - [SemanticsTable](./reference/components/ui/SemanticsTable.md) : table for showing complete semantic tags of a picture/annotation.
 - [TogglableGroup](./reference/components/ui/TogglableGroup.md) : an helper for showing a menu on button click.
 

package/docs/tutorials/aerial_imagery.md

@@ -5,15 +5,17 @@ In complement of classic _streets_ rendering, you can add an aerial imagery as m
 ```html
 <pnx-viewer
   endpoint="https://panoramax.ign.fr/api"
-  map='{"raster": {
-    "type": "raster",
-    "tiles": [
-      "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
-    ],
-    "minzoom": 0,
-    "maxzoom": 21,
-    "attribution": "&copy; IGN",
-    "tileSize": 256
-  }}'
-/>
+  map='{
+    raster: {
+      type: "raster",
+      tiles: [
+        "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_19&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
+      ],
+      minzoom: 0,
+      maxzoom: 19,
+      attribution: "&copy; IGN",
+      tileSize: 256
+    }
+  }'
+></pnx-viewer>
 ```

package/mkdocs.yml

@@ -70,6 +70,7 @@ nav:
         - MapFilters: 'reference/components/menus/MapFilters.md'
         - MapLayers: 'reference/components/menus/MapLayers.md'
         - MapLegend: 'reference/components/menus/MapLegend.md'
+        - MiniPictureLegend: 'reference/components/menus/MiniPictureLegend.md'
         - PictureLegend: 'reference/components/menus/PictureLegend.md'
         - PictureMetadata: 'reference/components/menus/PictureMetadata.md'
         - PlayerOptions: 'reference/components/menus/PlayerOptions.md'
@@ -87,11 +88,11 @@ nav:
           - PictureLegendActions: 'reference/components/ui/widgets/PictureLegendActions.md'
           - Player: 'reference/components/ui/widgets/Player.md'
           - Zoom: 'reference/components/ui/widgets/Zoom.md'
+        - AnnotationsSwitch: 'reference/components/ui/AnnotationsSwitch.md'
         - Button: 'reference/components/ui/Button.md'
         - ButtonGroup: 'reference/components/ui/ButtonGroup.md'
         - CopyButton: 'reference/components/ui/CopyButton.md'
         - Grade: 'reference/components/ui/Grade.md'
-        - HashTags: 'reference/components/ui/HashTags.md'
         - LinkButton: 'reference/components/ui/LinkButton.md'
         - ListGroup: 'reference/components/ui/ListGroup.md'
         - ListItem: 'reference/components/ui/ListItem.md'
@@ -103,6 +104,7 @@ nav:
         - ProgressBar: 'reference/components/ui/ProgressBar.md'
         - QualityScore: 'reference/components/ui/QualityScore.md'
         - SearchBar: 'reference/components/ui/SearchBar.md'
+        - SemanticsEditor: 'reference/components/ui/SemanticsEditor.md'
         - SemanticsTable: 'reference/components/ui/SemanticsTable.md'
         - TogglableGroup: 'reference/components/ui/TogglableGroup.md'
     - utils:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3",
+  "version": "4.1.0-develop-e5370cde",
   "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/public/map.html

@@ -5,13 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>Panoramax Coverage Map</title>
   <style>
-    #map {
+    #coverage {
       position: relative;
       width: 95%;
       margin: 2.5%;
       height: 400px;
     }
-    #map.fullpage {
+    #coverage.fullpage {
       position: fixed;
       top: 0;
       bottom: 0;
@@ -32,7 +32,7 @@
   id="coverage"
   class="fullpage"
   endpoint="https://api.panoramax.xyz/api"
-/>
+></pnx-coverage-map>
 
 <script>
   // Retrieve component from DOM

package/public/photo.html

@@ -33,7 +33,7 @@
   class="fullpage"
   sequence="ecfe4b2c-0acd-4d3a-a10d-c3e6818755c8"
   picture="329af5c6-4761-4a6d-9c1e-674fd6daa8b6"
-/>
+></pnx-photo-viewer>
 
 <script>
   var servers = {

package/public/viewer.html

@@ -35,15 +35,15 @@
     raster: {
       type: "raster",
       tiles: [
-        "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_21&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
+        "https://data.geopf.fr/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM_0_19&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}"
       ],
       minzoom: 0,
-      maxzoom: 21,
+      maxzoom: 19,
       attribution: "© IGN",
       tileSize: 256
     }
   }'
-/>
+></pnx-viewer>
 
 <script>
   var servers = {

package/public/widgets.html

@@ -39,6 +39,7 @@
 		<a href="#search-bar">Search bar</a>
 		<a href="#progress-bar">Progress bar</a>
 		<a href="#tabs">Tabs</a>
+		<a href="#semantics-editor">Semantics Editor</a>
 	</nav>
 
 	<h2 id="button">Button</h2>
@@ -302,5 +303,36 @@
 			<div slot="content">Tab 3 content</div>
 		</pnx-tabs>
 	</div>
+
+	<h2 id="semantics-editor">Semantics editor</h2>
+	<script>
+		window.addEventListener("load", () => {
+			const semeditors = document.getElementsByTagName("pnx-semantics-editor");
+			for(let i=0; i < semeditors.length; i++) {
+				const semeditor = semeditors[i];
+				const div = semeditor.nextSibling;
+				semeditor.addEventListener("change", e => {
+					console.log("Semantics change > evt =", e.detail, "| attr =", semeditor.getAttribute("semantics"));
+				});
+			}
+		});
+	</script>
+	<div class="test-bench">
+		<h3>Empty</h3>
+		<pnx-semantics-editor _t='{"pnx": {"semantics_editor_error": "The syntax is invalid. Your tags may look like:\nkey=value\nprefix|key=value\nprefix|key[qualif_key=qualif_val]=value"}}'></pnx-semantics-editor>
+	</div>
+	<div class="test-bench">
+		<h3>Filled</h3>
+		<pnx-semantics-editor semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor>
+	</div>
+	<div class="test-bench">
+		<h3>Many rows</h3>
+		<pnx-semantics-editor rows="5" semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor>
+	</div>
+	<div class="test-bench">
+		<h3>Custom style</h3>
+		<style>#pnx-sem-ed3::part(text) { color: blue; }</style>
+		<pnx-semantics-editor id="pnx-sem-ed3" semantics="[{key: 'osm|traffic_sign', value: 'FR:A14b'}]"></pnx-semantics-editor>
+	</div>
 </body>
 </html>

package/src/components/core/Basic.css

@@ -28,11 +28,13 @@
 	--widget-bg-inactive: var(--grey-pale);
 	--widget-bg-primary: var(--blue-semi);
 	--widget-bg-primary-hover: #e0e7ff;
+	--widget-bg-warn: #FFECB3;
 	--widget-border-div: var(--grey-pale);
 	--widget-border-btn: var(--blue);
 	--widget-font: var(--grey-dark);
 	--widget-font-active: var(--white);
 	--widget-font-direct: var(--blue);
+	--widget-font-warn: #BF360C;
 	--font-family: "Atkinson Hyperlegible Next", sans-serif;
 	overscroll-behavior-y: contain;
 }

package/src/components/core/Basic.js

@@ -341,7 +341,9 @@ export default class Basic extends LitElement {
 	static GetJSONConverter() {
 		return {
 			fromAttribute: (value) => {
-				return typeof value === "object" ? value : JSON5.parse(value);
+				if(value === null || value === "") { return null; }
+				else if(typeof value === "object" || Array.isArray(value)) { return value; }
+				else { return JSON5.parse(value); }
 			},
 			toAttribute: (value) => JSON.stringify(value)
 		};

package/src/components/core/CoverageMap.css

@@ -1,5 +1,6 @@
 pnx-coverage-map {
 	display: block;
+	position: relative;
 }
 
 pnx-coverage-map .maplibregl-map {

package/src/components/core/CoverageMap.js

@@ -59,6 +59,12 @@ export default class CoverageMap extends Basic {
 		});
 	}
 
+	/** @private */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.map?.destroy();
+	}
+
 	getClassName() {
 		return "CoverageMap";
 	}

package/src/components/core/Editor.css

@@ -2,6 +2,7 @@
 pnx-editor {
 	display: flex;
 	flex-direction: column;
+	position: relative;
 }
 
 pnx-editor .pnx-map,
@@ -20,4 +21,5 @@ pnx-editor pnx-map-background {
   	color: var(--widget-font);
 	bottom: 10px;
 	left: 10px;
+	font-family: var(--font-family);
 }

package/src/components/core/Editor.js

@@ -3,13 +3,10 @@ import "./Editor.css";
 import Basic from "./Basic";
 import Map from "../ui/Map";
 import Photo from "../ui/Photo";
-import BackgroundAerial from "../../img/bg_aerial.jpg";
-import BackgroundStreets from "../../img/bg_streets.jpg";
 import { apiFeatureToPSVNode } from "../../utils/picture";
 import { linkMapAndPhoto } from "../../utils/map";
 import { VECTOR_STYLES } from "../../utils/map";
 import { SYSTEM as PSSystem } from "@photo-sphere-viewer/core";
-import { css } from "lit";
 import { createWebComp } from "../../utils/widgets";
 
 const LAYER_HEADING_ID = "sequence-headings";
@@ -19,6 +16,8 @@ const LAYER_HEADING_ID = "sequence-headings";
  * It shows both picture and map.
  * 
  * Make sure to set width/height through CSS for proper display.
+ * 
+ * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
  * @class Panoramax.components.core.Editor
  * @element pnx-editor
  * @extends Panoramax.components.core.Basic
@@ -29,12 +28,28 @@ const LAYER_HEADING_ID = "sequence-headings";
  * @property {Panoramax.utils.API} api The API manager
  * @property {Panoramax.components.ui.Map} map The MapLibre GL map itself
  * @property {Panoramax.components.ui.Photo} psv The Photo Sphere Viewer component itself
+ * @property {Panoramax.components.layout.CorneredGrid} grid The grid layout manager
+ * @slot `top-left` The top-left corner
+ * @slot `top` The top middle corner
+ * @slot `top-right` The top-right corner
+ * @slot `bottom-left` The bottom-left corner
+ * @slot `bottom` The bottom middle corner
+ * @slot `bottom-right` The bottom-right corner
  * @example
  * ```html
+ * <!-- Basic example -->
  * <pnx-editor
  *   endpoint="https://panoramax.openstreetmap.fr/"
  *   style="width: 300px; height: 250px"
  * />
+ * 
+ * <!-- With slotted widgets -->
+ * <pnx-editor
+ *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
+ * >
+ *   <p slot="top-right">My custom text</p>
+ * </pnx-editor>
  * ```
  */
 export default class Editor extends Basic {
@@ -67,7 +82,13 @@ export default class Editor extends Basic {
 
 		// Create sub-containers
 		this._psvContainer = document.createElement("div");
+		this._psvContainer.setAttribute("slot", "bg");
 		this._mapContainer = document.createElement("div");
+		this._mapContainer.setAttribute("slot", "bg");
+
+		this.grid = createWebComp("pnx-cornered-grid");
+		this.grid.appendChild(this._psvContainer);
+		this.grid.appendChild(this._mapContainer);
 
 		this.onceAPIReady().then(() => {
 			this.loader.setAttribute("value", 30);
@@ -83,6 +104,13 @@ export default class Editor extends Basic {
 		});
 	}
 
+	/** @private */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.map?.destroy();
+		this.psv?.destroy();
+	}
+
 	getClassName() {
 		return "Editor";
 	}
@@ -102,6 +130,10 @@ export default class Editor extends Basic {
 			this.users = [];
 		}
 		super.connectedCallback();
+
+		window.addEventListener("DOMContentLoaded", () => {
+			this._moveChildToGrid();
+		}, { once: true });
 	}
 
 	attributeChangedCallback(name, old, value) {
@@ -115,11 +147,11 @@ export default class Editor extends Basic {
 
 	/** @private */
 	render() {
-		return [this.loader, this._psvContainer, this._mapContainer];
+		return [this.loader, this.grid];
 	}
 
 	getSubComponentsNames() {
-		return super.getSubComponentsNames().concat(["map", "psv"]);
+		return super.getSubComponentsNames().concat(["map", "psv", "grid"]);
 	}
 
 	/** @private */
@@ -142,6 +174,7 @@ export default class Editor extends Basic {
 				background: this.background,
 				supplementaryStyle: this._createMapStyle(),
 				zoom: 15, // Hack to avoid _initMapPosition call
+				picMarkerDraggable: true,
 			});
 			linkMapAndPhoto(this);
 			this.loader.setAttribute("value", 50);
@@ -243,6 +276,7 @@ export default class Editor extends Basic {
 				"type": "FeatureCollection",
 				"features": [
 					{
+						"id": this.sequence,
 						"type": "Feature",
 						"properties": {
 							"id": this.sequence,
@@ -312,8 +346,23 @@ export default class Editor extends Basic {
 	 */
 	_addMapBackgroundWidget() {
 		// Container
-		const pnlLayers = createWebComp("pnx-map-background", {_parent: this, size: "sm"});
-		this._mapContainer.appendChild(pnlLayers);
+		const pnlLayers = createWebComp("pnx-map-background", {_parent: this, size: "sm", slot: "bottom-left"});
+		this.grid.appendChild(pnlLayers);
+	}
+
+	/** @private */
+	_moveChildToGrid() {
+		const slotContent = Array.from(this.querySelectorAll("[slot]"));
+
+		slotContent.forEach(n => {
+			// Add parent + translation for our components
+			if(n.tagName?.toLowerCase().startsWith("pnx-")) {
+				n._parent = this;
+				n._t = this._t;
+			}
+
+			this.grid.appendChild(n);
+		});
 	}
 
 	/**

package/src/components/core/PhotoViewer.css

@@ -1,3 +1,8 @@
+pnx-photo-viewer {
+	position: relative;
+	display: block;
+}
+
 /* Maximized components */
 pnx-photo-viewer .pnx-psv {
 	position: absolute;
@@ -35,14 +40,9 @@ pnx-photo-viewer pnx-cornered-grid::part(corner-bottom-right) {
 	}
 }
 
-@media screen and (min-width: 576px) {
-	pnx-photo-viewer pnx-widget-legend {
-		position: absolute;
-		left: 10px;
-		top: 60px;
-	}
-
-	pnx-photo-viewer pnx-widget-legend {
-		top: 10px;
-	}
+/* Hidden widgets on sequence play */
+pnx-photo-viewer.pnx-playing pnx-bottom-drawer,
+pnx-photo-viewer.pnx-playing pnx-widget-legend,
+pnx-photo-viewer.pnx-playing pnx-widget-zoom {
+	display: none;
 }

package/src/components/core/PhotoViewer.js

@@ -7,13 +7,14 @@ import URLHandler from "../../utils/URLHandler";
 import Basic from "./Basic";
 import Photo, { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../ui/Photo";
 import { createWebComp } from "../../utils/widgets";
-import { isNullId } from "../../utils/utils";
+import { isNullId, isInIframe } from "../../utils/utils";
 import { default as InitParameters, alterPSVState, alterMapState, alterPhotoViewerState } from "../../utils/InitParameters";
 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"];
 
 
 /**
@@ -85,11 +86,13 @@ export default class PhotoViewer extends Basic {
 	 * @property {object} [fetchOptions] Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters))
 	 * @property {string} [lang] To override language used for labels. Defaults to using user's preferred languages.
 	 * @property {string} [url-parameters=true] Should the component add and update URL query parameters to save viewer state ?
+	 * @property {string} [keyboard-shortcuts=true] Should keyboard shortcuts be enabled ? Set to "false" to fully disable any keyboard shortcuts.
 	 */
 	static properties = {
 		psv: {converter: Basic.GetJSONConverter()},
 		widgets: {type: String},
 		"url-parameters": {type: String},
+		"keyboard-shortcuts": {type: String},
 		...Basic.properties
 	};
 
@@ -99,6 +102,7 @@ export default class PhotoViewer extends Basic {
 		// Defaults
 		this.psv = {};
 		this["url-parameters"] = this.getAttribute("url-parameters") || true;
+		this["keyboard-shortcuts"] = this.getAttribute("keyboard-shortcuts") || true;
 		this.widgets = this.getAttribute("widgets") || "true";
 
 		// Init DOM containers
@@ -121,14 +125,33 @@ export default class PhotoViewer extends Basic {
 	/** @private */
 	_initWidgets() {
 		if(this._initParams.getParentPostInit().widgets !== "false") {
-			this.grid.appendChild(createWebComp("pnx-widget-player", {
-				slot: "top",
-				_parent: this,
-				class: "pnx-only-psv pnx-print-hidden",
-				size: this.isHeightSmall() ? "md": "xl",
-			}));
-
-			if(!this.isWidthSmall()) {
+			if(!isInIframe()) {
+				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-annotations-switch", {
+					slot: "top",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+					size: this.isHeightSmall() ? "md": "xl",
+				}));
+			}
+
+			if(isInIframe()) {
+				this.legend = createWebComp("pnx-widget-legend", {
+					slot: "bottom-right",
+					light: true,
+					_parent: this,
+					focus: this._initParams.getParentPostInit().focus,
+					picture: this._initParams.getParentPostInit().picture,
+				});
+				this.grid.appendChild(this.legend);
+			}
+			else if(!this.isWidthSmall()) {
 				this.legend = createWebComp("pnx-widget-legend", {
 					slot: !this.isWidthSmall() ? "top-left" : undefined,
 					_parent: this,
@@ -142,12 +165,6 @@ export default class PhotoViewer extends Basic {
 					_parent: this
 				}));
 				this.grid.appendChild(this.legend);
-
-				this.grid.appendChild(createWebComp("pnx-hashtags", {
-					slot: "top-right",
-					_parent: this,
-					class: "pnx-only-psv pnx-print-hidden",
-				}));
 			}
 			else {
 				this.legend = createWebComp("pnx-picture-legend", { _parent: this });
@@ -181,12 +198,17 @@ export default class PhotoViewer extends Basic {
 		}
 
 		this.onceAPIReady().then(this._postAPIInit.bind(this));
+
+		window.addEventListener("DOMContentLoaded", () => {
+			this._moveChildToGrid();
+		}, { once: true });
 	}
 
 	/** @private */
-	firstUpdated() {
-		super.firstUpdated();
-		this._moveChildToGrid();		
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.urlHandler?.destroy();
+		this.psv?.destroy();
 	}
 
 	getClassName() {
@@ -266,7 +288,10 @@ export default class PhotoViewer extends Basic {
 		this._initPSV();
 		this._initWidgets();
 		alterPhotoViewerState(this, myPostInitParams);
-		this._handleKeyboardManagement();
+		
+		if(myPostInitParams.keyboardShortcuts) {
+			this._handleKeyboardManagement();
+		}
 		
 		if(myPostInitParams.picture) {
 			this.psv.addEventListener("picture-loaded", () => this.loader.dismiss(), {once: true});
@@ -313,6 +338,10 @@ export default class PhotoViewer extends Basic {
 				this.loader.setAttribute("value", 50);
 				alterPSVState(this.psv, this._initParams.getPSVPostInit());
 			});
+
+			// Show class when PSV is playing sequence
+			this.psv.addEventListener("sequence-playing", () => this.classList.add("pnx-playing"));
+			this.psv.addEventListener("sequence-stopped", () => this.classList.remove("pnx-playing"));
 		}
 		catch(e) {
 			let err = !PSSystem.isWebGLSupported ? this._t.pnx.error_webgl : this._t.pnx.error_psv;
@@ -327,13 +356,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.css

@@ -1,3 +1,8 @@
+pnx-viewer {
+	position: relative;
+	display: block;
+}
+
 /* Maximized components */
 pnx-viewer .pnx-map.maplibregl-map,
 pnx-viewer .pnx-psv {
@@ -56,7 +61,6 @@ pnx-viewer pnx-mini {
 	pnx-viewer pnx-mini {
 		min-width: unset;
 		min-height: unset;
-		margin-bottom: 40px;
 	}
 }
 
@@ -95,4 +99,12 @@ pnx-viewer .pnx-map .maplibregl-ctrl-attrib {
 		width: 250px;
 		max-width: 40vw;
 	}
-}
+}
+
+/* Hidden widgets on sequence play */
+pnx-viewer.pnx-playing pnx-bottom-drawer,
+pnx-viewer.pnx-playing pnx-mini,
+pnx-viewer.pnx-playing pnx-widget-legend,
+pnx-viewer.pnx-playing pnx-widget-zoom {
+	display: none;
+}