@bubo-squared/gyroview 0.5.0 → 0.6.0

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/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.
@@ -231,6 +238,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.
 	*/

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

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

@@ -0,0 +1,150 @@
+//#region ../../packages/player/src/player/MotionLook.ts
+/**
+* The motion look setting, kept across loads like the others (ADR 0016), and what of the device
+* it hears: its availability while a recording is drawn, and its readings while motion look is
+* also on and the view mode follows the device. Each time the readings stop, the view is let go,
+* so it is level again everywhere else. Nothing of the page holds the player between recordings:
+* an element taken out of the page unloads, and can be collected.
+*/
+var MotionLook = class {
+	parts;
+	stateValue;
+	request;
+	/**
+	* Counts the requests `stop`, `dispose` and a change of availability overtook: an answer that
+	* comes after them changes nothing.
+	*/
+	generation = 0;
+	stopHearing;
+	stopFollowingAvailability;
+	/**
+	* The viewer refused access: the device's availability changes nothing after that.
+	*/
+	wasRefused = false;
+	constructor(parts) {
+		this.parts = parts;
+		this.stateValue = parts.sensor.availability === "available" ? "off" : "unavailable";
+	}
+	/**
+	* As last known: the device's availability is followed while a recording is drawn.
+	*/
+	get state() {
+		return this.stateValue;
+	}
+	/**
+	* Turns motion look on, asking for access first; resolves with the state it ends in and never
+	* rejects. A second call while the first asks waits for the same answer.
+	*/
+	start() {
+		this.followAvailability();
+		if (this.stateValue !== "off") return Promise.resolve(this.stateValue);
+		this.request ??= this.ask();
+		return this.request;
+	}
+	stop() {
+		this.overtakeRequest();
+		if (this.stateValue === "on") this.change("off");
+	}
+	/**
+	* The player calls it whenever a recording or the view mode may have changed.
+	*/
+	reconsider() {
+		this.reconsiderAvailability();
+		this.reconsiderHearing();
+	}
+	dispose() {
+		this.overtakeRequest();
+		this.stopFollowingAvailability?.();
+		this.stopFollowingAvailability = void 0;
+		this.stopHearing?.();
+		this.stopHearing = void 0;
+		this.parts.sensor.dispose();
+	}
+	reconsiderAvailability() {
+		const isDrawn = this.parts.hasRecording();
+		if (isDrawn && !this.stopFollowingAvailability) {
+			this.stopFollowingAvailability = this.parts.sensor.onAvailabilityChange(() => {
+				this.followAvailability();
+			});
+			this.followAvailability();
+		} else if (!isDrawn && this.stopFollowingAvailability) {
+			this.stopFollowingAvailability();
+			this.stopFollowingAvailability = void 0;
+		}
+	}
+	/**
+	* Hears the device exactly while motion look is on, a recording is drawn and the view mode
+	* follows the device; lets the view go whenever it stops.
+	*/
+	reconsiderHearing() {
+		const { sensor, view, hasRecording } = this.parts;
+		const shouldHear = this.stateValue === "on" && hasRecording() && view.followsDevice;
+		if (shouldHear && !this.stopHearing) this.stopHearing = sensor.listen((reading) => {
+			view.followDevice(reading);
+		});
+		else if (!shouldHear && this.stopHearing) {
+			this.stopHearing();
+			this.stopHearing = void 0;
+			view.letGo();
+		}
+	}
+	/**
+	* A device found to report its attitude after all may be turned on; one found not to, which
+	* may happen after it was turned on, can no longer be.
+	*/
+	followAvailability() {
+		const isAvailable = this.parts.sensor.availability === "available";
+		if (this.wasRefused || isAvailable === (this.stateValue !== "unavailable")) return;
+		this.overtakeRequest();
+		this.change(isAvailable ? "off" : "unavailable");
+	}
+	async ask() {
+		const generation = this.generation;
+		const access = await this.accessOrGesture();
+		if (generation !== this.generation) return this.stateValue;
+		this.request = void 0;
+		this.answer(access);
+		return this.stateValue;
+	}
+	/**
+	* A sensor's request never rejects; one that did is taken as wanting a gesture, so motion look
+	* may still be started from the next tap.
+	*/
+	async accessOrGesture() {
+		try {
+			return await this.parts.sensor.requestAccess();
+		} catch {
+			return "needs-gesture";
+		}
+	}
+	answer(access) {
+		if (access === "granted") this.change("on");
+		else if (access === "denied") {
+			this.wasRefused = true;
+			this.change("unavailable");
+			this.warn("motion-look-refused", REFUSED);
+		} else this.warn("motion-look-needs-gesture", NEEDS_GESTURE);
+	}
+	overtakeRequest() {
+		this.generation += 1;
+		this.request = void 0;
+	}
+	/**
+	* Announced once the change is whole (ADR 0021): the device heard, or let go, first.
+	*/
+	change(state) {
+		this.stateValue = state;
+		this.reconsiderHearing();
+		this.parts.events.emit("motionlookchange", state);
+	}
+	warn(code, message) {
+		this.parts.events.emit("warning", {
+			code,
+			message
+		});
+	}
+};
+var REFUSED = "motion look was refused: by the viewer, or by an iframe whose `allow` leaves out accelerometer, gyroscope and magnetometer";
+var NEEDS_GESTURE = "motion look asks for access, which this browser grants only from a user gesture such as a tap";
+//#endregion
+export { MotionLook };