@bubo-squared/gyroview 0.5.0 → 0.6.1

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

@@ -1,17 +1,19 @@
+import { BrowserAttitudeSensor } from "./composition/BrowserAttitudeSensor.js";
 import { browserPorts } from "./composition/browserPorts.js";
 import { buildPipeline } from "./composition/buildPipeline.js";
 import { Player } from "./player/Player.js";
 //#region ../../packages/player/src/browserPlayer.ts
 /**
-* A player composed for a browser: HTTP, blob and WebCodecs ports and the GPU pipeline, drawing
-* on the host's canvas and sounding through its audio element. What `<gyro-view>` plays with,
-* and where a page that wants the player without the element starts.
+* A player composed for a browser: HTTP, blob and WebCodecs ports, the GPU pipeline and the
+* device's attitude, drawing on the host's canvas and sounding through its audio element. What
+* `<gyro-view>` plays with, and where a page that wants the player without the element starts.
 */
 function createBrowserPlayer(host, options) {
 	return new Player({
 		host,
 		ports: browserPorts(options),
-		pipelines: buildPipeline
+		pipelines: buildPipeline,
+		attitude: new BrowserAttitudeSensor()
 	});
 }
 //#endregion

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

@@ -0,0 +1,192 @@
+import { degrees } from "../../../core/src/shared/units/angle.js";
+import { milliseconds } from "../../../core/src/shared/units/time.js";
+import { screenLookOf } from "../../../core/src/domain/view/screenLook.js";
+import "../../../core/src/index.js";
+import { NOTHING_TO_STOP } from "./attitudeSensor.js";
+//#region ../../packages/player/src/composition/BrowserAttitudeSensor.ts
+/**
+* The event the browser reports the device's attitude with (W3C DeviceOrientation Event
+* Specification). Relative to where the device started, not to the north: no compass jumps.
+*/
+var ORIENTATION_EVENT = "deviceorientation";
+/**
+* The page's own window and screen, read when called, never when this module loads: Node
+* imports it with the player.
+*/
+function browserAttitudeSource() {
+	return {
+		target: globalThis,
+		mayReadSensors: globalThis.isSecureContext && areSensorsAllowed(),
+		orientationEvents: "DeviceOrientationEvent" in globalThis ? DeviceOrientationEvent : void 0,
+		touchPoints: navigator.maxTouchPoints,
+		screenAngle: () => globalThis.screen.orientation.angle
+	};
+}
+/**
+* The sensors Chromium's orientation events need in a frame: without them in the frame's
+* `allow`, it sends no event at all.
+*/
+var ORIENTATION_SENSORS = ["accelerometer", "gyroscope"];
+/**
+* Chromium's own say on the frame's policy (`document.featurePolicy`, which no standard type
+* declares); other browsers do not say, and a refusal shows only once access is asked for.
+*/
+function areSensorsAllowed() {
+	const policy = Reflect.get(document, "featurePolicy");
+	const allowsFeature = typeof policy === "object" && policy !== null ? Reflect.get(policy, "allowsFeature") : void 0;
+	return typeof allowsFeature !== "function" || ORIENTATION_SENSORS.every((sensor) => Reflect.apply(allowsFeature, policy, [sensor]) === true);
+}
+/**
+* The device's attitude through the browser's `deviceorientation` events.
+*
+* Browsers tell whether a device has the sensors in different ways, which the page's probe hears:
+* Chromium sends an event at once, with the angles on a phone and without them where there is no
+* sensor; iOS sends nothing until the viewer allows it, so a touch device whose browser asks for
+* that permission is taken to have the sensors until it says otherwise; a desktop WebKit sends
+* nothing at all. An unfocused cross-origin frame may hear nothing until a tap.
+*/
+var BrowserAttitudeSensor = class {
+	source;
+	stops = /* @__PURE__ */ new Set();
+	/**
+	* Starts the page's probe, if no sensor before did, so it hears the event Chromium sends as
+	* soon as anyone listens.
+	*/
+	constructor(source = browserAttitudeSource()) {
+		this.source = source;
+		if (this.canReport()) probeOf(source.target);
+	}
+	get availability() {
+		return this.isAvailable() ? "available" : "unavailable";
+	}
+	onAvailabilityChange(listener) {
+		return this.canReport() ? this.track(probeOf(this.source.target).onChange(listener)) : NOTHING_TO_STOP;
+	}
+	/**
+	* Asks only where the events wait for an answer, and then before anything else, still within
+	* the tap: an `await` before it would leave the gesture behind. Chromium answers `prompt`
+	* outside a gesture, as iOS rejects the request there.
+	*/
+	async requestAccess() {
+		if (!this.canReport()) return "denied";
+		const request = this.permissionRequest();
+		if (!request || probeOf(this.source.target).heard === "angles") return "granted";
+		try {
+			return accessOf(await request());
+		} catch {
+			return "needs-gesture";
+		}
+	}
+	listen(onReading) {
+		const { target } = this.source;
+		const hear = (event) => {
+			const attitude = attitudeOf(event, this.source.screenAngle());
+			if (attitude) onReading({
+				look: screenLookOf(attitude),
+				at: milliseconds(event.timeStamp)
+			});
+		};
+		target.addEventListener(ORIENTATION_EVENT, hear);
+		return this.track(() => {
+			target.removeEventListener(ORIENTATION_EVENT, hear);
+		});
+	}
+	dispose() {
+		for (const stop of this.stops) stop();
+	}
+	isAvailable() {
+		if (!this.canReport()) return false;
+		const { heard } = probeOf(this.source.target);
+		const canBeWithheld = this.permissionRequest() !== void 0 && this.source.touchPoints > 0;
+		return heard === "angles" || heard === "nothing" && canBeWithheld;
+	}
+	canReport() {
+		return this.source.mayReadSensors && this.source.orientationEvents !== void 0;
+	}
+	/**
+	* The orientation event's `requestPermission`, which no standard type declares yet.
+	*/
+	permissionRequest() {
+		const events = this.source.orientationEvents;
+		const request = events === void 0 ? void 0 : Reflect.get(events, "requestPermission");
+		return typeof request === "function" ? () => Reflect.apply(request, events, []) : void 0;
+	}
+	/**
+	* A stop that also forgets itself, so `dispose` stops what is still running and nothing else.
+	*/
+	track(stop) {
+		const once = () => {
+			if (this.stops.delete(once)) stop();
+		};
+		this.stops.add(once);
+		return once;
+	}
+};
+function accessOf(answer) {
+	if (answer === "granted") return "granted";
+	return answer === "denied" ? "denied" : "needs-gesture";
+}
+/**
+* The attitude an orientation event carries, or none when the browser sends one without its
+* angles.
+*/
+function attitudeOf(event, screenAngle) {
+	const { alpha, beta, gamma } = event;
+	return isAngle(alpha) && isAngle(beta) && isAngle(gamma) ? {
+		alpha: degrees(alpha),
+		beta: degrees(beta),
+		gamma: degrees(gamma),
+		screenAngle: degrees(screenAngle)
+	} : void 0;
+}
+/**
+* Browsers send `null` for an angle they lack; a value that is not finite is no angle either.
+*/
+function isAngle(value) {
+	return typeof value === "number" && Number.isFinite(value);
+}
+/**
+* Listens once for every player on the page until it hears the angles, then stops and forgets
+* its listeners, since nothing changes after that: on a phone they come at once; where nothing
+* comes, listening costs nothing.
+*/
+var AttitudeProbe = class {
+	target;
+	heardValue = "nothing";
+	listeners = /* @__PURE__ */ new Set();
+	constructor(target) {
+		this.target = target;
+		target.addEventListener(ORIENTATION_EVENT, this.hear);
+	}
+	get heard() {
+		return this.heardValue;
+	}
+	onChange(listener) {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	}
+	hear = (event) => {
+		const heard = attitudeOf(event, 0) ? "angles" : "no-angles";
+		if (heard === this.heardValue) return;
+		this.heardValue = heard;
+		const listeners = [...this.listeners];
+		if (heard === "angles") {
+			this.target.removeEventListener(ORIENTATION_EVENT, this.hear);
+			this.listeners.clear();
+		}
+		for (const listener of listeners) listener();
+	};
+};
+var probes = /* @__PURE__ */ new WeakMap();
+function probeOf(target) {
+	let probe = probes.get(target);
+	if (!probe) {
+		probe = new AttitudeProbe(target);
+		probes.set(target, probe);
+	}
+	return probe;
+}
+//#endregion
+export { BrowserAttitudeSensor, browserAttitudeSource };

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

