@bubo-squared/gyroview 0.1.0 → 0.3.0

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

@@ -4,12 +4,13 @@ import { DEFAULT_MESSAGES, isChoiceTable, isLabelName, messagesWith } from "./me
 //#region ../../packages/player/src/controls/Wording.ts
 var LABEL = "data-label";
 var TEXT = "data-text";
-var CHOICES = "data-choices";
+var CHOICE_TEXT = "data-choice-text";
 var ERROR = "data-error";
 var SELECTORS = {
 	label: "[data-label]",
 	text: "[data-text]",
-	choices: "[data-choices]",
+	choiceText: "[data-choice-text]",
+	choice: "[data-choice]",
 	error: "[data-error]"
 };
 /**
@@ -18,7 +19,8 @@ var SELECTORS = {
 * of words.
 * - `data-label`: the label for its `aria-label`;
 * - `data-text`: the label for its text;
-* - `data-choices` on a menu: the table its items' `data-choice` are read from;
+* - `data-choice-text`: for its text, the table's word for the choice the nearest `data-choice`,
+*   its own or an ancestor's, names;
 * - `data-error`: the visitor's words for that failure code.
 */
 var Wording = class {
@@ -52,7 +54,7 @@ var Wording = class {
 	write(root) {
 		for (const element of root.querySelectorAll(SELECTORS.label)) this.writeLabel(element);
 		for (const element of root.querySelectorAll(SELECTORS.text)) this.writeText(element);
-		for (const menu of root.querySelectorAll(SELECTORS.choices)) this.writeChoices(menu);
+		for (const element of root.querySelectorAll(SELECTORS.choiceText)) this.writeChoiceText(element);
 		for (const element of root.querySelectorAll(SELECTORS.error)) this.writeError(element);
 	}
 	writeLabel(element) {
@@ -63,11 +65,11 @@ var Wording = class {
 		const name = element.getAttribute(TEXT);
 		if (isLabelName(name)) element.textContent = this.words.labels[name];
 	}
-	writeChoices(menu) {
-		const name = menu.getAttribute(CHOICES);
-		if (!isChoiceTable(name)) return;
-		const table = this.words[name];
-		for (const item of menu.querySelectorAll("[data-choice]")) item.textContent = table[item.dataset["choice"] ?? ""] ?? "";
+	writeChoiceText(element) {
+		const name = element.getAttribute(CHOICE_TEXT);
+		const choice = element.closest(SELECTORS.choice)?.dataset["choice"];
+		if (choice === void 0 || !isChoiceTable(name)) return;
+		element.textContent = this.words[name][choice] ?? "";
 	}
 	writeError(element) {
 		const code = element.getAttribute(ERROR);

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

@@ -14,7 +14,9 @@ function queryChoiceMenu(root, name) {
 	const classes = choiceMenuClasses(name);
 	return {
 		button: queryShadow(root, `.${classes.button}`, HTMLButtonElement),
-		popup: queryShadow(root, `.${classes.popup}`, HTMLElement)
+		icon: queryShadow(root, `.${classes.button} .setting-icon`, HTMLElement),
+		popup: queryShadow(root, `.${classes.popup}`, HTMLElement),
+		close: queryShadow(root, `.${classes.popup} .popup-close`, HTMLButtonElement)
 	};
 }
 function queryControlParts(root) {
@@ -22,8 +24,8 @@ function queryControlParts(root) {
 		seek: queryShadow(root, ".seek", HTMLInputElement),
 		play: queryShadow(root, ".play", HTMLButtonElement),
 		bigPlay: queryShadow(root, ".big-play", HTMLButtonElement),
-		stop: queryShadow(root, ".stop", HTMLButtonElement),
-		time: queryShadow(root, ".time", HTMLElement),
+		elapsed: queryShadow(root, ".time .elapsed", HTMLElement),
+		total: queryShadow(root, ".time .total", HTMLElement),
 		mute: queryShadow(root, ".mute", HTMLButtonElement),
 		volume: queryShadow(root, ".volume", HTMLInputElement),
 		resetView: queryShadow(root, ".reset-view", HTMLButtonElement),

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

@@ -1,4 +1,4 @@
 //#region ../../packages/player/src/controls/controls.css?raw
-var controls_default = "/*\n * The controls' own styles: the big play button, the bar, its buttons, sliders and menus, and the\n * grab hand over the picture. The host's custom properties (`--gyro-view-*`) theme them.\n */\n\n.big-play {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 4.5rem;\n  height: 4.5rem;\n  transform: translate(-50%, -50%);\n  border: 0;\n  border-radius: 50%;\n  background: var(--gyro-view-controls-background);\n  color: var(--gyro-view-text);\n  cursor: pointer;\n}\n\n.big-play .icon {\n  width: 2rem;\n  height: 2rem;\n}\n\n:host(:not([data-status='ready']):not([data-status='paused'])) .big-play,\n:host(:not([controls])) .big-play {\n  display: none;\n}\n\n.controls {\n  position: absolute;\n  inset: auto 0 0 0;\n  display: flex;\n  flex-direction: column;\n  padding: 0.25rem 0.5rem 0.5rem;\n  background: linear-gradient(to top, var(--gyro-view-controls-background), transparent);\n  transition: opacity 0.25s;\n}\n\n/* A failed player has nothing to control: the error says so, and a press would only fail again. */\n:host(:not([controls])) .controls,\n:host([data-status='idle']) .controls,\n:host([data-status='loading']) .controls,\n:host([data-status='error']) .controls {\n  display: none;\n}\n\n/* Controls with an open menu stay up: the viewer is reading it. So do controls holding the\n   keyboard's focus, which would otherwise fade with its ring out of sight. */\n:host([data-idle]) .controls:not(:has(.popup:not([hidden]))):not(:has(:focus-visible)) {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.spacer {\n  flex: 1;\n}\n\n.time {\n  font-size: 0.8rem;\n  font-variant-numeric: tabular-nums;\n  padding: 0 0.5rem;\n  white-space: nowrap;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 2.25rem;\n  height: 2.25rem;\n  border: 0;\n  border-radius: var(--gyro-view-radius);\n  background: transparent;\n  color: var(--gyro-view-text);\n  font: inherit;\n  cursor: pointer;\n}\n\n.icon {\n  width: 1.25rem;\n  height: 1.25rem;\n  pointer-events: none;\n}\n\nbutton:hover,\nbutton:focus-visible {\n  background: rgb(255 255 255 / 15%);\n}\n\nbutton:focus-visible,\ninput:focus-visible {\n  outline: 2px solid var(--gyro-view-accent);\n  outline-offset: 1px;\n}\n\ninput[type='range'] {\n  accent-color: var(--gyro-view-accent);\n  margin: 0;\n}\n\n.seek {\n  width: 100%;\n  height: 1.25rem;\n}\n\n.volume {\n  width: 5rem;\n}\n\nbutton[hidden] {\n  display: none;\n}\n\n.choice {\n  position: relative;\n  display: flex;\n}\n\n/* A menu opens upward from the bar and never past the player's top, which would hide its first\n   items out of reach: what does not fit scrolls. The bar's row and gaps take the 3.75rem. */\n.popup {\n  position: absolute;\n  right: 0;\n  bottom: calc(100% + 0.5rem);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  max-height: calc(100cqh - 3.75rem);\n  overflow-y: auto;\n  min-width: 9rem;\n  padding: 0.35rem;\n  border-radius: var(--gyro-view-radius);\n  background: var(--gyro-view-controls-background);\n}\n\n.popup[hidden] {\n  display: none;\n}\n\n.popup-title {\n  margin: 0.2rem 0.5rem 0.35rem;\n  font-size: 0.75rem;\n  opacity: 0.7;\n}\n\n[role='menu'] {\n  display: flex;\n  flex-direction: column;\n}\n\n[role='menuitemradio'] {\n  justify-content: flex-start;\n  gap: 0.4rem;\n  height: 2rem;\n  padding: 0 0.75rem 0 0.4rem;\n  font-size: 0.9rem;\n  white-space: nowrap;\n}\n\n[role='menuitemradio']::before {\n  content: '\\2713';\n  width: 1rem;\n  color: var(--gyro-view-accent);\n  visibility: hidden;\n}\n\n[role='menuitemradio'][aria-checked='true']::before {\n  visibility: visible;\n}\n\n/* A narrowing player, on a phone or in a narrow column, gives up in turn the stop button (play\n   pauses), the volume slider (mute stays), the time and Reset view (the 0 key stays), so the\n   other buttons stay in reach. Each width is where the bar stops fitting with the part, with\n   times up to an hour, in rem like the bar itself, so larger page text moves them with it (490,\n   450, 360 and 256 px at 16 px a rem). */\n@container (max-width: 30.625rem) {\n  .stop {\n    display: none;\n  }\n}\n\n@container (max-width: 28.125rem) {\n  .volume {\n    display: none;\n  }\n}\n\n@container (max-width: 22.5rem) {\n  .time {\n    display: none;\n  }\n}\n\n@container (max-width: 16rem) {\n  .reset-view {\n    display: none;\n  }\n}\n\n/* The hand only where a drag moves the picture (`data-draggable`, set by the view gestures). */\ncanvas[data-draggable] {\n  cursor: grab;\n}\n\ncanvas[data-draggable]:active {\n  cursor: grabbing;\n}\n\n/* A viewer who asked for less motion sees the controls come and go without fading. */\n@media (prefers-reduced-motion: reduce) {\n  .controls {\n    transition: none;\n  }\n}\n";
+var controls_default = "/*\n * The controls' own styles: the big play button, the bar, its buttons, sliders and menus, and the\n * grab hand over the picture. The host's custom properties (`--gyro-view-*`) theme them. Secondary\n * words, fills and tracks are the text colour at lower strengths, so a page that changes the text\n * colour changes them with it.\n *\n * Two things change the bar. A coarse pointer makes every target 44 pixels and leaves the\n * volume to the device's own buttons. A narrow player, whatever the pointer, gives up the volume\n * slider, shows the menus over the whole player, and past that gives up the time and then Reset\n * view (the widths below). Sizes are in rem like the page's text, so larger text moves the widths\n * with it.\n */\n\n.big-play {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 4.5rem;\n  height: 4.5rem;\n  transform: translate(-50%, -50%);\n  border-radius: 50%;\n  background: var(--gyro-view-controls-background);\n}\n\n.big-play .icon {\n  width: 2rem;\n  height: 2rem;\n}\n\n:host(:not([data-status='ready']):not([data-status='paused'])) .big-play,\n:host(:not([controls])) .big-play {\n  display: none;\n}\n\n.controls {\n  /* The buttons, and the seek bar's hit area, which reaches up over the shade. */\n  --target: 2.25rem;\n  --seek-height: 1rem;\n\n  position: absolute;\n  inset: auto 0 0 0;\n  isolation: isolate;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0 1rem 0.625rem;\n  transition: opacity 0.25s;\n}\n\n/* The shade behind the bar, reaching 3rem above it without taking the picture's presses there. */\n.controls::before {\n  content: '';\n  position: absolute;\n  inset: -3rem 0 0;\n  z-index: -1;\n  background: linear-gradient(to top, var(--gyro-view-controls-background), transparent);\n  pointer-events: none;\n}\n\n/* A failed player has nothing to control: the error says so, and a press would only fail again. */\n:host(:not([controls])) .controls,\n:host([data-status='idle']) .controls,\n:host([data-status='loading']) .controls,\n:host([data-status='error']) .controls {\n  display: none;\n}\n\n/* Controls with an open menu stay up: the viewer is reading it. So do controls holding the\n   keyboard's focus, which would otherwise fade with its ring out of sight. */\n:host([data-idle]) .controls:not(:has(.popup:not([hidden]))):not(:has(:focus-visible)) {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.spacer {\n  flex: 1;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: var(--gyro-view-radius);\n  background: transparent;\n  color: var(--gyro-view-text);\n  font: inherit;\n  cursor: pointer;\n}\n\nbutton[hidden] {\n  display: none;\n}\n\n.icon {\n  flex: none;\n  width: 1.25rem;\n  height: 1.25rem;\n  pointer-events: none;\n}\n\n.icon-button {\n  flex: none;\n  width: var(--target);\n  height: var(--target);\n}\n\n.icon-button:hover,\n.icon-button:focus-visible {\n  background: color-mix(in srgb, var(--gyro-view-text) 12%, transparent);\n}\n\n:focus-visible {\n  outline: 2px solid var(--gyro-view-accent);\n  outline-offset: 2px;\n}\n\n.time {\n  padding: 0 0.5rem;\n  font-size: 0.8125rem;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n.elapsed {\n  opacity: 0.85;\n}\n\n.total {\n  opacity: 0.5;\n}\n\n/* The sliders: a 3-pixel track in the text colour, filled and handled in the accent. Chrome and\n   Safari draw the filled part from `--fill`, which the controls keep; Firefox draws it itself. */\ninput[type='range'] {\n  --track: color-mix(in srgb, var(--gyro-view-text) 28%, transparent);\n\n  margin: 0;\n  padding: 0;\n  background: transparent;\n  cursor: pointer;\n  appearance: none;\n}\n\ninput[type='range']::-webkit-slider-runnable-track {\n  height: 3px;\n  border-radius: 1.5px;\n  background: linear-gradient(\n    to right,\n    var(--gyro-view-accent) calc(var(--fill, 0) * 100%),\n    var(--track) 0\n  );\n}\n\ninput[type='range']::-webkit-slider-thumb {\n  width: 0.75rem;\n  height: 0.75rem;\n  margin-top: calc((3px - 0.75rem) / 2);\n  border: 0;\n  border-radius: 50%;\n  background: var(--gyro-view-accent);\n  appearance: none;\n}\n\ninput[type='range']::-moz-range-track {\n  height: 3px;\n  border-radius: 1.5px;\n  background: var(--track);\n}\n\ninput[type='range']::-moz-range-progress {\n  height: 3px;\n  border-radius: 1.5px;\n  background: var(--gyro-view-accent);\n}\n\ninput[type='range']::-moz-range-thumb {\n  width: 0.75rem;\n  height: 0.75rem;\n  border: 0;\n  border-radius: 50%;\n  background: var(--gyro-view-accent);\n}\n\n/* Taller than it looks: the hit area grows upward over the shade, leaving the bar's layout be. */\n.seek {\n  width: 100%;\n  height: var(--seek-height);\n  margin-top: calc(1rem - var(--seek-height));\n}\n\n.volume {\n  flex: none;\n  width: 4rem;\n  height: var(--target);\n}\n\n/* A setting button shows the icon of the choice in effect, and stays lit while its menu is open. */\n.setting-icon {\n  display: inline-flex;\n}\n\n.setting[aria-expanded='true'] {\n  background: color-mix(in srgb, var(--gyro-view-text) 20%, transparent);\n}\n\n.choice {\n  position: relative;\n  display: flex;\n}\n\n/* A menu opens upward, right-aligned with its button, as wide as its longest line within limits,\n   so a description fits on one line unless a translation makes it long; and never past the\n   player's top, which would put its first choices out of reach: what does not fit scrolls. */\n.popup {\n  position: absolute;\n  right: 0;\n  bottom: calc(100% + 0.625rem);\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: max-content;\n  min-width: 16.25rem;\n  max-width: min(22rem, 100cqw - 2rem);\n  max-height: calc(100cqh - var(--target) - 2rem);\n  overflow-y: auto;\n  padding: 0.375rem;\n  border-radius: calc(var(--gyro-view-radius) * 1.5);\n  background: var(--gyro-view-menu-background);\n  box-shadow: 0 8px 30px rgb(0 0 0 / 35%);\n  -webkit-backdrop-filter: blur(16px);\n  backdrop-filter: blur(16px);\n}\n\n.popup[hidden] {\n  display: none;\n}\n\n.popup-header {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.popup-title {\n  margin: 0.375rem 0.5rem 0.25rem;\n  font-size: 0.75rem;\n  opacity: 0.55;\n}\n\n.popup-close {\n  display: none;\n}\n\n[role='menu'] {\n  display: flex;\n  flex-direction: column;\n}\n\n/* A choice: its icon, its name over a line describing it, and a check on the right while it is in\n   effect. */\n[role='menuitemradio'] {\n  display: grid;\n  grid-template-columns: 1.25rem 1fr 1rem;\n  column-gap: 0.75rem;\n  align-items: center;\n  padding: 0.5rem 0.625rem;\n  text-align: start;\n}\n\n[role='menuitemradio']:hover,\n[role='menuitemradio']:focus-visible {\n  background: color-mix(in srgb, var(--gyro-view-text) 8%, transparent);\n}\n\n[role='menuitemradio']::after {\n  content: '\\2713';\n  grid-area: 1 / 3 / span 2;\n  font-size: 0.875rem;\n  color: var(--gyro-view-accent);\n  visibility: hidden;\n}\n\n[role='menuitemradio'][aria-checked='true']::after {\n  visibility: visible;\n}\n\n.choice-icon {\n  display: inline-flex;\n  grid-area: 1 / 1 / span 2;\n}\n\n.choice-name {\n  grid-column: 2;\n  font-size: 0.875rem;\n}\n\n.choice-description {\n  grid-column: 2;\n  font-size: 0.75rem;\n  opacity: 0.55;\n}\n\n/* Touch: 44-pixel targets, and the volume left to the device. */\n@media (pointer: coarse) {\n  .controls {\n    --target: 2.75rem;\n    --seek-height: 2.75rem;\n  }\n\n  .volume {\n    display: none;\n  }\n}\n\n/* A narrow player: no volume slider, and menus over the whole player, each with a close button\n   and 44-pixel rows. */\n@container (max-width: 37.5rem) {\n  .volume {\n    display: none;\n  }\n\n  .choice {\n    position: static;\n  }\n\n  .popup {\n    inset: auto 0 0;\n    width: auto;\n    max-width: none;\n    height: 100cqh;\n    max-height: none;\n    padding: 0 0.5rem 0.5rem;\n    border-radius: 0;\n    box-shadow: none;\n    -webkit-backdrop-filter: blur(14px);\n    backdrop-filter: blur(14px);\n  }\n\n  .popup-header {\n    padding-left: 0.5rem;\n  }\n\n  .popup-title {\n    margin: 0;\n    font-size: 0.8125rem;\n  }\n\n  .popup-close {\n    display: inline-flex;\n    width: 2.75rem;\n    height: 2.75rem;\n  }\n\n  [role='menuitemradio'] {\n    min-height: 2.75rem;\n    padding-block: 0;\n  }\n\n  /* Without the descriptions a choice has one line, which its icon and check keep level with. */\n  .choice-icon,\n  [role='menuitemradio']::after {\n    grid-row: 1;\n  }\n\n  .choice-name {\n    font-size: 0.9375rem;\n  }\n\n  .choice-description {\n    display: none;\n  }\n}\n\n/*\n * Narrower still, the bar gives up the time (the seek bar still shows where playback is), then\n * Reset view (the 0 key stays). Each width is where the bar stops fitting with the part, measured\n * with stabilization offered and times up to an hour; touch's larger targets move each width out.\n */\n@container (max-width: 23.5rem) {\n  .time {\n    display: none;\n  }\n}\n\n@container (max-width: 17.5rem) {\n  .controls {\n    padding-inline: 0.5rem;\n  }\n\n  .reset-view {\n    display: none;\n  }\n}\n\n@media (pointer: coarse) {\n  @container (max-width: 26.5rem) {\n    .time {\n      display: none;\n    }\n  }\n\n  @container (max-width: 20.5rem) {\n    .controls {\n      padding-inline: 0.5rem;\n    }\n\n    .reset-view {\n      display: none;\n    }\n  }\n}\n\n/* Without a blur behind it, or for a viewer who asked for less transparency, a menu is laid\n   twice over itself: its own colour, near enough opaque. */\n@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {\n  .popup {\n    background:\n      linear-gradient(var(--gyro-view-menu-background), var(--gyro-view-menu-background)),\n      var(--gyro-view-menu-background);\n  }\n}\n\n@media (prefers-reduced-transparency: reduce) {\n  .popup {\n    background:\n      linear-gradient(var(--gyro-view-menu-background), var(--gyro-view-menu-background)),\n      var(--gyro-view-menu-background);\n    -webkit-backdrop-filter: none;\n    backdrop-filter: none;\n  }\n}\n\n/* Forced colours: the sliders keep a visible track and handle, and the menus an edge, in the\n   system's colours. */\n@media (forced-colors: active) {\n  input[type='range'] {\n    --track: GrayText;\n    --gyro-view-accent: Highlight;\n\n    forced-color-adjust: none;\n  }\n\n  .popup {\n    border: 1px solid CanvasText;\n  }\n}\n\n/* The hand only where a drag moves the picture (`data-draggable`, set by the view gestures). */\ncanvas[data-draggable] {\n  cursor: grab;\n}\n\ncanvas[data-draggable]:active {\n  cursor: grabbing;\n}\n\n/* A viewer who asked for less motion sees the controls come and go without fading. */\n@media (prefers-reduced-motion: reduce) {\n  .controls {\n    transition: none;\n  }\n}\n";
 //#endregion
 export { controls_default as default };

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

@@ -17,7 +17,10 @@ function bindControlsBar(root, host) {
 	bindViewButtons(parts, host);
 	new SeekBar(parts, host);
 	new SoundControls(parts, host.player);
-	new PictureMenus(root, parts, host.player);
+	new PictureMenus(root, parts, {
+		player: host.player,
+		wording: host.wording
+	});
 }
 //#endregion
 export { bindControlsBar };

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,
@@ -51,6 +71,7 @@ var DEFAULT_MESSAGES = {
 		"playback-blocked": FAILED,
 		"range-unsupported": UNREACHABLE,
 		"render-unavailable": UNSUPPORTED_BROWSER,
+		"source-changed": "The video was replaced while it played.",
 		"source-truncated": UNREACHABLE,
 		"source-unreadable": UNREACHABLE,
 		"unsupported-calibration": UNREADABLE,
@@ -69,7 +90,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 +100,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 +114,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 };

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

@@ -9,7 +9,7 @@ import { browserSources } from "./composition/browserPorts.js";
 */
 function inspectRecording(recording, options = {}) {
 	const signal = options.signal ?? new AbortController().signal;
-	const source = browserSources(options.http ?? {}).open(inputOf(recording), signal);
+	const { source } = browserSources(options.http ?? {}).open(inputOf(recording), signal);
 	return inspectRecording$1(source);
 }
 function inputOf(recording) {