@bubo-squared/gyroview 0.1.0 → 0.2.0

package/dist/packages/player/src/controls/controlsMarkup.js

@@ -2,7 +2,8 @@ import { STABILIZATION_MODES } from "../../../core/src/domain/motion/stabilizati
 import { VIEW_MODES } from "../../../core/src/domain/view/ViewMode.js";
 import "../../../core/src/index.js";
 import controls_default from "./controls.js";
-import { ICONS } from "./icons.js";
+import { ICONS, STABILIZATION_ICONS, VIEW_MODE_ICONS } from "./icons.js";
+import { STABILIZATION_WORDS, VIEW_MODE_WORDS } from "./messages.js";
 //#region ../../packages/player/src/controls/controlsMarkup.ts
 /**
 * The bar's choice menus, by the name their parts are found under.
@@ -20,20 +21,35 @@ function choiceMenuClasses(name) {
 		popup: `${name}-menu`
 	};
 }
-function menuItemsOf(choices) {
-	return choices.map((choice) => `<button type="button" role="menuitemradio" aria-checked="false" tabindex="-1" data-choice="${choice}"></button>`).join("");
+/**
+* Each choice names itself in `data-choice` and shows its icon, and the words below it fill in
+* from the menu's tables: its name labels it for assistive technology and its description
+* describes it. Ids need be unique only within one element's shadow tree.
+*/
+function menuItemsOf(menu) {
+	return menu.choices.map((choice) => {
+		const id = `${menu.name}-${choice}`;
+		return `<button type="button" role="menuitemradio" aria-checked="false" tabindex="-1" data-choice="${choice}" aria-labelledby="${id}-name" aria-describedby="${id}-description"><span class="choice-icon">${menu.icons[choice] ?? ""}</span><span class="choice-name" id="${id}-name" data-choice-text="${menu.words.names}"></span><span class="choice-description" id="${id}-description" data-choice-text="${menu.words.descriptions}"></span></button>`;
+	}).join("");
 }
 /**
-* A button opening a popup of choices; the popup's title repeats the button's label for sight.
-* The words are the wording's to fill in.
+* A setting button opening a popup of choices. The button shows the icon of the choice in effect,
+* which its `data-choice` names, and is named by words it never shows: what it sets and the
+* choice's name, which hidden elements still give through `aria-labelledby`. The popup's title
+* repeats what the button sets for sight; its close button serves the popup shown over the whole
+* player.
 */
 function choiceMenuOf(menu) {
 	const classes = choiceMenuClasses(menu.name);
+	const [label, value] = [`${menu.name}-label`, `${menu.name}-value`];
 	return `<div class="choice">
-        <button class="${classes.button}" type="button" data-label="${menu.title}" aria-haspopup="menu" aria-expanded="false">${menu.icon}</button>
+        <button class="icon-button setting ${classes.button}" type="button" aria-haspopup="menu" aria-expanded="false" aria-labelledby="${label} ${value}"><span class="setting-icon"></span><span hidden><span id="${label}" data-text="${menu.title}"></span> <span id="${value}" data-choice-text="${menu.words.names}"></span></span></button>
         <div class="popup ${classes.popup}" hidden>
-          <p class="popup-title" aria-hidden="true" data-text="${menu.title}"></p>
-          <div role="menu" data-label="${menu.title}" data-choices="${menu.choices}">${menu.items}</div>
+          <div class="popup-header">
+            <p class="popup-title" aria-hidden="true" data-text="${menu.title}"></p>
+            <button class="icon-button popup-close" type="button" data-label="close">${ICONS.close}</button>
+          </div>
+          <div role="menu" data-label="${menu.title}">${menuItemsOf(menu)}</div>
         </div>
       </div>`;
 }
