@openvalle/engine 0.0.0-stage → 0.1.0

package/dist/index-5vzwpwd6.js

@@ -0,0 +1,388 @@
+import {
+  PlayerError2,
+  RATE,
+  Connection,
+  spawns
+} from "./index-cm27tnmf.js";
+
+// web/packages/engine/src/index.ts
+async function createPlayer2(options) {
+  if (!/\.(motion\.tsx|timeline\.json)$/.test(options.entry)) {
+    throw new PlayerError2("file", `${options.entry}: an entry must end with .motion.tsx or .timeline.json`);
+  }
+  const runtime = options.runtime === undefined ? new URL("./", import.meta.url) : new URL(String(options.runtime).replace(/\/?$/, "/"), location.href);
+  const base = new URL(options.base ?? ".", location.href).href;
+  const spawn = {
+    runtime,
+    base,
+    fonts: options.fonts === undefined ? undefined : new URL(options.fonts, base).href,
+    fetch: options.fetch,
+    entry: options.entry,
+    inputs: { props: options.props ?? {}, data: options.data ?? {}, resources: {} },
+    given: { ...options.files }
+  };
+  const offscreen = options.canvas.transferControlToOffscreen();
+  const connection = await Connection.start(spawn, offscreen);
+  const player = new Player2(connection, spawn, options);
+  try {
+    await player.start(options.resources ?? {});
+  } catch (error) {
+    await connection.close();
+    throw error;
+  }
+  return player;
+}
+
+class Player2 {
+  #connection;
+  #spawn;
+  #info;
+  #rate;
+  #listeners = new Map;
+  #frame = 0;
+  #clock;
+  #sound = null;
+  #audio;
+  #context;
+  #gen = 0;
+  #volume;
+  #muted;
+  #drawing;
+  #wanted;
+  #animation = 0;
+  #given = 0;
+  #stats = { shown: 0, dropped: 0, frameMs: 0, memory: 0 };
+  #lastShown;
+  #statsEpoch = 0;
+  #reached = 0;
+  #said = 0;
+  loop;
+  constructor(connection, spawn, options) {
+    this.#connection = connection;
+    this.#spawn = spawn;
+    this.loop = options.loop ?? false;
+    this.#muted = options.muted ?? false;
+    this.#volume = options.volume ?? 1;
+    spawns.set(this, spawn);
+    connection.stopped = (error) => {
+      this.pause();
+      this.#emit("error", error);
+    };
+  }
+  async start(resources) {
+    for (const [name, files] of Object.entries(resources)) {
+      this.#spawn.inputs.resources[name] = await this.#give(name, files);
+    }
+    await this.#open();
+  }
+  get info() {
+    return this.#info;
+  }
+  get controls() {
+    return this.#info.controls;
+  }
+  get currentFrame() {
+    return this.#frame;
+  }
+  get currentTime() {
+    return this.#time(this.#frame);
+  }
+  get playing() {
+    return this.#clock !== undefined;
+  }
+  get volume() {
+    return this.#volume;
+  }
+  set volume(volume) {
+    this.#volume = volume;
+    this.#audio?.then((a) => a.gain.gain.value = volume);
+  }
+  get muted() {
+    return this.#muted;
+  }
+  set muted(muted) {
+    if (muted === this.#muted) {
+      return;
+    }
+    this.#muted = muted;
+    if (this.#clock) {
+      this.#run(this.#frame);
+    }
+  }
+  get hasSound() {
+    return this.#sound !== null;
+  }
+  play() {
+    if (this.#clock) {
+      return;
+    }
+    const last = this.#info.frames - 1;
+    this.#run(this.#frame >= last && !this.loop ? 0 : this.#frame);
+    this.#reached = this.#clock.frame;
+    this.#resetStats(this.#frame);
+    this.#emit("play", undefined);
+    const tick = () => {
+      const clock = this.#clock;
+      if (!clock) {
+        return;
+      }
+      const [n, d] = this.#rate;
+      const elapsed = this.#now(clock) - clock.at;
+      let index = clock.frame + (Number.isNaN(elapsed) ? 0 : Math.floor(elapsed * (n / d)));
+      if (index > last) {
+        if (!this.loop) {
+          this.#show(last);
+          this.pause();
+          this.#emit("ended", undefined);
+          return;
+        }
+        this.#run(0);
+        index = this.#reached = 0;
+      }
+      this.#stats.dropped += Math.max(0, index - this.#reached - 1);
+      this.#reached = Math.max(this.#reached, index);
+      if (index !== this.#frame)
+        this.#show(index);
+      if (performance.now() - this.#said >= 1000) {
+        this.#say();
+      }
+      this.#animation = requestAnimationFrame(tick);
+    };
+    tick();
+  }
+  pause() {
+    if (!this.#clock) {
+      return;
+    }
+    this.#clock = undefined;
+    cancelAnimationFrame(this.#animation);
+    this.#silence();
+    this.#say();
+    this.#emit("pause", undefined);
+  }
+  seek(seconds) {
+    this.seekFrame(this.#index(seconds));
+  }
+  seekFrame(index) {
+    const frame = Math.min(Math.max(Math.trunc(index), 0), this.#info.frames - 1);
+    if (this.#clock) {
+      this.#run(frame);
+      this.#reached = frame;
+      this.#resetStats(frame);
+    }
+    this.#wanted = undefined;
+    this.#show(frame);
+  }
+  async frame(seconds) {
+    const index = this.#index(seconds);
+    const pixels = await this.#send({ type: "still", index });
+    const { width, height } = this.#info;
+    const canvas = new OffscreenCanvas(width, height);
+    const image = new ImageData(new Uint8ClampedArray(pixels.buffer), width, height);
+    canvas.getContext("2d").putImageData(image, 0, 0);
+    return canvas.convertToBlob({ type: "image/png" });
+  }
+  async renderSound(start, seconds) {
+    const sample = Math.round(start * RATE);
+    const samples = Math.round((start + seconds) * RATE) - sample;
+    return await this.#send({ type: "render-sound", sample, samples });
+  }
+  async draw(index) {
+    this.#frame = index;
+    const started = performance.now();
+    const epoch = this.#statsEpoch;
+    const { memory } = await this.#send({ type: "frame", index });
+    const stats = this.#stats;
+    stats.memory = memory;
+    if (this.#clock && epoch === this.#statsEpoch && index !== this.#lastShown) {
+      stats.frameMs += performance.now() - started;
+      stats.shown++;
+      this.#lastShown = index;
+    }
+    this.#emit("time", { time: this.#time(index), frame: index });
+  }
+  async pixels() {
+    return await this.#send({ type: "pixels" });
+  }
+  async setProps(props) {
+    await this.#rebind("props", props);
+  }
+  async setData(data) {
+    await this.#rebind("data", data);
+  }
+  async setResource(name, files) {
+    const resources = { ...this.#spawn.inputs.resources };
+    if (files === undefined || files.length === 0) {
+      delete resources[name];
+    } else {
+      resources[name] = await this.#give(name, files);
+    }
+    await this.#rebind("resources", resources);
+  }
+  on(type, listener) {
+    const set = this.#listeners.get(type) ?? new Set;
+    this.#listeners.set(type, set);
+    set.add(listener);
+    return () => set.delete(listener);
+  }
+  async close() {
+    this.pause();
+    spawns.delete(this);
+    await this.#connection.close();
+    await this.#audio?.then((a) => a.context.close()).catch(() => {});
+  }
+  #time(index) {
+    const [n, d] = this.#rate;
+    return index * d / n;
+  }
+  #index(seconds) {
+    const [n, d] = this.#rate;
+    const index = Math.floor(seconds * (n / d) + 0.000000001);
+    return Math.min(Math.max(index, 0), this.#info.frames - 1);
+  }
+  #run(frame) {
+    this.#silence();
+    if (!this.#sound || this.#muted) {
+      this.#clock = { frame, at: performance.now() / 1000 };
+      return;
+    }
+    const gen = ++this.#gen;
+    this.#clock = { frame, at: Number.NaN, gen };
+    const sample = Math.round(this.#time(frame) * RATE);
+    this.#playing().then(async (a) => {
+      await a.context.resume();
+      a.node.port.postMessage({ start: gen, sample });
+    });
+  }
+  #silence() {
+    this.#audio?.then((a) => a.node.port.postMessage({ stop: true }));
+  }
+  #now(clock) {
+    if (clock.gen === undefined) {
+      return performance.now() / 1000;
+    }
+    const context = this.#context;
+    return context ? context.currentTime - (context.outputLatency || context.baseLatency) : 0;
+  }
+  #playing() {
+    this.#audio ??= (async () => {
+      const context = new AudioContext({ sampleRate: RATE, latencyHint: "interactive" });
+      this.#context = context;
+      await context.audioWorklet.addModule(new URL("sound.js", this.#spawn.runtime));
+      const node = new AudioWorkletNode(context, "valle-sound", {
+        numberOfInputs: 0,
+        outputChannelCount: [2]
+      });
+      const gain = new GainNode(context, { gain: this.#volume });
+      node.connect(gain).connect(context.destination);
+      node.port.onmessage = (event) => {
+        const { started, frame } = event.data;
+        if (this.#clock?.gen === started) {
+          this.#clock.at = frame / context.sampleRate;
+        }
+      };
+      const channel = new MessageChannel;
+      node.port.postMessage({ port: channel.port1 }, [channel.port1]);
+      await this.#send({ type: "worklet", port: channel.port2 }, [channel.port2]);
+      return { context, node, gain };
+    })();
+    return this.#audio;
+  }
+  #say() {
+    const now = performance.now();
+    const elapsedMs = now - this.#said;
+    const { shown, dropped, frameMs, memory } = this.#stats;
+    this.#emit("stats", {
+      fps: elapsedMs > 0 ? shown * 1000 / elapsedMs : 0,
+      elapsedMs,
+      shown,
+      dropped,
+      frameMs: shown ? frameMs / shown : 0,
+      memory
+    });
+    this.#stats = { shown: 0, dropped: 0, frameMs: 0, memory };
+    this.#said = now;
+  }
+  #resetStats(frame) {
+    this.#stats = { shown: 0, dropped: 0, frameMs: 0, memory: this.#stats.memory };
+    this.#lastShown = frame;
+    this.#statsEpoch++;
+    this.#said = performance.now();
+  }
+  #show(index) {
+    this.#frame = index;
+    if (this.#drawing !== undefined) {
+      if (this.#clock && this.#wanted !== undefined && this.#wanted !== index && this.#wanted !== this.#drawing) {
+        this.#stats.dropped++;
+      }
+      this.#wanted = index;
+      return;
+    }
+    this.#drawing = index;
+    this.draw(index).catch((error) => {
+      this.pause();
+      this.#emit("error", error);
+    }).finally(() => {
+      this.#drawing = undefined;
+      const wanted = this.#wanted;
+      this.#wanted = undefined;
+      if (wanted !== undefined && wanted !== index) {
+        this.#show(wanted);
+      }
+    });
+  }
+  async#open() {
+    const { entry, inputs } = this.#spawn;
+    this.#info = await this.#send({ type: "open", entry, inputs });
+    const [n, d = "1"] = this.#info.fps.split("/");
+    this.#rate = [Number(n), Number(d)];
+    this.#frame = Math.min(this.#frame, this.#info.frames - 1);
+    this.#sound = await this.#send({ type: "sound", entry });
+    await this.draw(this.#frame);
+  }
+  async#rebind(key, value) {
+    const playing = this.playing;
+    this.pause();
+    const before = this.#spawn.inputs[key];
+    this.#spawn.inputs[key] = value;
+    try {
+      await this.#send({ type: "close" });
+      await this.#open();
+    } catch (error) {
+      this.#spawn.inputs[key] = before;
+      await this.#send({ type: "close" });
+      await this.#open();
+      throw error;
+    } finally {
+      if (playing) {
+        this.play();
+      }
+    }
+  }
+  async#give(name, files) {
+    const paths = [];
+    const given = {};
+    for (const file of files) {
+      if (typeof file === "string") {
+        paths.push(file);
+        continue;
+      }
+      const path = `valle:resource/${encodeURIComponent(name)}/${this.#given++}`;
+      given[path] = file;
+      paths.push(path);
+    }
+    await this.#send({ type: "give", files: given });
+    Object.assign(this.#spawn.given, given);
+    return paths;
+  }
+  #send(request, transfer = []) {
+    return this.#connection.send(request, transfer);
+  }
+  #emit(type, value) {
+    for (const listener of this.#listeners.get(type) ?? []) {
+      listener(value);
+    }
+  }
+}
+
+export { createPlayer2, Player2 };