@@ -0,0 +1,18 @@
+//#region ../../packages/player/src/composition/attitudeSensor.ts
+/**
+* What a listener that never started returns to stop it.
+*/
+var NOTHING_TO_STOP = () => void 0;
+/**
+* A device without the sensors, or a player composed without them: motion look stays
+* unavailable.
+*/
+var NO_ATTITUDE_SENSOR = {
+	availability: "unavailable",
+	onAvailabilityChange: () => NOTHING_TO_STOP,
+	requestAccess: () => Promise.resolve("denied"),
+	listen: () => NOTHING_TO_STOP,
+	dispose: NOTHING_TO_STOP
+};
+//#endregion
+export { NOTHING_TO_STOP, NO_ATTITUDE_SENSOR };

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

@@ -0,0 +1,35 @@
+import { motionLookRulesFor } from "../../../core/src/domain/view/viewModes.js";
+import "../../../core/src/index.js";
+//#region ../../packages/player/src/controls/MotionLookButton.ts
+/**
+* The motion look toggle (ADR 0040): shown where the device reports its attitude and the view
+* mode follows the device, pressed while motion look is on. A press asks for access within the
+* tap itself, as iOS requires.
+*/
+var MotionLookButton = class {
+	parts;
+	player;
+	constructor(parts, player) {
+		this.parts = parts;
+		this.player = player;
+		parts.motionLook.addEventListener("click", () => {
+			if (player.motionLook === "on") player.stopMotionLook();
+			else player.startMotionLook();
+		});
+		player.events.on("motionlookchange", () => {
+			this.reflect();
+		});
+		player.events.on("viewmodechange", () => {
+			this.reflect();
+		});
+		this.reflect();
+	}
+	reflect() {
+		const { motionLook, viewMode } = this.player;
+		const button = this.parts.motionLook;
+		button.hidden = motionLook === "unavailable" || motionLookRulesFor(viewMode) === void 0;
+		button.setAttribute("aria-pressed", String(motionLook === "on"));
+	}
+};
+//#endregion
+export { MotionLookButton };

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

