@bubo-squared/gyroview 0.1.0

package/dist/packages/player/src/element/liveSettings.js

@@ -0,0 +1,138 @@
+import { degrees } from "../../../core/src/shared/units/angle.js";
+import { GyroViewError } from "../../../core/src/shared/errors/GyroViewError.js";
+import { keysOf } from "../../../core/src/shared/keysOf.js";
+import "../../../core/src/index.js";
+import { pictureQualityOf, stabilizationModeOf, viewModeOf } from "../choices.js";
+import { ensureFinite } from "../player/ensureFinite.js";
+//#region ../../packages/player/src/element/liveSettings.ts
+/**
+* Every name of {@link LiveSettings} once, for what must know the settings before the element
+* defines them.
+*/
+var LIVE_SETTING_NAMES = keysOf({
+	stabilization: true,
+	viewMode: true,
+	quality: true,
+	fov: true,
+	yaw: true,
+	pitch: true,
+	muted: true,
+	loop: true,
+	volume: true
+});
+/**
+* Properties that read and change the player's settings as they are now, the way
+* `HTMLMediaElement.muted` does: the attribute of the same name configures the setting, the
+* property reports what is in effect however it was last changed (attribute, menu, keyboard,
+* gesture or script). An unset choice, angle or volume is left as it is, any other value it
+* cannot take is refused; `muted` and `loop` take any value as a boolean.
+*/
+function defineLiveSettings(element, player) {
+	const accessors = {
+		stabilization: {
+			get: () => player.stabilization,
+			set: unlessUnset((value) => {
+				player.setStabilization(stabilizationModeFrom(value));
+			})
+		},
+		viewMode: {
+			get: () => player.viewMode,
+			set: unlessUnset((value) => {
+				player.setViewMode(viewModeFrom(value));
+			})
+		},
+		quality: {
+			get: () => player.quality,
+			set: unlessUnset((value) => {
+				player.setQuality(pictureQualityFrom(value));
+			})
+		},
+		...viewAccessors(player),
+		...soundAccessors(player)
+	};
+	for (const [name, accessor] of Object.entries(accessors)) Object.defineProperty(element, name, {
+		configurable: true,
+		enumerable: true,
+		...accessor
+	});
+}
+function viewAccessors(player) {
+	const angle = (key, property) => ({
+		get: () => player.view[key],
+		set: unlessUnset((value) => {
+			player.setView({
+				...player.view,
+				[key]: angleOf(value, property)
+			});
+		})
+	});
+	return {
+		fov: angle("fieldOfView", "fov"),
+		yaw: angle("yaw", "yaw"),
+		pitch: angle("pitch", "pitch")
+	};
+}
+function soundAccessors(player) {
+	return {
+		muted: {
+			get: () => player.isMuted,
+			set: (value) => {
+				player.setMuted(Boolean(value));
+			}
+		},
+		loop: {
+			get: () => player.isLooping,
+			set: (value) => {
+				player.setLooping(Boolean(value));
+			}
+		},
+		volume: {
+			get: () => player.volume,
+			set: unlessUnset((value) => {
+				player.setVolume(numberOf(value, "volume"));
+			})
+		}
+	};
+}
+/**
+* The stabilization mode `value` names; anything else is refused, as the element's methods and
+* the embed commands refuse it.
+*/
+function stabilizationModeFrom(value) {
+	return accepted(value, stabilizationModeOf, "stabilization");
+}
+/**
+* The view mode `value` names; anything else is refused.
+*/
+function viewModeFrom(value) {
+	return accepted(value, viewModeOf, "viewMode");
+}
+/**
+* The picture quality `value` names; anything else is refused.
+*/
+function pictureQualityFrom(value) {
+	return accepted(value, pictureQualityOf, "quality");
+}
+/**
+* A setting unset leaves it as it is, as removing its attribute does: a framework unsets a
+* property it no longer passes with `undefined` (React), `null` or an empty string (Preact).
+*/
+function unlessUnset(set) {
+	return (value) => {
+		if (value !== void 0 && value !== null && value !== "") set(value);
+	};
+}
+function accepted(value, parse, property) {
+	const choice = typeof value === "string" ? parse(value) : void 0;
+	if (choice === void 0) throw new GyroViewError("invalid-argument", `${property} cannot be ${String(value)}`);
+	return choice;
+}
+function angleOf(value, property) {
+	return degrees(numberOf(value, property));
+}
+function numberOf(value, property) {
+	ensureFinite(value, property);
+	return value;
+}
+//#endregion
+export { LIVE_SETTING_NAMES, defineLiveSettings, pictureQualityFrom, stabilizationModeFrom, viewModeFrom };