package/dist/index-cm27tnmf.js

@@ -0,0 +1,120 @@
+// web/packages/engine/src/connection.ts
+class PlayerError2 extends Error {
+  code;
+  constructor(code, message) {
+    super(message);
+    this.code = code;
+    this.name = "PlayerError";
+  }
+}
+var RATE = 48000;
+
+class Connection {
+  worker;
+  #requests = new Map;
+  #next = 0;
+  #progress = new Map;
+  #fetch;
+  stopped = () => {};
+  static async start(spawn, canvas) {
+    const worker = new Worker(new URL("worker.js", spawn.runtime), { type: "module" });
+    const connection = new Connection(worker, spawn.fetch);
+    try {
+      await connection.send({
+        type: "start",
+        canvas,
+        base: spawn.base,
+        fonts: spawn.fonts,
+        proxied: spawn.fetch !== undefined
+      }, [canvas]);
+      if (Object.keys(spawn.given).length > 0) {
+        await connection.send({ type: "give", files: spawn.given });
+      }
+    } catch (error) {
+      worker.terminate();
+      throw error;
+    }
+    return connection;
+  }
+  constructor(worker, fetch) {
+    this.worker = worker;
+    this.#fetch = fetch;
+    worker.onmessage = (event) => {
+      const data = event.data;
+      if ("progress" in data) {
+        this.#progress.get(data.progress)?.(data.done);
+        return;
+      }
+      if ("decode" in data) {
+        this.#decode(data.decode, data.file);
+        return;
+      }
+      if ("fetch" in data) {
+        this.#fetched(data.fetch, data.url);
+        return;
+      }
+      const request = this.#requests.get(data.id);
+      this.#requests.delete(data.id);
+      if (data.ok) {
+        request?.resolve(data.value);
+      } else {
+        request?.reject(new PlayerError2(data.code, data.message));
+      }
+    };
+    worker.onerror = (event) => {
+      event.preventDefault();
+      const error = new PlayerError2("scene", `the engine stopped: ${event.message}`);
+      this.fail(error);
+      this.stopped(error);
+    };
+  }
+  send(request, transfer = [], progress) {
+    const id = this.#next++;
+    if (progress) {
+      this.#progress.set(id, progress);
+    }
+    return new Promise((resolve, reject) => {
+      this.#requests.set(id, { resolve, reject });
+      this.worker.postMessage({ id, ...request }, transfer);
+    }).finally(() => this.#progress.delete(id));
+  }
+  fail(error) {
+    for (const request of this.#requests.values()) {
+      request.reject(error);
+    }
+    this.#requests.clear();
+  }
+  async close() {
+    const destroyed = this.send({ type: "destroy" }).catch(() => {});
+    await Promise.race([destroyed, new Promise((r) => setTimeout(r, 1000))]);
+    this.fail(new PlayerError2("scene", "the player was closed"));
+    this.worker.terminate();
+  }
+  async#fetched(id, url) {
+    try {
+      const response = await this.#fetch(url);
+      const bytes = response.ok ? await response.arrayBuffer() : undefined;
+      this.worker.postMessage({ fetched: id, status: response.status, statusText: response.statusText, bytes }, bytes ? [bytes] : []);
+    } catch (error) {
+      this.worker.postMessage({ fetched: id, error: String(error) });
+    }
+  }
+  async#decode(id, file) {
+    let pcm = null;
+    try {
+      const decoder = new OfflineAudioContext(2, 1, RATE);
+      const buffer = await decoder.decodeAudioData(file.buffer);
+      const left = buffer.getChannelData(0);
+      const right = buffer.getChannelData(Math.min(1, buffer.numberOfChannels - 1));
+      pcm = new Float32Array(2 * buffer.length);
+      for (let i = 0;i < buffer.length; i++) {
+        pcm[2 * i] = left[i];
+        pcm[2 * i + 1] = right[i];
+      }
+    } catch {}
+    this.worker.postMessage({ decoded: id, pcm }, pcm ? [pcm.buffer] : []);
+  }
+}
+var spawns = new WeakMap;
+
+export { PlayerError2, RATE, Connection, spawns };

