@bvdmitri/gyroview 0.0.0-stage → 0.9.0-cutaway.2

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

@@ -0,0 +1,379 @@
+import { degrees } from "../../../core/src/shared/units/angle.js";
+import { asGyroViewError } from "../../../core/src/shared/errors/GyroViewError.js";
+import { seconds } from "../../../core/src/shared/units/time.js";
+import { Outbox } from "../../../core/src/shared/events/Outbox.js";
+import { isFlowing } from "../../../core/src/domain/playback/PlayerState.js";
+import { TypedEmitter } from "../../../core/src/shared/events/TypedEmitter.js";
+import { ensureFinite, viewStateOf } from "./ensureFinite.js";
+import { NO_ATTITUDE_SENSOR } from "../composition/attitudeSensor.js";
+import { cssSizeOf } from "../composition/DrawingBufferFit.js";
+import { FrameLoop } from "./FrameLoop.js";
+import { loadRecording } from "./loadRecording.js";
+import { MotionLook } from "./MotionLook.js";
+import { IDLE, loadingPhase, sessionToPlay, statusOf } from "./PlayerPhase.js";
+import { PictureSettings } from "./PictureSettings.js";
+import { PlaybackStarts } from "./PlaybackStarts.js";
+import { PlayerSound } from "./PlayerSound.js";
+import { anglesOf } from "./viewAngles.js";
+import { PlayerView } from "./PlayerView.js";
+import { SessionRelay } from "./SessionRelay.js";
+import { StatusAnnouncer } from "./StatusAnnouncer.js";
+//#region ../../packages/player/src/player/Player.ts
+/**
+* The player without the element, which `createBrowserPlayer` gives: it plays one recording at a
+* time on the canvas and audio element it was handed, reports in media-element events, and keeps
+* its settings (view, view mode, motion look, stabilization, gain matching, sound, loop) from
+* load to load. `<gyro-view>` is a facade over it.
+*/
+var Player = class {
+	parts;
+	/**
+	* What the player announces, to listen to: only the player and its parts emit.
+	*/
+	events;
+	emitter = new TypedEmitter();
+	/**
+	* What the player and its parts announce, heard once each change is whole (ADR 0021).
+	*/
+	outbox = new Outbox(this.emitter);
+	statuses = new StatusAnnouncer(this.outbox, this.emitter);
+	loop;
+	phase = IDLE;
+	viewing;
+	motion;
+	picture = new PictureSettings(this.outbox);
+	/**
+	* A seek asked for before a recording was ready, where the next one starts.
+	*/
+	pendingStartTime;
+	sound;
+	relay = new SessionRelay({
+		events: this.outbox,
+		onState: () => {
+			this.statuses.announce(this.status);
+		}
+	});
+	starts = new PlaybackStarts(this.outbox, () => this.play());
+	/**
+	* Whether the recording plays again from the start at its end; kept across loads.
+	*/
+	shouldLoop = false;
+	/**
+	* Past `dispose`: a listener of the idle it announces must not load again.
+	*/
+	isDisposed = false;
+	/**
+	* @internal A page gets its player from `createBrowserPlayer`, which composes the parts.
+	*/
+	constructor(parts) {
+		this.parts = parts;
+		this.events = this.emitter;
+		this.loop = new FrameLoop(this.tick);
+		parts.host.audio.addEventListener("ended", this.tick);
+		this.sound = new PlayerSound(parts.host.audio, this.outbox);
+		this.viewing = new PlayerView(this.outbox, () => cssSizeOf(parts.host.canvas));
+		this.motion = new MotionLook({
+			sensor: parts.attitude ?? NO_ATTITUDE_SENSOR,
+			view: this.viewing,
+			events: this.outbox,
+			hasRecording: () => this.loaded !== void 0
+		});
+	}
+	get status() {
+		return statusOf(this.phase);
+	}
+	get metadata() {
+		return this.loaded?.opened.metadata;
+	}
+	get currentTime() {
+		return this.loaded?.pipeline.session.currentTime ?? seconds(0);
+	}
+	get duration() {
+		return this.loaded?.opened.duration ?? seconds(0);
+	}
+	/**
+	* False while playing or holding for frames, as a media element's `paused`.
+	*/
+	get isPaused() {
+		return !isFlowing(this.loaded?.pipeline.session.state);
+	}
+	get view() {
+		return anglesOf(this.viewing.current);
+	}
+	get viewMode() {
+		return this.viewing.viewMode;
+	}
+	/**
+	* Whether a drag moves the picture as it is framed now; the view mode decides.
+	*/
+	get canPan() {
+		return this.viewing.canPan;
+	}
+	/**
+	* Whether turning the device turns the normal view: `unavailable` where the device reports no
+	* attitude or access was refused.
+	*/
+	get motionLook() {
+		return this.motion.state;
+	}
+	get stabilization() {
+		return this.picture.stabilization;
+	}
+	get quality() {
+		return this.picture.quality;
+	}
+	get isLooping() {
+		return this.shouldLoop;
+	}
+	get volume() {
+		return this.sound.volume;
+	}
+	get isMuted() {
+		return this.sound.isMuted;
+	}
+	/**
+	* Whether `setVolume` changes anything on this platform; iOS leaves media at the device's volume.
+	*/
+	get canSetVolume() {
+		return this.sound.canSetVolume;
+	}
+	/**
+	* Replaces whatever was loaded. Resolves once the recording is ready, `autoplay` starting it
+	* then, a refusal a warning; rejects with the failure after reporting it as an `error` event.
+	* A load that a newer load or `unload` supersedes resolves quietly.
+	*/
+	async load(source, options = {}) {
+		if (this.isDisposed) return;
+		const loading = this.outbox.change(() => {
+			this.unload();
+			const next = loadingPhase();
+			this.phase = next;
+			this.statuses.announce(this.status);
+			return next;
+		});
+		try {
+			await this.complete(loading, source, options);
+		} catch (error) {
+			if (loading.controller.signal.aborted) return;
+			throw this.failWith(error);
+		} finally {
+			loading.settled.resolve();
+		}
+	}
+	unload() {
+		this.outbox.change(() => {
+			this.release();
+			this.statuses.announce(this.status);
+		});
+	}
+	/**
+	* Starts playback, after a load in progress is ready, and resolves once it runs, as a media
+	* element's `play()` does. Rejects with the load's failure, with `playback-blocked` when the
+	* browser wants a user gesture first, with `no-source` when nothing is loaded or loading, and
+	* with `play-interrupted` when a newer load or `unload` replaced the load it waited for.
+	*/
+	async play() {
+		const waitedFor = this.phase.kind === "loading" ? this.phase : void 0;
+		await waitedFor?.settled.promise;
+		await sessionToPlay(this.phase, waitedFor).play();
+	}
+	pause() {
+		this.loaded?.pipeline.session.pause();
+	}
+	/**
+	* Pauses, or starts playing and reports a refused start as a `warning`: what a tap on the
+	* picture or a play button does.
+	*/
+	togglePlayback() {
+		if (this.isPaused) this.starts.press();
+		else this.pause();
+	}
+	stop() {
+		this.loaded?.pipeline.session.stop();
+	}
+	/**
+	* Seeks exactly to `time` seconds; while a recording is loading, before one is, or after its
+	* playback failed, the next one starts there, as a media element's default playback start
+	* position has it.
+	*/
+	seek(time) {
+		ensureFinite(time, "time");
+		const session = this.loaded?.pipeline.session;
+		if (session && session.state !== "error") session.seek(seconds(time));
+		else this.pendingStartTime = seconds(time);
+	}
+	/**
+	* Seeks to the key frame at or before `time` seconds: quick to show while a seek bar is dragged.
+	*/
+	async scrub(time) {
+		ensureFinite(time, "time");
+		await this.loaded?.pipeline.session.scrub(seconds(time));
+	}
+	setView(view) {
+		this.viewing.set(viewStateOf(view));
+	}
+	/**
+	* Points the normal view at `yaw` and `pitch`, in degrees: yaw positive to the right, pitch
+	* positive up.
+	*/
+	lookAt(yaw, pitch) {
+		ensureFinite(yaw, "yaw");
+		ensureFinite(pitch, "pitch");
+		this.viewing.lookAt(degrees(yaw), degrees(pitch));
+	}
+	/**
+	* The viewer dragged the picture by `delta` CSS pixels across the canvas.
+	*/
+	pan(delta) {
+		this.viewing.pan(delta);
+	}
+	/**
+	* The viewer turned by the given angles in degrees, as the arrow keys do.
+	*/
+	turn(yawDelta, pitchDelta) {
+		ensureFinite(yawDelta, "yaw turn");
+		ensureFinite(pitchDelta, "pitch turn");
+		this.viewing.turn(degrees(yawDelta), degrees(pitchDelta));
+	}
+	/**
+	* Zooms by `steps` (positive zooms in) toward `focus`, a point of the canvas as fractions of its
+	* size; about the centre when none is given.
+	*/
+	zoom(steps, focus) {
+		ensureFinite(steps, "zoom steps");
+		this.viewing.zoom(steps, focus);
+	}
+	resetView() {
+		this.viewing.reset();
+	}
+	setViewMode(mode) {
+		this.viewing.setMode(mode);
+		this.motion.reconsider();
+	}
+	/**
+	* Lets the device turn the normal view, as a window into the recording: its tilt and roll
+	* hold the pitch and keep the horizon level, drags turn the heading alone. 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; a refusal is a warning, never a rejection.
+	*/
+	startMotionLook() {
+		return this.motion.start();
+	}
+	/**
+	* Gives the view back to the pointer, level, looking where it looked.
+	*/
+	stopMotionLook() {
+		this.motion.stop();
+	}
+	setStabilization(mode) {
+		this.picture.setStabilization(mode);
+	}
+	/**
+	* How finely the lens images are read and how many device pixels are drawn; kept across loads.
+	*/
+	setQuality(quality) {
+		this.picture.setQuality(quality);
+	}
+	setLooping(isLooping) {
+		this.shouldLoop = isLooping;
+		this.loaded?.pipeline.session.setLooping(isLooping);
+	}
+	/**
+	* Whether the lenses' exposure is matched along the seam; kept across loads.
+	*/
+	setGainMatching(isEnabled) {
+		this.picture.setGainMatching(isEnabled);
+	}
+	setVolume(volume) {
+		ensureFinite(volume, "volume");
+		this.sound.setVolume(volume);
+	}
+	setMuted(isMuted) {
+		this.sound.setMuted(isMuted);
+	}
+	dispose() {
+		this.isDisposed = true;
+		this.unload();
+		this.motion.dispose();
+		this.parts.host.audio.removeEventListener("ended", this.tick);
+		this.sound.dispose();
+		this.emitter.removeAll();
+	}
+	tick = () => {
+		this.loaded?.pipeline.session.tick();
+	};
+	get loaded() {
+		return this.phase.kind === "loaded" ? this.phase.loaded : void 0;
+	}
+	async complete(loading, source, options) {
+		const { signal } = loading.controller;
+		const loaded = await loadRecording({
+			source,
+			parts: this.parts,
+			signal
+		});
+		if (signal.aborted) {
+			loaded.dispose();
+			return;
+		}
+		this.outbox.change(() => {
+			this.attach(loaded, loading.controller);
+			this.startAtPendingTime(loaded);
+			if (options.preload !== false) loaded.pipeline.session.preload();
+		});
+		if (options.autoplay && this.loaded === loaded) this.starts.autoplay();
+	}
+	startAtPendingTime(loaded) {
+		const time = this.pendingStartTime;
+		this.pendingStartTime = void 0;
+		if (time !== void 0) loaded.pipeline.session.seek(time);
+	}
+	attach(loaded, controller) {
+		this.phase = {
+			kind: "loaded",
+			loaded,
+			controller
+		};
+		this.viewing.attach(loaded.pipeline.renderer);
+		this.motion.reconsider();
+		const { session } = loaded.pipeline;
+		session.setLooping(this.shouldLoop);
+		this.picture.attach(loaded.pipeline);
+		this.relay.attach(session);
+		this.loop.start();
+		this.statuses.announce(this.status);
+		for (const warning of loaded.warnings) this.outbox.emit("warning", warning);
+		this.outbox.emit("ready", loaded.opened.metadata);
+	}
+	/**
+	* Lets go of whatever is loading or loaded, announcing nothing.
+	*/
+	release() {
+		const previous = this.phase;
+		this.phase = IDLE;
+		if (previous.kind === "loading") previous.controller.abort();
+		this.loop.stop();
+		this.relay.detach();
+		this.viewing.attach(void 0);
+		this.motion.reconsider();
+		this.picture.attach(void 0);
+		if (previous.kind !== "loaded") return;
+		previous.loaded.dispose();
+		previous.controller.abort();
+	}
+	failWith(error) {
+		const failure = asGyroViewError(error, "invariant-violation", "the player failed unexpectedly");
+		this.outbox.change(() => {
+			this.release();
+			this.phase = {
+				kind: "failed",
+				failure
+			};
+			this.statuses.announce(this.status);
+			this.outbox.emit("error", failure);
+		});
+		return failure;
+	}
+};
+//#endregion
+export { Player };

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

