@bubo-squared/gyroview 0.1.0

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

@@ -0,0 +1,113 @@
+//#region ../../packages/player/src/controls/ChoiceMenu.ts
+/**
+* Where each navigation key moves the focus among `count` choices from the one at `index`.
+*/
+var FOCUS_STEPS = /* @__PURE__ */ new Map([
+	["ArrowDown", (index, count) => (index + 1) % count],
+	["ArrowUp", (index, count) => (index - 1 + count) % count],
+	["Home", () => 0],
+	["End", (_index, count) => count - 1]
+]);
+/**
+* Presses are seen on their way in, before the control they land on.
+*/
+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.
+* 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;
+	items;
+	constructor(root, parts, choose) {
+		this.parts = parts;
+		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);
+		});
+		this.bindButton();
+		this.bindDismissal(root);
+		this.bindKeys(root);
+	}
+	get isOpen() {
+		return !this.parts.popup.hidden;
+	}
+	markChosen(choice) {
+		for (const item of this.items) item.setAttribute("aria-checked", String(item.dataset["choice"] === choice));
+	}
+	/**
+	* Shows or hides the button; a menu that goes away closes.
+	*/
+	setAvailable(isAvailable) {
+		this.parts.button.hidden = !isAvailable;
+		if (!isAvailable) this.setOpen(false);
+	}
+	bindButton() {
+		this.parts.button.addEventListener("click", () => {
+			this.setOpen(!this.isOpen);
+			if (this.isOpen) this.focusItem(this.items.findIndex((item) => isChecked(item)));
+		});
+	}
+	/**
+	* A press outside, or the focus moving elsewhere, closes the menu.
+	*/
+	bindDismissal(root) {
+		const { button, popup } = this.parts;
+		root.addEventListener("pointerdown", (event) => {
+			if (!this.isOpen) return;
+			if (event.composedPath().some((node) => node === popup || node === button)) return;
+			this.setOpen(false);
+			event.stopPropagation();
+		}, ON_THE_WAY_IN);
+		root.addEventListener("focusout", (event) => {
+			const next = event instanceof FocusEvent ? event.relatedTarget : null;
+			if (next !== button && next instanceof Node && !popup.contains(next)) this.setOpen(false);
+		});
+	}
+	bindKeys(root) {
+		root.addEventListener("keydown", (event) => {
+			if (this.isOpen && event instanceof KeyboardEvent) this.onKey(event);
+		});
+	}
+	onKey(event) {
+		const path = event.composedPath();
+		if (event.key === "Escape") {
+			this.closeToButton();
+			event.stopPropagation();
+			return;
+		}
+		if (!path.includes(this.parts.popup)) return;
+		event.stopPropagation();
+		if (event.key === "Tab") this.setOpen(false);
+		else this.moveFocus(event, path);
+	}
+	moveFocus(event, path) {
+		const step = FOCUS_STEPS.get(event.key);
+		if (!step) return;
+		event.preventDefault();
+		const current = this.items.findIndex((item) => path.includes(item));
+		this.focusItem(step(current, this.items.length));
+	}
+	focusItem(index) {
+		(this.items[index] ?? this.items[0])?.focus();
+	}
+	closeToButton() {
+		this.setOpen(false);
+		this.parts.button.focus();
+	}
+	setOpen(isOpen) {
+		this.parts.popup.hidden = !isOpen;
+		this.parts.button.setAttribute("aria-expanded", String(isOpen));
+	}
+};
+function isChecked(item) {
+	return item.getAttribute("aria-checked") === "true";
+}
+//#endregion
+export { ChoiceMenu };

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

