@panoramax/web-viewer 3.2.3-develop-f219e404 → 3.2.3-develop-6257391e

package/src/components/menus/PictureMetadata.js

@@ -0,0 +1,188 @@
+import { LitElement, html, nothing } from "lit";
+import { fa } from "../../utils/widgets";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
+import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
+import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+import { faCamera } from "@fortawesome/free-solid-svg-icons/faCamera";
+import { faGear } from "@fortawesome/free-solid-svg-icons/faGear";
+import { titles, tables, expandable } from "../styles";
+import { createTable, createLinkCell, createWebComp } from "../../utils/widgets";
+import { getGPSPrecision } from "../../utils/picture";
+import {
+	getGrade, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_RES_360_VALUES,
+	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES
+} from "../../utils/utils";
+
+/**
+ * Picture metadata displays detailed info about a single picture (ID, capture context, EXIF attributes...).
+ * @class Panoramax.components.menus.PictureMetadata
+ * @element pnx-picture-metadata
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-picture-metadata ._parent=${viewer} />
+ * ```
+ */
+export default class PictureMetadata extends LitElement {
+	/** @private */
+	static styles = [ titles, tables, expandable ];
+
+	/** @private */
+	static properties = {
+		_meta: {state: true},
+	};
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._meta = this._parent?.psv?.getPictureMetadata();
+		this._parent?.psv?.addEventListener("picture-loaded", () => {
+			this._meta = this._parent?.psv?.getPictureMetadata();
+		});
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		if(!this._meta) { return nothing; }
+
+		// General metadata
+		const generalData = [
+			{
+				section: this._parent?._t.pnx.metadata_general_picid,
+				classes: ["pnx-td-with-id"],
+				values: createLinkCell(
+					this._meta.id,
+					this._parent.api.getPictureMetadataUrl(this._meta.id, this._meta?.sequence?.id),
+					this._parent?._t.pnx.metadata_general_picid_link,
+					this._parent?._t
+				)
+			},
+			{
+				section: this._parent?._t.pnx.metadata_general_seqid,
+				classes: ["pnx-td-with-id"],
+				values: createLinkCell(
+					this._meta?.sequence?.id,
+					this._parent.api.getSequenceMetadataUrl(this._meta?.sequence?.id),
+					this._parent?._t.pnx.metadata_general_seqid_link,
+					this._parent?._t
+				)
+			},
+			{ section: this._parent?._t.pnx.metadata_general_author, value: this._meta?.caption?.producer },
+			{ section: this._parent?._t.pnx.metadata_general_license, value: this._meta?.caption?.license },
+			{
+				section: this._parent?._t.pnx.metadata_general_date,
+				value: this._meta?.caption?.date?.toLocaleDateString(undefined, {
+					year: "numeric", month: "long", day: "numeric",
+					hour: "numeric", minute: "numeric", second: "numeric",
+					fractionalSecondDigits: 3, timeZoneName: "short"
+				})
+			},
+		];
+
+		// Camera details
+		const focal = this._meta?.properties?.["pers:interior_orientation"]?.focal_length ? `${this._meta?.properties?.["pers:interior_orientation"]?.focal_length} mm` : "❓";
+		let resmp = this._meta?.properties?.["pers:interior_orientation"]?.["sensor_array_dimensions"];
+		if(resmp) { resmp = `${resmp[0]} x ${resmp[1]} px (${Math.floor(resmp[0] * resmp[1] / 1000000)} Mpx)`;}
+		let pictype = this._parent?._t.pnx.picture_flat;
+		let picFov = this._meta?.properties?.["pers:interior_orientation"]?.["field_of_view"]; // Use raw value instead of horizontalFov to avoid default showing up
+		if(picFov !== null && picFov !== undefined) {
+			if(picFov === 360) { pictype = this._parent?._t.pnx.picture_360; }
+			else { pictype += ` (${picFov}°)`; }
+		}
+
+		const cameraData = [
+			{ section: this._parent?._t.pnx.metadata_camera_make, value: this._meta?.properties?.["pers:interior_orientation"]?.camera_manufacturer || "❓" },
+			{ section: this._parent?._t.pnx.metadata_camera_model, value: this._meta?.properties?.["pers:interior_orientation"]?.camera_model || "❓" },
+			{ section: this._parent?._t.pnx.metadata_camera_type, value: pictype },
+			{ section: this._parent?._t.pnx.metadata_camera_resolution, value: resmp || "❓" },
+			{ section: this._parent?._t.pnx.metadata_camera_focal_length, value: focal },
+		];
+
+		// Location details
+		const orientation = this._meta?.properties?.["view:azimuth"] !== undefined ? `${this._meta.properties["view:azimuth"]}°` : "❓";
+		const gpsPrecisionLabel = getGPSPrecision(this._meta);
+		const locationData = [
+			{ section: this._parent?._t.pnx.metadata_location_longitude, value: this._meta.gps[0] },
+			{ section: this._parent?._t.pnx.metadata_location_latitude, value: this._meta.gps[1] },
+			{ section: this._parent?._t.pnx.metadata_location_orientation, value: orientation },
+			{ section: this._parent?._t.pnx.metadata_location_precision, value: gpsPrecisionLabel },
+		];
+
+		// Picture quality level
+		const hasQualityScore = this._parent?.map?._hasQualityScore?.();
+		let qualityData;
+		if(hasQualityScore) {
+			const gpsGrade = getGrade(QUALITYSCORE_GPS_VALUES, this._meta?.properties?.["quality:horizontal_accuracy"]);
+			const resGrade = getGrade(
+				this._meta?.horizontalFov === 360 ? QUALITYSCORE_RES_360_VALUES : QUALITYSCORE_RES_FLAT_VALUES,
+				this._meta?.properties?.["panoramax:horizontal_pixel_density"]
+			);
+
+			// Note: score is also calculated in utils/map code
+			const generalGrade = Math.round((resGrade || 1) * QUALITYSCORE_POND_RES + (gpsGrade || 1) * QUALITYSCORE_POND_GPS);
+
+			qualityData = [
+				{ section: this._parent?._t.pnx.metadata_quality_score, value: createWebComp("pnx-quality-score", { grade: generalGrade }) },
+				{ section: this._parent?._t.pnx.metadata_quality_gps_score, value: createWebComp("pnx-grade", { stars: gpsGrade, _t: this._parent?._t }) },
+				{ section: this._parent?._t.pnx.metadata_quality_resolution_score, value: createWebComp("pnx-grade", { stars: resGrade, _t: this._parent?._t }) },
+			];
+		}
+
+		return html`
+			<h4>${fa(faCircleInfo)} ${this._parent?._t.pnx.metadata}</h4>
+
+			${this._parent.api._endpoints.report ? 
+				html`
+					<pnx-button ._t=${this._parent?._t} @click=${() => this._parent._showReportForm()}>
+						${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}
+					</pnx-button>
+				` :
+				nothing
+			}
+
+			${createTable("pnx-table-light", generalData)}
+
+			<h4>${fa(faCamera)} ${this._parent?._t.pnx.metadata_camera}</h4>
+			${createTable("pnx-table-light", cameraData)}
+
+			<h4>${fa(faLocationDot)} ${this._parent?._t.pnx.metadata_location}</h4>
+			${createTable("pnx-table-light", locationData)}
+
+			${hasQualityScore ?
+				html`
+					<h4 style="margin-bottom: 5px">
+						${fa(faMedal)} ${this._parent?._t.pnx.metadata_quality}
+						<pnx-button
+							title="${this._parent?._t.pnx.metadata_quality_help}"
+							kind="outline"
+							@click=${() => this._parent?._showQualityScoreDoc()}
+						>
+							${fa(faInfoCircle)}
+						</pnx-button>
+					</h4>
+					${createTable("pnx-table-light", qualityData)}
+				` :
+				nothing
+			}
+
+			${this._meta.properties?.exif ?
+				html`
+					<details>
+						<summary>${fa(faGear)} ${this._parent?._t.pnx.metadata_exif}</summary>
+						${createTable("", Object.entries(this._meta.properties.exif)
+							.sort()
+							.map(([key, value]) => ({ section: key, value: value })
+						))}
+					</details>
+				` :
+				nothing
+			}
+		`;
+	}
+}
+
+customElements.define("pnx-picture-metadata", PictureMetadata);