@@ -0,0 +1,28 @@
+import { keysOf } from "../../../core/src/shared/keysOf.js";
+//#region ../../packages/player/src/player/PlayerEvents.ts
+/**
+* Every event name once.
+*/
+var PLAYER_EVENT_NAMES = keysOf({
+	statuschange: true,
+	ready: true,
+	play: true,
+	playing: true,
+	waiting: true,
+	pause: true,
+	ended: true,
+	timeupdate: true,
+	seeking: true,
+	seeked: true,
+	frame: true,
+	viewchange: true,
+	viewmodechange: true,
+	motionlookchange: true,
+	stabilizationchange: true,
+	qualitychange: true,
+	volumechange: true,
+	warning: true,
+	error: true
+});
+//#endregion
+export { PLAYER_EVENT_NAMES };

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

@@ -0,0 +1,38 @@
+import { GyroViewError } from "../../../core/src/shared/errors/GyroViewError.js";
+import { Deferred } from "../../../core/src/shared/async/Deferred.js";
+//#region ../../packages/player/src/player/PlayerPhase.ts
+var IDLE = { kind: "idle" };
+function loadingPhase() {
+	return {
+		kind: "loading",
+		controller: new AbortController(),
+		settled: new Deferred()
+	};
+}
+/**
+* A loaded recording's status is its session's state, `seeking` until a seek's picture is drawn.
+*/
+function statusOf(phase) {
+	switch (phase.kind) {
+		case "idle": return "idle";
+		case "loading": return "loading";
+		case "loaded": {
+			const { session } = phase.loaded.pipeline;
+			return session.isSeeking ? "seeking" : session.state;
+		}
+		case "failed": return "error";
+	}
+}
+/**
+* The session a `play` starts once the load it waited for, if it waited, has settled: the one
+* loaded, by that load. A failure is the load's; a load replaced meanwhile interrupts the play,
+* as a newer load interrupts a media element's.
+*/
+function sessionToPlay(phase, waitedFor) {
+	if (phase.kind === "failed") throw phase.failure;
+	if (waitedFor !== void 0 && (phase.kind !== "loaded" || phase.controller !== waitedFor.controller)) throw new GyroViewError("play-interrupted", "a newer load or an unload replaced the load to play");
+	if (phase.kind !== "loaded") throw new GyroViewError("no-source", "there is no recording to play");
+	return phase.loaded.pipeline.session;
+}
+//#endregion
+export { IDLE, loadingPhase, sessionToPlay, statusOf };

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

