@elah/core 0.1.0

package/dist/media/video/demuxer/MediabunnyDemuxer.d.ts

@@ -0,0 +1,23 @@
+export interface DemuxerBackend {
+    open(src: string): Promise<void>;
+    getConfig(): VideoDecoderConfig;
+    packets(timeRange: [number, number]): AsyncIterable<EncodedVideoChunk>;
+    seekToKeyframe(time: number): Promise<void>;
+    dispose(): void;
+}
+export type DemuxerFactory = () => DemuxerBackend;
+export declare class MediabunnyDemuxer {
+    private readonly _factory;
+    private _backend;
+    private _src;
+    private _disposed;
+    constructor(factory?: DemuxerFactory);
+    get src(): string | null;
+    get isOpen(): boolean;
+    open(src: string): Promise<void>;
+    getConfig(): VideoDecoderConfig;
+    packets(timeRange: [number, number]): AsyncIterable<EncodedVideoChunk>;
+    seekToKeyframe(time: number): Promise<void>;
+    dispose(): void;
+    private _assertOpen;
+}

package/dist/media/video/demuxer/MediabunnyDemuxer.js

@@ -0,0 +1,88 @@
+export class MediabunnyDemuxer {
+    constructor(factory) {
+        this._backend = null;
+        this._src = null;
+        this._disposed = false;
+        this._factory = factory ?? null;
+    }
+    get src() {
+        return this._src;
+    }
+    get isOpen() {
+        return this._src !== null && !this._disposed;
+    }
+    async open(src) {
+        if (this._disposed) {
+            throw new Error('MediabunnyDemuxer: disposed');
+        }
+        if (this._src !== null) {
+            throw new Error('MediabunnyDemuxer: already open');
+        }
+        const backend = this._factory
+            ? this._factory()
+            : await createDefaultBackend();
+        await backend.open(src);
+        this._backend = backend;
+        this._src = src;
+    }
+    getConfig() {
+        this._assertOpen();
+        return this._backend.getConfig();
+    }
+    packets(timeRange) {
+        this._assertOpen();
+        return this._backend.packets(timeRange);
+    }
+    async seekToKeyframe(time) {
+        this._assertOpen();
+        await this._backend.seekToKeyframe(time);
+    }
+    dispose() {
+        if (this._disposed)
+            return;
+        this._disposed = true;
+        this._backend?.dispose();
+        this._backend = null;
+        this._src = null;
+    }
+    _assertOpen() {
+        if (this._disposed) {
+            throw new Error('MediabunnyDemuxer: disposed');
+        }
+        if (!this._backend || this._src === null) {
+            throw new Error('MediabunnyDemuxer: not open');
+        }
+    }
+}
+async function createDefaultBackend() {
+    let mediabunny;
+    try {
+        const moduleName = 'mediabunny';
+        mediabunny = await import(moduleName);
+    }
+    catch {
+        throw new Error([
+            'MediabunnyDemuxer: mediabunny could not be loaded automatically.',
+            '',
+            'To enable real video decode, inject a DemuxerFactory into GpuRenderer:',
+            '',
+            '  // In your app (e.g. apps/playground/src/createPlaygroundDemuxerFactory.ts):',
+            '  import * as mediabunny from "mediabunny"',
+            '  import { createMediabunnyBackend } from "@elah/editor"',
+            '',
+            '  const renderer = new GpuRenderer({',
+            '    demuxerFactory: () => createMediabunnyBackend(mediabunny),',
+            '  })',
+            '',
+            'Without this, the renderer falls back to SyntheticVideoFrameProvider (dev mode).',
+            'See: apps/playground/src/createPlaygroundDemuxerFactory.ts',
+        ].join('\n'));
+    }
+    const { createMediabunnyBackend, isMediabunnyCompatible } = await import('./createMediabunnyBackend');
+    if (!isMediabunnyCompatible(mediabunny)) {
+        throw new Error('MediabunnyDemuxer: mediabunny module does not expose the expected API ' +
+            '(needs Input, BlobSource, EncodedPacketSink, ALL_FORMATS). ' +
+            'See createMediabunnyBackend.ts.');
+    }
+    return createMediabunnyBackend(mediabunny);
+}

package/dist/media/video/demuxer/createMediabunnyBackend.d.ts