package/dist/packages/player/src/element/playbackAttributes.js

@@ -0,0 +1,53 @@
+import { STABILIZATION_MODES } from "../../../core/src/domain/motion/stabilization/Stabilizer.js";
+import { PICTURE_QUALITIES } from "../../../core/src/domain/view/PictureQuality.js";
+import { VIEW_MODES } from "../../../core/src/domain/view/ViewMode.js";
+import "../../../core/src/index.js";
+import { choiceOf } from "../choices.js";
+import { PlaybackAttribute } from "./attributeNames.js";
+import { ignoredChoiceWarning, isBooleanAttributeSet, shouldMatchGains } from "./attributes.js";
+//#region ../../packages/player/src/element/playbackAttributes.ts
+/**
+* An attribute naming one of `choices`: applied when known, warned about otherwise. Removing the
+* attribute leaves the setting as it is.
+*/
+function choiceApplier(attribute, choices, apply) {
+	return ({ player, warn }, value) => {
+		const choice = choiceOf(value, choices);
+		if (choice) apply(player, choice);
+		else if (value !== null) warn(ignoredChoiceWarning(attribute, value, choices));
+	};
+}
+/**
+* What each attribute that changes playback without reloading does.
+*/
+var APPLIERS = {
+	[PlaybackAttribute.Stabilization]: choiceApplier(PlaybackAttribute.Stabilization, STABILIZATION_MODES, (player, mode) => {
+		player.setStabilization(mode);
+	}),
+	[PlaybackAttribute.ViewMode]: choiceApplier(PlaybackAttribute.ViewMode, VIEW_MODES, (player, mode) => {
+		player.setViewMode(mode);
+	}),
+	[PlaybackAttribute.Quality]: choiceApplier(PlaybackAttribute.Quality, PICTURE_QUALITIES, (player, quality) => {
+		player.setQuality(quality);
+	}),
+	[PlaybackAttribute.Muted]: ({ player }, value) => {
+		player.setMuted(isBooleanAttributeSet(value));
+	},
+	[PlaybackAttribute.Loop]: ({ player }, value) => {
+		player.setLooping(isBooleanAttributeSet(value));
+	},
+	[PlaybackAttribute.Poster]: ({ posterImage }, value) => {
+		posterImage.src = value ?? "";
+	},
+	[PlaybackAttribute.GainMatch]: ({ player }, value) => {
+		player.setGainMatching(shouldMatchGains(value));
+	}
+};
+function isApplied(name) {
+	return Object.hasOwn(APPLIERS, name);
+}
+function applyPlaybackAttribute(targets, name, value) {
+	if (isApplied(name)) APPLIERS[name](targets, value);
+}
+//#endregion
+export { applyPlaybackAttribute };

package/dist/packages/player/src/element/playerEventMirror.js

@@ -0,0 +1,33 @@
+import { queryShadow } from "../controls/controlParts.js";
+import { PLAYER_EVENT_NAMES } from "../player/PlayerEvents.js";
+//#region ../../packages/player/src/element/playerEventMirror.ts
+/**
+* The element's own bookkeeping runs before the events reach page listeners, so a listener sees
+* the attributes already matching the event it hears: the status and frame attributes, the idle
+* state and the error overlay. Every player event is then dispatched as a composed `CustomEvent`
+* of the same name, the payload in `detail`.
+*/
+function mirrorPlayerEvents(player, target) {
+	const { element, shadow, idle, wording } = target;
+	const errorMessage = queryShadow(shadow, ".error-message", HTMLElement);
+	const errorCode = queryShadow(shadow, ".error-code", HTMLElement);
+	player.events.on("statuschange", (status) => {
+		element.dataset["status"] = status;
+		idle.refresh();
+	});
+	player.events.on("frame", () => {
+		element.dataset["hasFrame"] = "";
+	});
+	player.events.on("error", (error) => {
+		wording.showError(errorMessage, error.code);
+		errorCode.textContent = error.code;
+	});
+	for (const name of PLAYER_EVENT_NAMES) player.events.on(name, (detail) => {
+		element.dispatchEvent(new CustomEvent(name, {
+			detail,
+			composed: true
+		}));
+	});
+}
+//#endregion
+export { mirrorPlayerEvents };