package/src/components/menus/PlayerOptions.js

@@ -0,0 +1,96 @@
+import { LitElement, html, css } from "lit";
+import { faSvg } from "../styles";
+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";
+
+/**
+ * Player Options menu displays player speed and contrast settings.
+ * @class Panoramax.components.menus.PlayerOptions
+ * @element pnx-player-options
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-player-options ._parent=${viewer} />
+ * ```
+ */
+export default class PlayerOptions extends LitElement {
+	/** @private */
+	static styles = [ faSvg, css`
+		:host {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			gap: 15px;
+			padding: 5px 15px;
+		}
+
+		.pnx-input-range {
+			display: flex;
+			justify-content: space-between;
+			gap: 10px;
+			align-items: center;
+			width: 100%;
+		}
+	` ];
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		this._parent?.psv?.addEventListener("transition-duration-changed", e => {
+			this.renderRoot.querySelector("#pnx-player-speed").value = PIC_MAX_STAY_DURATION - e.detail.value;
+		});
+	}
+
+	/** @private */
+	_onSpeedChange(e) {
+		const newSpeed = PIC_MAX_STAY_DURATION - e.target.value;
+		this._parent?.psv?.setTransitionDuration(newSpeed);
+	}
+
+	/** @private */
+	_onContrastClick() {
+		const btn = this.renderRoot.querySelector("#pnx-player-contrast");
+		if(btn.getAttribute("active") == "true") {
+			btn.removeAttribute("active");
+			this._parent?.psv?.setHigherContrast(false);
+		}
+		else {
+			btn.setAttribute("active", "true");
+			this._parent?.psv?.setHigherContrast(true);
+		}
+	}
+
+	/** @private */
+	render() {
+		return html`
+			<div class="pnx-input-range" title="${this._parent?._t.pnx.sequence_speed}">
+				${fa(faPersonBiking)}
+				<input
+					id="pnx-player-speed"
+					type="range" name="speed"
+					min="0" max="${PIC_MAX_STAY_DURATION - 100}"
+					value="${PIC_MAX_STAY_DURATION - this._parent?.psv.getTransitionDuration()}"
+					title="${this._parent?._t.pnx.sequence_speed}"
+					style="width: 100%;"
+					@change=${this._onSpeedChange}
+				/>
+				${fa(faRocket)}
+			</div>
+			<pnx-button
+				id="pnx-player-contrast"
+				title="${this._parent?._t.pnx.contrast}"
+				kind="outline"
+				style="width: 26px;"
+				@click=${this._onContrastClick}
+			>
+				${fa(faLightbulb)}
+			</pnx-button>
+		`;
+	}
+}
+
+customElements.define("pnx-player-options", PlayerOptions);