@@ -0,0 +1,47 @@
+import { viewModeRulesFor } from "../../../core/src/domain/view/viewModes.js";
+import "../../../core/src/index.js";
+import { stabilizationModeOf, viewModeOf } from "../choices.js";
+import { ChoiceMenu } from "./ChoiceMenu.js";
+//#region ../../packages/player/src/controls/PictureMenus.ts
+/**
+* The view mode and stabilization menus, each behind a button of its own. A choice sets the
+* player's mode, and each menu checks the mode in effect however it was last changed.
+* Stabilization is offered only where it changes the picture: a loaded recording with a gyro,
+* shown in a stitched view mode.
+*/
+var PictureMenus = class {
+	player;
+	viewMode;
+	stabilization;
+	constructor(root, parts, player) {
+		this.player = player;
+		this.viewMode = new ChoiceMenu(root, parts.viewMode, (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);
+		});
+		player.events.on("viewmodechange", (mode) => {
+			this.viewMode.markChosen(mode);
+			this.offerStabilization();
+		});
+		player.events.on("stabilizationchange", (mode) => {
+			this.stabilization.markChosen(mode);
+		});
+		player.events.on("statuschange", () => {
+			this.offerStabilization();
+		});
+		this.viewMode.markChosen(player.viewMode);
+		this.stabilization.markChosen(player.stabilization);
+		this.offerStabilization();
+	}
+	offerStabilization() {
+		const hasGyro = this.player.metadata?.hasGyro === true;
+		const isStabilized = viewModeRulesFor(this.player.viewMode).isStabilized;
+		this.stabilization.setAvailable(hasGyro && isStabilized);
+	}
+};
+//#endregion
+export { PictureMenus };

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

@@ -0,0 +1,125 @@
+import { messageOf } from "../../../core/src/shared/errors/GyroViewError.js";
+import "../../../core/src/index.js";
+import "./keyboard.js";
+import { formatTime } from "./formatTime.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
+* thumb is dragged in, a hundredth of a second, too fine for a key.
+*/
+var ARROW_DIRECTIONS = /* @__PURE__ */ new Map([
+	["ArrowLeft", -1],
+	["ArrowDown", -1],
+	["ArrowRight", 1],
+	["ArrowUp", 1]
+]);
+/**
+* The events that end a drag of the thumb. A drag released where it began commits no `change`,
+* so the release ends it too, whichever comes first.
+*/
+var SCRUB_ENDINGS = [
+	"pointerup",
+	"pointercancel",
+	"change"
+];
+/**
+* The seek bar and the time beside it: dragging scrubs to key frames, releasing seeks exactly,
+* and the bar follows playback while it is not held. Its range is the recording's duration,
+* read on every status change, so a failed or unloaded recording leaves an empty bar.
+*/
+var SeekBar = class {
+	parts;
+	host;
+	isScrubbing = false;
+	scrubTarget;
+	scrubbing;
+	constructor(parts, host) {
+		this.parts = parts;
+		this.host = host;
+		this.bindInput();
+		const { events } = this.host.player;
+		events.on("statuschange", () => {
+			this.showRecording();
+		});
+		events.on("timeupdate", (time) => {
+			this.follow(time);
+		});
+		this.showRecording();
+	}
+	bindInput() {
+		const { seek } = this.parts;
+		seek.addEventListener("input", () => {
+			this.isScrubbing = true;
+			const time = Number(seek.value);
+			this.showTime(time);
+			this.scrubTo(time);
+		});
+		for (const ending of SCRUB_ENDINGS) seek.addEventListener(ending, () => {
+			this.endScrub();
+		});
+		seek.addEventListener("keydown", (event) => {
+			const direction = ARROW_DIRECTIONS.get(event.key);
+			if (direction === void 0) return;
+			event.preventDefault();
+			const { player } = this.host;
+			player.seek(player.currentTime + direction * 5);
+		});
+	}
+	showRecording() {
+		const { duration, currentTime } = this.host.player;
+		this.parts.seek.max = String(duration);
+		this.follow(currentTime);
+	}
+	follow(time) {
+		if (this.isScrubbing) return;
+		this.parts.seek.value = String(time);
+		this.showTime(time);
+	}
+	/**
+	* One scrub in flight at a time; a newer target replaces one still waiting, so the picture
+	* follows the thumb without queueing every position it passed.
+	*/
+	scrubTo(time) {
+		this.scrubTarget = time;
+		this.scrubbing ??= this.drainScrubs();
+	}
+	async drainScrubs() {
+		try {
+			while (this.scrubTarget !== void 0) {
+				const target = this.scrubTarget;
+				this.scrubTarget = void 0;
+				await this.host.player.scrub(target);
+			}
+		} catch (error) {
+			this.host.warn({
+				code: "playback-failed",
+				message: `the seek bar could not show that moment: ${messageOf(error)}`
+			});
+		} finally {
+			this.scrubbing = void 0;
+		}
+	}
+	/**
+	* Seeks exactly where the thumb was let go; a scrub still in flight yields to the seek (the
+	* session drops a scrub a seek overtook).
+	*/
+	endScrub() {
+		if (!this.isScrubbing) return;
+		this.isScrubbing = false;
+		this.scrubTarget = void 0;
+		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.
+	*/
+	showTime(time) {
+		const [shown, total] = [formatTime(time), formatTime(this.host.player.duration)];
+		this.parts.time.textContent = `${shown} / ${total}`;
+		const { position } = this.host.wording.current.labels;
+		const spoken = position.replaceAll("{time}", () => shown).replaceAll("{duration}", () => total);
+		this.parts.seek.setAttribute("aria-valuetext", spoken);
+	}
+};
+//#endregion
+export { SeekBar };

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

@@ -0,0 +1,41 @@
+import { iconNode } from "./icons.js";
+//#region ../../packages/player/src/controls/SoundControls.ts
+var PERCENT = 100;
+/**
+* The mute button and the volume slider, showing the sound however it was last changed. The
+* button is a toggle named "Mute": pressed means muted, as assistive technology expects. The
+* slider shows only where a page can set the volume.
+*/
+var SoundControls = class {
+	parts;
+	player;
+	constructor(parts, player) {
+		this.parts = parts;
+		this.player = player;
+		parts.volume.hidden = !player.canSetVolume;
+		parts.mute.addEventListener("click", () => {
+			player.setMuted(!player.isMuted);
+		});
+		parts.volume.addEventListener("input", () => {
+			player.setVolume(Number(parts.volume.value));
+			if (player.isMuted) player.setMuted(false);
+		});
+		player.events.on("volumechange", () => {
+			this.reflect();
+		});
+		this.reflect();
+	}
+	/**
+	* The slider says its volume as a percentage, not the fraction a screen reader would read.
+	*/
+	reflect() {
+		const { isMuted, volume } = this.player;
+		const shown = isMuted ? 0 : volume;
+		this.parts.mute.replaceChildren(iconNode(isMuted ? "muted" : "sound"));
+		this.parts.mute.setAttribute("aria-pressed", String(isMuted));
+		this.parts.volume.value = String(shown);
+		this.parts.volume.setAttribute("aria-valuetext", `${Math.round(shown * PERCENT)}%`);
+	}
+};
+//#endregion
+export { SoundControls };

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

@@ -0,0 +1,31 @@
+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.
+*/
+var TransportButtons = class {
+	parts;
+	host;
+	constructor(parts, host) {
+		this.parts = parts;
+		this.host = host;
+		const { player } = host;
+		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);
+		});
+		this.reflect(player.isPaused);
+	}
+	reflect(isPaused) {
+		for (const button of [this.parts.play, this.parts.bigPlay]) this.host.wording.label(button, isPaused ? "play" : "pause");
+		this.parts.play.replaceChildren(iconNode(isPaused ? "play" : "pause"));
+	}
+};
+//#endregion
+export { TransportButtons };

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

