@panoramax/web-viewer 5.0.0-develop-d7206514 → 5.0.0-develop-d26305dd

package/build/components/menus/PictureMetadata.js

@@ -0,0 +1,380 @@
+import { LitElement, css, nothing } from "lit";
+import { html, unsafeStatic } from "lit/static-html.js";
+import { fa, onceParentAvailable, createWebComp } from "../../utils/widgets.js";
+import {
+	faCamera, faImage, faImages, faInfoCircle, faLocationDot,
+	faMedal, faQuestion, faScroll, faTags,
+} from "@fortawesome/free-solid-svg-icons";
+import { dataBlocks, faSvg, hidden, textarea, titles } from "../styles.js";
+import { getGPSPrecision } from "../../utils/picture.js";
+import { PanoramaxMetaCatalogURL } from "../../utils/services.js";
+import {
+	QUALITYSCORE_GPS_VALUES, QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES,
+	QUALITYSCORE_RES_360_VALUES, QUALITYSCORE_RES_FLAT_VALUES, getGrade
+} from "../../utils/utils.js";
+
+const missing = () => fa(faQuestion, {styles: {height: "16px"}});
+
+/**
+ * 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 = [ faSvg, titles, textarea, hidden, dataBlocks, css`
+		div[slot="content"] {
+			padding: 5px 10px;
+			background-color: #ededed;
+		}
+
+		.data-block {
+			min-width: 50%;
+		}
+
+		pnx-semantics-table {
+			overflow-x: auto;
+  			display: block;
+		}
+	` ];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.PictureMetadata#
+	 * @type {Object}
+	 * @property {boolean} [block-editor=false] Set to true to avoid going beyond semantics editor
+	 */
+	static properties = {
+		_meta: {state: true},
+		"block-editor": { type: Boolean },
+	};
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		const gototags = () => {
+			const tabs = this.shadowRoot.querySelector("pnx-tabs");
+			if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+		};
+
+		window.navigation?.addEventListener("navigate", () => {
+			this.requestUpdate();
+		});
+
+		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();
+				});
+				if(!this._parent._initParams.getParentPostInit().skipTagsMenuOpening) {
+					this._parent.psv.addEventListener("annotation-focused", gototags);
+					this._parent.psv.addEventListener("annotations-toggled", e => {
+						if(e.detail.visible) {
+							gototags();
+						}
+					});
+					if(this._parent.psv.getSelectedAnnotations().length > 0) {
+						gototags();
+					}
+				}
+			});
+		});
+	}
+
+	/** @private */
+	_onQualityScoreClick() {
+		const qsTab = this.shadowRoot.querySelector("pnx-tabs");
+		if(qsTab) {
+			qsTab.setAttribute("activeTabIndex", 3);
+		}
+	}
+
+	/** @private */
+	_onCaptureDateClick() {
+		const qsTab = this.shadowRoot.querySelector("pnx-tabs");
+		if(qsTab) {
+			qsTab.setAttribute("activeTabIndex", 1);
+		}
+	}
+
+	/** @private */
+	_toTab(title, data) {
+		return html`
+			<h4 slot="title">${title}</h4>
+			<div slot="content" class="data-blocks">
+				${data.filter(b => b).map(b => html`<div class="data-block" style=${b.style}>
+					<h5>${b.title}</h5>
+					<div style=${b.content_style} @click=${b.click}>${b.content}</div>
+				</div>`)}
+			</div>
+		`;
+	}
+
+	/** @private */
+	render() {
+		if(!this._meta) { return nothing; }
+
+		const lang = this._parent?.lang || window.navigator.language;
+
+		// Generic information
+		const persOrient = this._meta?.properties?.["pers:interior_orientation"];
+		const makeModel = [persOrient.camera_manufacturer, persOrient.camera_model].filter(v => v).join(" ");
+		const focal = persOrient?.focal_length ? `${persOrient?.focal_length} mm` : missing();
+		let resmp = persOrient?.["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 pictypelong = this._parent?._t.pnx.picture_flat_long;
+		let picFov = persOrient?.["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;
+				pictypelong = this._parent?._t.pnx.picture_360_long;
+			}
+			else { pictype += ` (${picFov}°)`; }
+		}
+
+		// Camera tab
+		const cameraData = [
+			{ title: this._parent?._t.pnx.metadata_camera_make, content: persOrient?.camera_manufacturer || missing() },
+			{ title: this._parent?._t.pnx.metadata_camera_model, content: persOrient?.camera_model || missing() },
+			{ title: this._parent?._t.pnx.metadata_camera_type, content: pictype },
+			{ title: this._parent?._t.pnx.metadata_camera_resolution, content: resmp || missing() },
+			{ title: this._parent?._t.pnx.metadata_camera_focal_length, content: focal },
+			// Capture date
+			this._meta?.caption?.date && {
+				title: this._parent?._t.pnx.metadata_general_date,
+				content: html`
+					<strong>${new Intl.DateTimeFormat(lang, {
+						timeZone: this._meta.caption.tz,
+						dateStyle: "short"
+					}).format(this._meta.caption.date)}</strong>
+					<br />${new Intl.DateTimeFormat(lang, {
+						timeZone: this._meta.caption.tz,
+						hour: "numeric",
+						minute: "numeric",
+						second: "numeric",
+						fractionalSecondDigits: 3,
+						timeZoneName: "longOffset"
+					}).format(this._meta.caption.date)}
+				`
+			}
+		];
+
+		// Location tab
+		const orientation = this._meta?.properties?.["view:azimuth"] !== undefined && `${this._meta.properties["view:azimuth"]}°`;
+		const locationData = [
+			{
+				title: this._parent?._t.pnx.metadata_location_coordinates,
+				content: html`
+					${this._meta.gps[0].toFixed(5)}, ${this._meta.gps[1].toFixed(5)}
+					<pnx-copy-coordinates
+						._parent=${this._parent}
+						.gps=${this._meta.gps}
+						style="margin-left: 10px"
+					></pnx-copy-coordinates>
+				`,
+				style: "width: 100%"
+			},
+			{ title: this._parent?._t.pnx.metadata_location_orientation, content: orientation || missing() },
+			{ title: this._parent?._t.pnx.metadata_location_precision, content: getGPSPrecision(this._meta) || missing() },
+		];
+
+		// Quality tab
+		const hasQualityScore = (
+			this._parent?.map?._hasQualityScore?.()
+			|| this._meta?.properties?.["quality:horizontal_accuracy"]
+			|| this._meta?.properties?.["panoramax:horizontal_pixel_density"]
+		);
+		let qualityData, generalGrade;
+		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
+			generalGrade = Math.round((resGrade || 1) * QUALITYSCORE_POND_RES + (gpsGrade || 1) * QUALITYSCORE_POND_GPS);
+
+			qualityData = [
+				{
+					title: html`
+						${this._parent?._t.pnx.metadata_quality_score}
+						<pnx-button
+							title="${this._parent?._t.pnx.metadata_quality_help}"
+							kind="superinline"
+							@click=${() => this._parent?._showQualityScoreDoc()}
+						>
+							${fa(faInfoCircle)}
+						</pnx-button>
+					`,
+					content: html`<pnx-quality-score grade=${generalGrade} style="font-size: 16px"></pnx-quality-score>`,
+					style: "width: 100%"
+				},
+				{
+					title: this._parent?._t.pnx.metadata_quality_gps_score,
+					content: createWebComp("pnx-grade", { stars: gpsGrade, _t: this._parent?._t })
+				},
+				{
+					title: this._parent?._t.pnx.metadata_quality_resolution_score,
+					content: createWebComp("pnx-grade", { stars: resGrade, _t: this._parent?._t })
+				},
+			];
+		}
+
+		// EXIF data
+		const exifData = Object.entries(this._meta.properties.exif)
+			.sort()
+			.filter(([, value]) => value)
+			.map(([key, value]) => {
+				if(JSON.stringify(value).includes("\\u")) {
+					value = JSON.stringify(value).replace(/\\u[0-9A-Fa-f]{4}/g, unicode => (
+						" 0x" + parseInt(unicode.slice(2), 16).toString(16).toUpperCase().padStart(4, "0")
+					)).slice(1, -1).trim();
+				}
+				return {
+					title: key,
+					content: value.length > 30 ? html`<textarea readonly .value=${value}></textarea>`: value,
+					style: value.length > 30 ? "width: 100%" : undefined
+				};
+			});
+		exifData.unshift({
+			content: html`
+				<pnx-link-button
+					size="sm"
+					target="_blank"
+					href="https://exiv2.org/metadata.html"
+					title=${this._parent?._t.pnx.metadata_exif_doc_title}
+				>${fa(faInfoCircle)} ${this._parent?._t.pnx.metadata_exif_doc}</pnx-link-button>
+			`,
+			style: "width: 100%"
+		});
+
+		// General metadata
+		const overview = [
+			// Producer
+			this._meta?.caption?.producer?.length > 0 && {
+				title: this._parent?._t.pnx.metadata_general_author,
+				content: html`
+					<strong>${this._meta.caption.producer[this._meta.caption.producer.length - 1]}</strong>
+					${this._meta.caption.producer.length > 1 ? html`<br />${this._meta.caption.producer.slice(0, -1).join(", ")}` : nothing}
+				`
+			},
+			// Capture date
+			this._meta?.caption?.date && {
+				title: this._parent?._t.pnx.metadata_general_date,
+				click: this._onCaptureDateClick,
+				content_style: "cursor: pointer",
+				content: html`
+					<strong>${new Intl.DateTimeFormat(lang, {timeZone: this._meta.caption.tz, dateStyle: "long"}).format(this._meta.caption.date)}</strong>
+					<br />${new Intl.DateTimeFormat(lang, {timeZone: this._meta.caption.tz, hour: "numeric",minute:"numeric", second: "numeric"}).format(this._meta.caption.date)}
+				`
+			},
+			// Camera
+			persOrient && {
+				title: this._parent?._t.pnx.metadata_camera,
+				content: html`
+					<strong>${makeModel.length > 0 ? makeModel : missing()}</strong>
+					<br />${pictypelong}
+				`
+			},
+			// License
+			this._meta?.caption?.license && {
+				title: this._parent?._t.pnx.metadata_general_license,
+				content: html`${unsafeStatic(this._meta.caption.license)}`
+			},
+			// Quality score
+			hasQualityScore && {
+				title: this._parent?._t.pnx.metadata_quality,
+				click: this._onQualityScoreClick,
+				content: html`<pnx-quality-score
+					grade=${generalGrade}
+					style="font-size: 14px; cursor: pointer"
+				/>`
+			},
+			// Copy ID
+			{
+				title: this._parent?._t.pnx.metadata_general_copy_id,
+				content_style: "display: flex; gap: 5px;",
+				content: html`
+					<pnx-copy-button
+						kind="outline"
+						size="sm"
+						._t=${this._parent?._t}
+						text=${this._meta.id}
+						title=${this._meta.id}
+						style="flex: 1"
+					>
+						${fa(faImage)} ${this._parent?._t.pnx.metadata_general_picid}
+					</pnx-copy-button>
+					<pnx-copy-button
+						kind="outline"
+						size="sm"
+						._t=${this._parent?._t}
+						text=${this._meta.sequence.id}
+						title=${this._meta.sequence.id}
+						style="flex: 1"
+					>
+						${fa(faImages)} ${this._parent?._t.pnx.metadata_general_seqid}
+					</pnx-copy-button>
+				`
+			},
+			this._meta?.origInstance && {
+				title: this._parent?._t.pnx.metadata_general_instance,
+				content: html`<strong>
+					<a href=${this._meta.origInstance.href+window.location.search} target="_blank" style="text-decoration: none">
+						<img
+							src=${PanoramaxMetaCatalogURL()+"/api/instances/"+this._meta.origInstance.instance_name+"/logo"}
+							style="height: 30px; max-width: 150px; vertical-align: middle"
+							alt=""
+						/>
+						<span style="text-decoration: underline">
+							${this._meta.origInstance.instance_name || this._meta.origInstance.href.replace(/^http.?:\/\//, "")}
+						</span>
+					</a>
+				</strong>`
+			}
+		];
+
+		return html`<pnx-tabs .hideNav=${this["block-editor"]}>
+			${this._toTab( // General
+				html`${fa(faImage)} ${this._parent?._t.pnx.metadata_summary}`,
+				overview
+			)}
+
+			${this._toTab( // Camera
+				html`${fa(faCamera)} ${this._parent?._t.pnx.metadata_camera}`,
+				cameraData
+			)}
+
+			${this._toTab( // Position
+				html`${fa(faLocationDot)} ${this._parent?._t.pnx.metadata_location}`,
+				locationData
+			)}
+
+			${hasQualityScore ? this._toTab( // Quality
+				html`${fa(faMedal)} ${this._parent?._t.pnx.metadata_quality}`,
+				qualityData
+			) : nothing}
+
+			<h4 slot="title">${fa(faTags)} ${this._parent?._t.pnx.semantics_title}</h4>
+			<div slot="content" class="data-blocks">
+				<pnx-semantics-metadata ._parent=${this._parent}></pnx-semantics-metadata>
+			</div>
+
+			${this._meta.properties?.exif ? this._toTab( // EXIF
+				html`${fa(faScroll)} ${this._parent?._t.pnx.metadata_exif}`,
+				exifData
+			) : nothing}
+		</pnx-tabs>`;
+	}
+}
+
+customElements.define("pnx-picture-metadata", PictureMetadata);