package/src/components/menus/QualityScoreDoc.js

@@ -0,0 +1,36 @@
+import { LitElement, html } from "lit";
+import { faSvg, titles } from "../styles";
+import { fa } from "../../utils/widgets";
+import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
+
+/**
+ * Quality Score Doc displays a synthetic summary of how Quality Score is computed.
+ * @class Panoramax.components.menus.QualityScoreDoc
+ * @element pnx-quality-score-doc
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-quality-score-doc ._t=${viewer._t} />
+ * ```
+ */
+export default class QualityScoreDoc extends LitElement {
+	static styles = [ titles, faSvg ];
+
+	render() {
+		return html`
+			<h4>${fa(faMedal)} ${this._t?.pnx.qualityscore_title}</h4>
+			<p>${this._t?.pnx.qualityscore_doc_1}</p>
+			<p>${this._t?.pnx.qualityscore_doc_2}</p>
+			<pnx-quality-score grade="5"></pnx-quality-score>
+			<p>${this._t?.pnx.qualityscore_doc_3}</p>
+			<pnx-link-button
+				href="https://docs.panoramax.fr/pictures-metadata/quality_score/"
+				target="_blank"
+				kind="outline"
+				style="width: 100%"
+			>${this._t?.pnx.qualityscore_doc_link}</pnx-link-button>
+		`;
+	}
+}
+
+customElements.define("pnx-quality-score-doc", QualityScoreDoc);

package/src/components/menus/ReportForm.js