@@ -0,0 +1,60 @@
+import { clamp } from "../../../core/src/shared/math/clamp.js";
+//#region ../../packages/player/src/player/PlayerSound.ts
+/**
+* The sound, on the audio element the host lends: its volume and mute, kept across loads by the
+* element itself and announced whoever changes them (the controls, the keyboard, a script, the
+* browser's own media keys).
+*/
+var PlayerSound = class {
+	audio;
+	events;
+	/**
+	* Whether the platform lets a page set the volume: iOS keeps media at the device's volume and
+	* ignores the setting, where a volume slider would move and change nothing.
+	*/
+	canSetVolume;
+	constructor(audio, events) {
+		this.audio = audio;
+		this.events = events;
+		this.canSetVolume = isVolumeSettable(audio.ownerDocument);
+		audio.addEventListener("volumechange", this.onVolumeChange);
+	}
+	get volume() {
+		return this.audio.volume;
+	}
+	get isMuted() {
+		return this.audio.muted;
+	}
+	/**
+	* From 0 (silent) to 1 (as recorded); anything outside is clamped.
+	*/
+	setVolume(volume) {
+		this.audio.volume = clamp(volume, 0, 1);
+	}
+	setMuted(isMuted) {
+		this.audio.muted = isMuted;
+	}
+	dispose() {
+		this.audio.removeEventListener("volumechange", this.onVolumeChange);
+	}
+	onVolumeChange = () => {
+		this.events.emit("volumechange", {
+			volume: this.volume,
+			isMuted: this.isMuted
+		});
+	};
+};
+/**
+* A volume the probe sets, other than the default of 1.
+*/
+var PROBE_VOLUME = .5;
+/**
+* Tried on an element of its own, so the one playing hears no volume change.
+*/
+function isVolumeSettable(document) {
+	const probe = document.createElement("audio");
+	probe.volume = PROBE_VOLUME;
+	return probe.volume === PROBE_VOLUME;
+}
+//#endregion
+export { PlayerSound };

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