@@ -41,15 +57,15 @@ function pictureMenusMarkup() {
 	return choiceMenuOf({
 		name: ChoiceMenuName.Stabilization,
 		title: "stabilization",
-		icon: ICONS.stabilization,
-		choices: "stabilizationModes",
-		items: menuItemsOf(STABILIZATION_MODES)
+		choices: STABILIZATION_MODES,
+		icons: STABILIZATION_ICONS,
+		words: STABILIZATION_WORDS
 	}) + choiceMenuOf({
 		name: ChoiceMenuName.ViewMode,
 		title: "viewMode",
-		icon: ICONS.viewMode,
-		choices: "viewModes",
-		items: menuItemsOf(VIEW_MODES)
+		choices: VIEW_MODES,
+		icons: VIEW_MODE_ICONS,
+		words: VIEW_MODE_WORDS
 	});
 }
 /**
@@ -69,15 +85,14 @@ function controlsMarkup() {
   <div class="controls" part="controls">
     <input class="seek" type="range" min="0" max="0" step="0.01" value="0" data-label="seek" />
     <div class="row">
-      <button class="play" type="button"></button>
-      <button class="stop" type="button" data-label="stop">${ICONS.stop}</button>
-      <span class="time">0:00 / 0:00</span>
-      <span class="spacer"></span>
-      <button class="mute" type="button" data-label="mute"></button>
+      <button class="icon-button play" type="button"></button>
+      <button class="icon-button mute" type="button" data-label="mute"></button>
       <input class="volume" type="range" min="0" max="1" step="0.01" value="1" data-label="volume" />
-      <button class="reset-view" type="button" data-label="resetView">${ICONS.resetView}</button>
+      <span class="time"><span class="elapsed">0:00</span> <span class="total">/ 0:00</span></span>
+      <span class="spacer"></span>
       ${pictureMenusMarkup()}
-      <button class="fullscreen" type="button" data-label="fullscreen">${ICONS.fullscreen}</button>
+      <button class="icon-button reset-view" type="button" data-label="resetView">${ICONS.resetView}</button>
+      <button class="icon-button fullscreen" type="button" data-label="fullscreen">${ICONS.fullscreen}</button>
     </div>
   </div>`;
 }

package/dist/packages/player/src/controls/icons.js

@@ -2,12 +2,20 @@ import { parseMarkup } from "./parseMarkup.js";
 //#region ../../packages/player/src/controls/icons.ts
 /**
 * Wraps an icon's shapes in a 24-unit square. Shapes are stroked in `currentColor` unless they
-* say otherwise, so every icon takes the controls' text colour.
+* say otherwise, so every icon takes the controls' text colour. The stroke is 1.8 units: a line
+* 1.5 pixels wide at the 20 pixels the bar draws its icons at.
 */
 function icon(shapes) {
-	return `<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${shapes}</svg>`;
+	return `<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${shapes}</svg>`;
 }
