@bubo-squared/gyroview 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 What changed for a page using the package, newest first. Until 1.0, a minor version may change
 the API.
 
+## 0.2.0 (2026-09-29)
+
+What a page may notice:
+
+- The controls are restyled, and fit the player's own width and the pointer (ADR 0028): a
+  shaded bar with a thin seek bar, Stabilization and View buttons that show the icon of the
+  choice in effect and open menus of the choices with their icons and a line describing each,
+  and on a narrow player menus over the whole player and fewer parts; on touch, 44-pixel
+  targets.
+- The Stop button is gone; `stop()` and the S key remain. `labels.stop` goes with it.
+- The theme's defaults follow the new look: `--gyro-view-accent` and `--gyro-view-text` are
+  white, `--gyro-view-controls-background` is `rgb(0 0 0 / 60%)` and `--gyro-view-radius` is
+  `8px`; `--gyro-view-menu-background` is new. A page's own values keep working.
+
+New:
+
+- `crossorigin` on `<gyro-view>`, with a media element's keywords: `use-credentials` fetches the
+  recording, its byte ranges and the other lens's file of a split pair with the visitor's
+  cookies, for recordings kept private behind cookies on another origin. `crossOrigin` reflects
+  it, `null` while absent. Changing it reloads a recording named by URL; the iframe embed never
+  carries it. Nothing changes for a page that does not set it.
+- `credentials` on a `UrlInput` (`player.load({ main: { url, credentials: 'include' } })`), in
+  place of the player's shared `http.requestInit.credentials` for that recording.
+- A `cors` error for a request sent with credentials names what the host must add: the page's
+  origin by name, not `*`, and `Access-Control-Allow-Credentials: true`.
+- The equirectangular panorama and the raw lenses zoom up to eight times, from four, for fine
+  detail in 5.7K and 8K recordings. The normal view keeps its 30 to 120 degrees.
+- `messages` takes `stabilizationModeDescriptions`, `viewModeDescriptions` and `labels.close`.
+
+Fixed:
+
+- The raw lenses no longer show a faint grey line along the tiles' edges on Apple GPUs, where a
+  player's size put an edge between two pixels the GPU shades together.
+
 ## 0.1.0 (2026-09-29)
 
 The first release:

package/README.md

@@ -42,10 +42,10 @@ A page without a bundler loads the standalone file, which has Three.js and media
 ```html
 <script
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@bubo-squared/gyroview@0.1/dist/standalone.js"
+  src="https://cdn.jsdelivr.net/npm/@bubo-squared/gyroview@0.2/dist/standalone.js"
 ></script>
 <script type="module">
-  import { inspectRecording } from 'https://cdn.jsdelivr.net/npm/@bubo-squared/gyroview@0.1/dist/standalone.js';
+  import { inspectRecording } from 'https://cdn.jsdelivr.net/npm/@bubo-squared/gyroview@0.2/dist/standalone.js';
 </script>
 ```
 
