@motionscript/browser 0.0.0-stage → 0.1.0-alpha.0

package/dist/ticker.js

@@ -0,0 +1,143 @@
+import { Ticker } from "@motionscript/core";
+/**
+ * Ticker backed by a Web Audio AudioContext. Scene time advances in
+ * lock-step with `audioContext.currentTime`, so any AudioBufferSourceNodes
+ * scheduled on the same context play perfectly in sync.
+ *
+ * When paused we suspend the context (audio stops, currentTime freezes);
+ * when playing we resume and a rAF loop publishes ticks at the target fps.
+ *
+ * A single silent buffer covering the full timeline is started on play(),
+ * which keeps the context active and gives the browser a stable audio
+ * graph to schedule against even on scenes that contain no audio nodes.
+ */
+export class WebTicker extends Ticker {
+    context;
+    ownsContext;
+    fps;
+    playStartCtxTime = 0;
+    seekOffset = 0;
+    speed = 1;
+    reverse = false;
+    rafId = null;
+    silentSource = null;
+    constructor(opts) {
+        super();
+        this.context = opts.context ?? new AudioContext();
+        this.ownsContext = !opts.context;
+        this.fps = opts.fps;
+    }
+    getContext() {
+        return this.context;
+    }
+    seek(t) {
+        const clamped = Math.max(0, Math.min(t, this.duration));
+        this.seekOffset = clamped;
+        this.playStartCtxTime = this.context.currentTime;
+        this.setCurrentTime(clamped);
+    }
+    /** Resumes the (possibly suspended) context, anchors elapsed-time tracking to the current `context.currentTime`, and starts the silent ticker + rAF tick loop. */
+    async play(speed = 1, reverse = false) {
+        this.speed = speed;
+        this.reverse = reverse;
+        this.seekOffset = this.currentTime;
+        if (this.context.state === "suspended") {
+            await this.context.resume();
+        }
+        this.playStartCtxTime = this.context.currentTime;
+        this.startSilentTicker();
+        super.play(speed, reverse);
+        this.startLoop();
+    }
+    /** Stops the tick loop and silent ticker, then suspends the context — freezing `currentTime` so elapsed-time math stays correct across the pause. */
+    pause() {
+        this.seekOffset = this.currentTime;
+        this.stopLoop();
+        this.stopSilentTicker();
+        if (this.context.state === "running") {
+            this.context.suspend();
+        }
+        super.pause();
+    }
+    /** (Re)starts the silent buffer source covering the remaining timeline — keeps the AudioContext active and gives a stable graph for other AudioBufferSourceNodes to schedule against, per the class-level note. */
+    startSilentTicker() {
+        this.stopSilentTicker();
+        const remaining = Math.max(0.001, this.duration - this.seekOffset);
+        const sampleRate = this.context.sampleRate;
+        const buffer = this.context.createBuffer(1, Math.ceil(remaining * sampleRate), sampleRate);
+        const source = this.context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(this.context.destination);
+        source.start();
+        this.silentSource = source;
+    }
+    stopSilentTicker() {
+        if (this.silentSource) {
+            try {
+                this.silentSource.onended = null;
+                this.silentSource.stop();
+                this.silentSource.disconnect();
+            }
+            catch {
+                // already stopped
+            }
+            this.silentSource = null;
+        }
+    }
+    /** Drives ticks off `requestAnimationFrame`, deriving scene time from elapsed `context.currentTime` (so it stays sample-accurate) and only firing `tick()` when a full frame interval has elapsed. */
+    startLoop() {
+        if (this.rafId !== null)
+            return;
+        const frameDt = 1 / this.fps;
+        let lastTickTime = this.currentTime;
+        const loop = async () => {
+            const elapsed = (this.context.currentTime - this.playStartCtxTime) * this.speed;
+            const next = this.reverse
+                ? this.seekOffset - elapsed
+                : this.seekOffset + elapsed;
+            const clamped = Math.max(0, Math.min(next, this.duration));
+            const ended = this.reverse ? clamped <= 0 : clamped >= this.duration;
+            // Whether this animation frame has carried the playhead onto a new
+            // *scene* frame. This loop runs at the display's refresh rate, which
+            // on a 120 or 144Hz panel is two or three times the rate anything is
+            // rendered at — so the clock advances every time round (the elapsed
+            // maths in `play`/`pause` depend on it being exact) while listeners
+            // hear about it once per frame. The end of the run always reports,
+            // whether or not it landed on a boundary, or the final position would
+            // never reach a host. See `Ticker.setCurrentTime`.
+            const crossed = Math.abs(clamped - lastTickTime) >= frameDt;
+            this.setCurrentTime(clamped, crossed || ended);
+            if (crossed) {
+                lastTickTime = clamped;
+                // Await so that a slow tick (asset load on a scene
+                // boundary) doesn't queue a second concurrent tick.
+                await this.tick();
+            }
+            if (ended) {
+                this.rafId = null;
+                return;
+            }
+            // If pause() cleared the rafId while we were awaiting tick(),
+            // do not resume the loop.
+            if (this.rafId === null)
+                return;
+            this.rafId = requestAnimationFrame(loop);
+        };
+        this.rafId = requestAnimationFrame(loop);
+    }
+    stopLoop() {
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+    }
+    dispose() {
+        this.stopLoop();
+        this.stopSilentTicker();
+        if (this.ownsContext) {
+            this.context.close();
+        }
+        super.dispose();
+    }
+}
+//# sourceMappingURL=ticker.js.map