@@ -0,0 +1,136 @@
+import { zoomStepsForPinch } from "../../../core/src/domain/view/viewGestures.js";
+import "../../../core/src/index.js";
+//#region ../../packages/player/src/controls/ViewGestures.ts
+/**
+* A wheel notch on most mice reports about 100 pixels; one notch is one zoom step.
+*/
+var WHEEL_PIXELS_PER_STEP = 100;
+/**
+* On the surface while a drag would move the picture; `controls.css` shows the grab hand for it.
+*/
+var DRAGGABLE_ATTRIBUTE = "data-draggable";
+/**
+* `PointerEvent.button` of the main mouse button.
+*/
+var PRIMARY_BUTTON = 0;
+/**
+* Movement below this is a tap, not a drag.
+*/
+var TAP_TOLERANCE_PIXELS = 4;
+/**
+* Turns pointer drags, two-finger pinches and wheel turns on the surface into view changes, the
+* zooms toward the pointer or the fingers, and reports a tap (a press without a drag) for the
+* host to treat as a play toggle. Whether a drag would move the picture is checked whenever the
+* pointer moves over the surface, so the cursor shows a hand only then.
+*/
+var ViewGestures = class {
+	surface;
+	player;
+	onTap;
+	pointers = /* @__PURE__ */ new Map();
+	listening = new AbortController();
+	dragDistance = 0;
+	constructor(surface, player, onTap) {
+		this.surface = surface;
+		this.player = player;
+		this.onTap = onTap;
+		const { signal } = this.listening;
+		surface.addEventListener("pointerenter", this.reflectDraggable, { signal });
+		surface.addEventListener("pointerdown", this.onPointerDown, { signal });
+		surface.addEventListener("pointermove", this.onPointerMove, { signal });
+		surface.addEventListener("pointerup", this.onPointerUp, { signal });
+		surface.addEventListener("pointercancel", this.onPointerCancel, { signal });
+		surface.addEventListener("lostpointercapture", this.onPointerCancel, { signal });
+		surface.addEventListener("wheel", this.onWheel, {
+			passive: false,
+			signal
+		});
+	}
+	/**
+	* Stops answering the surface's gestures.
+	*/
+	detach() {
+		this.listening.abort();
+		this.pointers.clear();
+		this.surface.removeAttribute(DRAGGABLE_ATTRIBUTE);
+	}
+	onPointerDown = (event) => {
+		if (event.pointerType === "mouse" && event.button !== PRIMARY_BUTTON) return;
+		if (this.pointers.size === 0) this.dragDistance = 0;
+		this.pointers.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		this.surface.setPointerCapture(event.pointerId);
+	};
+	onPointerMove = (event) => {
+		this.reflectDraggable();
+		const previous = this.pointers.get(event.pointerId);
+		if (!previous) return;
+		const current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (this.pointers.size === 1) this.pan(previous, current);
+		else this.pinch(event.pointerId, current);
+		this.pointers.set(event.pointerId, current);
+	};
+	onPointerUp = (event) => {
+		if (!this.pointers.delete(event.pointerId) || this.pointers.size > 0) return;
+		if (this.dragDistance < TAP_TOLERANCE_PIXELS) this.onTap(event.pointerType);
+	};
+	/**
+	* A press the browser took over ends without a tap, however far it had moved.
+	*/
+	onPointerCancel = (event) => {
+		this.pointers.delete(event.pointerId);
+		this.dragDistance = Infinity;
+	};
+	onWheel = (event) => {
+		event.preventDefault();
+		const pointer = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		this.player.zoom(-event.deltaY / WHEEL_PIXELS_PER_STEP, this.focusAt(pointer));
+		this.reflectDraggable();
+	};
+	reflectDraggable = () => {
+		this.surface.toggleAttribute(DRAGGABLE_ATTRIBUTE, this.player.canPan);
+	};
+	pan(previous, current) {
+		const delta = {
+			x: current.x - previous.x,
+			y: current.y - previous.y
+		};
+		this.dragDistance += Math.hypot(delta.x, delta.y);
+		this.player.pan(delta);
+	}
+	pinch(pointerId, current) {
+		const other = [...this.pointers].find(([id]) => id !== pointerId)?.[1];
+		const previous = this.pointers.get(pointerId);
+		if (!other || !previous) return;
+		this.dragDistance = Infinity;
+		const steps = zoomStepsForPinch(distanceBetween(previous, other), distanceBetween(current, other));
+		const between = {
+			x: (current.x + other.x) / 2,
+			y: (current.y + other.y) / 2
+		};
+		this.player.zoom(steps, this.focusAt(between));
+	}
+	/**
+	* A point of the browser's viewport as fractions of the surface, from its top-left corner.
+	*/
+	focusAt(point) {
+		const bounds = this.surface.getBoundingClientRect();
+		return {
+			x: (point.x - bounds.left) / Math.max(bounds.width, 1),
+			y: (point.y - bounds.top) / Math.max(bounds.height, 1)
+		};
+	}
+};
+function distanceBetween(a, b) {
+	return Math.hypot(a.x - b.x, a.y - b.y);
+}
+//#endregion
+export { ViewGestures };

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