package/dist/index.d.ts

@@ -0,0 +1,99 @@
+import { Connection, PlayerError, type Spawn } from "./connection.ts";
+import type { Controls, Opened, Source } from "./messages.ts";
+export { PlayerError } from "./connection.ts";
+export type { Code, Control, Controls, Opened, Source } from "./messages.ts";
+export type Options = {
+    canvas: HTMLCanvasElement;
+    /** The scene, `.motion.tsx`, or the timeline, `.timeline.json`, as a path from `base`. */
+    entry: string;
+    /** Where the SDK's worker, audio worklet and wasm are: beside this module by default. */
+    runtime?: string | URL;
+    /** Where relative paths are fetched from: the page's address by default. */
+    base?: string | URL;
+    /** Files given in place of fetching their paths. */
+    files?: Record<string, Source>;
+    /** What fetches the files the engine reads, the built-in fonts among them: `fetch` by default. */
+    fetch?: (url: string) => Promise<Response>;
+    /** Where the built-in fonts are fetched from, by their file names, if not Google's addresses. */
+    fonts?: string | URL;
+    props?: Record<string, unknown>;
+    data?: Record<string, unknown>;
+    /** Each resource's files, by its name. */
+    resources?: Record<string, Source[]>;
+    loop?: boolean;
+    muted?: boolean;
+    /** From 0 to 1. */
+    volume?: number;
+};
+/** Playback over `elapsedMs`: distinct completed video frames and their rate (not display
+ * refreshes), skipped frames, average frame latency, and bytes of engine memory. */
+export type Stats = {
+    fps: number;
+    elapsedMs: number;
+    shown: number;
+    dropped: number;
+    frameMs: number;
+    memory: number;
+};
+export type Events = {
+    /** A frame was drawn: its time and index. */
+    time: {
+        time: number;
+        frame: number;
+    };
+    play: undefined;
+    pause: undefined;
+    /** Playing reached the last frame and does not loop. */
+    ended: undefined;
+    error: PlayerError;
+    /** Each second of playing, and when it pauses. */
+    stats: Stats;
+};
+export declare function createPlayer(options: Options): Promise<Player>;
+export declare class Player {
+    #private;
+    loop: boolean;
+    constructor(connection: Connection, spawn: Spawn, options: Options);
+    /** @internal */
+    start(resources: Record<string, Source[]>): Promise<void>;
+    /** The composition and the controls of what is open. */
+    get info(): Opened;
+    get controls(): Controls;
+    /** The frame shown, or being drawn. */
+    get currentFrame(): number;
+    /** The time of the frame shown, in seconds. */
+    get currentTime(): number;
+    get playing(): boolean;
+    /** The sound's volume, from 0 to 1. */
+    get volume(): number;
+    set volume(volume: number);
+    /** Whether the sound is silenced: playing then keeps to the page's clock, as it may without a
+     * user's gesture. */
+    get muted(): boolean;
+    set muted(muted: boolean);
+    /** Whether what is open has sound, which then sets the clock playing keeps to. */
+    get hasSound(): boolean;
+    play(): void;
+    pause(): void;
+    /** Shows the frame at `seconds`; playing goes on from it. */
+    seek(seconds: number): void;
+    seekFrame(index: number): void;
+    /** The frame at `seconds` as a PNG, drawn off the canvas. */
+    frame(seconds: number): Promise<Blob>;
+    /** `seconds` of the sound from `start`, interleaved stereo at 48 000 samples a second, as an
+     * export encodes it; silence past its end. Throws where what is open has no sound. */
+    renderSound(start: number, seconds: number): Promise<Float32Array>;
+    /** Draws frame `index` and resolves once it is drawn. */
+    draw(index: number): Promise<void>;
+    /** The pixels of the frame drawn last: straight sRGB, 4 bytes a pixel, rows top down. */
+    pixels(): Promise<Uint8Array>;
+    /** Binds the scene's props to `props`, in place of those given before. A value that does not
+     * fit its control fails, and what was bound stays. */
+    setProps(props: Record<string, unknown>): Promise<void>;
+    setData(data: Record<string, unknown>): Promise<void>;
+    /** Binds resource `name` to `files`, or back to its default with none. */
+    setResource(name: string, files: Source[] | undefined): Promise<void>;
+    on<K extends keyof Events>(type: K, listener: (value: Events[K]) => void): () => void;
+    /** Stops the player and lets its GPU device go. */
+    close(): Promise<void>;
+}

package/dist/index.js

@@ -0,0 +1,12 @@
+import {
+  createPlayer2,
+  Player2
+} from "./index-5vzwpwd6.js";
+import {
+  PlayerError2
+} from "./index-cm27tnmf.js";
+export {
+  Player2 as Player,
+  PlayerError2 as PlayerError,
+  createPlayer2 as createPlayer
+};