@panoramax/web-viewer 3.2.2-develop-28ebe482 → 3.2.2-develop-ecfae3f0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.2-develop-28ebe482",
+  "version": "3.2.2-develop-ecfae3f0",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/Viewer.js

@@ -192,8 +192,8 @@ class Viewer extends CoreView {
 		const onceStuffReady = () => {
 			this._widgets = new Widgets(this, this._options.widgets);
 			
-			// Hide mini component if small width
-			if(this.map && this.isWidthSmall()) {
+			// Hide mini component if no selected picture
+			if(this.map && !this._options.selectedPicture) {
 				this.setUnfocusedVisible(false);
 			}
 
@@ -347,8 +347,11 @@ class Viewer extends CoreView {
 			this.map._getLayerSortStyle = this._getLayerSortStyle.bind(this);
 			this.addEventListener("map:users-changed", resolve, { once: true });
 			this.container.classList.add("gvs-has-mini");
+
+			// Map double-click: unselect if focused, toggle focus if unfocused
 			this.map.on("dblclick", () => {
 				if(!this.isMapWide()) { this.setFocus("map"); }
+				else { this.select(); }
 			});
 
 			if (typeof this._options.map === "object" && this._options.map.startWide) {
@@ -1003,8 +1006,8 @@ class Viewer extends CoreView {
 			this.dispatchEvent(event);
 
 			if(this._josmListener) {
-				this.removeEventListener("picture-loading", this._josmListener);
-				this.removeEventListener("picture-loaded", this._josmListener);
+				this.removeEventListener("psv:picture-loading", this._josmListener);
+				this.removeEventListener("psv:picture-loaded", this._josmListener);
 				delete this._josmListener;
 			}
 			return Promise.resolve();

package/src/components/CoreView.js

@@ -2,7 +2,7 @@ import "./CoreView.css";
 import API from "../utils/API";
 import { getTranslations } from "../utils/I18n";
 import { DEFAULT_TILES } from "../utils/Map";
-import { isInIframe, isInternetFast } from "../utils/Utils";
+import { BASE_PANORAMA_ID, isInIframe, isInternetFast } from "../utils/Utils";
 import PACKAGE_JSON from "../../package.json";
 import Loader from "./Loader";
 
@@ -143,6 +143,7 @@ export default class CoreView extends EventTarget {
 	 * @param {boolean} [force=false] Force select even if already selected
 	 */
 	select(seqId = null, picId = null, force = false) {
+		if(picId === BASE_PANORAMA_ID) { picId = null; }
 		const prevSeqId = this._selectedSeqId || null;
 		const prevPicId = this._selectedPicId || null;
 		if(!force && prevPicId == picId && prevSeqId == seqId) { return; } // Avoid running if already selected

package/src/components/Map.js

@@ -397,20 +397,27 @@ export default class Map extends maplibregl.Map {
 		this._picMarkerPreview.remove();
 
 		// Show marker corresponding to selection
-		this._picMarker
-			.setLngLat([lon, lat])
-			.setRotation(heading)
-			.addTo(this);
+		if(lon !== undefined && lat !== undefined) {
+			this._picMarker
+				.setLngLat([lon, lat])
+				.setRotation(heading)
+				.addTo(this);
+		}
+		else {
+			this._picMarker.remove();
+		}
 		
 		// Update map style to see selected sequence
 		this.reloadLayersStyles();
 
 		// Move map to picture coordinates
-		this.flyTo({
-			center: [lon, lat],
-			zoom: this.getZoom() < TILES_PICTURES_ZOOM+2 ? TILES_PICTURES_ZOOM+2 : this.getZoom(),
-			maxDuration: 2000
-		});
+		if(lon !== undefined && lat !== undefined) {
+			this.flyTo({
+				center: [lon, lat],
+				zoom: this.getZoom() < TILES_PICTURES_ZOOM+2 ? TILES_PICTURES_ZOOM+2 : this.getZoom(),
+				maxDuration: 2000
+			});
+		}
 	}
 
 	/**

package/src/components/Photo.js

@@ -3,7 +3,7 @@ import LoaderImgBase from "../img/loader_base.jpg";
 import LogoDead from "../img/logo_dead.svg";
 import {
 	getDistance, positionToXYZ, xyzToPosition,
-	apiFeatureToPSVNode, getRelativeHeading,
+	apiFeatureToPSVNode, getRelativeHeading, BASE_PANORAMA_ID,
 } from "../utils/Utils";
 
 // Photo Sphere Viewer imports
@@ -24,6 +24,17 @@ const BASE_PANORAMA = {
 	rows: 1,
 	tileUrl: () => null,
 };
+const BASE_PANORAMA_NODE = {
+	id: BASE_PANORAMA_ID,
+	caption: "",
+	panorama: BASE_PANORAMA,
+	links: [],
+	gps: [0,0],
+	sequence: {},
+	sphereCorrection: {},
+	horizontalFov: 360,
+	properties: {},
+};
 
 export const PSV_DEFAULT_ZOOM = 30;
 export const PSV_ANIM_DURATION = 250;
@@ -118,7 +129,7 @@ export default class Photo extends PSViewer {
 	 * @returns {Promise} Resolves on PSV node metadata
 	 */
 	async _getNodeFromAPI(picId) {
-		if(!picId) { return; }
+		if(!picId || picId === BASE_PANORAMA_ID) { return BASE_PANORAMA_NODE; }
 
 		const picApiResponse = await fetch(
 			this._parent._api.getPictureMetadataUrl(picId, this._picturesSequences[picId]),
@@ -364,7 +375,7 @@ export default class Photo extends PSViewer {
 
 	/**
 	 * Event handler for node change in PSV.
-	 * Allows to send a custom "picture-loaded" event.
+	 * Allows to send a custom "psv:picture-loaded" event.
 	 * @private
 	 */
 	_onNodeChanged(e) {
@@ -376,7 +387,10 @@ export default class Photo extends PSViewer {
 		if(e.node.id) {
 			this._parent.select(e.node?.sequence?.id, e.node.id);
 			const picMeta = this.getPictureMetadata();
-			if(!picMeta) { return; }
+			if(!picMeta) {
+				this._parent.dispatchEvent(new CustomEvent("psv:picture-loaded", {detail: {}}));
+				return;
+			}
 			this._prevSequence = picMeta.sequence.id;
 
 			/**
@@ -453,6 +467,7 @@ export default class Photo extends PSViewer {
 	 * @returns {object} Picture metadata
 	 */
 	getPictureMetadata() {
+		if(this._myVTour?.state?.currentNode?.id === BASE_PANORAMA_ID) { return null; }
 		return this._myVTour.state.currentNode ? Object.assign({}, this._myVTour.state.currentNode) : null;
 	}
 

package/src/utils/API.js

@@ -1,4 +1,5 @@
 import { TILES_PICTURES_ZOOM } from "./Map";
+import { BASE_PANORAMA_ID } from "./Utils";
 
 /**
  * API contains various utility functions to communicate with the backend
@@ -738,7 +739,7 @@ export default class API {
 	 * @throws {Error} If not valid
 	 */
 	static isIdValid(id) {
-		if(!id || typeof id !== "string" || id.length === 0) {
+		if(!id || typeof id !== "string" || id.length === 0 || id === BASE_PANORAMA_ID) {
 			throw new Error("id should be a valid picture unique identifier");
 		}
 		return true;

package/src/utils/Utils.js

@@ -3,6 +3,8 @@ import { getSphereCorrection, getCroppedPanoData } from "./Exif";
 import ArrowTriangleSVG from "../img/arrow_triangle.svg";
 import ArrowTurnSVG from "../img/arrow_turn.svg";
 
+export const BASE_PANORAMA_ID = "geovisio-fake-id-0";
+
 export const COLORS = {
 	BASE: "#FF6F00",
 	SELECTED: "#1E88E5",
@@ -294,7 +296,20 @@ export function getNodeCaption(metadata, t) {
  */
 export function linkMapAndPhoto(parent) {
 	// Switched picture
-	const onPicLoad = e => parent.map.displayPictureMarker(e.detail.lon, e.detail.lat, parent.psv.getXY().x);
+	const onPicLoad = e => {
+		if(!e.detail.picId || e.detail.picId === BASE_PANORAMA_ID) {
+			parent.map.displayPictureMarker();
+			if(parent?.isMapWide()) {
+				parent?.setUnfocusedVisible(false);
+			}
+		}
+		else {
+			parent.map.displayPictureMarker(e.detail.lon, e.detail.lat, parent.psv.getXY().x);
+			if(parent?.isMapWide()) {
+				parent?.setUnfocusedVisible(true);
+			}
+		}
+	};
 	parent.addEventListener("psv:picture-loading", onPicLoad);
 	parent.addEventListener("psv:picture-loaded", onPicLoad);
 

package/src/viewer/URLHash.js

@@ -274,6 +274,9 @@ export default class URLHash extends EventTarget {
 			}
 			this._viewer.select(null, picIds[0]);
 		}
+		else {
+			this._viewer.select();
+		}
 
 		// Change focus
 		if(vals.focus && ["map", "pic"].includes(vals.focus)) {

package/src/viewer/Widgets.js

@@ -1336,12 +1336,12 @@ export default class Widgets {
 		const btnShare = createButton("gvs-share", fa(faShareNodes), this._t.gvs.share, ["gvs-btn-large"]);
 		const pnlShare = createPanel(this, btnShare, []);
 		pnlShare.innerHTML = `
-			<div class="gvs-hidden">
+			<div class="gvs-hidden gvs-needs-picture">
 				<p id="gvs-share-license" style="margin: 0 0 10px 0;"></p>
 			</div>
 			<h4 style="margin-top: 0">${fat(faLink)} ${this._t.gvs.share_links}</h4>
 			<div id="gvs-share-links" class="gvs-input-btn">
-				<a id="gvs-share-image" class="gvs-link-btn gvs-hidden" download target="_blank">${fat(faCloudArrowDown)} ${this._t.gvs.share_image}</a>
+				<a id="gvs-share-image" class="gvs-link-btn gvs-hidden gvs-needs-picture" download target="_blank">${fat(faCloudArrowDown)} ${this._t.gvs.share_image}</a>
 				<button id="gvs-share-url" data-copy="true" style="flex-basis: 100%; flex-grow: 2; flex-shrink: 2;">${fat(faCopy)} ${this._t.gvs.share_page}</button>
 				<button id="gvs-share-print" style="flex-basis: 100%; flex-grow: 2; flex-shrink: 2;">${fat(faPrint)} ${this._t.gvs.share_print}</button>
 			</div>
@@ -1358,8 +1358,8 @@ export default class Widgets {
 				<textarea id="gvs-share-iframe" readonly></textarea>
 				<button data-input="gvs-share-iframe">${fat(faCopy)} ${this._t.gvs.copy}</button>
 			</div>
-			<h4 class="gvs-hidden">${fat(faPen)} ${this._t.gvs.edit_osm}</h4>
-			<div class="gvs-input-btn gvs-hidden" style="justify-content: center">
+			<h4 class="gvs-hidden gvs-needs-picture">${fat(faPen)} ${this._t.gvs.edit_osm}</h4>
+			<div class="gvs-input-btn gvs-hidden gvs-needs-picture" style="justify-content: center">
 				<a id="gvs-edit-id" class="gvs-link-btn" target="_blank">${fat(faLocationDot)} ${this._t.gvs.id}</a>
 				<button id="gvs-edit-josm" title="${this._t.gvs.josm_live}">${fat(faSatelliteDish)} ${this._t.gvs.josm}</button>
 			</div>
@@ -1391,14 +1391,20 @@ export default class Widgets {
 		// Update picture download links
 		this._viewer.addEventListener("psv:picture-loaded", () => {
 			const picMeta = this._viewer.psv.getPictureMetadata();
-			hdLink.href = picMeta.panorama.hdUrl;
+			hdLink.href = picMeta?.panorama?.hdUrl;
 
 			const lblLicense = document.getElementById("gvs-share-license");
 			lblLicense.innerHTML = picMeta?.caption?.license ? this._t.gvs.legend_license.replace("{l}", picMeta.caption.license) : "";
 
-			while(pnlShare.getElementsByClassName("gvs-hidden").length > 0) {
-				const h = pnlShare.getElementsByClassName("gvs-hidden")[0];
-				h.classList.remove("gvs-hidden");
+			const picElems = pnlShare.getElementsByClassName("gvs-needs-picture");
+			for(let i=0; i < picElems.length; i++) {
+				const h = picElems[i];
+				if(picMeta) {
+					h.classList.remove("gvs-hidden");
+				}
+				else {
+					h.classList.add("gvs-hidden");
+				}
 			}
 		});
 

package/tests/viewer/URLHash.test.js

@@ -393,7 +393,7 @@ describe("_onHashChange", () => {
 		});
 		uh._onHashChange();
 
-		expect(v.select.mock.calls.length).toEqual(0);
+		expect(v.select.mock.calls).toEqual([[]]);
 		expect(v.setFocus.mock.calls).toEqual([["map"]]);
 		expect(v.map.jumpTo.mock.calls).toEqual([[{ center: [-12.5, 48.7], zoom: 15, pitch: 0 }]]);
 		expect(v.psv.setXYZ.mock.calls.length).toEqual(0);

package/tests/viewer/__snapshots__/Widgets.test.js.snap

@@ -335,12 +335,12 @@ exports[`constructor works 1`] = `
 				<svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"lightbulb\\" class=\\"svg-inline--fa fa-lightbulb\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 384 512\\"><path fill=\\"currentColor\\" d=\\"M272 384c9.6-31.9 29.5-59.1 49.2-86.2c0 0 0 0 0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c0 0 0 0 0 0c19.8 27.1 39.7 54.4 49.2 86.2l160 0zM192 512c44.2 0 80-35.8 80-80l0-16-160 0 0 16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z\\"></path></svg>
 			</button>
 		</div><button id=\\"gvs-player-more\\" class=\\"gvs-btn gvs-widget-bg gvs-xs-hidden\\" title=\\"Plus d'options de lecture\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"ellipsis-vertical\\" class=\\"svg-inline--fa fa-ellipsis-vertical\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 128 512\\"><path fill=\\"currentColor\\" d=\\"M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z\\"></path></svg></button></div></div><div id=\\"gvs-corner-main-top-middle\\" class=\\"gvs-corner\\"></div><div id=\\"gvs-corner-main-top-right\\" class=\\"gvs-corner\\"></div></div><div id=\\"gvs-corner-main-bottom\\" class=\\"gvs-corner-space\\"><div id=\\"gvs-corner-main-bottom-left\\" class=\\"gvs-corner\\"><div id=\\"gvs-widget-legend\\" class=\\"gvs-group gvs-widget-bg\\" title=\\"\\"><a href=\\"https://panoramax.fr/\\" target=\\"_blank\\">Panoramax</a></div></div><div id=\\"gvs-corner-main-bottom-middle\\" class=\\"gvs-corner\\"></div><div id=\\"gvs-corner-main-bottom-right\\" class=\\"gvs-corner\\"><div id=\\"gvs-widget-share\\" class=\\"gvs-group gvs-group-large gvs-group-btnpanel gvs-mobile-hidden gvs-print-hidden\\"><button id=\\"gvs-share\\" class=\\"gvs-btn gvs-widget-bg gvs-btn-large\\" title=\\"Partager\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"share-nodes\\" class=\\"svg-inline--fa fa-share-nodes\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z\\"></path></svg></button><div id=\\"gvs-share-panel\\" class=\\"gvs-panel gvs-widget-bg gvs-hidden\\">
-			<div class=\\"gvs-hidden\\">
+			<div class=\\"gvs-hidden gvs-needs-picture\\">
 				<p id=\\"gvs-share-license\\" style=\\"margin: 0 0 10px 0;\\"></p>
 			</div>
 			<h4 style=\\"margin-top: 0\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"link\\" class=\\"svg-inline--fa fa-link\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 640 512\\"><path fill=\\"currentColor\\" d=\\"M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z\\"></path></svg> Liens utiles</h4>
 			<div id=\\"gvs-share-links\\" class=\\"gvs-input-btn\\">
-				<a id=\\"gvs-share-image\\" class=\\"gvs-link-btn gvs-hidden\\" download=\\"\\" target=\\"_blank\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"cloud-arrow-down\\" class=\\"svg-inline--fa fa-cloud-arrow-down\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 640 512\\"><path fill=\\"currentColor\\" d=\\"M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128l-368 0zm79-167l80 80c9.4 9.4 24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-39 39L344 184c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 134.1-39-39c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9z\\"></path></svg> Image HD</a>
+				<a id=\\"gvs-share-image\\" class=\\"gvs-link-btn gvs-hidden gvs-needs-picture\\" download=\\"\\" target=\\"_blank\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"cloud-arrow-down\\" class=\\"svg-inline--fa fa-cloud-arrow-down\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 640 512\\"><path fill=\\"currentColor\\" d=\\"M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128l-368 0zm79-167l80 80c9.4 9.4 24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-39 39L344 184c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 134.1-39-39c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9z\\"></path></svg> Image HD</a>
 				<button id=\\"gvs-share-url\\" data-copy=\\"http://localhost\\" style=\\"flex-basis: 100%; flex-grow: 2; flex-shrink: 2;\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"copy\\" class=\\"svg-inline--fa fa-copy\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z\\"></path></svg> Lien de la page</button>
 				<button id=\\"gvs-share-print\\" style=\\"flex-basis: 100%; flex-grow: 2; flex-shrink: 2;\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"print\\" class=\\"svg-inline--fa fa-print\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z\\"></path></svg> Imprimer</button>
 			</div>
@@ -354,8 +354,8 @@ exports[`constructor works 1`] = `
 				<textarea id=\\"gvs-share-iframe\\" readonly=\\"\\"></textarea>
 				<button data-input=\\"gvs-share-iframe\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"copy\\" class=\\"svg-inline--fa fa-copy\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z\\"></path></svg> Copier</button>
 			</div>
-			<h4 class=\\"gvs-hidden\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"pen\\" class=\\"svg-inline--fa fa-pen\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z\\"></path></svg> Contribuer sur OSM</h4>
-			<div class=\\"gvs-input-btn gvs-hidden\\" style=\\"justify-content: center\\">
+			<h4 class=\\"gvs-hidden gvs-needs-picture\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"pen\\" class=\\"svg-inline--fa fa-pen\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z\\"></path></svg> Contribuer sur OSM</h4>
+			<div class=\\"gvs-input-btn gvs-hidden gvs-needs-picture\\" style=\\"justify-content: center\\">
 				<a id=\\"gvs-edit-id\\" class=\\"gvs-link-btn\\" target=\\"_blank\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"location-dot\\" class=\\"svg-inline--fa fa-location-dot\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 384 512\\"><path fill=\\"currentColor\\" d=\\"M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z\\"></path></svg> iD</a>
 				<button id=\\"gvs-edit-josm\\" title=\\"Active la synchronisation automatique de JOSM lors du chargement d'une photo\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"satellite-dish\\" class=\\"svg-inline--fa fa-satellite-dish\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M192 32c0-17.7 14.3-32 32-32C383.1 0 512 128.9 512 288c0 17.7-14.3 32-32 32s-32-14.3-32-32C448 164.3 347.7 64 224 64c-17.7 0-32-14.3-32-32zM60.6 220.6L164.7 324.7l28.4-28.4c-.7-2.6-1.1-5.4-1.1-8.3c0-17.7 14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32c-2.9 0-5.6-.4-8.3-1.1l-28.4 28.4L291.4 451.4c14.5 14.5 11.8 38.8-7.3 46.3C260.5 506.9 234.9 512 208 512C93.1 512 0 418.9 0 304c0-26.9 5.1-52.5 14.4-76.1c7.5-19 31.8-21.8 46.3-7.3zM224 96c106 0 192 86 192 192c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-70.7-57.3-128-128-128c-17.7 0-32-14.3-32-32s14.3-32 32-32z\\"></path></svg> JOSM</button>
 			</div>
@@ -373,12 +373,12 @@ exports[`constructor works with iframeBaseURL option 1`] = `
 				<svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"lightbulb\\" class=\\"svg-inline--fa fa-lightbulb\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 384 512\\"><path fill=\\"currentColor\\" d=\\"M272 384c9.6-31.9 29.5-59.1 49.2-86.2c0 0 0 0 0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4c0 0 0 0 0 0c19.8 27.1 39.7 54.4 49.2 86.2l160 0zM192 512c44.2 0 80-35.8 80-80l0-16-160 0 0 16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z\\"></path></svg>
 			</button>
 		</div><button id=\\"gvs-player-more\\" class=\\"gvs-btn gvs-widget-bg gvs-xs-hidden\\" title=\\"Plus d'options de lecture\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"ellipsis-vertical\\" class=\\"svg-inline--fa fa-ellipsis-vertical\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 128 512\\"><path fill=\\"currentColor\\" d=\\"M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z\\"></path></svg></button></div></div><div id=\\"gvs-corner-main-top-middle\\" class=\\"gvs-corner\\"></div><div id=\\"gvs-corner-main-top-right\\" class=\\"gvs-corner\\"></div></div><div id=\\"gvs-corner-main-bottom\\" class=\\"gvs-corner-space\\"><div id=\\"gvs-corner-main-bottom-left\\" class=\\"gvs-corner\\"><div id=\\"gvs-widget-legend\\" class=\\"gvs-group gvs-widget-bg\\" title=\\"\\"><a href=\\"https://panoramax.fr/\\" target=\\"_blank\\">Panoramax</a></div></div><div id=\\"gvs-corner-main-bottom-middle\\" class=\\"gvs-corner\\"></div><div id=\\"gvs-corner-main-bottom-right\\" class=\\"gvs-corner\\"><div id=\\"gvs-widget-share\\" class=\\"gvs-group gvs-group-large gvs-group-btnpanel gvs-mobile-hidden gvs-print-hidden\\"><button id=\\"gvs-share\\" class=\\"gvs-btn gvs-widget-bg gvs-btn-large\\" title=\\"Partager\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"share-nodes\\" class=\\"svg-inline--fa fa-share-nodes\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z\\"></path></svg></button><div id=\\"gvs-share-panel\\" class=\\"gvs-panel gvs-widget-bg gvs-hidden\\">
-			<div class=\\"gvs-hidden\\">
+			<div class=\\"gvs-hidden gvs-needs-picture\\">
 				<p id=\\"gvs-share-license\\" style=\\"margin: 0 0 10px 0;\\"></p>
 			</div>
 			<h4 style=\\"margin-top: 0\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"link\\" class=\\"svg-inline--fa fa-link\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 640 512\\"><path fill=\\"currentColor\\" d=\\"M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z\\"></path></svg> Liens utiles</h4>
 			<div id=\\"gvs-share-links\\" class=\\"gvs-input-btn\\">
-				<a id=\\"gvs-share-image\\" class=\\"gvs-link-btn gvs-hidden\\" download=\\"\\" target=\\"_blank\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"cloud-arrow-down\\" class=\\"svg-inline--fa fa-cloud-arrow-down\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 640 512\\"><path fill=\\"currentColor\\" d=\\"M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128l-368 0zm79-167l80 80c9.4 9.4 24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-39 39L344 184c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 134.1-39-39c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9z\\"></path></svg> Image HD</a>
+				<a id=\\"gvs-share-image\\" class=\\"gvs-link-btn gvs-hidden gvs-needs-picture\\" download=\\"\\" target=\\"_blank\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"cloud-arrow-down\\" class=\\"svg-inline--fa fa-cloud-arrow-down\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 640 512\\"><path fill=\\"currentColor\\" d=\\"M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128l-368 0zm79-167l80 80c9.4 9.4 24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-39 39L344 184c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 134.1-39-39c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9z\\"></path></svg> Image HD</a>
 				<button id=\\"gvs-share-url\\" data-copy=\\"http://localhost\\" style=\\"flex-basis: 100%; flex-grow: 2; flex-shrink: 2;\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"copy\\" class=\\"svg-inline--fa fa-copy\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z\\"></path></svg> Lien de la page</button>
 				<button id=\\"gvs-share-print\\" style=\\"flex-basis: 100%; flex-grow: 2; flex-shrink: 2;\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"print\\" class=\\"svg-inline--fa fa-print\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z\\"></path></svg> Imprimer</button>
 			</div>
@@ -392,8 +392,8 @@ exports[`constructor works with iframeBaseURL option 1`] = `
 				<textarea id=\\"gvs-share-iframe\\" readonly=\\"\\"></textarea>
 				<button data-input=\\"gvs-share-iframe\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"copy\\" class=\\"svg-inline--fa fa-copy\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 448 512\\"><path fill=\\"currentColor\\" d=\\"M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z\\"></path></svg> Copier</button>
 			</div>
-			<h4 class=\\"gvs-hidden\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"pen\\" class=\\"svg-inline--fa fa-pen\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z\\"></path></svg> Contribuer sur OSM</h4>
-			<div class=\\"gvs-input-btn gvs-hidden\\" style=\\"justify-content: center\\">
+			<h4 class=\\"gvs-hidden gvs-needs-picture\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"pen\\" class=\\"svg-inline--fa fa-pen\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z\\"></path></svg> Contribuer sur OSM</h4>
+			<div class=\\"gvs-input-btn gvs-hidden gvs-needs-picture\\" style=\\"justify-content: center\\">
 				<a id=\\"gvs-edit-id\\" class=\\"gvs-link-btn\\" target=\\"_blank\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"location-dot\\" class=\\"svg-inline--fa fa-location-dot\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 384 512\\"><path fill=\\"currentColor\\" d=\\"M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z\\"></path></svg> iD</a>
 				<button id=\\"gvs-edit-josm\\" title=\\"Active la synchronisation automatique de JOSM lors du chargement d'une photo\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"satellite-dish\\" class=\\"svg-inline--fa fa-satellite-dish\\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M192 32c0-17.7 14.3-32 32-32C383.1 0 512 128.9 512 288c0 17.7-14.3 32-32 32s-32-14.3-32-32C448 164.3 347.7 64 224 64c-17.7 0-32-14.3-32-32zM60.6 220.6L164.7 324.7l28.4-28.4c-.7-2.6-1.1-5.4-1.1-8.3c0-17.7 14.3-32 32-32s32 14.3 32 32s-14.3 32-32 32c-2.9 0-5.6-.4-8.3-1.1l-28.4 28.4L291.4 451.4c14.5 14.5 11.8 38.8-7.3 46.3C260.5 506.9 234.9 512 208 512C93.1 512 0 418.9 0 304c0-26.9 5.1-52.5 14.4-76.1c7.5-19 31.8-21.8 46.3-7.3zM224 96c106 0 192 86 192 192c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-70.7-57.3-128-128-128c-17.7 0-32-14.3-32-32s14.3-32 32-32z\\"></path></svg> JOSM</button>
 			</div>