@@ -0,0 +1,32 @@
+import type { DemuxerBackend } from './MediabunnyDemuxer';
+interface MbEncodedPacket {
+    readonly timestamp: number;
+    toEncodedVideoChunk(): EncodedVideoChunk;
+}
+interface MbVideoTrack {
+    getDecoderConfig(): Promise<VideoDecoderConfig | null>;
+}
+interface MbInput {
+    getPrimaryVideoTrack(): Promise<MbVideoTrack | null>;
+    [key: string]: unknown;
+}
+interface MbEncodedPacketSink {
+    getKeyPacket(seconds: number): Promise<MbEncodedPacket | null>;
+    getNextPacket(prev: MbEncodedPacket): Promise<MbEncodedPacket | null>;
+}
+export interface MediabunnyModule {
+    Input: new (opts: {
+        formats: unknown[];
+        source: unknown;
+    }) => MbInput;
+    BlobSource: new (blob: Blob) => unknown;
+    EncodedPacketSink: new (track: MbVideoTrack) => MbEncodedPacketSink;
+    ALL_FORMATS: unknown[];
+    [key: string]: unknown;
+}
+export interface CreateMediabunnyBackendOpts {
+    blobResolver?: (src: string) => Promise<Blob>;
+}
+export declare function isMediabunnyCompatible(module: unknown): module is MediabunnyModule;
+export declare function createMediabunnyBackend(mb: MediabunnyModule, opts?: CreateMediabunnyBackendOpts): DemuxerBackend;
+export {};

package/dist/media/video/demuxer/createMediabunnyBackend.js

