@bubo-squared/gyroview 0.1.0

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

@@ -0,0 +1,313 @@
+import { defineBooleanProperties, defineKeywordProperties, defineStringProperties, propertyNameOf } from "./reflectedProperties.js";
+import { ensureFinite } from "../player/ensureFinite.js";
+import { bindKeyboard } from "../controls/keyboard.js";
+import { ViewGestures } from "../controls/ViewGestures.js";
+import { togglePlayback } from "../controls/customControls.js";
+import { createBrowserPlayer } from "../browserPlayer.js";
+import { OBSERVED_ATTRIBUTES, PlaybackAttribute, SourceAttribute, ViewAttribute } from "./attributeNames.js";
+import { GAIN_MATCH, PRELOAD, unreadableAngleWarning, viewAfterAttribute } from "./attributes.js";
+import { ElementLoads } from "./ElementLoads.js";
+import { FullscreenToggle } from "./FullscreenToggle.js";
+import { IdleWatcher } from "./IdleWatcher.js";
+import { applyPlaybackAttribute } from "./playbackAttributes.js";
+import { describeUnlessTheAuthorDid, renameUnlessTheAuthorDid } from "./accessibleRegion.js";
+import { applyEarlyProperties, takeEarlyProperties } from "./earlyProperties.js";
+import { LIVE_SETTING_NAMES, defineLiveSettings, pictureQualityFrom, stabilizationModeFrom, viewModeFrom } from "./liveSettings.js";
+import { queryShadow } from "../controls/controlParts.js";
+import { mirrorPlayerEvents } from "./playerEventMirror.js";
+import { renderShadowTree } from "./template.js";
+import { TypedEventElement } from "./TypedEventElement.js";
+import { bindControlsBar } from "../controls/controlsBar.js";
+import { Wording } from "../controls/Wording.js";
+//#region ../../packages/player/src/element/GyroViewElement.ts
+/**
+* Attributes whose properties mirror them, as `img.src` does: what to play and how to present
+* it. The live settings (stabilization, view mode, view angles, sound, loop) have properties of
+* their own that report the player's current state.
+*/
+var STRING_ATTRIBUTES = [...Object.values(SourceAttribute), PlaybackAttribute.Poster];
+var KEYWORD_ATTRIBUTES = [PRELOAD, GAIN_MATCH];
+var BOOLEAN_ATTRIBUTES = [PlaybackAttribute.Autoplay, PlaybackAttribute.Controls];
+var SOURCE_ATTRIBUTES = Object.values(SourceAttribute);
+/**
+* The properties a page may set before the element is defined, all kept for it.
+*/
+var PUBLIC_PROPERTIES = [
+	...[
+		...STRING_ATTRIBUTES,
+		...KEYWORD_ATTRIBUTES.map(({ name }) => name),
+		...BOOLEAN_ATTRIBUTES
+	].map((name) => propertyNameOf(name)),
+	...LIVE_SETTING_NAMES,
+	"currentTime",
+	"messages"
+];
+var VIEW_ATTRIBUTES = Object.values(ViewAttribute);
+/**
+* `<gyro-view>`: the player as an element. Attributes name what to play and configure the
+* settings; the settings' properties report what is in effect now, as a media element's `muted`
+* does; the player's events are dispatched as `CustomEvent`s of the same name with the payload
+* in `detail`. Facade over {@link Player}, the controls and the gestures (ADR 0016).
+*/
+var GyroViewElement = class extends TypedEventElement {
+	static observedAttributes = OBSERVED_ATTRIBUTES;
+	/**
+	* Properties the page set before the element was defined, kept until it is connected.
+	*/
+	earlyProperties;
+	player;
+	loads;
+	wording = new Wording();
+	fullscreen = new FullscreenToggle(this);
+	idle;
+	posterImage;
+	constructor() {
+		super();
+		this.earlyProperties = takeEarlyProperties(this, PUBLIC_PROPERTIES);
+		defineStringProperties(this, STRING_ATTRIBUTES);
+		defineKeywordProperties(this, KEYWORD_ATTRIBUTES);
+		defineBooleanProperties(this, BOOLEAN_ATTRIBUTES);
+		const shadow = this.attachShadow({ mode: "open" });
+		renderShadowTree(shadow);
+		this.wording.write(shadow);
+		const canvas = queryShadow(shadow, "canvas", HTMLCanvasElement);
+		const audio = queryShadow(shadow, "audio", HTMLAudioElement);
+		this.posterImage = queryShadow(shadow, ".poster", HTMLImageElement);
+		this.player = createBrowserPlayer({
+			canvas,
+			audio
+		});
+		this.loads = new ElementLoads(this, this.player);
+		defineLiveSettings(this, this.player);
+		const host = this.controlsHost();
+		bindControlsBar(shadow, host);
+		new ViewGestures(canvas, this.player, this.onPictureTap);
+		bindKeyboard(this, host);
+		this.idle = new IdleWatcher(this, () => this.player.status === "playing");
+		const { idle, wording } = this;
+		mirrorPlayerEvents(this.player, {
+			element: this,
+			shadow,
+			idle,
+			wording
+		});
+	}
+	/**
+	* Where the player is: `idle` or `loading`, then the loaded recording's playback state.
+	*/
+	get status() {
+		return this.player.status;
+	}
+	/**
+	* What the player learned about the loaded recording; undefined until it is ready.
+	*/
+	get metadata() {
+		return this.player.metadata;
+	}
+	/**
+	* The media time shown, in seconds; setting it seeks there exactly.
+	*/
+	get currentTime() {
+		return this.player.currentTime;
+	}
+	set currentTime(time) {
+		this.seek(time);
+	}
+	/**
+	* The loaded recording's length in seconds; 0 without one.
+	*/
+	get duration() {
+		return this.player.duration;
+	}
+	/**
+	* True unless playback is under way or waiting for data to go on, as a media element's.
+	*/
+	get paused() {
+		return this.player.isPaused;
+	}
+	/**
+	* Where the normal view looks: yaw and pitch in degrees, and the horizontal field of view.
+	*/
+	get view() {
+		return this.player.view;
+	}
+	/**
+	* Every word the element shows or says to assistive technology. Setting it replaces any of
+	* them, table by table (`labels`, `stabilizationModes`, `viewModes`, `errors`); the others keep
+	* their English defaults, and `null` brings them all back.
+	*/
+	get messages() {
+		return this.wording.current;
+	}
+	set messages(overrides) {
+		const previousName = this.wording.current.labels.player;
+		this.wording.replace(overrides);
+		if (this.shadowRoot) this.wording.write(this.shadowRoot);
+		renameUnlessTheAuthorDid(this, previousName, this.wording.current.labels.player);
+	}
+	connectedCallback() {
+		describeUnlessTheAuthorDid(this, this.wording.current.labels.player);
+		applyEarlyProperties(this, this.earlyProperties, this.warn);
+		this.dataset["status"] = this.player.status;
+		this.idle.start();
+		this.loads.connected();
+	}
+	disconnectedCallback() {
+		this.idle.stop();
+		this.loads.disconnected();
+	}
+	attributeChangedCallback(name, _previous, value) {
+		if (SOURCE_ATTRIBUTES.includes(name)) this.loads.sourceChanged();
+		else if (VIEW_ATTRIBUTES.includes(name)) {
+			this.player.setView(viewAfterAttribute(this.player.view, name, value));
+			const warning = unreadableAngleWarning(name, value);
+			if (warning !== void 0) this.warn(warning);
+		} else {
+			const targets = {
+				player: this.player,
+				posterImage: this.posterImage,
+				warn: this.warn
+			};
+			applyPlaybackAttribute(targets, name, value);
+		}
+	}
+	/**
+	* Starts playing, waiting for a load in progress, or one the attributes set just now asked
+	* for; rejects when the browser refuses to start.
+	*/
+	async play() {
+		await this.loads.settled();
+		await this.player.play();
+	}
+	/**
+	* Pauses, keeping the frame on screen.
+	*/
+	pause() {
+		this.player.pause();
+	}
+	/**
+	* Pauses and goes back to the start.
+	*/
+	stop() {
+		this.player.stop();
+	}
+	/**
+	* Seeks exactly to `time` seconds; right after a new `src`, the new recording starts there.
+	*/
+	seek(time) {
+		ensureFinite(time, "time");
+		this.loads.seek(time);
+	}
+	/**
+	* Seeks to the key frame at or before `time`: quick to show while a seek bar is dragged.
+	*/
+	scrub(time) {
+		return this.player.scrub(time);
+	}
+	/**
+	* Points the normal view at `yaw` and `pitch`, in degrees: yaw positive to the right, pitch
+	* positive up.
+	*/
+	lookAt(yaw, pitch) {
+		this.player.lookAt(yaw, pitch);
+	}
+	/**
+	* Brings the current view mode back to how it starts, the others keeping their framing.
+	*/
+	resetView() {
+		this.player.resetView();
+	}
+	/**
+	* Zooms by `steps` (positive zooms in, each step by a factor of 1.1, within each view mode's
+	* limits) toward `focus`, a point of the picture as fractions of its size; about the centre
+	* when none is given.
+	*/
+	zoom(steps, focus) {
+		this.player.zoom(steps, focus);
+	}
+	/**
+	* Stabilizes the picture in `mode` (`off`, `lock`, `horizon`, `follow`); any other value,
+	* an unset one included, is refused.
+	*/
+	setStabilization(mode) {
+		this.player.setStabilization(stabilizationModeFrom(mode));
+	}
+	/**
+	* Shows the picture in `mode` (`raw-lenses`, `equirectangular`, `normal`); any other value,
+	* an unset one included, is refused.
+	*/
+	setViewMode(mode) {
+		this.player.setViewMode(viewModeFrom(mode));
+	}
+	/**
+	* Reads the lens images as `quality` says (`fast`, `balanced`, `high`); any other value, an
+	* unset one included, is refused.
+	*/
+	setQuality(quality) {
+		this.player.setQuality(pictureQualityFrom(quality));
+	}
+	/**
+	* Fills the screen with the player, through the Fullscreen API or pinned over the page, or
+	* leaves it.
+	*/
+	toggleFullscreen() {
+		return this.fullscreen.toggle();
+	}
+	/**
+	* Loads what the attributes (or the files handed in) name: the change already waiting to be
+	* read, or else now; out of the document, once connected. Resolves once the recording is
+	* ready; rejects with the failure, which is dispatched as an `error` event too.
+	*/
+	load() {
+		return this.loads.load();
+	}
+	/**
+	* Plays local files instead of the `src` attributes, until `src` or `src2` change.
+	*/
+	loadFiles(files) {
+		this.loads.loadFiles(files);
+	}
+	/**
+	* What the controls and the keyboard ask of the element. They live as long as the element:
+	* their listeners sit on its own shadow tree and host, and on its player.
+	*/
+	controlsHost() {
+		return {
+			player: this.player,
+			wording: this.wording,
+			togglePlay: this.togglePlayback,
+			toggleFullscreen: () => {
+				this.toggleFullscreen();
+			},
+			warn: this.warn,
+			isFullscreen: () => this.fullscreen.isActive,
+			exitFullscreen: () => {
+				this.fullscreen.exit();
+			}
+		};
+	}
+	/**
+	* A tap on the picture toggles playback, except a touch that brought hidden controls back:
+	* touch has no hover to reveal them, so that tap is the viewer asking to see them. Without
+	* controls there is nothing to reveal, and every tap toggles.
+	*/
+	onPictureTap = (pointerType) => {
+		const isRevealingControls = this.controls && this.idle.wasIdleAtLastPress;
+		if (pointerType !== "mouse" && isRevealingControls) return;
+		this.togglePlayback();
+	};
+	/**
+	* Pauses, or starts playing and reports a refused start as a warning.
+	*/
+	togglePlayback = () => {
+		togglePlayback(this.player);
+	};
+	warn = (warning) => {
+		this.dispatchEvent(new CustomEvent("warning", {
+			detail: warning,
+			composed: true
+		}));
+	};
+};
+//#endregion
+export { GyroViewElement };

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

