@panoramax/web-viewer 3.2.3 → 4.0.0-develop-39167b4d

package/src/components/menus/PictureLegend.js

@@ -0,0 +1,257 @@
+import { LitElement, html, nothing, css } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { fa } 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";
+import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
+import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons/faCalendarAlt";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
+import { faShareNodes } from "@fortawesome/free-solid-svg-icons/faShareNodes";
+import { placeholder, panel } from "../styles";
+import { reverseGeocodingNominatim } from "../../utils/geocoder";
+
+/**
+ * Picture legend shows info about picture author, capture date, address, and access to metadata popup.
+ * @class Panoramax.components.menus.PictureLegend
+ * @element pnx-picture-legend
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @slot `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
+ * @example
+ * ```html
+ * <pnx-picture-legend ._parent=${viewer} />
+ * ```
+ */
+export default class PictureLegend extends LitElement {
+	/** @private */
+	static styles = [placeholder, panel, css`
+		:host {
+			overflow-y: auto;
+			overflow-x: hidden;
+			display: block;
+			margin: 0;
+			font-family: var(--font-family);
+		}
+
+		@media screen and (min-width: 576px) {
+			:host { max-height: 70vh; }
+			pnx-picture-metadata { width: 30vw; }
+		}
+
+		.pnx-hidden { display: none !important; }
+
+		/* Top bar */
+		.headline {
+			display: flex;
+			gap: 10px;
+			align-items: center;
+			margin: 10px 10px 5px 10px;
+			justify-content: space-between;
+		}
+
+		/* Address line */
+		#pic-legend-addr {
+			line-height: 1.2em;
+			font-size: 1em;
+			margin-bottom: 2px;
+			flex-grow: 5;
+			font-weight: 800;
+		}
+
+		#pic-legend-addr span {
+			display: inline-block;
+			height: 100%;
+			width: 100%;
+		}
+
+		/* Minimal info block */
+		#pic-legend-info {
+			margin: 10px;
+			display: flex;
+			gap: 10px;
+			justify-content: space-around;
+		}
+		.info-block {
+			display: flex;
+			flex-shrink: 1;
+			gap: 5px;
+			font-weight: 600;
+			font-size: 0.85em;
+			align-items: center;
+		}
+		.info-block svg { height: 18px; }
+
+		/* Expand button */
+		#pic-legend-expand {
+			display: block;
+			margin-top: 5px;
+			max-width: 100%;
+		}
+		#pic-legend-expand::part(btn) {
+			border-radius: 10px;
+			border-top-right-radius: 0;
+			border-top-left-radius: 0;
+		}
+
+		/* Details block */
+		pnx-picture-metadata {
+			margin: 5px 10px 10px;
+			display: block;
+			max-width: 450px;
+			box-sizing: border-box;
+		}
+
+		/* Details actions */
+		#pic-legend-cta {
+			display: flex;
+			margin: 5px 10px;
+			border-bottom-left-radius: 10px;
+			border-bottom-right-radius: 10px;
+			gap: 5px;
+			flex-wrap: wrap;
+		}
+
+		/* More options menu */
+		#pnx-legend-opts { min-width: unset; }
+
+		/* Editors */
+		#pic-legend-editors { margin: 0 10px; }
+	`];
+
+	/** @private */
+	static properties = {
+		_caption: { state: true },
+		_addr: { state: true },
+		_expanded: { state: true },
+		collapsable: { type: Boolean },
+	};
+
+	/** @private */
+	constructor() {
+		super();
+		this._expanded = true;
+		this.collapsable = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._expanded = !this.collapsable;
+		this._prevSearches = {};
+
+		this._parent.onceReady().then(() => {
+			this._onPicChange(this._parent.psv.getPictureMetadata());
+			this._parent.psv.addEventListener("picture-loaded", () => {
+				this._onPicChange(this._parent.psv.getPictureMetadata());
+			});
+		});
+	}
+
+	/** @private */
+	_onPicChange(picMeta) {
+		clearTimeout(this._addrTimer1);
+		this._caption = picMeta?.caption;
+		
+		if(picMeta) {
+			const coordsHash = `${picMeta.gps[0]}/${picMeta.gps[1]}`;
+			if(this._prevSearches[coordsHash]) {
+				this._addr = this._prevSearches[coordsHash];
+			}
+			else {
+				this._addrTimer2 = setTimeout(() => this._addr = "", 250);
+				this._addrTimer1 = setTimeout(() => {
+					reverseGeocodingNominatim(picMeta.gps[1], picMeta.gps[0])
+						.then(addr => {
+							clearTimeout(this._addrTimer2);
+							this._addr = addr;
+							this._prevSearches[coordsHash] = addr;
+						});
+				}, 750);
+			}
+		}
+		else {
+			this._addr = "";
+		}
+	}
+
+	/** @private */
+	_onBackClick() {
+		if(this._parent.isWidthSmall() && this._parent.focus === "map") {
+			this._parent.select();
+		}
+		else {
+			this._parent._setFocus?.("map");
+		}
+	}
+
+	/** @private */
+	render() {
+		if(!this._caption) { return nothing; }
+
+		const hiddenExpanded = classMap({"pnx-hidden": this._expanded});
+		const shownExpanded = classMap({"pnx-hidden": !this._expanded});
+
+		return html`
+			<div class="headline">
+				${this._parent._setFocus ? html`
+					<pnx-button
+						kind="superinline"
+						@click=${this._onBackClick}
+					>
+						${fa(faArrowLeft)}
+					</pnx-button>
+				` : nothing}
+
+				<div id="pic-legend-addr">
+					${this._addr?.length > 0 ? this._addr : html`<span class="pnx-placeholder-loading">&nbsp;</span>`}
+				</div>
+
+				<pnx-picture-legend-actions
+					@click=${e => e.stopPropagation()}
+					._parent=${this._parent}
+					?full=${this._expanded}
+				></pnx-picture-legend-actions>
+			</div>
+
+			<div id="pic-legend-info" class=${hiddenExpanded}>
+				${this._caption.producer?.length > 0 ? html`<div class="info-block">
+					${fa(faUser)}
+					${this._caption.producer[this._caption.producer.length-1]}
+				</div>` : nothing}
+
+				${this._caption.date ? html`<div class="info-block">
+					${fa(faCalendarAlt)}
+					${this._caption.date.toLocaleDateString(undefined, { year: "numeric", month: "long" })}
+				</div>` : nothing}
+			</div>
+
+			<div id="pic-legend-cta" class=${shownExpanded}>
+				${this._parent.api._endpoints.report ? html`
+						<pnx-button size="sm" @click=${() => this._parent._showReportForm()}>
+							${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}
+						</pnx-button>
+				` : nothing}
+
+				<pnx-button size="sm" @click=${() => this._parent._showShareOptions()}>
+					${fa(faShareNodes)} ${this._parent?._t.pnx.share}
+				</pnx-button>
+
+				<slot name="editors">
+					<pnx-widget-osmeditors ._parent=${this._parent} />
+				</slot>
+			</div>
+
+			<pnx-picture-metadata class=${shownExpanded} ._parent=${this._parent}></pnx-picture-metadata>
+
+			${this.collapsable ? html`<pnx-button
+				kind="inline"
+				size="sm"
+				id="pic-legend-expand"
+				@click=${() => this._expanded = !this._expanded}
+			>${this._expanded ? fa(faChevronUp) : fa(faChevronDown)}</pnx-button>` : nothing}
+		`;
+	}
+}
+
+customElements.define("pnx-picture-legend", PictureLegend);