@@ -0,0 +1,133 @@
+import { LitElement, html, css, nothing } from "lit";
+import { faSvg, titles, select, textarea, input } from "../styles";
+import { fa } from "../../utils/widgets";
+import { faAt } from "@fortawesome/free-solid-svg-icons/faAt";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
+import { faCommentDots } from "@fortawesome/free-solid-svg-icons/faCommentDots";
+import { faPaperPlane } from "@fortawesome/free-solid-svg-icons/faPaperPlane";
+import { getUserAccount } from "../../utils/utils";
+
+const REPORT_NATURE = [
+	"", "blur_missing", "blur_excess", "inappropriate", "privacy",
+	"picture_low_quality", "mislocated", "copyright", "other"
+];
+
+/**
+ * Report Form displays a form to send issues about pictures.
+ * @class Panoramax.components.menus.ReportForm
+ * @element pnx-report-form
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-report-form ._parent=${viewer} />
+ * ```
+ */
+export default class ReportForm extends LitElement {
+	/** @private */
+	static styles = [ titles, faSvg, select, textarea, input, css`
+		.group {
+			margin-bottom: 10px;
+		}
+
+		.group:not(.group-inline) label {
+			margin-bottom: 5px;
+			display: inline-block;
+		}
+	` ];
+
+	/** @private */
+	static properties = {
+		mode: {state: true},
+		failure: {state: true},
+	};
+
+	/** @private */
+	_onSubmit(e) {
+		e.preventDefault();
+
+		const picMeta = this._parent?.psv?.getPictureMetadata();
+		const data = Object.fromEntries(new FormData(e.target));
+		const params = {
+			issue: data.issue,
+			picture_id: data["whole-sequence"] ? null : picMeta?.id,
+			reporter_comments: data.comments,
+			reporter_email: data.email,
+			sequence_id: picMeta?.sequence?.id
+		};
+
+		this.mode = "wait";
+
+		// Call API
+		this._parent?.api.sendReport(params).then(() => {
+			this.mode = "success";
+		}).catch(e => {
+			console.error(e);
+			this.mode = "failure";
+			this.failure = e;
+		});
+	}
+
+	/** @private */
+	render() {
+		const userAccount = getUserAccount();
+
+		if(this.mode) {
+			return html`
+				<h4>${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}</h4>
+				<p>
+					${this.mode === "wait" ? this._parent?._t.pnx.report_wait : nothing}
+					${this.mode === "success" ? this._parent?._t.pnx.report_success : nothing}
+					${this.mode === "failure" ? this._parent?._t.pnx.report_failure.replace("{e}", this.failure) : nothing}
+				</p>
+			`;
+		}
+
+		return html`
+			<h4>${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}</h4>
+
+			${userAccount && this._parent?._t ? html`
+				<p>${this._parent?._t.pnx.report_auth.replace("{a}", userAccount.name)}</p>
+			` : nothing}
+
+			<form @submit=${this._onSubmit.bind(this)}>
+				<div class="group">
+					<label for="issue">${fa(faCircleInfo)} ${this._parent?._t.pnx.report_nature_label}</label>
+					<select name="issue" id="issue" required class="pnx-100w">
+						${REPORT_NATURE.map(nature => html`
+							<option
+								value=${nature}
+								${nature === "" ? html`disabled selected hidden` : nothing}
+							>
+								${this._parent?._t.pnx.report_nature[nature]}
+							</option>
+						`)}
+					</select>
+				</div>
+
+				<div class="group group-inline">
+					<input name="whole-sequence" id="whole-sequence" type="checkbox" />
+					<label for="whole-sequence">${this._parent?._t.pnx.report_whole_sequence}</label>
+				</div>
+
+				<div class="group">
+					<label for="comments">${fa(faCommentDots)} ${this._parent?._t.pnx.report_details}</label>
+					<textarea name="comments" id="comments" placeholder=${this._parent?._t.pnx.report_details_placeholder}></textarea>
+				</div>
+
+				${!userAccount ? html`
+					<div class="group">
+						<label for="email">${fa(faAt)} ${this._parent?._t.pnx.report_email}</label>
+						<input type="email" name="email" id="email" placeholder=${this._parent?._t.pnx.report_email_placeholder} class="pnx-100w" />
+					</div>
+				`: nothing}
+
+				<pnx-button type="submit" style="width: 100%">
+					${fa(faPaperPlane)} ${this._parent?._t.pnx.report_submit}
+				</pnx-button>
+			</form>
+		`;
+	}
+}
+
+customElements.define("pnx-report-form", ReportForm);

package/src/components/menus/Share.js