@@ -188,6 +188,11 @@ loads a recording only for the player in view, removing `src` from the others.
   Access-Control-Expose-Headers: Content-Range, Content-Length, Accept-Ranges
   ```
 
+  Recordings kept behind the visitor's cookies take `crossorigin="use-credentials"` on the
+  element, or `credentials: 'include'` on a URL given to `createBrowserPlayer`'s `load`, and a
+  host that names the page's origin, never `*`, and adds
+  `Access-Control-Allow-Credentials: true`.
+
 - **A hardware HEVC decoder.** 5.7K plays on recent laptops and phones; 8K needs a Level 6
   decoder (Apple Silicon, recent NVIDIA and Intel). A recording the browser cannot decode fails
   with the `codec-unsupported` error.

package/dist/index.d.ts

@@ -3,6 +3,14 @@
  */
 export interface UrlInput {
 	readonly url: string;
+	/**
+	 * Whether every request for the recording carries the visitor's cookies, in fetch's terms:
+	 * `include` sends them to any origin, which must then allow the page's origin by name and
+	 * with `Access-Control-Allow-Credentials: true`. Unset, the player's shared request settings
+	 * decide, and fetch's `same-origin` when they do not. The element's
+	 * `crossorigin="use-credentials"` sets `include`.
+	 */
+	readonly credentials?: RequestCredentials | undefined;
 }
 /**
  * A recording already in the browser: a `File` from a picker or a drop.
@@ -592,7 +600,6 @@ export interface GyroViewLabels {
 	readonly loading: string;
 	readonly play: string;
 	readonly pause: string;
-	readonly stop: string;
 	readonly seek: string;
 	/**
 	 * How the seek bar tells assistive technology where it is: `{time}` and `{duration}` are
@@ -605,6 +612,10 @@ export interface GyroViewLabels {
 	readonly stabilization: string;
 	readonly viewMode: string;
 	readonly fullscreen: string;
+	/**
+	 * The button that closes a menu shown over the whole player, as it is on a narrow one.
+	 */
+	readonly close: string;
 }
 type LabelName = keyof GyroViewLabels;
 /**
@@ -614,7 +625,15 @@ type LabelName = keyof GyroViewLabels;
 export interface GyroViewMessages {
 	readonly labels: GyroViewLabels;
 	readonly stabilizationModes: Readonly<Record<StabilizationMode, string>>;
+	/**
+	 * One line under each choice of the Stabilization menu, where there is room for it.
+	 */
+	readonly stabilizationModeDescriptions: Readonly<Record<StabilizationMode, string>>;
 	readonly viewModes: Readonly<Record<ViewMode, string>>;
+	/**
+	 * One line under each choice of the View menu, where there is room for it.
+	 */
+	readonly viewModeDescriptions: Readonly<Record<ViewMode, string>>;
 	/**
 	 * What a visitor reads when a recording cannot play, by the failure's code. The `error`
 	 * event carries the developer's account of it.
@@ -648,7 +667,7 @@ declare class Wording {
 	write(root: ParentNode): void;
 	private writeLabel;
 	private writeText;
-	private writeChoices;
+	private writeChoiceText;
 	private writeError;
 }
 interface ControlsHost {
@@ -779,6 +798,7 @@ export declare class GyroViewElement extends TypedEventElement implements LiveSe
 	src: string | null;
 	src2: string | null;
 	poster: string | null;
+	crossOrigin: "anonymous" | "use-credentials" | null;
 	preload: "none" | "auto";
 	gainMatch: "on" | "off";
 	autoplay: boolean;
@@ -929,6 +949,7 @@ export declare class GyroViewElement extends TypedEventElement implements LiveSe
 export interface GyroViewAttributes {
 	readonly src?: string | undefined;
 	readonly src2?: string | undefined;
+	readonly crossorigin?: "anonymous" | "use-credentials" | "" | undefined;
 	readonly poster?: string | undefined;
 	readonly preload?: "none" | "auto" | undefined;
 	readonly "gain-match"?: "on" | "off" | undefined;

package/dist/packages/adapters/fetch/src/httpRequest.js

@@ -11,6 +11,12 @@ var FIRST_BYTE_RANGE = "bytes=0-0";
 */
 var EXPOSED_HEADERS_ADVICE = "Access-Control-Expose-Headers: Content-Range, Content-Length, Accept-Ranges";
 /**
+* What a server must add for a page to read it across origins. A request that carries the
+* visitor's cookies is held to more: the Fetch standard refuses a wildcard origin for it.
+*/
+var ANONYMOUS_CORS_ADVICE = `Access-Control-Allow-Origin, ${EXPOSED_HEADERS_ADVICE}`;
+var CREDENTIALED_CORS_ADVICE = `Access-Control-Allow-Origin naming this page's origin, not *; Access-Control-Allow-Credentials: true; ${EXPOSED_HEADERS_ADVICE}`;
+/**
 * Browsers keep byte ranges of one URL as a sparse cache entry and revalidate them with
 * conditional requests. A 304 to such a request makes the browser answer from that entry, and
 * Chrome has been seen to hand back an empty body for a range it believed it held (ADR 0013).
@@ -83,7 +89,10 @@ function eitherSignal(first, second) {
 * reachable, so its outcome tells the two apart.
 */
 async function diagnoseFailure(url, options, cause) {
-	return await isReachableWithoutCors(url, options) ? new GyroViewError("cors", `${url} answered, but its server does not allow this page's origin to read it; add CORS headers (Access-Control-Allow-Origin, ${EXPOSED_HEADERS_ADVICE})`, { cause }) : new GyroViewError("source-unreadable", `${url} could not be fetched; check the URL and the network`, { cause });
+	return await isReachableWithoutCors(url, options) ? new GyroViewError("cors", `${url} answered, but its server does not allow this page's origin to read it; add CORS headers (${corsAdviceFor(options)})`, { cause }) : new GyroViewError("source-unreadable", `${url} could not be fetched; check the URL and the network`, { cause });
+}
+function corsAdviceFor(options) {
+	return options.requestInit?.credentials === "include" ? CREDENTIALED_CORS_ADVICE : ANONYMOUS_CORS_ADVICE;
 }
 /**
 * The probe ends with the request it diagnoses: an abort of the load ends it too.

package/dist/packages/adapters/three/src/shaders/rawLenses.frag.js

@@ -1,4 +1,4 @@
 //#region ../../packages/adapters/three/src/shaders/rawLenses.frag.glsl?raw
-var rawLenses_frag_default = "// The decoded lens images on their own, unstitched: each lens's region of its frame exactly as\n// the decoder delivered it, in the lens's screen area, with no pose, stabilization or gain. Black\n// around the areas. Every pixel takes each tile's footprint before the area decides, so the\n// derivatives are defined.\nin vec2 vNdc;\nout vec4 outColor;\n\nvoid main() {\n  vec3 color = vec3(0.0);\n  for (int i = 0; i < MAX_LENSES; i++) {\n    if (i >= uLensCount) break;\n    vec2 point = pointInArea(vNdc, uScreenArea[i]);\n    Footprint footprint = footprintOf(i, point);\n    if (isInArea(point)) color = sampleLens(uLensTexture[i], footprint, uSampling).rgb;\n  }\n  outColor = vec4(color, 1.0);\n}\n";
+var rawLenses_frag_default = "// The decoded lens images on their own, unstitched: each lens's region of its frame exactly as\n// the decoder delivered it, in the lens's screen area, with no pose, stabilization or gain. Black\n// around the areas. Every pixel reads every tile, and the area picks one without a branch: a\n// read inside a branch that some pixels of a 2x2 quad skip took a far too coarse footprint on\n// Apple GPUs (Chrome through Metal), a grey line along a tile's edge wherever the edge fell\n// inside a quad.\nin vec2 vNdc;\nout vec4 outColor;\n\nvoid main() {\n  vec3 color = vec3(0.0);\n  for (int i = 0; i < MAX_LENSES; i++) {\n    if (i >= uLensCount) break;\n    vec2 point = pointInArea(vNdc, uScreenArea[i]);\n    Footprint footprint = footprintOf(i, point);\n    vec3 sampled = sampleLens(uLensTexture[i], footprint, uSampling).rgb;\n    color = mix(color, sampled, float(isInArea(point)));\n  }\n  outColor = vec4(color, 1.0);\n}\n";
 //#endregion
 export { rawLenses_frag_default as default };

package/dist/packages/core/src/domain/view/lensTilesView.js

@@ -44,8 +44,8 @@ function magnifiedTiles(framing, context) {
 	}));
 }
 /**
-* The decoded images as the camera recorded them, magnified up to four times toward the pointer
-* and moved within their edges once zoomed; never turned or stitched.
+* The decoded images as the camera recorded them, magnified up to `MAX_MAGNIFICATION` toward the
+* pointer and moved within their edges once zoomed; never turned or stitched.
 */
 var LENS_TILES_VIEW = {
 	isStabilized: false,

package/dist/packages/core/src/domain/view/magnification.js

@@ -40,7 +40,7 @@ function magnifiedArea(fitted, magnification) {
 * keeps the picture centred along an axis where it is smaller.
 */
 function clampMagnification(fitted, magnification) {
-	const limited = clamp(magnification.scale, 1, 4);
+	const limited = clamp(magnification.scale, 1, 8);
 	const scale = limited - 1 < FITTED_TOLERANCE ? 1 : limited;
 	return {
 		scale,

package/dist/packages/core/src/domain/view/panoramaView.js

@@ -74,7 +74,7 @@ function zoomPanorama(framing, zoom, context) {
 }
 /**
 * Level, as an exported equirectangular video: the yaw picks the direction at the centre, and the
-* panorama magnifies up to four times and moves up and down within itself.
+* panorama magnifies up to `MAX_MAGNIFICATION` and moves up and down within itself.
 */
 var PANORAMA_VIEW = {
 	isStabilized: true,

package/dist/packages/player/src/composition/browserPorts.js

@@ -22,7 +22,7 @@ function browserPorts(options = {}) {
 		sources: browserSources(http),
 		demuxer: new MediabunnyDemuxer(),
 		decoderPort: new WebCodecsVideoDecoderPort(),
-		locator: new HttpResourceLocator(http),
+		locatorFor: (input) => new HttpResourceLocator(requestOptionsFor(http, input)),
 		probeDeadline: () => deadlineIn(probeTimeoutMs)
 	};
 }
@@ -30,7 +30,21 @@ function browserPorts(options = {}) {
 * URLs are read with HTTP ranges, blobs by slicing.
 */
 function browserSources(http) {
-	return { open: (input, signal) => isUrlInput(input) ? new HttpRangeSource(input.url, http, signal) : new BlobRandomAccessSource(input.blob) };
+	return { open: (input, signal) => isUrlInput(input) ? new HttpRangeSource(input.url, requestOptionsFor(http, input), signal) : new BlobRandomAccessSource(input.blob) };
+}
+/**
+* The shared request settings, with the input's own credentials in place of theirs when it names
+* any: how the element's `crossorigin` reaches every request for its recording (ADR 0027).
+*/
+function requestOptionsFor(http, input) {
+	const { credentials } = input;
+	return credentials === void 0 ? http : {
+		...http,
+		requestInit: {
+			...http.requestInit,
+			credentials
+		}
+	};
 }
 /**
 * A deadline that passes after `ms`: the core has no timers, so the host supplies deadlines.

package/dist/packages/player/src/composition/openInputs.js

@@ -65,11 +65,9 @@ async function demuxInputs(inputs, attempt, disposables) {
 */
 async function declaredSecond(given, recording, attempt) {
 	if (!(given.length === 1 && recording.info.fileLayout === "split-files") || !attempt.findSecondFile) return [];
-	const url = await attempt.findSecondFile();
+	const input = await attempt.findSecondFile();
 	attempt.signal.throwIfAborted();
-	if (url === void 0) return [];
-	const input = { url };
-	return [{
+	return input === void 0 ? [] : [{
 		input,
 		source: attempt.ports.sources.open(input, attempt.signal)
 	}];

package/dist/packages/player/src/composition/openRecording.js

@@ -21,7 +21,7 @@ async function openRecording(source, ports, signal) {
 		const second = await findSecondFile();
 		signal.throwIfAborted();
 		if (!second) throw error;
-		return openInputs([source.main, { url: second }], attempt);
+		return openInputs([source.main, second], attempt);
 	}
 }
 /**
@@ -32,11 +32,22 @@ function attemptFor(source, ports, signal) {
 	return source.second === void 0 && isUrlInput(main) ? {
 		ports,
 		signal,
-		findSecondFile: lazy(() => locateOtherLensFile(main.url, ports.locator))
+		findSecondFile: lazy(() => otherLensFileOf(main, ports))
 	} : {
 		ports,
 		signal
 	};
 }
+/**
+* The other lens file beside a lone one, when the server has it: one recording, so it is read
+* as the lone file is, with the same credentials.
+*/
+async function otherLensFileOf(main, ports) {
+	const url = await locateOtherLensFile(main.url, ports.locatorFor(main));
+	return url === void 0 ? void 0 : {
+		...main,
+		url
+	};
+}
 //#endregion
 export { openRecording };

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

@@ -14,22 +14,27 @@ var FOCUS_STEPS = /* @__PURE__ */ new Map([
 var ON_THE_WAY_IN = { capture: true };
 /**
 * A button opening a popup of choices with the current one checked, as the ARIA menu pattern
-* has it. The button toggles it; a choice, Escape, Tab, a press outside it or the focus moving
-* elsewhere closes it; the arrow keys move between the choices, which are out of the tab order.
+* has it; the button shows the checked one. The button toggles it; a choice, its close button,
+* Escape, Tab, a press outside it or the focus moving elsewhere closes it; the arrow keys move between the choices, which are out of the tab order.
 * A press outside only closes it, so a tap on the picture does not also toggle play, and keys
 * pressed in it stay with it, so one Escape does not also leave fullscreen and the arrows do not
 * turn the view.
 */
 var ChoiceMenu = class {
 	parts;
+	host;
 	items;
-	constructor(root, parts, choose) {
+	constructor(root, parts, host) {
 		this.parts = parts;
+		this.host = host;
 		this.items = [...parts.popup.querySelectorAll(":scope [role=\"menuitemradio\"]")];
 		for (const item of this.items) item.addEventListener("click", () => {
 			this.closeToButton();
 			const { choice } = item.dataset;
-			if (choice !== void 0) choose(choice);
+			if (choice !== void 0) host.choose(choice);
+		});
+		parts.close.addEventListener("click", () => {
+			this.closeToButton();
 		});
 		this.bindButton();
 		this.bindDismissal(root);
@@ -38,8 +43,15 @@ var ChoiceMenu = class {
 	get isOpen() {
 		return !this.parts.popup.hidden;
 	}
+	/**
+	* Checks `choice` and shows it on the button: its icon, and the words the button is named by.
+	*/
 	markChosen(choice) {
 		for (const item of this.items) item.setAttribute("aria-checked", String(item.dataset["choice"] === choice));
+		const icon = this.items.find((item) => item.dataset["choice"] === choice)?.querySelector(":scope .choice-icon > svg");
+		this.parts.icon.replaceChildren(...icon ? [icon.cloneNode(true)] : []);
+		this.parts.button.dataset["choice"] = choice;
+		this.host.wording.write(this.parts.button);
 	}
 	/**
 	* Shows or hides the button; a menu that goes away closes.

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

@@ -10,19 +10,33 @@ import { ChoiceMenu } from "./ChoiceMenu.js";
 * shown in a stitched view mode.
 */
 var PictureMenus = class {
-	player;
 	viewMode;
 	stabilization;
-	constructor(root, parts, player) {
+	player;
+	constructor(root, parts, host) {
+		const { player, wording } = host;
 		this.player = player;
-		this.viewMode = new ChoiceMenu(root, parts.viewMode, (choice) => {
-			const mode = viewModeOf(choice);
-			if (mode) player.setViewMode(mode);
+		this.viewMode = new ChoiceMenu(root, parts.viewMode, {
+			wording,
+			choose: (choice) => {
+				const mode = viewModeOf(choice);
+				if (mode) player.setViewMode(mode);
+			}
 		});
-		this.stabilization = new ChoiceMenu(root, parts.stabilization, (choice) => {
-			const mode = stabilizationModeOf(choice);
-			if (mode) player.setStabilization(mode);
+		this.stabilization = new ChoiceMenu(root, parts.stabilization, {
+			wording,
+			choose: (choice) => {
+				const mode = stabilizationModeOf(choice);
+				if (mode) player.setStabilization(mode);
+			}
 		});
+		this.followPlayer();
+	}
+	/**
+	* Each menu checks the mode in effect, now and whenever it changes.
+	*/
+	followPlayer() {
+		const { player } = this;
 		player.events.on("viewmodechange", (mode) => {
 			this.viewMode.markChosen(mode);
 			this.offerStabilization();

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

@@ -2,6 +2,7 @@ import { messageOf } from "../../../core/src/shared/errors/GyroViewError.js";
 import "../../../core/src/index.js";
 import "./keyboard.js";
 import { formatTime } from "./formatTime.js";
+import { showSliderFill } from "./sliderFill.js";
 //#region ../../packages/player/src/controls/SeekBar.ts
 /**
 * The slider's arrow keys and the direction each seeks in: the native step is the one the
@@ -110,15 +111,17 @@ var SeekBar = class {
 		this.host.player.seek(Number(this.parts.seek.value));
 	}
 	/**
-	* The time beside the bar, and the same time for screen readers, which would read the slider's
-	* raw seconds.
+	* The time beside the bar and the bar filled up to it, and the same time for screen readers,
+	* which would read the slider's raw seconds.
 	*/
 	showTime(time) {
 		const [shown, total] = [formatTime(time), formatTime(this.host.player.duration)];
-		this.parts.time.textContent = `${shown} / ${total}`;
+		this.parts.elapsed.textContent = shown;
+		this.parts.total.textContent = `/ ${total}`;
 		const { position } = this.host.wording.current.labels;
 		const spoken = position.replaceAll("{time}", () => shown).replaceAll("{duration}", () => total);
 		this.parts.seek.setAttribute("aria-valuetext", spoken);
+		showSliderFill(this.parts.seek);
 	}
 };
 //#endregion

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

@@ -1,4 +1,5 @@
 import { iconNode } from "./icons.js";
+import { showSliderFill } from "./sliderFill.js";
 //#region ../../packages/player/src/controls/SoundControls.ts
 var PERCENT = 100;
 /**
@@ -35,6 +36,7 @@ var SoundControls = class {
 		this.parts.mute.setAttribute("aria-pressed", String(isMuted));
 		this.parts.volume.value = String(shown);
 		this.parts.volume.setAttribute("aria-valuetext", `${Math.round(shown * PERCENT)}%`);
+		showSliderFill(this.parts.volume);
 	}
 };
 //#endregion

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

@@ -1,8 +1,8 @@
 import { iconNode } from "./icons.js";
 //#region ../../packages/player/src/controls/TransportButtons.ts
 /**
-* Play and pause, on the bar and over the picture, and stop; the play buttons say what a press
-* does.
+* Play and pause, on the bar and over the picture; the buttons say what a press does. Stopping
+* is left to the S key and `stop()`.
 */
 var TransportButtons = class {
 	parts;
@@ -14,9 +14,6 @@ var TransportButtons = class {
 		for (const button of [parts.play, parts.bigPlay]) button.addEventListener("click", () => {
 			host.togglePlay();
 		});
-		parts.stop.addEventListener("click", () => {
-			player.stop();
-		});
 		player.events.on("statuschange", () => {
 			this.reflect(player.isPaused);
 		});

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 };