@panoramax/web-viewer 4.0.3-develop-25adfc80 → 4.0.3-develop-fcd1db46

package/docs/index.md

@@ -118,6 +118,19 @@ A photo-only viewer, showing one picture at a time, and offering navigation thro
 />
 ```
 
+If you'd like a photo viewer that looks like an iframe embed (with only a small legend widget), you may use this code:
+
+```html
+<pnx-photo-viewer
+  endpoint="https://api.panoramax.xyz/api"
+  sequence="id-to-an-existing-sequence"
+  picture="id-to-a-picture-in-this-sequence"
+  widgets="false"
+>
+	<pnx-widget-legend light slot="bottom-right"></pnx-widget-legend>
+</pnx-photo-viewer>
+```
+
 [Many options are available as well](./reference/components/core/PhotoViewer.md).
 
 __Editor__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.3-develop-25adfc80",
+  "version": "4.0.3-develop-fcd1db46",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/PhotoViewer.css

@@ -35,18 +35,6 @@ 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,

package/src/components/layout/BottomDrawer.js

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { onceParentAvailable } from "../../utils/widgets";
 
 const OPENNESS_Y_PCT = { "opened": 0, "half-opened": 0.7, "closed": 1 };
 
@@ -104,7 +105,7 @@ export default class BottomDrawer extends LitElement {
 		drawer.style.height = `${this._drawerHeight}px`;
 		drawer.style.maxHeight = `${this._drawerHeight}px`;
 
-		this._parent?.onceReady().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
 			this._parent.map?.addEventListener("click", () => this.openness = "closed");
 			this._parent.psv?.addEventListener("click", () => this.openness = "closed");
 		});

package/src/components/menus/AnnotationsList.js

@@ -3,6 +3,7 @@ import { faSvg, iconify } from "../styles";
 import { fa, moreIcons } from "../../utils/widgets";
 import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
+import { onceParentAvailable } from "../../utils/widgets";
 import "iconify-icon";
 
 /**
@@ -42,15 +43,18 @@ export default class AnnotationsList extends LitElement {
 		super.connectedCallback();
 
 		this._onPicChange();
-		this._parent?.psv?.addEventListener("picture-loaded", this._onPicChange.bind(this));
-
-		this._parent?.psv?.addEventListener("annotation-click", e => {
-			const aPos = this._meta.properties?.annotations?.findIndex(a => a.id === e.detail.annotationId);
-			if(aPos >= 0) { this._onListItemClick(Object.assign({nb: aPos+1}, this._meta.properties.annotations[aPos])); }
-		});
-
-		this._parent?.psv?.addEventListener("annotations-unfocused", () => {
-			this._onListItemClick(null);
+		
+		onceParentAvailable(this).then(() => {
+			this._parent.psv?.addEventListener("picture-loaded", this._onPicChange.bind(this));
+
+			this._parent.psv?.addEventListener("annotation-click", e => {
+				const aPos = this._meta.properties?.annotations?.findIndex(a => a.id === e.detail.annotationId);
+				if(aPos >= 0) { this._onListItemClick(Object.assign({nb: aPos+1}, this._meta.properties.annotations[aPos])); }
+			});
+
+			this._parent.psv?.addEventListener("annotations-unfocused", () => {
+				this._onListItemClick(null);
+			});
 		});
 	}
 

package/src/components/menus/MapBackground.js

@@ -1,6 +1,8 @@
 import { LitElement, html, css } from "lit";
 import BackgroundAerial from "../../img/bg_aerial.jpg";
 import BackgroundStreets from "../../img/bg_streets.jpg";
+import { onceParentAvailable } from "../../utils/widgets";
+
 
 /**
  * Map Background menu allows user to select background.
@@ -60,10 +62,13 @@ export default class MapBackground extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.map?.on("background-changed", e => {
-			this.bg = e.background;
+
+		onceParentAvailable(this).then(() => {
+			this._parent.map?.on("background-changed", e => {
+				this.bg = e.background;
+			});
+			this.bg = this._parent.map?.getBackground();
 		});
-		this.bg = this._parent?.map?.getBackground();
 	}
 
 	/** @private */

package/src/components/menus/MapFilters.js

@@ -8,6 +8,7 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons/faArrowRight";
 import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
+import { onceParentAvailable } from "../../utils/widgets";
 
 /**
  * Map Filters menu allows user to select map data they want displayed.
@@ -180,7 +181,7 @@ export default class MapFilters extends LitElement {
 		}
 
 		// Map zoom
-		this._parent?.onceMapReady?.().then(async () => {
+		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(async () => {
 			this._parent.map.on("zoomend", this._onMapZoom.bind(this));
 			this._parent.map.on("filters-changed", this._onParentFilterChange.bind(this));
 			this._onMapZoom();
@@ -193,7 +194,7 @@ export default class MapFilters extends LitElement {
 				const username = await this._parent.api.getUserName(vu[0]);
 				if(username) { this.user = username; }
 			}
-		});
+		}));
 	}
 
 	/**

package/src/components/menus/MapLayers.js

@@ -5,6 +5,7 @@ import { COLORS } from "../../utils/utils";
 import { faEarthEurope } from "@fortawesome/free-solid-svg-icons/faEarthEurope";
 import { faPalette } from "@fortawesome/free-solid-svg-icons/faPalette";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+import { onceParentAvailable } from "../../utils/widgets";
 
 /**
  * Map Layers menu allows user to select background and map theme.
@@ -56,10 +57,10 @@ export default class MapLayers extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
 			this.theme = this._parent.map._mapFilters.theme;
 			this._parent.map.on("filters-changed", e => this.theme = e.theme);
-		});
+		}));
 	}
 
 	/** @private */

package/src/components/menus/PictureLegend.js

@@ -1,7 +1,7 @@
 import { LitElement, nothing, css } from "lit";
 import { html, unsafeStatic } from "lit/static-html.js";
 import { classMap } from "lit/directives/class-map.js";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
 import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
@@ -165,18 +165,20 @@ export default class PictureLegend extends LitElement {
 		this._expanded = !this.collapsable;
 		this._prevSearches = {};
 
-		this._parent.onceReady().then(() => {
-			this._onPicChange(this._parent.psv.getPictureMetadata());
-			this._parent.psv.addEventListener("picture-loaded", () => {
+		onceParentAvailable(this)
+			.then(() => this._parent.onceReady())
+			.then(() => {
 				this._onPicChange(this._parent.psv.getPictureMetadata());
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+				this._parent.psv.addEventListener("sequence-stopped", () => {
+					this._onPicChange(this._parent.psv.getPictureMetadata());
+				});
+				this._parent.psv.addEventListener("annotation-click", () => {
+					this._expanded = true;
+				});
 			});
-			this._parent.psv.addEventListener("sequence-stopped", () => {
-				this._onPicChange(this._parent.psv.getPictureMetadata());
-			});
-			this._parent.psv.addEventListener("annotation-click", () => {
-				this._expanded = true;
-			});
-		});
 	}
 
 	/** @private */

package/src/components/menus/PictureMetadata.js

@@ -1,6 +1,6 @@
 import { LitElement, nothing, css } from "lit";
 import { html, unsafeStatic } from "lit/static-html.js";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
 import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
 import { faCamera } from "@fortawesome/free-solid-svg-icons/faCamera";
@@ -82,14 +82,16 @@ export default class PictureMetadata extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this._meta = this._parent?.psv?.getPictureMetadata();
-		this._parent?.oncePSVReady?.().then(() => {
-			this._parent.psv.addEventListener("picture-loaded", () => {
-				this._meta = this._parent.psv.getPictureMetadata();
-			});
-			this._parent.psv.addEventListener("annotation-click", () => {
-				const tabs = this.shadowRoot.querySelector("pnx-tabs");
-				if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+		onceParentAvailable(this).then(() => {
+			this._meta = this._parent?.psv?.getPictureMetadata();
+			this._parent?.oncePSVReady?.().then(() => {
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._meta = this._parent.psv.getPictureMetadata();
+				});
+				this._parent.psv.addEventListener("annotation-click", () => {
+					const tabs = this.shadowRoot.querySelector("pnx-tabs");
+					if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+				});
 			});
 		});
 	}

package/src/components/menus/PlayerOptions.js

@@ -4,7 +4,7 @@ import { faRocket } from "@fortawesome/free-solid-svg-icons/faRocket";
 import { faLightbulb } from "@fortawesome/free-solid-svg-icons/faLightbulb";
 import { faPersonBiking } from "@fortawesome/free-solid-svg-icons/faPersonBiking";
 import { PIC_MAX_STAY_DURATION } from "../ui/Photo";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 
 /**
  * Player Options menu displays player speed and contrast settings.
@@ -40,9 +40,9 @@ export default class PlayerOptions extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.psv?.addEventListener("transition-duration-changed", e => {
+		onceParentAvailable(this).then(() => this._parent?.psv?.addEventListener("transition-duration-changed", e => {
 			this.renderRoot.querySelector("#pnx-player-speed").value = PIC_MAX_STAY_DURATION - e.detail.value;
-		});
+		}));
 	}
 
 	/** @private */

package/src/components/menus/Share.js

@@ -1,5 +1,5 @@
 import { LitElement, css, html } from "lit";
-import { fa } from "../../utils/widgets";
+import { fa, onceParentAvailable } from "../../utils/widgets";
 import { faSvg, textarea, titles, input } from "../styles";
 import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
 import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
@@ -47,7 +47,7 @@ export default class ShareMenu extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.onceReady().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
 			this._onUrlChange();
 			this._parent.urlHandler.addEventListener("url-changed", this._onUrlChange.bind(this));
 		});

package/src/components/ui/AnnotationsSwitch.js

@@ -3,6 +3,10 @@ import { fa } from "../../utils/widgets";
 import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
 import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
 import { hasAnnotations } from "../../utils/picture";
+import { classMap } from "lit/directives/class-map.js";
+import { panel } from "../styles";
+
+const DISABLE_ANNOTATIONS_PARAM = "pnx-disable-annotations";
 
 /**
  * AnnotationsSwitch component allows to switch on/off pictures annotations.
@@ -16,7 +20,14 @@ import { hasAnnotations } from "../../utils/picture";
  */
 export default class AnnotationsSwitch extends LitElement {
 	/** @private */
-	static styles = css`
+	static styles = [ panel, css`
+		.pnx-panel {
+			padding: 5px;
+			margin-top: 5px;
+			width: max-content;
+  			min-width: unset;
+		}
+
 		/* Custom button look */
 		pnx-button::part(btn) {
 			border-radius: 8px;
@@ -30,6 +41,13 @@ export default class AnnotationsSwitch extends LitElement {
 			width: 38px;
 		}
 
+		pnx-button[active]::part(btn),
+		pnx-button[active]:hover::part(btn) {
+			background-color: var(--widget-bg-active) !important;
+			border-color: var(--widget-bg-active) !important;
+			color: var(--widget-font-active) !important;
+		}
+
 		/* No-annotations badge */
 		.pnx-annotations-switch-empty {
 			position: absolute;
@@ -48,7 +66,7 @@ export default class AnnotationsSwitch extends LitElement {
 		pnx-button[active] .pnx-annotations-switch-empty {
 			color: var(--yellow);
 		}
-	`;
+	`];
 
 	/**
 	 * Component properties.
@@ -61,12 +79,14 @@ export default class AnnotationsSwitch extends LitElement {
 		size: {type: String},
 		_annotationsToggled: {state: true},
 		_warnNoAnnot: {state: true},
+		_warnNoAnnotTooltip: {state: true},
 	};
 
 	constructor() {
 		super();
 		this._annotationsToggled = false;
 		this._warnNoAnnot = false;
+		this._warnNoAnnotTooltip = false;
 		this.size = "xl";
 	}
 
@@ -74,9 +94,13 @@ export default class AnnotationsSwitch extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
+		// Check if annotations have been explicitly disabled
+		const annotsDisabled = localStorage.getItem(DISABLE_ANNOTATIONS_PARAM) === "true";
+
 		this._parent.onceReady().then(() => {
 			this._parent.psv.addEventListener("annotations-toggled", e => {
 				this._annotationsToggled = e.detail.visible;
+				this._persistAnnotationsLocalStorage(this._annotationsToggled);
 			});
 
 			this._warnNoAnnot = !hasAnnotations(this._parent.psv.getPictureMetadata());
@@ -88,35 +112,57 @@ export default class AnnotationsSwitch extends LitElement {
 		this._parent.onceFirstPicLoaded().then(() => {
 			this._annotationsToggled = this._parent.psv.areAnnotationsVisible() || false;
 
-			if(!this._annotationsToggled) {
+			if(!this._annotationsToggled && !annotsDisabled) {
 				this._parent.psv.toggleAllAnnotations(true);
 				this._annotationsToggled = true;
 			}
+			this._persistAnnotationsLocalStorage(this._annotationsToggled);
 		});
 	}
 
+	/** @private */
+	_persistAnnotationsLocalStorage(isAnnotToggled) {
+		console.log("save", isAnnotToggled);
+		localStorage.setItem(DISABLE_ANNOTATIONS_PARAM, isAnnotToggled ? "false": "true");
+	}
+
+	/** @private */
 	_onClick() {
+		if(!this._annotationsToggled && this._warnNoAnnot) {
+			this._warnNoAnnotTooltip = true;
+			setTimeout(() => this._warnNoAnnotTooltip = false, 2000);
+		}
+		this._persistAnnotationsLocalStorage(!this._annotationsToggled);
 		this._parent.psv.toggleAllAnnotations(!this._annotationsToggled);
 	}
 
 	/** @private */
 	render() {
 		/* eslint-disable indent */
+		const panelClasses = {
+			"pnx-panel": true,
+			"pnx-hidden": !this._warnNoAnnotTooltip,
+		};
+
 		return html`
 			<pnx-button
-				kind="outline"
+				kind="superflat"
 				size=${this.size}
 				style="vertical-align: middle"
-				title=${[
-					this._annotationsToggled ? this._parent._t?.pnx.semantics_hide_annotations : this._parent._t?.pnx.semantics_show_annotations,
-					this._warnNoAnnot ? this._parent._t?.pnx.semantics_zero_annotations : null
-				].filter(v => v).join(" ")}
+				class="pnx-print-hidden"
+				title=${this._annotationsToggled ? this._parent._t?.pnx.semantics_hide_annotations : this._parent._t?.pnx.semantics_show_annotations}
 				active=${this._annotationsToggled ? "" : nothing}
 				@click=${this._onClick}
 			>
-				${fa(faTags, { styles: { "height": "unset" }})}
+				${fa(faTags, { styles: { "height": "20px" }})}
 				${this._warnNoAnnot ? fa(faTriangleExclamation, { classes: "pnx-annotations-switch-empty" }) : nothing}
 			</pnx-button>
+			<div
+				class=${classMap(panelClasses)}
+				@click=${() => this._warnNoAnnotTooltip = false}
+			>
+				${this._parent._t?.pnx.semantics_zero_annotations}
+			</div>
 		`;
 	}
 }

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

@@ -3,6 +3,7 @@ import maplibregl from "!maplibre-gl";
 
 import { LitElement, html } from "lit";
 import { forwardGeocodingBAN, forwardGeocodingStandard, forwardGeocodingNominatim } from "../../../utils/geocoder";
+import { onceParentAvailable } from "../../../utils/widgets";
 import "./GeoSearch.css";
 
 const GEOCODER_ENGINES = {
@@ -63,10 +64,10 @@ export default class GeoSearch extends LitElement {
 		super.connectedCallback();
 
 		this._geocoderEngine = GEOCODER_ENGINES[this.geocoder] || (config => GEOCODER_ENGINES.standard(config, this.geocoder));
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
 			this._geolocate = this._geolocateCtrl.onAdd(this._parent.map);
 			this._geolocate.setAttribute("slot", "pre");
-		});
+		}));
 	}
 
 	/** @private */

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

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { faSliders } from "@fortawesome/free-solid-svg-icons/faSliders";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
@@ -45,7 +45,7 @@ export default class MapFiltersButton extends LitElement {
 		super.connectedCallback();
 
 		// Listen to user visibility changes to switch the filter active icon
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
 			this._active = (
 				Object.keys(this._parent.map._mapFilters).filter(d => d && d !== "theme").length > 0
 				|| this._parent.map.getVisibleUsers().filter(u => u !== "geovisio").length > 0
@@ -64,7 +64,7 @@ export default class MapFiltersButton extends LitElement {
 					|| e.usersIds.filter(u => u !== "geovisio").length > 0
 				);
 			});
-		});
+		}));
 	}
 
 	/** @private */

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

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { faLayerGroup } from "@fortawesome/free-solid-svg-icons/faLayerGroup";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
@@ -35,12 +35,12 @@ export default class MapLayersButton extends LitElement {
 
 		const nullThemes = [undefined, null, "", "default"];
 
-		this._parent?.onceMapReady?.().then(() => {
+		onceParentAvailable(this).then(() => this._parent?.onceMapReady?.().then(() => {
 			this._active = !nullThemes.includes(this._parent.map._mapFilters.theme);
 			this._parent.map.on("filters-changed", e => {
 				this._active = !nullThemes.includes(e.theme);
 			});
-		});
+		}));
 	}
 
 	/** @private */

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

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing, css } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { josmBboxParameters } from "../../../utils/utils";
 import { IdEditorURL } from "../../../utils/services";
 import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
@@ -40,7 +40,7 @@ export default class OSMEditors extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.onceReady().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
 			this._parent.onceFirstPicLoaded().then(this._onPictureLoad.bind(this));
 			this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this));
 		});

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

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing, css } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
 import { noprint } from "../../styles";
 
@@ -42,7 +42,7 @@ export default class PictureLegendActions extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this._parent?.onceReady().then(() => {
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
 			this._meta = this._parent.psv.getPictureMetadata();
 			this._parent.psv.addEventListener("picture-loaded", () => {
 				this._meta = this._parent.psv.getPictureMetadata();

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

@@ -1,5 +1,5 @@
 import { LitElement, html, nothing } from "lit";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { faBackward } from "@fortawesome/free-solid-svg-icons/faBackward";
 import { faPlay } from "@fortawesome/free-solid-svg-icons/faPlay";
 import { faPause } from "@fortawesome/free-solid-svg-icons/faPause";
@@ -52,13 +52,13 @@ export default class Player extends LitElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		this._parent?.oncePSVReady?.().then(() => {
+		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("picture-loaded", this._changeActiveStates.bind(this));
 			this._parent.addEventListener("pictures-navigation-changed", this._changeActiveStates.bind(this));
 			this._changeActiveStates();
-		});
+		}));
 	}
 
 	/** @private */

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

@@ -1,7 +1,7 @@
 import { LitElement, html } from "lit";
 import { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../Photo";
 import { PSV_ZOOM_DELTA } from "../../core/Viewer";
-import { fa } from "../../../utils/widgets";
+import { fa, onceParentAvailable } from "../../../utils/widgets";
 import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
 import { faMinus } from "@fortawesome/free-solid-svg-icons/faMinus";
 import "../ButtonGroup.css";
@@ -30,7 +30,9 @@ export default class Zoom extends LitElement {
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
-		this._parent?.oncePSVReady?.().then(() => this._lastWantedZoom = this._parent?.psv?.getZoomLevel() || PSV_DEFAULT_ZOOM);
+		onceParentAvailable(this).then(() => this._parent?.oncePSVReady?.().then(() => {
+			this._lastWantedZoom = this._parent?.psv?.getZoomLevel() || PSV_DEFAULT_ZOOM;
+		}));
 	}
 
 	/** @private */

package/src/translations/en.json

@@ -192,7 +192,7 @@
         "semantics_qualifiers": "Qualifiers",
         "semantics_show_annotations": "Display picture annotations",
         "semantics_hide_annotations": "Hide picture annotations",
-        "semantics_zero_annotations": "(no annotation set on this picture)",
+        "semantics_zero_annotations": "No annotation set on this picture",
         "semantics_hashtags": "Picture hashtags",
         "semantics_wikidata_properties": {
             "P31": "instance of",

package/src/translations/fr.json

@@ -192,7 +192,7 @@
         "semantics_qualifiers": "Qualificateurs",
         "semantics_show_annotations": "Afficher les annotations de photo",
         "semantics_hide_annotations": "Masquer les annotations de photo",
-        "semantics_zero_annotations": "(aucune annotation sur cette image)",
+        "semantics_zero_annotations": "Aucune annotation sur cette image",
         "semantics_hashtags": "Mots-dièse de la photo",
         "semantics_wikidata_properties": {
             "P31": "instance de",

package/src/utils/widgets.js

@@ -70,3 +70,23 @@ export function listenForMenuClosure(me, callback) {
 		me._parent.legend?.addEventListener("click", () => callback());
 	});
 }
+
+/**
+ * Wait for parent availability
+ * @private
+ */
+export function onceParentAvailable(comp) {
+	if(comp._parent) {
+		return Promise.resolve(comp._parent);
+	}
+	else {
+		return new Promise(resolve => {
+			const itv = setInterval(() => {
+				if(comp._parent) {
+					clearInterval(itv);
+					resolve(comp._parent);
+				}
+			}, 100);
+		});
+	}
+}