@@ -0,0 +1,78 @@
+import { isGyroViewErrorCode } from "../../../core/src/shared/errors/GyroViewError.js";
+import "../../../core/src/index.js";
+import { DEFAULT_MESSAGES, isChoiceTable, isLabelName, messagesWith } from "./messages.js";
+//#region ../../packages/player/src/controls/Wording.ts
+var LABEL = "data-label";
+var TEXT = "data-text";
+var CHOICES = "data-choices";
+var ERROR = "data-error";
+var SELECTORS = {
+	label: "[data-label]",
+	text: "[data-text]",
+	choices: "[data-choices]",
+	error: "[data-error]"
+};
+/**
+* The words the element speaks, and where they go. The markup holds no words: each element that
+* says one names it in a data attribute, which `write` fills in, at first and after every change
+* 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-error`: the visitor's words for that failure code.
+*/
+var Wording = class {
+	words = DEFAULT_MESSAGES;
+	get current() {
+		return this.words;
+	}
+	/**
+	* The defaults with the page's own words in their place; `write` shows them.
+	*/
+	replace(overrides) {
+		this.words = messagesWith(overrides);
+	}
+	/**
+	* Calls `element` by the label `name` names, now and after every change of words.
+	*/
+	label(element, name) {
+		element.setAttribute(LABEL, name);
+		element.setAttribute("aria-label", this.words.labels[name]);
+	}
+	/**
+	* Tells the visitor in `element` that the recording failed with `code`.
+	*/
+	showError(element, code) {
+		element.setAttribute(ERROR, code);
+		element.textContent = this.words.errors[code];
+	}
+	/**
+	* Fills in every word below `root` that its markup names.
+	*/
+	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.error)) this.writeError(element);
+	}
+	writeLabel(element) {
+		const name = element.getAttribute(LABEL);
+		if (isLabelName(name)) element.setAttribute("aria-label", this.words.labels[name]);
+	}
+	writeText(element) {
+		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"] ?? ""] ?? "";
+	}
+	writeError(element) {
+		const code = element.getAttribute(ERROR);
+		if (isGyroViewErrorCode(code)) element.textContent = this.words.errors[code];
+	}
+};
+//#endregion
+export { Wording };

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