@@ -0,0 +1,71 @@
+//#region ../../packages/player/src/element/IdleWatcher.ts
+var IDLE_ATTRIBUTE = "data-idle";
+var IDLE_DELAY_MS = 2500;
+var ACTIVITY_EVENTS = [
+	"pointermove",
+	"pointerdown",
+	"keydown",
+	"focusin"
+];
+/**
+* Activity is heard on its way in, before any control inside can keep it to itself.
+*/
+var ON_THE_WAY_IN = { capture: true };
+/**
+* Marks the element idle when the viewer has left it alone for a while and `shouldHide` agrees
+* (playing, not paused), so the controls can fade; any activity brings them back.
+*/
+var IdleWatcher = class {
+	element;
+	shouldHide;
+	timer;
+	wasIdleAtPress = false;
+	constructor(element, shouldHide) {
+		this.element = element;
+		this.shouldHide = shouldHide;
+	}
+	/**
+	* Whether the controls were hidden when the last press began: on touch, which has no hover,
+	* such a press is how the viewer brings them back.
+	*/
+	get wasIdleAtLastPress() {
+		return this.wasIdleAtPress;
+	}
+	start() {
+		this.element.addEventListener("pointerdown", this.onPress, ON_THE_WAY_IN);
+		for (const name of ACTIVITY_EVENTS) this.element.addEventListener(name, this.onActivity, ON_THE_WAY_IN);
+		this.onActivity();
+	}
+	stop() {
+		for (const name of ACTIVITY_EVENTS) this.element.removeEventListener(name, this.onActivity, ON_THE_WAY_IN);
+		this.element.removeEventListener("pointerdown", this.onPress, ON_THE_WAY_IN);
+		this.clearTimer();
+		this.element.removeAttribute(IDLE_ATTRIBUTE);
+	}
+	/**
+	* Re-evaluates after a state change, so pausing shows the controls at once.
+	*/
+	refresh() {
+		if (!this.shouldHide()) this.element.removeAttribute(IDLE_ATTRIBUTE);
+		this.restart();
+	}
+	onPress = () => {
+		this.wasIdleAtPress = this.element.hasAttribute(IDLE_ATTRIBUTE);
+	};
+	onActivity = () => {
+		this.element.removeAttribute(IDLE_ATTRIBUTE);
+		this.restart();
+	};
+	restart() {
+		this.clearTimer();
+		this.timer = setTimeout(() => {
+			if (this.shouldHide()) this.element.setAttribute(IDLE_ATTRIBUTE, "");
+		}, IDLE_DELAY_MS);
+	}
+	clearTimer() {
+		if (this.timer !== void 0) clearTimeout(this.timer);
+		this.timer = void 0;
+	}
+};
+//#endregion
+export { IdleWatcher };

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