-var SPEAKER = "<path d=\"M4 9.5v5h3.5L12 19V5L7.5 9.5z\" fill=\"currentColor\"/>";
+/**
+* Shapes drawn on a 20-unit grid with a 1.5-unit stroke, scaled onto the 24-unit one: the stroke
+* scales with them to the 1.8 units of every other icon.
+*/
+function fromTwentyUnitGrid(shapes) {
+	return icon(`<g transform="scale(1.2)" stroke-width="1.5">${shapes}</g>`);
+}
+var SPEAKER = "<path d=\"M4 9.5v5h3.5L12 19V5L7.5 9.5z\"/>";
 /**
 * The controls' icons, drawn as inline SVG in `currentColor` only: a text glyph is left to the
 * platform's fonts, some of which draw it as a colour emoji.
@@ -15,13 +23,29 @@ var SPEAKER = "<path d=\"M4 9.5v5h3.5L12 19V5L7.5 9.5z\" fill=\"currentColor\"/>
 var ICONS = {
 	play: icon("<path d=\"M8 5v14l11-7z\" fill=\"currentColor\"/>"),
 	pause: icon("<rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/><rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" fill=\"currentColor\" stroke=\"none\"/>"),
-	stop: icon("<rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"1.5\" fill=\"currentColor\" stroke=\"none\"/>"),
 	sound: icon(`${SPEAKER}<path d="M15.5 9a4 4 0 0 1 0 6"/><path d="M18.5 6a8 8 0 0 1 0 12"/>`),
 	muted: icon(`${SPEAKER}<path d="M16 9.5l5 5M21 9.5l-5 5"/>`),
 	resetView: icon("<path d=\"M4.5 12a7.5 7.5 0 1 0 2.2-5.3\"/><path d=\"M4.5 4.5v4h4\"/>"),
-	stabilization: icon("<rect x=\"2.5\" y=\"8.5\" width=\"19\" height=\"7\" rx=\"3.5\"/><path d=\"M8.5 8.5v7M15.5 8.5v7\"/><circle cx=\"12\" cy=\"12\" r=\"1.8\" fill=\"currentColor\" stroke=\"none\"/>"),
-	viewMode: icon("<circle cx=\"12\" cy=\"12\" r=\"8.5\"/><ellipse cx=\"12\" cy=\"12\" rx=\"3.5\" ry=\"8.5\"/><path d=\"M3.5 12h17\"/>"),
-	fullscreen: icon("<path d=\"M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5\"/>")
+	fullscreen: icon("<path d=\"M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5\"/>"),
+	close: icon("<path d=\"M6 6l12 12M18 6L6 18\"/>")
+};
+/**
+* Each stabilization mode's icon, which its menu shows beside it and its button while it is in
+* effect: records, so a mode cannot be left without one.
+*/
+var STABILIZATION_ICONS = {
+	off: fromTwentyUnitGrid("<path d=\"M2 11l2.5-3 3 4.5 3-6 3 5 2-2.5L18 11\"/>"),
+	lock: fromTwentyUnitGrid("<rect x=\"4.5\" y=\"9\" width=\"11\" height=\"8\" rx=\"1.5\"/><path d=\"M7 9V6.5a3 3 0 016 0V9\"/>"),
+	horizon: fromTwentyUnitGrid("<circle cx=\"10\" cy=\"10\" r=\"7\"/><path d=\"M3 10h14M8 13h4\"/>"),
+	follow: fromTwentyUnitGrid("<path d=\"M3 15c3.5 0 4-9 8.5-9 2 0 3 1 4.5 1\"/><path d=\"M14 4.5L16.5 7 14 9.5\"/>")
+};
+/**
+* Each view mode's icon, as the stabilization modes have theirs.
+*/
+var VIEW_MODE_ICONS = {
+	"raw-lenses": fromTwentyUnitGrid("<circle cx=\"6\" cy=\"10\" r=\"4.25\"/><circle cx=\"14\" cy=\"10\" r=\"4.25\"/>"),
+	equirectangular: fromTwentyUnitGrid("<rect x=\"2\" y=\"5\" width=\"16\" height=\"10\" rx=\"1.5\"/><path d=\"M2 10h16M7.5 5c-1.2 3.3-1.2 6.7 0 10M12.5 5c1.2 3.3 1.2 6.7 0 10\"/>"),
+	normal: fromTwentyUnitGrid("<path d=\"M10 16L3.2 7.2a10 10 0 0113.6 0z\"/>")
 };
 var parsedIcons = /* @__PURE__ */ new Map();
 /**
@@ -37,4 +61,4 @@ function iconNode(name) {
 	return parsed.cloneNode(true);
 }
 //#endregion
-export { ICONS, iconNode };
+export { ICONS, STABILIZATION_ICONS, VIEW_MODE_ICONS, iconNode };

package/dist/packages/player/src/controls/messages.js

@@ -1,4 +1,13 @@
 //#region ../../packages/player/src/controls/messages.ts
+var STABILIZATION_WORDS = {
+	names: "stabilizationModes",
+	descriptions: "stabilizationModeDescriptions"
+};
+var VIEW_MODE_WORDS = {
+	names: "viewModes",
+	descriptions: "viewModeDescriptions"
+};
+var CHOICE_TABLES = new Set([STABILIZATION_WORDS, VIEW_MODE_WORDS].flatMap((words) => [words.names, words.descriptions]));
 var UNREACHABLE = "The video could not be loaded.";
 var UNSUPPORTED_BROWSER = "This browser cannot play this video.";
 var UNREADABLE = "This file cannot be played.";
@@ -9,7 +18,6 @@ var DEFAULT_MESSAGES = {
 		loading: "Loading",
 		play: "Play",
 		pause: "Pause",
-		stop: "Stop",
 		seek: "Seek",
 		position: "{time} of {duration}",
 		mute: "Mute",
@@ -17,7 +25,8 @@ var DEFAULT_MESSAGES = {
 		resetView: "Reset view",
 		stabilization: "Stabilization",
 		viewMode: "View",
-		fullscreen: "Fullscreen"
+		fullscreen: "Fullscreen",
+		close: "Close"
 	},
 	stabilizationModes: {
 		off: "Off",
@@ -25,11 +34,22 @@ var DEFAULT_MESSAGES = {
 		horizon: "Horizon",
 		follow: "Follow"
 	},
+	stabilizationModeDescriptions: {
+		off: "Footage as the camera moved",
+		lock: "Orientation fixed to the world",
+		horizon: "Level horizon, follows heading",
+		follow: "Follows turns, smooths out shake"
+	},
 	viewModes: {
 		"raw-lenses": "Raw lenses",
 		equirectangular: "Equirectangular",
 		normal: "Normal"
 	},
+	viewModeDescriptions: {
+		"raw-lenses": "Both fisheye images as recorded",
+		equirectangular: "The full 360° frame, unwrapped",
+		normal: "Standard view, drag to look around"
+	},
 	errors: {
 		"binary-out-of-bounds": UNREADABLE,
 		"binary-unsafe-integer": UNREADABLE,
@@ -69,7 +89,9 @@ function messagesWith(overrides) {
 	return {
 		labels: tableWith(DEFAULT_MESSAGES.labels, given["labels"]),
 		stabilizationModes: tableWith(DEFAULT_MESSAGES.stabilizationModes, given["stabilizationModes"]),
+		stabilizationModeDescriptions: tableWith(DEFAULT_MESSAGES.stabilizationModeDescriptions, given["stabilizationModeDescriptions"]),
 		viewModes: tableWith(DEFAULT_MESSAGES.viewModes, given["viewModes"]),
+		viewModeDescriptions: tableWith(DEFAULT_MESSAGES.viewModeDescriptions, given["viewModeDescriptions"]),
 		errors: tableWith(DEFAULT_MESSAGES.errors, given["errors"])
 	};
 }
@@ -77,7 +99,7 @@ function isLabelName(name) {
 	return name !== null && Object.hasOwn(DEFAULT_MESSAGES.labels, name);
 }
 function isChoiceTable(name) {
-	return name === "stabilizationModes" || name === "viewModes";
+	return name !== null && CHOICE_TABLES.has(name);
 }
 function tableWith(defaults, overrides) {
 	if (!isRecord(overrides)) return defaults;
@@ -91,4 +113,4 @@ function isRecord(value) {
 	return typeof value === "object" && value !== null;
 }
 //#endregion
-export { DEFAULT_MESSAGES, isChoiceTable, isLabelName, messagesWith };
+export { DEFAULT_MESSAGES, STABILIZATION_WORDS, VIEW_MODE_WORDS, isChoiceTable, isLabelName, messagesWith };

package/dist/packages/player/src/controls/sliderFill.js

@@ -0,0 +1,16 @@
+import { clamp } from "../../../core/src/shared/math/clamp.js";
+import "../../../core/src/index.js";
+//#region ../../packages/player/src/controls/sliderFill.ts
+/**
+* Tells the stylesheet how far a range input is filled, as a fraction in `--fill`: only Firefox
+* styles the filled part of a range itself. Set through the CSSOM, which a Content Security
+* Policy does not govern as it governs style attributes.
+*/
+function showSliderFill(slider) {
+	const minimum = Number(slider.min);
+	const span = Number(slider.max) - minimum;
+	const fraction = span > 0 ? (Number(slider.value) - minimum) / span : 0;
+	slider.style.setProperty("--fill", String(clamp(fraction, 0, 1)));
+}
+//#endregion
+export { showSliderFill };

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