package/dist/ticker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ticker.js","sourceRoot":"","sources":["../src/ticker.ts"],"names":[],"mappings":"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","sourcesContent":["import { Ticker } from \"@motionscript/core\";\n\n/**\n * Ticker backed by a Web Audio AudioContext. Scene time advances in\n * lock-step with `audioContext.currentTime`, so any AudioBufferSourceNodes\n * scheduled on the same context play perfectly in sync.\n *\n * When paused we suspend the context (audio stops, currentTime freezes);\n * when playing we resume and a rAF loop publishes ticks at the target fps.\n *\n * A single silent buffer covering the full timeline is started on play(),\n * which keeps the context active and gives the browser a stable audio\n * graph to schedule against even on scenes that contain no audio nodes.\n */\nexport class WebTicker extends Ticker {\n    private context: AudioContext;\n    private ownsContext: boolean;\n    private fps: number;\n\n    private playStartCtxTime: number = 0;\n    private seekOffset: number = 0;\n    private speed: number = 1;\n    private reverse: boolean = false;\n\n    private rafId: number | null = null;\n    private silentSource: AudioBufferSourceNode | null = null;\n\n    constructor(opts: { context?: AudioContext; fps: number }) {\n        super();\n        this.context = opts.context ?? new AudioContext();\n        this.ownsContext = !opts.context;\n        this.fps = opts.fps;\n    }\n\n    getContext(): AudioContext {\n        return this.context;\n    }\n\n    seek(t: number): void {\n        const clamped = Math.max(0, Math.min(t, this.duration));\n        this.seekOffset = clamped;\n        this.playStartCtxTime = this.context.currentTime;\n        this.setCurrentTime(clamped);\n    }\n\n    /** Resumes the (possibly suspended) context, anchors elapsed-time tracking to the current `context.currentTime`, and starts the silent ticker + rAF tick loop. */\n    async play(speed: number = 1, reverse: boolean = false): Promise<void> {\n        this.speed = speed;\n        this.reverse = reverse;\n        this.seekOffset = this.currentTime;\n\n        if (this.context.state === \"suspended\") {\n            await this.context.resume();\n        }\n\n        this.playStartCtxTime = this.context.currentTime;\n        this.startSilentTicker();\n        super.play(speed, reverse);\n        this.startLoop();\n    }\n\n    /** Stops the tick loop and silent ticker, then suspends the context — freezing `currentTime` so elapsed-time math stays correct across the pause. */\n    pause(): void {\n        this.seekOffset = this.currentTime;\n        this.stopLoop();\n        this.stopSilentTicker();\n        if (this.context.state === \"running\") {\n            this.context.suspend();\n        }\n        super.pause();\n    }\n\n    /** (Re)starts the silent buffer source covering the remaining timeline — keeps the AudioContext active and gives a stable graph for other AudioBufferSourceNodes to schedule against, per the class-level note. */\n    private startSilentTicker(): void {\n        this.stopSilentTicker();\n        const remaining = Math.max(0.001, this.duration - this.seekOffset);\n        const sampleRate = this.context.sampleRate;\n        const buffer = this.context.createBuffer(1, Math.ceil(remaining * sampleRate), sampleRate);\n        const source = this.context.createBufferSource();\n        source.buffer = buffer;\n        source.connect(this.context.destination);\n        source.start();\n        this.silentSource = source;\n    }\n\n    private stopSilentTicker(): void {\n        if (this.silentSource) {\n            try {\n                this.silentSource.onended = null;\n                this.silentSource.stop();\n                this.silentSource.disconnect();\n            } catch {\n                // already stopped\n            }\n            this.silentSource = null;\n        }\n    }\n\n    /** Drives ticks off `requestAnimationFrame`, deriving scene time from elapsed `context.currentTime` (so it stays sample-accurate) and only firing `tick()` when a full frame interval has elapsed. */\n    private startLoop(): void {\n        if (this.rafId !== null) return;\n        const frameDt = 1 / this.fps;\n        let lastTickTime = this.currentTime;\n\n        const loop = async () => {\n            const elapsed = (this.context.currentTime - this.playStartCtxTime) * this.speed;\n            const next = this.reverse\n                ? this.seekOffset - elapsed\n                : this.seekOffset + elapsed;\n            const clamped = Math.max(0, Math.min(next, this.duration));\n            const ended = this.reverse ? clamped <= 0 : clamped >= this.duration;\n            // Whether this animation frame has carried the playhead onto a new\n            // *scene* frame. This loop runs at the display's refresh rate, which\n            // on a 120 or 144Hz panel is two or three times the rate anything is\n            // rendered at — so the clock advances every time round (the elapsed\n            // maths in `play`/`pause` depend on it being exact) while listeners\n            // hear about it once per frame. The end of the run always reports,\n            // whether or not it landed on a boundary, or the final position would\n            // never reach a host. See `Ticker.setCurrentTime`.\n            const crossed = Math.abs(clamped - lastTickTime) >= frameDt;\n            this.setCurrentTime(clamped, crossed || ended);\n\n            if (crossed) {\n                lastTickTime = clamped;\n                // Await so that a slow tick (asset load on a scene\n                // boundary) doesn't queue a second concurrent tick.\n                await this.tick();\n            }\n\n            if (ended) {\n                this.rafId = null;\n                return;\n            }\n            // If pause() cleared the rafId while we were awaiting tick(),\n            // do not resume the loop.\n            if (this.rafId === null) return;\n            this.rafId = requestAnimationFrame(loop);\n        };\n\n        this.rafId = requestAnimationFrame(loop);\n    }\n\n    private stopLoop(): void {\n        if (this.rafId !== null) {\n            cancelAnimationFrame(this.rafId);\n            this.rafId = null;\n        }\n    }\n\n    dispose(): void {\n        this.stopLoop();\n        this.stopSilentTicker();\n        if (this.ownsContext) {\n            this.context.close();\n        }\n        super.dispose();\n    }\n}\n"]}