@@ -0,0 +1,22 @@
+//#region ../../packages/player/src/element/TypedEventElement.ts
+/**
+* `HTMLElement` in a browser; elsewhere a stand-in, so that a server rendering the page, or a
+* script importing the package for `inspectRecording`, can evaluate this module. The element is
+* only ever constructed where `customElements` defined it: in a browser.
+*/
+var ElementBase = typeof HTMLElement === "function" ? HTMLElement : Object;
+/**
+* The HTMLElement `<gyro-view>` builds on, whose `addEventListener` and `removeEventListener`
+* know the events it fires, where the DOM's own map would name other types. The overrides only
+* pass through.
+*/
+var TypedEventElement = class extends ElementBase {
+	addEventListener(type, listener, options) {
+		super.addEventListener(type, listener, options);
+	}
+	removeEventListener(type, listener, options) {
+		super.removeEventListener(type, listener, options);
+	}
+};
+//#endregion
+export { TypedEventElement };

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

@@ -0,0 +1,19 @@
+//#region ../../packages/player/src/element/accessibleRegion.ts
+/**
+* The element takes focus and keys, so assistive technology needs to know what it is: a region
+* called `name`, unless the page gave it a role, a name or a tab order of its own.
+*/
+function describeUnlessTheAuthorDid(element, name) {
+	if (!element.hasAttribute("tabindex")) element.tabIndex = 0;
+	if (!element.hasAttribute("role")) element.setAttribute("role", "region");
+	if (!(element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby"))) element.setAttribute("aria-label", name);
+}
+/**
+* The element's name after a change of words: the new one where it bore its own name, the
+* page's where the page named it.
+*/
+function renameUnlessTheAuthorDid(element, previousName, name) {
+	if (element.getAttribute("aria-label") === previousName) element.setAttribute("aria-label", name);
+}
+//#endregion
+export { describeUnlessTheAuthorDid, renameUnlessTheAuthorDid };

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

@@ -0,0 +1,51 @@
+//#region ../../packages/player/src/element/attributeNames.ts
+/**
+* The names of `<gyro-view>`'s attributes, with no dependencies, so an embedding page's snippet can
+* spell them without carrying the player. Published as `@gyroview/player/attributes`.
+*/
+/**
+* The attributes `<gyro-view>` understands. `Source` ones name what to play; changing any of
+* them reloads. `View` ones move the picture without reloading.
+*/
+var SourceAttribute = {
+	Src: "src",
+	Src2: "src2"
+};
+var ViewAttribute = {
+	FieldOfView: "fov",
+	Yaw: "yaw",
+	Pitch: "pitch"
+};
+var PlaybackAttribute = {
+	Autoplay: "autoplay",
+	/**
+	* `none` keeps the decoders idle until play; anything else (the default) shows the first frame.
+	*/
+	Preload: "preload",
+	/**
+	* `off` leaves the lenses' exposure as recorded; anything else (the default) matches them.
+	*/
+	GainMatch: "gain-match",
+	Muted: "muted",
+	Loop: "loop",
+	Stabilization: "stabilization",
+	/**
+	* `raw-lenses`, `equirectangular` or `normal`: what the picture shows (ADR 0015); the raw
+	* lenses until set (ADR 0022).
+	*/
+	ViewMode: "view-mode",
+	/**
+	* `fast`, `balanced` or `high`: how finely the lens images are read and how many device
+	* pixels are drawn; `balanced` until set.
+	*/
+	Quality: "quality",
+	Controls: "controls",
+	Poster: "poster"
+};
+var OBSERVED_ATTRIBUTES = [
+	...Object.values(SourceAttribute),
+	...Object.values(ViewAttribute),
+	...Object.values(PlaybackAttribute)
+];
+//#endregion
+export { OBSERVED_ATTRIBUTES, PlaybackAttribute, SourceAttribute, ViewAttribute };

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

@@ -0,0 +1,101 @@
+import { keywordOf } from "./reflectedProperties.js";
+import { PlaybackAttribute, SourceAttribute, ViewAttribute } from "./attributeNames.js";
+//#region ../../packages/player/src/element/attributes.ts
+/**
+* The source the attributes describe, or nothing when `src` is absent. URLs resolve against
+* the document, as an image's would.
+*/
+function sourceFromAttributes(read, baseUrl) {
+	const main = urlInputOf(read(SourceAttribute.Src), baseUrl);
+	return main && {
+		main,
+		second: urlInputOf(read(SourceAttribute.Src2), baseUrl)
+	};
+}
+function urlInputOf(value, baseUrl) {
+	const trimmed = value?.trim() ?? "";
+	return trimmed === "" ? void 0 : { url: resolvedOrAsWritten(trimmed, baseUrl) };
+}
+/**
+* The URL resolved against the document; one that does not parse goes on as written, so the
+* load fails on it and reports it as an `error`, like any source it cannot reach.
+*/
+function resolvedOrAsWritten(url, baseUrl) {
+	try {
+		return new URL(url, baseUrl).href;
+	} catch {
+		return url;
+	}
+}
+var VIEW_ANGLES = {
+	[ViewAttribute.FieldOfView]: "fieldOfView",
+	[ViewAttribute.Yaw]: "yaw",
+	[ViewAttribute.Pitch]: "pitch"
+};
+/**
+* The view after one view attribute changed: the angle it names replaces the view's; an absent
+* or unreadable value leaves the view as it is. The other angles are not read again, so what the
+* viewer changed since is kept. The player clamps the view it is given.
+*/
+function viewAfterAttribute(view, name, value) {
+	const angle = VIEW_ANGLES[name];
+	const parsed = parseNumber(value);
+	return angle === void 0 || parsed === void 0 ? view : {
+		...view,
+		[angle]: parsed
+	};
+}
+/**
+* HTML boolean attributes are true by presence, whatever their value.
+*/
+function isBooleanAttributeSet(value) {
+	return value !== null;
+}
+function parseNumber(value) {
+	if (value === null || value.trim() === "") return void 0;
+	const parsed = Number(value);
+	return Number.isFinite(parsed) ? parsed : void 0;
+}
+/**
+* The `warning` for an attribute naming a choice the element does not know.
+*/
+function ignoredChoiceWarning(attribute, value, choices) {
+	return {
+		code: "ignored-attribute",
+		message: `ignoring ${attribute}="${value}"; expected one of ${choices.join(", ")}`
+	};
+}
+/**
+* The `warning` for a view attribute whose value is no number of degrees; none for one that is,
+* or for an absent attribute, which leaves the view as it is.
+*/
+function unreadableAngleWarning(attribute, value) {
+	return value === null || parseNumber(value) !== void 0 ? void 0 : {
+		code: "ignored-attribute",
+		message: `ignoring ${attribute}="${value}"; expected a number of degrees`
+	};
+}
+/**
+* `none` keeps the decoders idle until play; `auto`, the default, shows the first frame at once.
+*/
+var PRELOAD = {
+	name: PlaybackAttribute.Preload,
+	keywords: ["none", "auto"],
+	fallback: "auto"
+};
+/**
+* `off` leaves the lenses' exposure as recorded; `on`, the default, matches it along the seam.
+*/
+var GAIN_MATCH = {
+	name: PlaybackAttribute.GainMatch,
+	keywords: ["on", "off"],
+	fallback: "on"
+};
+function shouldPreload(value) {
+	return keywordOf(PRELOAD, value) === "auto";
+}
+function shouldMatchGains(value) {
+	return keywordOf(GAIN_MATCH, value) === "on";
+}
+//#endregion
+export { GAIN_MATCH, PRELOAD, ignoredChoiceWarning, isBooleanAttributeSet, parseNumber, shouldMatchGains, shouldPreload, sourceFromAttributes, unreadableAngleWarning, viewAfterAttribute };

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

@@ -0,0 +1,21 @@
+import { lazy } from "../../../core/src/shared/lazy.js";
+import "../../../core/src/index.js";
+import { GyroViewElement } from "./GyroViewElement.js";
+//#region ../../packages/player/src/element/defineGyroView.ts
+var GYRO_VIEW_TAG = "gyro-view";
+/**
+* Registers `<gyro-view>` once. A page that loads the package twice keeps the first definition,
+* and hears once that another copy was there first, which may be another version. Without a
+* custom element registry (a server rendering the page) there is nothing to register.
+*/
+function defineGyroView() {
+	if (typeof customElements === "undefined") return;
+	const defined = customElements.get(GYRO_VIEW_TAG);
+	if (defined === void 0) customElements.define(GYRO_VIEW_TAG, GyroViewElement);
+	else if (defined !== GyroViewElement) warnOfAnotherCopy();
+}
+var warnOfAnotherCopy = lazy(() => {
+	console.warn(`<${GYRO_VIEW_TAG}> was defined by another copy of gyroview; that copy's element is used`);
+});
+//#endregion
+export { GYRO_VIEW_TAG, defineGyroView };

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

@@ -0,0 +1,36 @@
+import { messageOf } from "../../../core/src/shared/errors/GyroViewError.js";
+import "../../../core/src/index.js";
+//#region ../../packages/player/src/element/earlyProperties.ts
+/**
+* Properties a page set on the element before its definition ran (a classic script ahead of the
+* module, a framework's property binding) sit on the plain element as its own; the element's
+* accessors would replace or shadow them. They are taken off as the element is built, to be set
+* again through the accessors once it is connected.
+*/
+function takeEarlyProperties(element, names) {
+	const early = /* @__PURE__ */ new Map();
+	for (const name of names) {
+		if (!Object.hasOwn(element, name)) continue;
+		early.set(name, Reflect.get(element, name));
+		Reflect.deleteProperty(element, name);
+	}
+	return early;
+}
+/**
+* Sets the properties taken off again, now through the element's accessors, and forgets them. A
+* value its setter refuses is a warning: the rest still apply and the element still starts.
+*/
+function applyEarlyProperties(element, early, warn) {
+	const entries = [...early];
+	early.clear();
+	for (const [name, value] of entries) try {
+		Reflect.set(element, name, value);
+	} catch (error) {
+		warn({
+			code: "refused-property",
+			message: `${name} set before the element was defined was refused: ${messageOf(error)}`
+		});
+	}
+}
+//#endregion
+export { applyEarlyProperties, takeEarlyProperties };

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

@@ -0,0 +1,23 @@
+import { sourceFromAttributes } from "./attributes.js";
+//#region ../../packages/player/src/element/elementSource.ts
+/**
+* What the element should play: the files handed to it, if any, otherwise what its attributes
+* name.
+*/
+function elementSourceOf(read, baseUrl, files) {
+	return files ? fileSourceOf(files) : sourceFromAttributes(read, baseUrl);
+}
+function fileSourceOf(files) {
+	return {
+		main: {
+			blob: files.main,
+			name: files.main.name
+		},
+		second: files.second && {
+			blob: files.second,
+			name: files.second.name
+		}
+	};
+}
+//#endregion
+export { elementSourceOf };