@@ -0,0 +1,143 @@
+import { DEFAULT_VIEW_MODE } from "../../../core/src/domain/view/ViewMode.js";
+import { SCREEN_CENTRE } from "../../../core/src/domain/view/screenLayout.js";
+import { lookAt } from "../../../core/src/domain/view/viewGestures.js";
+import { DEFAULT_FRAMING, isSameFraming } from "../../../core/src/domain/view/Framing.js";
+import { followReading, withoutRoll } from "../../../core/src/domain/view/motionLookView.js";
+import { motionLookRulesFor, viewModeRulesFor } from "../../../core/src/domain/view/viewModes.js";
+import { anglesOf, isSameAngles } from "./viewAngles.js";
+//#region ../../packages/player/src/player/PlayerView.ts
+/**
+* Every layout the player accepts has two lenses; a renderer attached says so itself.
+*/
+var LENS_COUNT_BEFORE_A_LOAD = 2;
+/**
+* How the picture is framed and which view mode shows it: kept across loads, drawn by whichever
+* renderer is attached, and the normal view's angles announced when they change. The viewer's
+* gestures and a host setting the view go through the mode's rules on the viewport as it is
+* now; while the device holds the view (motion look, ADR 0040), through the rules it follows
+* then.
+*/
+var PlayerView = class {
+	events;
+	measureViewport;
+	framing = DEFAULT_FRAMING;
+	mode = DEFAULT_VIEW_MODE;
+	surface;
+	lensCount = LENS_COUNT_BEFORE_A_LOAD;
+	/**
+	* The device reading the held view follows from; none while the device does not hold it.
+	*/
+	previous;
+	constructor(events, measureViewport) {
+		this.events = events;
+		this.measureViewport = measureViewport;
+	}
+	get current() {
+		return this.framing.view;
+	}
+	get viewMode() {
+		return this.mode;
+	}
+	/**
+	* Whether a drag moves the picture as it is framed now.
+	*/
+	get canPan() {
+		return this.rules().canPan(this.framing);
+	}
+	/**
+	* Whether the device may turn the view in the current mode.
+	*/
+	get followsDevice() {
+		return motionLookRulesFor(this.mode) !== void 0;
+	}
+	/**
+	* The renderer of the loaded recording, or nothing between loads. A new renderer draws the
+	* framing as it is now, however it changed while the recording was loading; the lens tiles are
+	* measured by the lenses it draws from then on.
+	*/
+	attach(surface) {
+		this.surface = surface;
+		if (surface) this.lensCount = surface.lensCount;
+		surface?.setViewMode(this.mode);
+		surface?.setFraming(this.framing);
+	}
+	set(view) {
+		this.frame(this.rules().place(this.framing, view));
+	}
+	setMode(mode) {
+		if (mode === this.mode) return;
+		this.mode = mode;
+		this.surface?.setViewMode(mode);
+		this.events.emit("viewmodechange", mode);
+	}
+	lookAt(yaw, pitch) {
+		this.frame(this.rules().place(this.framing, lookAt(this.framing.view, yaw, pitch)));
+	}
+	/**
+	* Turns the view as the device turned: from its first reading on, the device holds the view.
+	*/
+	followDevice(reading) {
+		const hold = followReading(this.framing.view, this.previous, reading);
+		this.previous = hold.reading;
+		this.frame({
+			...this.framing,
+			view: hold.view
+		});
+	}
+	/**
+	* The device no longer holds the view: it stays where it looks, level again.
+	*/
+	letGo() {
+		if (!this.previous) return;
+		this.previous = void 0;
+		this.frame({
+			...this.framing,
+			view: withoutRoll(this.framing.view)
+		});
+	}
+	pan(delta) {
+		this.frame(this.rules().pan(this.framing, delta, this.context()));
+	}
+	turn(yaw, pitch) {
+		this.frame(this.rules().turn(this.framing, {
+			yaw,
+			pitch
+		}, this.context()));
+	}
+	/**
+	* Zooms by `steps`, keeping the point of the viewport at `focus` on what it shows.
+	*/
+	zoom(steps, focus = SCREEN_CENTRE) {
+		this.frame(this.rules().zoom(this.framing, {
+			steps,
+			focus
+		}, this.context()));
+	}
+	/**
+	* Back to how the current mode starts; the other modes keep their framing.
+	*/
+	reset() {
+		this.frame(this.rules().reset(this.framing));
+	}
+	/**
+	* Draws any change; announces one of the angles a page sees, not a roll alone.
+	*/
+	frame(next) {
+		if (isSameFraming(next, this.framing)) return;
+		const haveAnglesChanged = !isSameAngles(next.view, this.framing.view);
+		this.framing = next;
+		this.surface?.setFraming(next);
+		if (haveAnglesChanged) this.events.emit("viewchange", anglesOf(next.view));
+	}
+	context() {
+		return {
+			viewport: this.measureViewport(),
+			lensCount: this.lensCount
+		};
+	}
+	rules() {
+		return (this.previous === void 0 ? void 0 : motionLookRulesFor(this.mode)) ?? viewModeRulesFor(this.mode);
+	}
+};
+//#endregion
+export { PlayerView };