package/package.json

@@ -1,6 +1,77 @@
 {
   "name": "@motionscript/browser",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0-alpha.0",
+  "type": "module",
+  "description": "Browser rendering backend for Motion Script, powered by Skia/CanvasKit.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/motionscript-dev/motionscript.git",
+    "directory": "packages/browser"
+  },
+  "homepage": "https://motionscript.dev",
+  "bugs": {
+    "url": "https://github.com/motionscript-dev/motionscript/issues"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "!dist/**/*.tsbuildinfo"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./audio": {
+      "types": "./dist/audio/index.d.ts",
+      "default": "./dist/audio/index.js"
+    }
+  },
+  "peerDependencies": {
+    "@motionscript/canvaskit": "^0.1.0-alpha.0",
+    "@motionscript/core": "^0.1.0-alpha.0"
+  },
+  "devDependencies": {
+    "@types/three": "0.185.1",
+    "@vitest/browser": "4.1.7",
+    "@vitest/browser-playwright": "^4.1.7",
+    "concurrently": "^9.0.0",
+    "eslint": "^9.39.4",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import-x": "^4.16.1",
+    "playwright": "^1.60.0",
+    "three": "0.185.1",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.48.0",
+    "vitest": "^4.1.5",
+    "@motionscript/core": "0.1.0-alpha.0",
+    "@motionscript/canvaskit": "0.1.0-alpha.0"
+  },
+  "dependencies": {
+    "esbuild-wasm": "^0.28.1",
+    "mediabunny": "^1.40.1",
+    "@motionscript/skia-render": "^0.1.0-alpha.0"
+  },
+  "motionscriptBrowser": {
+    "assets": {
+      "esbuild.wasm": "esbuild-wasm/esbuild.wasm"
+    }
+  },
+  "scripts": {
+    "build": "eslint . && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && node ../../scripts/build-browser.mjs",
+    "dev": "concurrently \"tsc -p tsconfig.build.json --watch\" \"tsc-alias -p tsconfig.build.json -w\"",
+    "clean": "rimraf --glob dist .turbo *.tsbuildinfo",
+    "test": "vitest",
+    "lint": "eslint .",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
 }