package/src/components/menus/PictureMetadata.js

@@ -0,0 +1,317 @@
+import { LitElement, nothing, css } from "lit";
+import { html, unsafeStatic } from "lit/static-html.js";
+import { fa } 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";
+import { faImage } from "@fortawesome/free-solid-svg-icons/faImage";
+import { faImages } from "@fortawesome/free-solid-svg-icons/faImages";
+import { faScroll } from "@fortawesome/free-solid-svg-icons/faScroll";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+import { titles, textarea } from "../styles";
+import { 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";
+
+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 = [ titles, textarea, css`
+		div[slot="content"] {
+			padding: 5px 10px;
+			background-color: #ededed;
+		}
+
+		/* Small data blocks */
+		.data-block {
+			display: inline-block;
+			min-width: 50%;
+			margin: 8px 0;
+			box-sizing: border-box;
+			vertical-align: top;
+		}
+		.data-block h5 {
+			font-size: 0.8em;
+			font-weight: 400;
+			color: var(--blue-dark);
+			margin: 0 0 5px 0;
+		}
+		.data-block h5 pnx-button { vertical-align: middle; }
+		.data-block h5 svg.svg-inline--fa { height: 14px; }
+		.data-block div {
+			font-size: 0.8em;
+		}
+	` ];
+
+	/** @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 */
+	_onQualityScoreClick() {
+		const qsTab = this.shadowRoot.querySelector("pnx-tabs");
+		if(qsTab) {
+			qsTab.setAttribute("activeTabIndex", 3);
+		}
+	}
+
+	/** @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}>${b.content}</div>
+				</div>`)}
+			</div>
+		`;
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		if(!this._meta) { return nothing; }
+
+		// 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(undefined, {
+						timeZone: this._meta.caption.tz,
+						dateStyle: "short"
+					}).format(this._meta.caption.date)}</strong>
+					<br />${new Intl.DateTimeFormat(undefined, {
+						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_longitude, content: this._meta.gps[0] },
+			{ title: this._parent?._t.pnx.metadata_location_latitude, content: this._meta.gps[1] },
+			{ 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}</textarea>`: value,
+					style: value.length > 30 ? "width: 100%" : undefined
+				};
+			});
+
+		// 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,
+				content: html`
+					<strong>${new Intl.DateTimeFormat(undefined, {timeZone: this._meta.caption.tz, dateStyle: "long"}).format(this._meta.caption.date)}</strong>
+					<br />${new Intl.DateTimeFormat(undefined, {timeZone: this._meta.caption.tz, hour: "numeric",minute:"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,
+				content: html`<pnx-quality-score
+					grade=${generalGrade}
+					style="font-size: 14px; cursor: pointer"
+					@click=${this._onQualityScoreClick}
+				/>`
+			},
+			// 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}
+						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}
+						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">
+					${this._meta.origInstance.instance_name || this._meta.origInstance.href.replace(/^http.?:\/\//, "")}
+				</a></strong>`
+			}
+		];
+
+		return html`<pnx-tabs>
+			${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}
+
+			${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/src/components/menus/PlayerOptions.js

@@ -0,0 +1,95 @@
+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"
+				@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);