@@ -49,6 +49,13 @@ var ElementLoads = class {
 		this.files = void 0;
 		this.schedule();
 	}
+	/**
+	* How the recording is fetched changed: one named by URL loads again, read the new way; files
+	* handed in are not fetched, so they play on.
+	*/
+	requestChanged() {
+		if (this.files === void 0) this.schedule();
+	}
 	loadFiles(files) {
 		this.files = files;
 		this.schedule();

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

@@ -1,11 +1,11 @@
-import { defineBooleanProperties, defineKeywordProperties, defineStringProperties, propertyNameOf } from "./reflectedProperties.js";
+import { defineBooleanProperties, defineKeywordProperties, defineNullableKeywordProperties, 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 { OBSERVED_ATTRIBUTES, PlaybackAttribute, RequestAttribute, SourceAttribute, ViewAttribute } from "./attributeNames.js";
+import { CROSS_ORIGIN, GAIN_MATCH, PRELOAD, unreadableAngleWarning, viewAfterAttribute } from "./attributes.js";
 import { ElementLoads } from "./ElementLoads.js";
 import { FullscreenToggle } from "./FullscreenToggle.js";
 import { IdleWatcher } from "./IdleWatcher.js";
@@ -27,8 +27,10 @@ import { Wording } from "../controls/Wording.js";
 */
 var STRING_ATTRIBUTES = [...Object.values(SourceAttribute), PlaybackAttribute.Poster];
 var KEYWORD_ATTRIBUTES = [PRELOAD, GAIN_MATCH];
+var NULLABLE_KEYWORD_ATTRIBUTES = [CROSS_ORIGIN];
 var BOOLEAN_ATTRIBUTES = [PlaybackAttribute.Autoplay, PlaybackAttribute.Controls];
 var SOURCE_ATTRIBUTES = Object.values(SourceAttribute);
+var REQUEST_ATTRIBUTES = Object.values(RequestAttribute);
 /**
 * The properties a page may set before the element is defined, all kept for it.
 */
@@ -38,6 +40,7 @@ var PUBLIC_PROPERTIES = [
 		...KEYWORD_ATTRIBUTES.map(({ name }) => name),
 		...BOOLEAN_ATTRIBUTES
 	].map((name) => propertyNameOf(name)),
+	...NULLABLE_KEYWORD_ATTRIBUTES.map(({ property }) => property),
 	...LIVE_SETTING_NAMES,
 	"currentTime",
 	"messages"
@@ -66,6 +69,7 @@ var GyroViewElement = class extends TypedEventElement {
 		this.earlyProperties = takeEarlyProperties(this, PUBLIC_PROPERTIES);
 		defineStringProperties(this, STRING_ATTRIBUTES);
 		defineKeywordProperties(this, KEYWORD_ATTRIBUTES);
+		defineNullableKeywordProperties(this, NULLABLE_KEYWORD_ATTRIBUTES);
 		defineBooleanProperties(this, BOOLEAN_ATTRIBUTES);
 		const shadow = this.attachShadow({ mode: "open" });
 		renderShadowTree(shadow);
@@ -158,6 +162,7 @@ var GyroViewElement = class extends TypedEventElement {
 	}
 	attributeChangedCallback(name, _previous, value) {
 		if (SOURCE_ATTRIBUTES.includes(name)) this.loads.sourceChanged();
+		else if (REQUEST_ATTRIBUTES.includes(name)) this.loads.requestChanged();
 		else if (VIEW_ATTRIBUTES.includes(name)) {
 			this.player.setView(viewAfterAttribute(this.player.view, name, value));
 			const warning = unreadableAngleWarning(name, value);

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

@@ -11,6 +11,16 @@ var SourceAttribute = {
 	Src: "src",
 	Src2: "src2"
 };
+/**
+* `Request` ones say how the recording is fetched; changing any of them reloads a recording
+* named by URL. The iframe embed carries none of them (ADR 0027).
+*/
+var RequestAttribute = { 
+/**
+* `use-credentials` fetches with the visitor's cookies, as a media element's `crossorigin`
+* does; `anonymous`, the default, sends them to the page's own origin only.
+*/
+CrossOrigin: "crossorigin" };
 var ViewAttribute = {
 	FieldOfView: "fov",
 	Yaw: "yaw",
@@ -44,8 +54,9 @@ var PlaybackAttribute = {
 };
 var OBSERVED_ATTRIBUTES = [
 	...Object.values(SourceAttribute),
+	...Object.values(RequestAttribute),
 	...Object.values(ViewAttribute),
 	...Object.values(PlaybackAttribute)
 ];
 //#endregion
-export { OBSERVED_ATTRIBUTES, PlaybackAttribute, SourceAttribute, ViewAttribute };
+export { OBSERVED_ATTRIBUTES, PlaybackAttribute, RequestAttribute, SourceAttribute, ViewAttribute };

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

@@ -1,20 +1,31 @@
 import { keywordOf } from "./reflectedProperties.js";
-import { PlaybackAttribute, SourceAttribute, ViewAttribute } from "./attributeNames.js";
+import { PlaybackAttribute, RequestAttribute, 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.
+* the document, as an image's would, and both files of a pair are read alike.
 */
 function sourceFromAttributes(read, baseUrl) {
-	const main = urlInputOf(read(SourceAttribute.Src), baseUrl);
+	const reading = readingOf(read(RequestAttribute.CrossOrigin));
+	const main = urlInputOf(read(SourceAttribute.Src), baseUrl, reading);
 	return main && {
 		main,
-		second: urlInputOf(read(SourceAttribute.Src2), baseUrl)
+		second: urlInputOf(read(SourceAttribute.Src2), baseUrl, reading)
 	};
 }
-function urlInputOf(value, baseUrl) {
+function urlInputOf(value, baseUrl, reading) {
 	const trimmed = value?.trim() ?? "";
-	return trimmed === "" ? void 0 : { url: resolvedOrAsWritten(trimmed, baseUrl) };
+	return trimmed === "" ? void 0 : {
+		url: resolvedOrAsWritten(trimmed, baseUrl),
+		...reading
+	};
+}
+/**
+* `use-credentials` sends the visitor's cookies to any origin; anything else leaves fetch's own
+* default, which sends them to the page's origin only, as `anonymous` does for a media element.
+*/
+function readingOf(crossOrigin) {
+	return keywordOf(CROSS_ORIGIN, crossOrigin) === "use-credentials" ? { credentials: "include" } : {};
 }
 /**
 * The URL resolved against the document; one that does not parse goes on as written, so the
@@ -91,6 +102,17 @@ var GAIN_MATCH = {
 	keywords: ["on", "off"],
 	fallback: "on"
 };
+/**
+* `use-credentials` fetches the recording with the visitor's cookies; `anonymous`, in effect for
+* an empty or unknown value, without them across origins. Absent, its property reads `null`, as
+* a media element's `crossOrigin` does.
+*/
+var CROSS_ORIGIN = {
+	name: RequestAttribute.CrossOrigin,
+	property: "crossOrigin",
+	keywords: ["anonymous", "use-credentials"],
+	fallback: "anonymous"
+};
 function shouldPreload(value) {
 	return keywordOf(PRELOAD, value) === "auto";
 }
@@ -98,4 +120,4 @@ function shouldMatchGains(value) {
 	return keywordOf(GAIN_MATCH, value) === "on";
 }
 //#endregion
-export { GAIN_MATCH, PRELOAD, ignoredChoiceWarning, isBooleanAttributeSet, parseNumber, shouldMatchGains, shouldPreload, sourceFromAttributes, unreadableAngleWarning, viewAfterAttribute };
+export { CROSS_ORIGIN, GAIN_MATCH, PRELOAD, ignoredChoiceWarning, isBooleanAttributeSet, parseNumber, shouldMatchGains, shouldPreload, sourceFromAttributes, unreadableAngleWarning, viewAfterAttribute };

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

@@ -48,6 +48,24 @@ function defineKeywordProperties(element, attributes) {
 	});
 }
 /**
+* Enumerated attributes whose property reads `null` while the attribute is absent and the keyword
+* in effect otherwise, the fallback for an empty or unknown value, as the DOM reflects
+* `crossOrigin`; it writes the attribute.
+*/
+function defineNullableKeywordProperties(element, attributes) {
+	for (const attribute of attributes) Object.defineProperty(element, attribute.property, {
+		configurable: true,
+		enumerable: true,
+		get() {
+			const value = this.getAttribute(attribute.name);
+			return value === null ? null : keywordOf(attribute, value);
+		},
+		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.
 */
@@ -75,4 +93,4 @@ function propertyNameOf(attribute) {
 	return attribute.replaceAll(HYPHENATED_LETTER, (_match, letter) => letter.toUpperCase());
 }
 //#endregion
-export { defineBooleanProperties, defineKeywordProperties, defineStringProperties, keywordOf, propertyNameOf, writeAttribute };
+export { defineBooleanProperties, defineKeywordProperties, defineNullableKeywordProperties, defineStringProperties, keywordOf, propertyNameOf, writeAttribute };

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

@@ -1,4 +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";
+var styles_default = ":host {\n  --gyro-view-accent: #fff;\n  --gyro-view-controls-background: rgb(0 0 0 / 60%);\n  --gyro-view-menu-background: rgb(24 24 23 / 92%);\n  --gyro-view-text: #fff;\n  --gyro-view-font: system-ui, -apple-system, 'Segoe UI', sans-serif;\n  --gyro-view-radius: 8px;\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 };