@@ -0,0 +1,156 @@
+function _demuxTrace(msg, data) {
+    if (typeof globalThis !== 'undefined' &&
+        globalThis.__DEMUX_DEBUG__) {
+        if (data) {
+            console.log(`[DEMUX-TRACE] ${msg}`, data);
+        }
+        else {
+            console.log(`[DEMUX-TRACE] ${msg}`);
+        }
+    }
+}
+export function isMediabunnyCompatible(module) {
+    if (!module || typeof module !== 'object')
+        return false;
+    const m = module;
+    return (typeof m['Input'] === 'function' &&
+        typeof m['BlobSource'] === 'function' &&
+        typeof m['EncodedPacketSink'] === 'function' &&
+        Array.isArray(m['ALL_FORMATS']));
+}
+export function createMediabunnyBackend(mb, opts = {}) {
+    _assertMediabunnyApi(mb);
+    const resolve = opts.blobResolver ?? defaultBlobResolver;
+    let _sink = null;
+    let _config = null;
+    let _seekPacket = null;
+    let _nextPacket = null;
+    let _lastEndSec = null;
+    let _disposed = false;
+    return {
+        async open(src) {
+            if (_disposed)
+                throw new Error('createMediabunnyBackend: already disposed');
+            const blob = await resolve(src);
+            const input = new mb.Input({
+                formats: mb.ALL_FORMATS,
+                source: new mb.BlobSource(blob),
+            });
+            const track = await input.getPrimaryVideoTrack();
+            if (!track) {
+                throw new Error(`createMediabunnyBackend: no video track found in "${src}". ` +
+                    'Ensure the file is a supported video format (MP4, WebM, MKV, MOV).');
+            }
+            const config = await track.getDecoderConfig();
+            if (!config) {
+                throw new Error(`createMediabunnyBackend: video track codec is not supported by this browser in "${src}". ` +
+                    'Try a file encoded with H.264 (AVC) or VP8/VP9.');
+            }
+            _config = config;
+            _sink = new mb.EncodedPacketSink(track);
+        },
+        getConfig() {
+            _assertOpen(_sink, _config);
+            return _config;
+        },
+        async *packets([startUs, endUs]) {
+            _assertOpen(_sink, _config);
+            const startSec = startUs / 1e6;
+            const endSec = endUs / 1e6;
+            let pkt;
+            let yieldFirstUnconditionally = false;
+            let branch;
+            if (_seekPacket !== null) {
+                pkt = _seekPacket;
+                _seekPacket = null;
+                _nextPacket = null;
+                branch = 'seek';
+            }
+            else if (_nextPacket !== null &&
+                _lastEndSec !== null &&
+                Math.abs(startSec - _lastEndSec) < 1e-9) {
+                pkt = _nextPacket;
+                _nextPacket = null;
+                yieldFirstUnconditionally = true;
+                branch = 'contiguous';
+            }
+            else {
+                pkt = await _sink.getKeyPacket(startSec);
+                _nextPacket = null;
+                branch = 'keyframe';
+            }
+            _demuxTrace('packets() start', {
+                branch,
+                startSec,
+                endSec,
+                lastEndSec: _lastEndSec,
+                contiguityGap: _lastEndSec !== null ? startSec - _lastEndSec : null,
+                firstPktSec: pkt ? pkt.timestamp : null,
+            });
+            const yielded = [];
+            while (pkt !== null && (yieldFirstUnconditionally || pkt.timestamp < endSec)) {
+                if (_disposed)
+                    break;
+                yielded.push(pkt.timestamp);
+                yield pkt.toEncodedVideoChunk();
+                yieldFirstUnconditionally = false;
+                pkt = await _sink.getNextPacket(pkt);
+            }
+            _demuxTrace('packets() done', {
+                branch,
+                yieldedCount: yielded.length,
+                yieldedSec: yielded,
+                nextPktSec: pkt ? pkt.timestamp : null,
+            });
+            _nextPacket = pkt;
+            _lastEndSec = endSec;
+        },
+        async seekToKeyframe(timeUs) {
+            _assertOpen(_sink, _config);
+            const timeSec = timeUs / 1e6;
+            _seekPacket = await _sink.getKeyPacket(timeSec);
+            _nextPacket = null;
+            _lastEndSec = null;
+        },
+        dispose() {
+            _disposed = true;
+            _sink = null;
+            _config = null;
+            _seekPacket = null;
+            _nextPacket = null;
+            _lastEndSec = null;
+        },
+    };
+}
+const defaultBlobResolver = (src) => fetch(src).then((r) => {
+    if (!r.ok) {
+        throw new Error(`createMediabunnyBackend: failed to fetch "${src}" (${r.status} ${r.statusText})`);
+    }
+    return r.blob();
+});
+function _assertOpen(sink, config) {
+    if (!sink || !config) {
+        throw new Error('createMediabunnyBackend: backend not open — call open(src) first');
+    }
+}
+function _assertMediabunnyApi(m) {
+    if (!isMediabunnyCompatible(m)) {
+        throw new Error([
+            'createMediabunnyBackend: the mediabunny module does not expose the expected API.',
+            '',
+            'Required exports: Input, BlobSource, EncodedPacketSink, ALL_FORMATS.',
+            '',
+            'Possible causes:',
+            '  1. mediabunny is not installed. Run: npm install mediabunny',
+            '  2. Incompatible version. This adapter targets mediabunny v1.x.',
+            '  3. Wrong import. Use: import * as mediabunny from "mediabunny"',
+            '',
+            'Usage:',
+            '  import * as mediabunny from "mediabunny"',
+            '  import { createMediabunnyBackend } from "@elah/editor"',
+            '  new GpuRenderer({ demuxerFactory: () => createMediabunnyBackend(mediabunny) })',
+            '',
+            'See: apps/playground/src/createPlaygroundDemuxerFactory.ts for a full example.',
+        ].join('\n'));
+    }
+}

package/dist/media/video/index.d.ts

@@ -0,0 +1,8 @@
+export type { VideoFrameProvider, VideoFrameProviderDeps } from './VideoFrameProvider';
+export { createVideoFrameProvider, MockVideoFrameProvider, SyntheticVideoFrameProvider } from './VideoFrameProvider';
+export { StreamingFrameProducer } from './StreamingFrameProducer';
+export type { StreamingFrameProducerOptions } from './StreamingFrameProducer';
+export { DecoderBackedVideoFrameProvider } from './DecoderBackedVideoFrameProvider';
+export { FrameCache } from './FrameCache';
+export type { DemuxerFactory, DemuxerBackend } from './demuxer/MediabunnyDemuxer';
+export { createMediabunnyBackend, isMediabunnyCompatible } from './demuxer/createMediabunnyBackend';

package/dist/media/video/index.js

@@ -0,0 +1,5 @@
+export { createVideoFrameProvider, MockVideoFrameProvider, SyntheticVideoFrameProvider } from './VideoFrameProvider';
+export { StreamingFrameProducer } from './StreamingFrameProducer';
+export { DecoderBackedVideoFrameProvider } from './DecoderBackedVideoFrameProvider';
+export { FrameCache } from './FrameCache';
+export { createMediabunnyBackend, isMediabunnyCompatible } from './demuxer/createMediabunnyBackend';