package/dist/packages/player/src/element/reflectedProperties.js

@@ -0,0 +1,78 @@
+//#region ../../packages/player/src/element/reflectedProperties.ts
+/**
+* Defines properties on a custom element that read and write attributes of the same name, the
+* way `img.src` mirrors its attribute, so the class body stays free of near-identical accessors.
+*/
+function defineStringProperties(element, names) {
+	for (const name of names) Object.defineProperty(element, propertyNameOf(name), {
+		configurable: true,
+		enumerable: true,
+		get() {
+			return this.getAttribute(name);
+		},
+		set(value) {
+			writeAttribute(this, name, value);
+		}
+	});
+}
+/**
+* Boolean attributes, the value coerced as a media element's `autoplay` coerces it:
+* `toggleAttribute` would take `undefined` for no force at all and flip the attribute.
+*/
+function defineBooleanProperties(element, names) {
+	for (const name of names) Object.defineProperty(element, propertyNameOf(name), {
+		configurable: true,
+		enumerable: true,
+		get() {
+			return this.hasAttribute(name);
+		},
+		set(isSet) {
+			this.toggleAttribute(name, Boolean(isSet));
+		}
+	});
+}
+/**
+* Enumerated attributes, whose property reads the keyword in effect, however the attribute
+* spells it, and writes the attribute.
+*/
+function defineKeywordProperties(element, attributes) {
+	for (const attribute of attributes) Object.defineProperty(element, propertyNameOf(attribute.name), {
+		configurable: true,
+		enumerable: true,
+		get() {
+			return keywordOf(attribute, this.getAttribute(attribute.name));
+		},
+		set(value) {
+			writeAttribute(this, attribute.name, value);
+		}
+	});
+}
+/**
+* The keyword an enumerated attribute's value names, ignoring case and spacing; the fallback for
+* an absent or unknown one.
+*/
+function keywordOf(attribute, value) {
+	const spoken = value?.trim().toLowerCase();
+	return attribute.keywords.find((keyword) => keyword === spoken) ?? attribute.fallback;
+}
+/**
+* `null` or `undefined` removes the attribute, as assigning either to `img.alt` would not but
+* `removeAttribute` does: a framework unsetting a property assigns `undefined`, which would
+* otherwise be written as the text "undefined".
+*/
+function writeAttribute(element, name, value) {
+	if (value === null || value === void 0) {
+		element.removeAttribute(name);
+		return;
+	}
+	element.setAttribute(name, value);
+}
+var HYPHENATED_LETTER = /-(?<letter>[a-z])/gu;
+/**
+* `gain-match` is the property `gainMatch`, as the DOM does for `data-*` and `aria-*`.
+*/
+function propertyNameOf(attribute) {
+	return attribute.replaceAll(HYPHENATED_LETTER, (_match, letter) => letter.toUpperCase());
+}
+//#endregion
+export { defineBooleanProperties, defineKeywordProperties, defineStringProperties, keywordOf, propertyNameOf, writeAttribute };

package/dist/packages/player/src/element/styles.js