@@ -29,6 +29,7 @@ function queryControlParts(root) {
 		mute: queryShadow(root, ".mute", HTMLButtonElement),
 		volume: queryShadow(root, ".volume", HTMLInputElement),
 		resetView: queryShadow(root, ".reset-view", HTMLButtonElement),
+		motionLook: queryShadow(root, ".motion-look", HTMLButtonElement),
 		stabilization: queryChoiceMenu(root, ChoiceMenuName.Stabilization),
 		viewMode: queryChoiceMenu(root, ChoiceMenuName.ViewMode),
 		fullscreen: queryShadow(root, ".fullscreen", 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. 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";
+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 * Three 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). The motion look toggle, shown only where the device reports its\n * attitude, makes the bar one target wider, so each part gives way one target sooner, and on the\n * narrowest players the stabilization menu gives way to it: the toggle never hides, since the\n * device may be turning the view. Sizes are in rem like the page's text, so larger text moves the\n * widths 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.motion-look[aria-pressed='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/* With the motion look toggle each width moves out by one target and its gap; below the\n   narrowest bar that fits without it, the stabilization menu gives way to it. */\n@container (max-width: 26rem) {\n  .row:has(.motion-look:not([hidden])) .time {\n    display: none;\n  }\n}\n\n@container (max-width: 20rem) {\n  .controls:has(.motion-look:not([hidden])) {\n    padding-inline: 0.5rem;\n  }\n\n  .row:has(.motion-look:not([hidden])) .reset-view {\n    display: none;\n  }\n}\n\n@container (max-width: 16rem) {\n  .row:has(.motion-look:not([hidden])) .choice:has(.stabilization-button) {\n    display: none;\n  }\n}\n\n@media (pointer: coarse) {\n  @container (max-width: 29.5rem) {\n    .row:has(.motion-look:not([hidden])) .time {\n      display: none;\n    }\n  }\n\n  @container (max-width: 23.5rem) {\n    .controls:has(.motion-look:not([hidden])) {\n      padding-inline: 0.5rem;\n    }\n\n    .row:has(.motion-look:not([hidden])) .reset-view {\n      display: none;\n    }\n  }\n\n  @container (max-width: 19rem) {\n    .row:has(.motion-look:not([hidden])) .choice:has(.stabilization-button) {\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

@@ -1,4 +1,5 @@
 import { queryControlParts } from "./controlParts.js";
+import { MotionLookButton } from "./MotionLookButton.js";
 import { PictureMenus } from "./PictureMenus.js";
 import { SeekBar } from "./SeekBar.js";
 import { SoundControls } from "./SoundControls.js";
@@ -7,9 +8,9 @@ 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.
+* Fullscreen, the view mode and stabilization menus and the motion look toggle, 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);
@@ -21,6 +22,7 @@ function bindControlsBar(root, host) {
 		player: host.player,
 		wording: host.wording
 	});
+	new MotionLookButton(parts, host.player);
 }
 //#endregion
 export { bindControlsBar };

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

@@ -91,6 +91,7 @@ function controlsMarkup() {
       <span class="time"><span class="elapsed">0:00</span> <span class="total">/ 0:00</span></span>
       <span class="spacer"></span>
       ${pictureMenusMarkup()}
+      <button class="icon-button motion-look" type="button" aria-pressed="false" data-label="motionLook" hidden>${ICONS.motionLook}</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>

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

@@ -26,6 +26,7 @@ var ICONS = {
 	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\"/>"),
+	motionLook: icon("<rect x=\"8.5\" y=\"4.5\" width=\"7\" height=\"15\" rx=\"1.5\"/><path d=\"M11 16.5h2\"/><path d=\"M5 8.5a7 7 0 0 0 0 7\"/><path d=\"M19 8.5a7 7 0 0 1 0 7\"/>"),
 	fullscreen: icon("<path d=\"M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5\"/>"),
 	close: icon("<path d=\"M6 6l12 12M18 6L6 18\"/>")
 };

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

@@ -23,6 +23,7 @@ var DEFAULT_MESSAGES = {
 		mute: "Mute",
 		volume: "Volume",
 		resetView: "Reset view",
+		motionLook: "Look by moving the device",
 		stabilization: "Stabilization",
 		viewMode: "View",
 		fullscreen: "Fullscreen",

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

@@ -8,8 +8,8 @@ import { elementSourceOf } from "./elementSource.js";
 * When `<gyro-view>` loads, and what. Attribute changes are read together a microtask after they
 * arrive, so a `src` set with its `src2` loads once; files handed in replace the attributes until
 * `src` or `src2` change. Only a connected element loads: one out of the document owes its load
-* to the next connection, and lets its recording go a microtask after a removal unless it was
-* only moved. A seek asked for while a load waits starts the new recording there.
+* to the next connection, and a removed one lets its recording go. A seek asked for while a load
+* waits starts the new recording there.
 */
 var ElementLoads = class {
 	element;
@@ -36,12 +36,9 @@ var ElementLoads = class {
 		this.awaited = void 0;
 	}
 	/**
-	* A move within the document disconnects and connects again at once: only an element still out
-	* of it a microtask later lets its recording go.
+	* The element left the document rather than moving within it: its recording goes.
 	*/
-	async disconnected() {
-		await Promise.resolve();
-		if (this.element.isConnected) return;
+	removed() {
 		this.player.unload();
 		this.isOwed = true;
 	}

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

@@ -1,9 +1,19 @@
 //#region ../../packages/player/src/element/FullscreenToggle.ts
 var FILL_ATTRIBUTE = "data-fill";
+var POPOVER_ATTRIBUTE = "popover";
+/**
+* No light dismiss and no Escape of the browser's: the element's own keys and button leave.
+*/
+var MANUAL_POPOVER = "manual";
 /**
 * Fills the screen with the element through the Fullscreen API where there is one, and by
 * pinning the element over the page where there is not (iPhone Safari has none for anything
 * but a video). Escape leaves either way.
+*
+* The pinned element is a manual popover, in the top layer the browser's own fullscreen uses:
+* no transform, clip or stacking context of the page holds it there. Pinned in place, a dialog
+* centred by a transform would make its fixed position fill the dialog, not the viewport. A
+* browser without popovers pins it in place all the same.
 */
 var FullscreenToggle = class {
 	element;
@@ -18,9 +28,17 @@ var FullscreenToggle = class {
 	}
 	async exit() {
 		if (this.isNativelyFullscreen()) await document.exitFullscreen();
+		this.element.removeAttribute(POPOVER_ATTRIBUTE);
 		this.element.removeAttribute(FILL_ATTRIBUTE);
 	}
 	/**
+	* The browser takes a popover out of the top layer when its element leaves the document, so a
+	* pinned element the page moves goes back in once it is connected again.
+	*/
+	connected() {
+		if (this.element.hasAttribute(FILL_ATTRIBUTE)) this.raiseToTopLayer();
+	}
+	/**
 	* Asked of the element itself: `document.fullscreenElement` names the outermost shadow host
 	* instead when the player sits inside another component.
 	*/
@@ -32,8 +50,25 @@ var FullscreenToggle = class {
 			await this.element.requestFullscreen();
 			return;
 		} catch {}
+		if (!this.element.isConnected) return;
 		this.element.setAttribute(FILL_ATTRIBUTE, "");
+		this.raiseToTopLayer();
+	}
+	/**
+	* Out of the document there is no top layer to show it in; `connected` raises it on arrival.
+	*/
+	raiseToTopLayer() {
+		if (!hasPopovers() || !this.element.isConnected || this.element.matches(":popover-open")) return;
+		this.element.setAttribute(POPOVER_ATTRIBUTE, MANUAL_POPOVER);
+		this.element.showPopover();
 	}
 };
+/**
+* The browser's own popovers, the method and the selector both: Safari has them from 17, and
+* before it does not even parse `:popover-open`, which a polyfill's `showPopover` cannot change.
+*/
+function hasPopovers() {
+	return "showPopover" in HTMLElement.prototype && CSS.supports("selector(:popover-open)");
+}
 //#endregion
 export { FullscreenToggle };

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

@@ -136,6 +136,13 @@ var GyroViewElement = class extends TypedEventElement {
 		return this.player.view;
 	}
 	/**
+	* Whether turning the device turns the normal view: `on`, `off`, or `unavailable` where the
+	* device reports no attitude or access was refused.
+	*/
+	get motionLook() {
+		return this.player.motionLook;
+	}
+	/**
 	* Every word the element shows or says to assistive technology. Setting it replaces any of
 	* them, table by table (`labels`, `stabilizationModes`, `viewModes`, `errors`); the others keep
 	* their English defaults, and `null` brings them all back.
@@ -155,10 +162,11 @@ var GyroViewElement = class extends TypedEventElement {
 		this.dataset["status"] = this.player.status;
 		this.idle.start();
 		this.loads.connected();
+		this.fullscreen.connected();
 	}
 	disconnectedCallback() {
 		this.idle.stop();
-		this.loads.disconnected();
+		this.leaveIfRemoved();
 	}
 	attributeChangedCallback(name, _previous, value) {
 		if (SOURCE_ATTRIBUTES.includes(name)) this.loads.sourceChanged();
@@ -231,6 +239,20 @@ var GyroViewElement = class extends TypedEventElement {
 		this.player.zoom(steps, focus);
 	}
 	/**
+	* Lets the device turn the normal view, as a window into the recording. Call it from a tap's
+	* handler: iOS asks the viewer for access there and refuses it anywhere else. Resolves with the
+	* state it ends in (`motionLook`); a refusal is a `warning`, never a rejection.
+	*/
+	startMotionLook() {
+		return this.player.startMotionLook();
+	}
+	/**
+	* Gives the view back to the pointer, level, looking where it looked.
+	*/
+	stopMotionLook() {
+		this.player.stopMotionLook();
+	}
+	/**
 	* Stabilizes the picture in `mode` (`off`, `lock`, `horizon`, `follow`); any other value,
 	* an unset one included, is refused.
 	*/
@@ -273,6 +295,17 @@ var GyroViewElement = class extends TypedEventElement {
 		this.loads.loadFiles(files);
 	}
 	/**
+	* A move within the document disconnects and connects again at once: only an element still out
+	* of it a microtask later was removed. It lets its recording go, and leaves the pinned fill as
+	* the browser's fullscreen element leaves fullscreen.
+	*/
+	async leaveIfRemoved() {
+		await Promise.resolve();
+		if (this.isConnected) return;
+		this.loads.removed();
+		await this.fullscreen.exit();
+	}
+	/**
 	* What the controls and the keyboard ask of the element. They live as long as the element:
 	* their listeners sit on its own shadow tree and host, and on its player.
 	*/

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: #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";
+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 * It keeps no corners or border of the page's, which would show the page behind it, and zero\n * border and padding override a popover's defaults, which the pinned element is (ADR 0041). A\n * page's styles for every popover would outrank the host's overflow, colours and font, so the\n * fill holds them too. The z-index matters only where the browser has no popovers.\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  border: 0 !important;\n  border-radius: 0 !important;\n  padding: 0 !important;\n  transform: none !important;\n  translate: none !important;\n  rotate: none !important;\n  scale: none !important;\n  aspect-ratio: auto !important;\n  overflow: hidden !important;\n  background: #000 !important;\n  color: var(--gyro-view-text) !important;\n  font-family: var(--gyro-view-font) !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/player/AutomaticStarts.js

@@ -0,0 +1,54 @@
+import { hasErrorCode, messageOf } from "../../../core/src/shared/errors/GyroViewError.js";
+import "../../../core/src/index.js";
+//#region ../../packages/player/src/player/AutomaticStarts.ts
+/**
+* The starts nobody pressed for: autoplay once a recording is ready, and the loop at its end. A
+* refused start leaves the recording loaded and paused: a warning, never a failure.
+*/
+var AutomaticStarts = class {
+	events;
+	play;
+	isLoopingValue = false;
+	constructor(events, play) {
+		this.events = events;
+		this.play = play;
+	}
+	get isLooping() {
+		return this.isLoopingValue;
+	}
+	setLooping(isLooping) {
+		this.isLoopingValue = isLooping;
+	}
+	async autoplay() {
+		try {
+			await this.play();
+		} catch (error) {
+			this.events.emit("warning", hasErrorCode(error, "playback-blocked") ? {
+				code: "autoplay-blocked",
+				message: "playback waits for a user gesture"
+			} : {
+				code: "playback-failed",
+				message: `autoplay failed: ${messageOf(error)}`
+			});
+		}
+	}
+	/**
+	* The recording ended: announced, and played again when looping.
+	*/
+	ended() {
+		this.events.emit("ended", void 0);
+		if (this.isLoopingValue) this.replay();
+	}
+	async replay() {
+		try {
+			await this.play();
+		} catch (error) {
+			this.events.emit("warning", {
+				code: "playback-failed",
+				message: `the loop could not restart playback: ${messageOf(error)}`
+			});
+		}
+	}
+};
+//#endregion
+export { AutomaticStarts };