package/dist/playback/PlaybackEngine.d.ts

@@ -0,0 +1,50 @@
+export interface PlaybackSnapshot {
+    currentFrame: number;
+    isPlaying: boolean;
+    playbackRate: number;
+    loop: boolean;
+    epoch: number;
+}
+export interface PlaybackEngineConfig {
+    fps: number;
+    getTotalFrames: () => number;
+    now?: () => number;
+}
+type PlaybackListener = (snapshot: PlaybackSnapshot) => void;
+export declare class PlaybackEngine {
+    private anchorFrame;
+    private anchorTime;
+    private _playing;
+    private _rate;
+    private _loop;
+    private _epoch;
+    private _lastNotifiedFrame;
+    private _lastTimeupdateAt;
+    private readonly fps;
+    private readonly getTotalFrames;
+    private readonly now;
+    private rafId;
+    private listeners;
+    private timeupdateListeners;
+    private readonly onVisibility;
+    constructor(config: PlaybackEngineConfig);
+    getFrameAt(t?: number): number;
+    private integratedFrameAt;
+    get currentFrame(): number;
+    get currentTime(): number;
+    get isPlaying(): boolean;
+    get playbackRate(): number;
+    get loop(): boolean;
+    play(): void;
+    pause(): void;
+    seek(frame: number): void;
+    setPlaybackRate(rate: number): void;
+    setLoop(loop: boolean): void;
+    subscribe(listener: PlaybackListener): () => void;
+    subscribeTimeupdate(listener: PlaybackListener): () => void;
+    destroy(): void;
+    private startRAF;
+    private notify;
+    private emit;
+}
+export {};

package/dist/playback/PlaybackEngine.js