@@ -0,0 +1,4 @@
+//#region ../../packages/player/src/element/styles.css?raw
+var styles_default = ":host {\n  --gyro-view-accent: #4cc2ff;\n  --gyro-view-controls-background: rgb(0 0 0 / 55%);\n  --gyro-view-text: #f4f4f4;\n  --gyro-view-font: system-ui, -apple-system, 'Segoe UI', sans-serif;\n  --gyro-view-radius: 6px;\n\n  display: block;\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  background: #000;\n  color: var(--gyro-view-text);\n  font-family: var(--gyro-view-font);\n  overflow: hidden;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 2px solid var(--gyro-view-accent);\n  outline-offset: 2px;\n}\n\n/*\n * Pinned over the page where the Fullscreen API is refused (iPhone Safari). Like the browser's\n * own fullscreen rules it overrides the size, margins and place the page gave the element, and\n * the insets size it to the visible viewport, where 100vh would reach under Safari's toolbars.\n */\n:host([data-fill]) {\n  position: fixed !important;\n  inset: 0 !important;\n  box-sizing: border-box !important;\n  width: auto !important;\n  height: auto !important;\n  min-width: 0 !important;\n  min-height: 0 !important;\n  max-width: none !important;\n  max-height: none !important;\n  margin: 0 !important;\n  transform: none !important;\n  aspect-ratio: auto !important;\n  z-index: 2147483000 !important;\n}\n\n:host(:fullscreen) {\n  width: 100%;\n  height: 100%;\n  aspect-ratio: auto;\n}\n\n/* The size container the controls fit themselves to: the player's size, not the page's. Its\n   size never depends on its content, which size containment requires. */\n.stage {\n  position: absolute;\n  inset: 0;\n  container-type: size;\n}\n\ncanvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n  touch-action: none;\n}\n\n.poster {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  pointer-events: none;\n}\n\n:host([data-has-frame]) .poster,\n:host(:not([poster])) .poster {\n  display: none;\n}\n\n.overlay {\n  position: absolute;\n  inset: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 1rem;\n  text-align: center;\n  background: rgb(0 0 0 / 45%);\n}\n\n:host([data-status='loading']) .overlay.loading,\n:host([data-status='buffering']) .overlay.loading,\n:host([data-status='error']) .overlay.error {\n  display: flex;\n}\n\n:host([data-status='buffering']) .overlay.loading {\n  background: transparent;\n  pointer-events: none;\n}\n\n.spinner {\n  width: 2.5rem;\n  height: 2.5rem;\n  border: 3px solid rgb(255 255 255 / 25%);\n  border-top-color: var(--gyro-view-accent);\n  border-radius: 50%;\n  animation: gyro-view-spin 0.9s linear infinite;\n}\n\n@keyframes gyro-view-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* A viewer who asked for less motion still sees that it loads, three times slower. */\n@media (prefers-reduced-motion: reduce) {\n  .spinner {\n    animation-duration: 2.7s;\n  }\n}\n\n.error-code {\n  font-size: 0.8rem;\n  opacity: 0.7;\n}\n";
+//#endregion
+export { styles_default as default };

package/dist/packages/player/src/element/template.js

@@ -0,0 +1,47 @@
+import { lazy } from "../../../core/src/shared/lazy.js";
+import "../../../core/src/index.js";
+import { parseMarkup } from "../controls/parseMarkup.js";
+import { CONTROLS_STYLES, controlsMarkup } from "../controls/controlsMarkup.js";
+import styles_default from "./styles.js";
+//#region ../../packages/player/src/element/template.ts
+/**
+* The shadow tree: the stage with the canvas, poster, audio element and overlays, and the
+* controls' own markup. Class names are the contract between this markup, the stylesheet and the
+* code that queries it; `part` names are the embedder's styling hooks. The words are the
+* wording's to fill in.
+*/
+function elementMarkup() {
+	return `
+<div class="stage" part="stage">
+  <canvas part="canvas"></canvas>
+  <img class="poster" part="poster" alt="" />
+  <audio hidden></audio>
+  <div class="overlay loading" part="loading" role="status" data-label="loading">
+    <div class="spinner"></div>
+  </div>
+  <div class="overlay error" part="error" role="alert">
+    <p class="error-message" part="error-message"></p>
+    <p class="error-code" part="error-code"></p>
+  </div>
+  ${controlsMarkup()}
+</div>
+`;
+}
+var parsedTree = lazy(() => parseMarkup(elementMarkup()));
+var stylesheets = lazy(() => [styles_default, CONTROLS_STYLES].map((css) => stylesheetOf(css)));
+/**
+* Fills a new element's shadow root with a copy of the tree, parsed once per page, and adopts
+* the stylesheets, built once and shared by every element. A Content Security Policy governs
+* `<style>` elements but not adopted stylesheets, so a page needs no `'unsafe-inline'` styles.
+*/
+function renderShadowTree(shadow) {
+	shadow.adoptedStyleSheets = stylesheets();
+	shadow.append(parsedTree().cloneNode(true));
+}
+function stylesheetOf(css) {
+	const sheet = new CSSStyleSheet();
+	sheet.replaceSync(css);
+	return sheet;
+}
+//#endregion
+export { renderShadowTree };