package/build/components/menus/PlayerOptions.js

@@ -0,0 +1,93 @@
+import { LitElement, css, html } from "lit";
+import { faSvg } from "../styles.js";
+import { faLightbulb, faPersonBiking, faRocket } from "@fortawesome/free-solid-svg-icons";
+import { PIC_MAX_STAY_DURATION } from "../ui/Photo.js";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+
+/**
+ * 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();
+		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 */
+	_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"
+				@click=${this._onContrastClick}
+			>
+				${fa(faLightbulb)}
+			</pnx-button>
+		`;
+	}
+}
+
+customElements.define("pnx-player-options", PlayerOptions);

package/build/components/menus/QualityScoreDoc.js

@@ -0,0 +1,42 @@
+import { LitElement, html } from "lit";
+import { docPopup, faSvg, titles } from "../styles.js";
+import { fa } from "../../utils/widgets.js";
+import { faExternalLinkAlt, faMedal } from "@fortawesome/free-solid-svg-icons";
+
+/**
+ * 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, docPopup ];
+
+	render() {
+		return html`
+			<h4>${fa(faMedal)} ${this._t?.pnx.filter_qualityscore}</h4>
+			<p>${this._t?.pnx.qualityscore_doc_1}</p>
+			<p>${this._t?.pnx.qualityscore_doc_2}</p>
+			<pnx-quality-score grade=""></pnx-quality-score>
+			<p>${this._t?.pnx.qualityscore_doc_3}</p>
+			<p>${this._t?.pnx.qualityscore_doc_4}</p>
+			<ul>
+				<li>${this._t?.pnx.qualityscore_doc_41}</li>
+				<li>${this._t?.pnx.qualityscore_doc_42}</li>
+			</ul>
+			<p>${this._t?.pnx.qualityscore_doc_5}</p>
+			<pnx-link-button
+				href="https://docs.panoramax.fr/pictures-metadata/quality_score/"
+				target="_blank"
+				kind="outline"
+				style="width: 100%"
+			>${fa(faExternalLinkAlt)} ${this._t?.pnx.popup_details_link}</pnx-link-button>
+		`;
+	}
+}
+
+customElements.define("pnx-quality-score-doc", QualityScoreDoc);

package/build/components/menus/ReportForm.js

@@ -0,0 +1,132 @@
+import { LitElement, css, html, nothing } from "lit";
+import { faSvg, input, select, textarea, titles } from "../styles.js";
+import { fa } from "../../utils/widgets.js";
+import {
+	faAt, faCircleInfo, faCommentDots,
+	faPaperPlane, faTriangleExclamation,
+} from "@fortawesome/free-solid-svg-icons";
+import { getUserAccount } from "../../utils/utils.js";
+
+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?.getAPI().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/build/components/menus/SemanticsDoc.js

@@ -0,0 +1,38 @@
+import { LitElement, html } from "lit";
+import { docPopup, faSvg, titles } from "../styles.js";
+import { fa } from "../../utils/widgets.js";
+import { faExternalLinkAlt, faTags } from "@fortawesome/free-solid-svg-icons";
+
+/**
+ * Semantics Doc displays a synthetic summary of what are semantics and how to use it.
+ * @class Panoramax.components.menus.SemanticsDoc
+ * @element pnx-semantics-doc
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-semantics-doc ._t=${viewer._t} />
+ * ```
+ */
+export default class SemanticsDoc extends LitElement {
+	static styles = [ titles, faSvg, docPopup ];
+
+	render() {
+		return html`
+			<h4>${fa(faTags)} ${this._t?.pnx.semantics_title}</h4>
+			<p>${this._t?.pnx.semantics_doc_info1}</p>
+			<ul style="padding-left: 1.5em;">
+				<li>${this._t?.pnx.semantics_doc_info1u1}</li>
+				<li>${this._t?.pnx.semantics_doc_info2}</li>
+			</ul>
+			<p>${this._t?.pnx.semantics_doc_info3}</p>
+			<pnx-link-button
+				href="https://docs.panoramax.fr/tags/"
+				target="_blank"
+				kind="outline"
+				style="width: 100%"
+			>${fa(faExternalLinkAlt)} ${this._t?.pnx.popup_details_link}</pnx-link-button>
+		`;
+	}
+}
+
+customElements.define("pnx-semantics-doc", SemanticsDoc);