@@ -0,0 +1,188 @@
+import { trace } from '../debug/trace';
+export class PlaybackEngine {
+    constructor(config) {
+        this.anchorFrame = 0;
+        this.anchorTime = 0;
+        this._playing = false;
+        this._rate = 1;
+        this._loop = false;
+        this._epoch = 0;
+        this._lastNotifiedFrame = 0;
+        this._lastTimeupdateAt = -Infinity;
+        this.rafId = null;
+        this.listeners = new Set();
+        this.timeupdateListeners = new Set();
+        this.onVisibility = () => {
+            if (typeof document === 'undefined' || !this._playing)
+                return;
+            const t = this.now();
+            if (document.hidden) {
+                this.anchorFrame = this.integratedFrameAt(t);
+                this.anchorTime = t;
+            }
+            else {
+                this.anchorTime = t;
+            }
+        };
+        this.fps = config.fps;
+        this.getTotalFrames = config.getTotalFrames;
+        this.now =
+            config.now ??
+                (() => {
+                    return performance.now() / 1000;
+                });
+        if (typeof document !== 'undefined') {
+            document.addEventListener('visibilitychange', this.onVisibility);
+        }
+    }
+    getFrameAt(t = this.now()) {
+        if (!this._playing)
+            return this.anchorFrame;
+        if (typeof document !== 'undefined' && document.hidden)
+            return this.anchorFrame;
+        return this.integratedFrameAt(t);
+    }
+    integratedFrameAt(t) {
+        return this.anchorFrame + (t - this.anchorTime) * this.fps * this._rate;
+    }
+    get currentFrame() {
+        return Math.floor(this.getFrameAt());
+    }
+    get currentTime() {
+        return this.currentFrame / this.fps;
+    }
+    get isPlaying() {
+        return this._playing;
+    }
+    get playbackRate() {
+        return this._rate;
+    }
+    get loop() {
+        return this._loop;
+    }
+    play() {
+        if (this._playing)
+            return;
+        this.anchorTime = this.now();
+        this._playing = true;
+        this._epoch++;
+        this.notify();
+        this.startRAF();
+    }
+    pause() {
+        if (!this._playing)
+            return;
+        this.anchorFrame = this.getFrameAt();
+        this.anchorTime = this.now();
+        this._playing = false;
+        this._epoch++;
+        this.notify();
+    }
+    seek(frame) {
+        const next = Math.max(0, Math.floor(frame));
+        trace('SET_PLAYHEAD', { target: next, fromAnchor: this.anchorFrame, playing: this._playing });
+        this.anchorFrame = next;
+        this.anchorTime = this.now();
+        this._epoch++;
+        this.notify();
+    }
+    setPlaybackRate(rate) {
+        if (rate === this._rate)
+            return;
+        this.anchorFrame = this.getFrameAt();
+        this.anchorTime = this.now();
+        this._rate = rate;
+        this._epoch++;
+        this.notify();
+    }
+    setLoop(loop) {
+        if (loop === this._loop)
+            return;
+        this._loop = loop;
+        this._epoch++;
+        this.notify();
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    subscribeTimeupdate(listener) {
+        this.timeupdateListeners.add(listener);
+        return () => this.timeupdateListeners.delete(listener);
+    }
+    destroy() {
+        if (this.rafId !== null) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = null;
+        }
+        if (typeof document !== 'undefined') {
+            document.removeEventListener('visibilitychange', this.onVisibility);
+        }
+        this.listeners.clear();
+        this.timeupdateListeners.clear();
+    }
+    startRAF() {
+        if (this.rafId !== null)
+            return;
+        const tick = () => {
+            if (!this._playing) {
+                this.rafId = null;
+                return;
+            }
+            this.rafId = requestAnimationFrame(tick);
+            const f = this.getFrameAt();
+            const intF = Math.floor(f);
+            const totalF = Math.max(this.getTotalFrames(), this.fps * 10);
+            if (intF >= totalF) {
+                if (this._loop) {
+                    this.anchorFrame = 0;
+                    this.anchorTime = this.now();
+                    this._lastNotifiedFrame = 0;
+                    this._epoch++;
+                    this.notify();
+                }
+                else {
+                    this.anchorFrame = totalF - 1;
+                    this.anchorTime = this.now();
+                    this._playing = false;
+                    this.rafId = null;
+                    this._lastNotifiedFrame = totalF - 1;
+                    this._epoch++;
+                    this.notify();
+                }
+                return;
+            }
+            if (intF !== this._lastNotifiedFrame) {
+                this._lastNotifiedFrame = intF;
+                this.notify();
+            }
+        };
+        this._lastNotifiedFrame = Math.floor(this.getFrameAt());
+        this.rafId = requestAnimationFrame(tick);
+    }
+    notify() {
+        trace('PLAYHEAD', { frame: this.currentFrame, epoch: this._epoch, playing: this._playing });
+        const snapshot = {
+            currentFrame: this.currentFrame,
+            isPlaying: this._playing,
+            playbackRate: this._rate,
+            loop: this._loop,
+            epoch: this._epoch,
+        };
+        this.emit(this.listeners, snapshot);
+        const t = this.now();
+        if (t - this._lastTimeupdateAt >= 0.1) {
+            this._lastTimeupdateAt = t;
+            this.emit(this.timeupdateListeners, snapshot);
+        }
+    }
+    emit(set, snapshot) {
+        set.forEach((fn) => {
+            try {
+                fn(snapshot);
+            }
+            catch {
+            }
+        });
+    }
+}

package/dist/renderer/gpu/GpuRenderer.d.ts

@@ -0,0 +1,38 @@
+import type { Scene } from '../../resolver/scene';
+import type { Renderer } from '../types';
+import { VideoLayer } from './layers/VideoLayer';
+import type { RendererOptions } from './types';
+export declare class GpuRenderer implements Renderer {
+    private readonly _options;
+    private _glCtx;
+    private _renderGraph;
+    private _texturePool;
+    private _videoLayer;
+    private _textLayer;
+    private _imageLayer;
+    private _debugPanel;
+    private _container;
+    private _mounted;
+    private _debugEnabled;
+    private _lastScene;
+    private _viewport;
+    private _lastRenderTime;
+    private _fps;
+    private _lastRenderDurationMs;
+    private _noOpTicks;
+    constructor(options?: RendererOptions);
+    mount(container: HTMLElement): void;
+    resize(cssWidth: number, cssHeight: number, dpr?: number): void;
+    render(scene: Scene): void;
+    getCanvas(): HTMLCanvasElement | null;
+    setDebug(enabled: boolean): void;
+    dispose(): void;
+    get videoLayer(): VideoLayer | null;
+    get fps(): number;
+    get lastRenderDurationMs(): number;
+    private _buildLayerContext;
+    private _attachDebugPanel;
+    private _buildDebugSnapshot;
+    private _handleContextLost;
+    private _handleContextRestored;
+}