package/dist/packages/player/src/index.js

@@ -0,0 +1,10 @@
+import "./choices.js";
+import "./element/reflectedProperties.js";
+import "./player/ensureFinite.js";
+import { attachKeyboard, attachViewGestures } from "./controls/customControls.js";
+import { Player } from "./player/Player.js";
+import { createBrowserPlayer } from "./browserPlayer.js";
+import { inspectRecording } from "./inspectRecording.js";
+import { GyroViewElement } from "./element/GyroViewElement.js";
+import { GYRO_VIEW_TAG, defineGyroView } from "./element/defineGyroView.js";
+export { GYRO_VIEW_TAG, GyroViewElement, Player, attachKeyboard, attachViewGestures, createBrowserPlayer, defineGyroView, inspectRecording };

package/dist/packages/player/src/inspectRecording.js

@@ -0,0 +1,22 @@
+import { inspectRecording as inspectRecording$1 } from "../../core/src/application/recording/inspectRecording.js";
+import "../../core/src/index.js";
+import { browserSources } from "./composition/browserPorts.js";
+//#region ../../packages/player/src/inspectRecording.ts
+/**
+* Reads what a recording's file holds without playing it (see `RecordingInspection`): from a URL,
+* in byte ranges as playback reads it, or from a `Blob`, such as a `File` from a picker. Rejects
+* with the `GyroViewError` a load would meet, for example `cors` or `invalid-trailer`.
+*/
+function inspectRecording(recording, options = {}) {
+	const signal = options.signal ?? new AbortController().signal;
+	const source = browserSources(options.http ?? {}).open(inputOf(recording), signal);
+	return inspectRecording$1(source);
+}
+function inputOf(recording) {
+	return typeof recording === "string" ? { url: recording } : {
+		blob: recording,
+		name: recording instanceof File ? recording.name : ""
+	};
+}
+//#endregion
+export { inspectRecording };

package/dist/packages/player/src/player/DrawingBufferFit.js

@@ -0,0 +1,77 @@
+import { clamp } from "../../../core/src/shared/math/clamp.js";
+import { DEFAULT_PICTURE_QUALITY, pixelRatioCapOf } from "../../../core/src/domain/view/PictureQuality.js";
+import "../../../core/src/index.js";
+//#region ../../packages/player/src/player/DrawingBufferFit.ts
+/**
+* The drawing buffer size, in device pixels, for an element of the given CSS size on a screen
+* of the given pixel ratio, drawn at the given quality.
+*/
+function drawingBufferSizeFor(cssSize, devicePixelRatio, quality = DEFAULT_PICTURE_QUALITY) {
+	const ratio = clamp(devicePixelRatio, 1, pixelRatioCapOf(quality));
+	return {
+		width: Math.max(1, Math.round(cssSize.width * ratio)),
+		height: Math.max(1, Math.round(cssSize.height * ratio))
+	};
+}
+/**
+* The element's size in CSS pixels as laid out on the page, transforms included, so that it is
+* measured as the pointer positions on it are.
+*/
+function cssSizeOf(element) {
+	const { width, height } = element.getBoundingClientRect();
+	return {
+		width,
+		height
+	};
+}
+/**
+* Keeps the renderer's drawing buffer matched to the canvas's layout size, the screen's pixel
+* ratio and the picture quality.
+*/
+var DrawingBufferFit = class {
+	canvas;
+	renderer;
+	observer;
+	ratioWatch = new AbortController();
+	quality = DEFAULT_PICTURE_QUALITY;
+	constructor(canvas, renderer) {
+		this.canvas = canvas;
+		this.renderer = renderer;
+		this.observer = new ResizeObserver(() => {
+			this.fit();
+		});
+		this.observer.observe(canvas);
+		this.watchPixelRatio();
+		this.fit();
+	}
+	setQuality(quality) {
+		this.quality = quality;
+		this.fit();
+	}
+	dispose() {
+		this.observer.disconnect();
+		this.ratioWatch.abort();
+	}
+	/**
+	* A window moved to a screen of another pixel ratio keeps its layout size, so the resize
+	* observer stays quiet: a query for the ratio it has now says when that changes.
+	*/
+	watchPixelRatio() {
+		const query = globalThis.matchMedia(`(resolution: ${globalThis.devicePixelRatio}dppx)`);
+		const onChange = () => {
+			this.fit();
+			this.watchPixelRatio();
+		};
+		query.addEventListener("change", onChange, {
+			once: true,
+			signal: this.ratioWatch.signal
+		});
+	}
+	fit() {
+		const size = drawingBufferSizeFor(cssSizeOf(this.canvas), globalThis.devicePixelRatio, this.quality);
+		if (size.width === this.canvas.width && size.height === this.canvas.height) return;
+		this.renderer.resize(size);
+	}
+};
+//#endregion
+export { DrawingBufferFit, cssSizeOf, drawingBufferSizeFor };