@@ -0,0 +1,228 @@
+import { LitElement, css, nothing } from "lit";
+import { html, unsafeStatic } from "lit/static-html.js";
+import { fa } from "../../utils/widgets";
+import { josmBboxParameters } from "../../utils/utils";
+import { faSvg, textarea, titles } from "../styles";
+
+import { faLink } from "@fortawesome/free-solid-svg-icons/faLink";
+import { faCloudArrowDown } from "@fortawesome/free-solid-svg-icons/faCloudArrowDown";
+import { faCopy } from "@fortawesome/free-solid-svg-icons/faCopy";
+import { faPrint } from "@fortawesome/free-solid-svg-icons/faPrint";
+import { faMap } from "@fortawesome/free-solid-svg-icons/faMap";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
+import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
+import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
+import { faSatelliteDish } from "@fortawesome/free-solid-svg-icons/faSatelliteDish";
+import { faSquareRss } from "@fortawesome/free-solid-svg-icons/faSquareRss";
+
+const JOSM_REMOTE_URL = "http://127.0.0.1:8111";
+const ID_URL = "https://www.openstreetmap.org/edit?editor=id";
+
+/**
+ * Share Menu displays links for quick picture sharing.
+ * @class Panoramax.components.menus.ShareMenu
+ * @element pnx-share-menu
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-share-menu ._parent=${viewer} />
+ * ```
+ */
+export default class ShareMenu extends LitElement {
+	/** @private */
+	static styles = [ faSvg, textarea, titles, css`
+		.pnx-many-buttons {
+			display: flex;
+			flex-direction: row;
+			width: 100%;
+			gap: 5px;
+			justify-content: space-between;
+			align-items: center;
+			flex-wrap: wrap;
+			white-space: nowrap;
+		}
+
+		.pnx-many-buttons textarea {
+			font-size: 0.8em;
+			height: 50px;
+		}
+
+		.pnx-many-buttons pnx-button,
+		.pnx-many-buttons pnx-copy-button,
+		.pnx-many-buttons pnx-link-button {
+			flex-basis: 100%;
+			flex-grow: 2;
+			flex-shrink: 2;
+		}
+
+		.pnx-many-buttons.pnx-edit-buttons pnx-button,
+		.pnx-many-buttons.pnx-edit-buttons pnx-link-button {
+			flex-basis: 30%;
+			flex-grow: 1;
+			flex-shrink: 1;
+		}
+	` ];
+
+	/** @private */
+	static properties = {
+		_pic: {state: true},
+		_baseUrl: {state: true},
+		_josm: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._josm = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		this._onUrlChange();
+		this._parent?.addEventListener("ready", this._onUrlChange.bind(this), { once: true });
+		this._parent?.urlHandler?.addEventListener("url-changed", this._onUrlChange.bind(this));
+		this._parent?.oncePSVReady().then(() => this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this)));
+	}
+
+	/** @private */
+	_onUrlChange() {
+		this._baseUrl = window.location.href.replace(/\/$/, "");
+	}
+
+	/** @private */
+	_onPictureLoad() {
+		this._pic = this._parent?.psv?.getPictureMetadata();
+	}
+
+	/**
+	 * Enable or disable JOSM live editing using [Remote](https://josm.openstreetmap.de/wiki/Help/RemoteControlCommands)
+	 * @private
+	 */
+	_toggleJOSMLive() {
+		this._josm = !this._josm;
+
+		if(this._josm) {
+			// Check if JOSM remote is enabled
+			fetch(JOSM_REMOTE_URL+"/version")
+				.then(() => {
+					// First loading : download + zoom
+					const p1 = josmBboxParameters(this._parent?.psv?.getPictureMetadata?.());
+					if(p1) {
+						const url = `${JOSM_REMOTE_URL}/load_and_zoom?${p1}`;
+						fetch(url).catch(e => {
+							console.warn(e);
+							this._toggleJOSMLive();
+						});
+					}
+
+					// Enable event listening
+					this._josmListener = () => {
+						const p2 = josmBboxParameters(this._parent?.psv?.getPictureMetadata?.());
+						if(p2) {
+							// Next loadings : just zoom
+							//   This avoids desktop focus to go on JOSM instead of
+							//   staying on web browser
+							const url = `${JOSM_REMOTE_URL}/zoom?${p2}`;
+							fetch(url).catch(e => {
+								console.warn(e);
+								this._toggleJOSMLive();
+							});
+						}
+					};
+					this._parent?.psv?.addEventListener?.("picture-loaded", this._josmListener);
+					this._parent?.psv?.addEventListener?.("picture-loading", this._josmListener);
+				})
+				.catch(e => {
+					console.warn(e);
+					alert(this._parent?._t.pnx.error_josm);
+					this._toggleJOSMLive();
+				});
+		}
+		else {
+			if(this._josmListener) {
+				this._parent?.psv?.removeEventListener?.("picture-loading", this._josmListener);
+				this._parent?.psv?.removeEventListener?.("picture-loaded", this._josmListener);
+				delete this._josmListener;
+			}
+		}
+	}
+
+	/** @private */
+	render() {
+		const shareUrl = this._parent?.urlHandler?.nextShortLink(this._baseUrl) || this._baseUrl;
+		const iframe = `<iframe src="${shareUrl}" style="border: none; width: 500px; height: 300px"></iframe>`;
+
+		const idOpts = this._pic && {
+			"map": `19/${this._pic.gps[1]}/${this._pic.gps[0]}`,
+			"source": "Panoramax",
+			"photo_overlay": "panoramax",
+			"photo": `panoramax/${this._pic.id}`,
+		};
+		const idUrl = idOpts && `${ID_URL}#${new URLSearchParams(idOpts).toString()}`;
+
+		return html`
+			${this._pic && html`
+				<p style="margin: 0 0 10px 0;">
+					${this._pic?.caption?.license ? html`${unsafeStatic(this._parent?._t.pnx.legend_license.replace("{l}", this._pic.caption.license))}` : ""}
+				</p>
+			`}
+
+			<h4 style="margin-top: 0">${fa(faLink)} ${this._parent?._t.pnx.share_links}</h4>
+			<div class="pnx-many-buttons">
+				${this._pic && html`
+					<pnx-link-button
+						download
+						target="_blank"
+						href=${this._pic?.panorama?.hdUrl}
+					>${fa(faCloudArrowDown)} ${this._parent?._t.pnx.share_image}</pnx-link-button>
+				`}
+				${this._parent?.api?.getRSSURL() && html`
+					<pnx-link-button
+						target="_blank"
+						href=${this._parent?.api.getRSSURL(this._parent?.map?.getBounds?.())}
+						title=${this._parent?._t.pnx.share_rss_title}
+					>
+						${fa(faSquareRss)} ${this._parent?._t.pnx.share_rss}
+					</pnx-link-button>
+				`}
+				<pnx-copy-button ._t=${this._parent?._t} text=${shareUrl}>
+					${fa(faCopy)} ${this._parent?._t.pnx.share_page}
+				</pnx-copy-button>
+				<pnx-button @click=${window.print.bind(window)}>
+					${fa(faPrint)} ${this._parent?._t.pnx.share_print}
+				</pnx-button>
+			</div>
+
+			<h4>
+				${fa(faMap)} ${this._parent?._t.pnx.share_embed}
+				<pnx-link-button
+					href="https://docs.panoramax.fr/web-viewer/03_URL_settings/"
+					title="${this._parent?._t.pnx.share_embed_docs}"
+					target="_blank"
+					kind="outline">
+					${fa(faCircleInfo, {styles: {padding: "0 3px"}})}
+				</pnx-link-button>
+			</h4>
+			<div class="pnx-many-buttons">
+				<textarea readonly>${iframe}</textarea>
+				<pnx-copy-button ._t=${this._parent?._t} text=${iframe}></pnx-copy-button>
+			</div>
+			
+			${this._pic && html`
+				<h4>${fa(faPen)} ${this._parent?._t.pnx.edit_osm}</h4>
+				<div class="pnx-many-buttons pnx-edit-buttons">
+					<pnx-link-button href=${idUrl} target="_blank">
+						${fa(faLocationDot)} ${this._parent?._t.pnx.id}
+					</pnx-link-button>
+					<pnx-button
+						id="pnx-edit-josm"
+						active=${this._josm ? "" : nothing}
+						@click=${this._toggleJOSMLive}
+						title="${this._parent?._t.pnx.josm_live}"
+					>${fa(faSatelliteDish)} ${this._parent?._t.pnx.josm}</pnx-button>
+				</div>
+			`}`;
+	}
+}
+
+customElements.define("pnx-share-menu", ShareMenu);

package/src/components/menus/index.js

@@ -0,0 +1,15 @@
+/**
+ * Complex menus components
+ * @module Panoramax:components:menus
+ */
+
+export {default as MapFilters} from "./MapFilters";
+export {default as MapLayers} from "./MapLayers";
+export {default as MapBackground} from "./MapBackground";
+export {default as PlayerOptions} from "./PlayerOptions";
+export {default as QualityScoreDoc} from "./QualityScoreDoc";
+export {default as ReportForm} from "./ReportForm";
+export {default as Share} from "./Share";
+export {default as PictureLegend} from "./PictureLegend";
+export {default as MapLegend} from "./MapLegend";
+export {default as PictureMetadata} from "./PictureMetadata";