@@ -0,0 +1,36 @@
+import { ensureInvariant } from "../../../core/src/shared/errors/GyroViewError.js";
+import "../../../core/src/index.js";
+import { ChoiceMenuName, choiceMenuClasses } from "./controlsMarkup.js";
+//#region ../../packages/player/src/controls/controlParts.ts
+/**
+* The one element matching `selector`, checked to be of the expected kind.
+*/
+function queryShadow(root, selector, kind) {
+	const element = root.querySelector(selector);
+	ensureInvariant(element instanceof kind, `the element template lacks ${selector}`);
+	return element;
+}
+function queryChoiceMenu(root, name) {
+	const classes = choiceMenuClasses(name);
+	return {
+		button: queryShadow(root, `.${classes.button}`, HTMLButtonElement),
+		popup: queryShadow(root, `.${classes.popup}`, HTMLElement)
+	};
+}
+function queryControlParts(root) {
+	return {
+		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),
+		mute: queryShadow(root, ".mute", HTMLButtonElement),
+		volume: queryShadow(root, ".volume", HTMLInputElement),
+		resetView: queryShadow(root, ".reset-view", HTMLButtonElement),
+		stabilization: queryChoiceMenu(root, ChoiceMenuName.Stabilization),
+		viewMode: queryChoiceMenu(root, ChoiceMenuName.ViewMode),
+		fullscreen: queryShadow(root, ".fullscreen", HTMLButtonElement)
+	};
+}
+//#endregion
+export { queryControlParts, queryShadow };

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

@@ -0,0 +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";
+//#endregion
+export { controls_default as default };

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

@@ -0,0 +1,23 @@
+import { queryControlParts } from "./controlParts.js";
+import { PictureMenus } from "./PictureMenus.js";
+import { SeekBar } from "./SeekBar.js";
+import { SoundControls } from "./SoundControls.js";
+import { TransportButtons } from "./TransportButtons.js";
+import { bindViewButtons } from "./viewButtons.js";
+//#region ../../packages/player/src/controls/controlsBar.ts
+/**
+* Binds the control bar in the shadow tree: transport buttons, seek bar, sound, Reset view and
+* Fullscreen, and the view mode and stabilization menus, each driving the player and showing its
+* state. They live as long as
+* the element: every listener sits on its shadow tree or its player.
+*/
+function bindControlsBar(root, host) {
+	const parts = queryControlParts(root);
+	new TransportButtons(parts, host);
+	bindViewButtons(parts, host);
+	new SeekBar(parts, host);
+	new SoundControls(parts, host.player);
+	new PictureMenus(root, parts, host.player);
+}
+//#endregion
+export { bindControlsBar };