package/dist/packages/player/src/player/FrameLoop.js

@@ -0,0 +1,40 @@
+//#region ../../packages/player/src/player/FrameLoop.ts
+var ANIMATION_FRAMES = {
+	request: (callback) => requestAnimationFrame(callback),
+	cancel: (handle) => {
+		cancelAnimationFrame(handle);
+	}
+};
+/**
+* Calls `tick` once per animation frame between {@link start} and {@link stop}.
+*/
+var FrameLoop = class {
+	tick;
+	scheduler;
+	isActive = false;
+	handle;
+	constructor(tick, scheduler = ANIMATION_FRAMES) {
+		this.tick = tick;
+		this.scheduler = scheduler;
+	}
+	start() {
+		if (this.isActive) return;
+		this.isActive = true;
+		this.schedule();
+	}
+	stop() {
+		this.isActive = false;
+		if (this.handle === void 0) return;
+		this.scheduler.cancel(this.handle);
+		this.handle = void 0;
+	}
+	schedule() {
+		this.handle = this.scheduler.request(() => {
+			this.handle = void 0;
+			this.tick();
+			if (this.isActive) this.schedule();
+		});
+	}
+};
+//#endregion
+export { FrameLoop };

package/dist/packages/player/src/player/PictureSettings.js

@@ -0,0 +1,60 @@
+import { DEFAULT_STABILIZATION_MODE } from "../../../core/src/domain/motion/stabilization/Stabilizer.js";
+import { DEFAULT_PICTURE_QUALITY } from "../../../core/src/domain/view/PictureQuality.js";
+import "../../../core/src/index.js";
+//#region ../../packages/player/src/player/PictureSettings.ts
+/**
+* The settings that shape the picture beyond the view: stabilization, exposure matching and
+* quality, kept across loads, applied to whichever pipeline is attached, announced when they
+* change.
+*/
+var PictureSettings = class {
+	events;
+	mode = DEFAULT_STABILIZATION_MODE;
+	isMatching = true;
+	qualityValue = DEFAULT_PICTURE_QUALITY;
+	target;
+	constructor(events) {
+		this.events = events;
+	}
+	get stabilization() {
+		return this.mode;
+	}
+	get quality() {
+		return this.qualityValue;
+	}
+	/**
+	* The pipeline of the loaded recording, or nothing between loads.
+	*/
+	attach(target) {
+		this.target = target;
+		target?.setStabilization(this.mode);
+		target?.setGainMatching(this.isMatching);
+		target?.setQuality(this.qualityValue);
+	}
+	/**
+	* The mode already in effect changes nothing: a stateful mode such as Follow keeps what it has
+	* smoothed so far instead of starting over.
+	*/
+	setStabilization(mode) {
+		if (mode === this.mode) return;
+		this.mode = mode;
+		this.target?.setStabilization(mode);
+		this.events.emit("stabilizationchange", mode);
+	}
+	setGainMatching(isEnabled) {
+		this.isMatching = isEnabled;
+		this.target?.setGainMatching(isEnabled);
+	}
+	/**
+	* The quality already in effect changes nothing: applying it again would upload the standing
+	* frames once more for the same picture.
+	*/
+	setQuality(quality) {
+		if (quality === this.qualityValue) return;
+		this.qualityValue = quality;
+		this.target?.setQuality(quality);
+		this.events.emit("qualitychange", quality);
+	}
+};
+//#endregion
+export { PictureSettings };