akarisub 0.2.0 → 0.2.1

package/dist/ts/ts/akarisub.js

@@ -0,0 +1,1079 @@
+/**
+ * Main AkariSub class - TypeScript implementation.
+ * High-level ASS/SSA subtitle renderer for web browsers using libass.
+ */
+import { webYCbCrMap, colorMatrixConversionMap, computeCanvasSize, getVideoPosition, fixAlpha } from './utils';
+import { WebGPURenderer, isWebGPUSupported } from './webgpu-renderer';
+import { WebGL2Renderer, isWebGL2Supported } from './webgl2-renderer';
+const DEFAULT_RENDER_AHEAD = 0.008;
+const DEFAULT_PIPELINE_LATENCY_MS = DEFAULT_RENDER_AHEAD * 1000;
+const DEFAULT_WEBKIT_PIPELINE_LATENCY_MS = 16;
+const isLikelyWebKit = () => {
+    if (typeof navigator === 'undefined')
+        return false;
+    const userAgent = navigator.userAgent || '';
+    const vendor = navigator.vendor || '';
+    const isIOSWebKit = /\b(iPhone|iPad|iPod)\b/i.test(userAgent);
+    if (!/AppleWebKit/i.test(userAgent))
+        return false;
+    if (isIOSWebKit)
+        return true;
+    if (/\b(Chrome|Chromium|Edg|OPR|SamsungBrowser|Firefox)\b/i.test(userAgent)) {
+        return false;
+    }
+    return vendor.includes('Apple');
+};
+/**
+ * AkariSub - JavaScript ASS/SSA Subtitle Renderer
+ *
+ * Renders ASS/SSA subtitles on an HTML5 video element using libass compiled to WebAssembly.
+ *
+ * @example
+ * ```typescript
+ * const renderer = new AkariSub({
+ *   video: document.querySelector('video'),
+ *   subUrl: '/subtitles/example.ass',
+ *   workerUrl: '/akarisub-worker.js'
+ * });
+ *
+ * // Later, cleanup
+ * renderer.destroy();
+ * ```
+ */
+export default class AkariSub extends EventTarget {
+    static MAX_PENDING_DEMANDS = 3;
+    // Feature detection cache (static)
+    static _hasAlphaBug = null;
+    static _hasBitmapBug = null;
+    // Instance properties
+    _loaded;
+    _init;
+    _onDemandRender;
+    _offscreenRender;
+    _video;
+    _videoWidth = 0;
+    _videoHeight = 0;
+    _videoColorSpace = null;
+    _canvas;
+    _canvasParent;
+    _bufferCanvas;
+    _bufferCtx;
+    _canvasctrl;
+    _ctx = null;
+    _lastRenderTime = 0;
+    _playstate = true;
+    _destroyed = false;
+    _workerReady = false;
+    _ro;
+    _worker;
+    _pendingDemandTimes = [];
+    _isLikelyWebKit;
+    _activeDemandStartedAt = 0;
+    _smoothedDemandLatencyMs;
+    // Bound methods for event listeners
+    _boundResize;
+    _boundTimeUpdate;
+    _boundSetRate;
+    _boundUpdateColorSpace;
+    _boundHandleRVFC;
+    // GPU renderer (WebGPU or WebGL2 – whichever initialises first in the fallback chain)
+    _gpuRenderer = null;
+    _rendererType = 'canvas2d';
+    _onCanvasFallback;
+    // Cached render data to reduce allocations
+    _lastRenderWidth = 0;
+    _lastRenderHeight = 0;
+    _gpuBitmapImages = [];
+    // Public properties
+    timeOffset;
+    debug;
+    prescaleFactor;
+    prescaleHeightLimit;
+    maxRenderHeight;
+    busy = false;
+    renderAhead;
+    constructor(options) {
+        super();
+        if (!globalThis.Worker) {
+            throw this.destroy(new Error('Worker not supported'));
+        }
+        if (!options) {
+            throw this.destroy(new Error('No options provided'));
+        }
+        this._loaded = new Promise((resolve) => {
+            this._init = resolve;
+        });
+        this._isLikelyWebKit = isLikelyWebKit();
+        this._smoothedDemandLatencyMs = this._isLikelyWebKit
+            ? DEFAULT_WEBKIT_PIPELINE_LATENCY_MS
+            : DEFAULT_PIPELINE_LATENCY_MS;
+        // Run feature tests
+        const test = AkariSub._test();
+        this._onDemandRender = 'requestVideoFrameCallback' in HTMLVideoElement.prototype && (options.onDemandRender ?? true);
+        this._onCanvasFallback = options.onCanvasFallback;
+        const canUseGPURenderer = !this._isLikelyWebKit && !options.canvas && (isWebGPUSupported() || isWebGL2Supported());
+        const shouldUseAsyncRender = typeof createImageBitmap !== 'undefined' && (options.asyncRender ?? !this._isLikelyWebKit);
+        // Don't support offscreen rendering on custom canvases
+        this._offscreenRender =
+            'transferControlToOffscreen' in HTMLCanvasElement.prototype &&
+                !options.canvas &&
+                !canUseGPURenderer &&
+                (options.offscreenRender ?? true);
+        this.timeOffset = options.timeOffset || 0;
+        this._video = options.video;
+        this._canvas = options.canvas;
+        if (this._video && !this._canvas) {
+            this._canvasParent = document.createElement('div');
+            this._canvasParent.className = 'AkariSub';
+            this._canvasParent.style.position = 'relative';
+            this._canvas = this._createCanvas();
+            this._video.insertAdjacentElement('afterend', this._canvasParent);
+        }
+        else if (!this._canvas) {
+            throw this.destroy(new Error("Don't know where to render: you should give video or canvas in options."));
+        }
+        this._bufferCanvas = document.createElement('canvas');
+        const bufferCtx = this._bufferCanvas.getContext('2d');
+        if (!bufferCtx)
+            throw this.destroy(new Error('Canvas rendering not supported'));
+        this._bufferCtx = bufferCtx;
+        // Try GPU renderers first (WebGPU → WebGL2 → Canvas2D)
+        if (canUseGPURenderer) {
+            this._initGPURenderer();
+        }
+        else if (!this._offscreenRender) {
+            this._ctx = this._canvas.getContext('2d', { alpha: true, desynchronized: true });
+        }
+        this._canvasctrl = this._offscreenRender
+            ? this._canvas.transferControlToOffscreen()
+            : this._canvas;
+        this._lastRenderTime = 0;
+        this.debug = !!options.debug;
+        this.prescaleFactor = options.prescaleFactor || 1.0;
+        this.prescaleHeightLimit = options.prescaleHeightLimit || 1080;
+        this.maxRenderHeight = options.maxRenderHeight || 0;
+        this.renderAhead = options.renderAhead ?? DEFAULT_RENDER_AHEAD;
+        // Bind methods
+        this._boundResize = this.resize.bind(this);
+        this._boundTimeUpdate = this._timeupdate.bind(this);
+        this._boundSetRate = () => this.setRate(this._video.playbackRate);
+        this._boundUpdateColorSpace = this._updateColorSpace.bind(this);
+        this._boundHandleRVFC = this._handleRVFC.bind(this);
+        if (this._video) {
+            this.setVideo(this._video);
+        }
+        if (this._onDemandRender) {
+            this.busy = false;
+            this._pendingDemandTimes.length = 0;
+        }
+        // Create worker
+        this._worker = new Worker(options.workerUrl || 'akarisub-worker.js');
+        this._worker.onmessage = (e) => this._onmessage(e);
+        this._worker.onerror = (e) => this._error(e);
+        // Initialize worker after feature tests complete
+        test.then(() => {
+            const initMessage = {
+                target: 'init',
+                wasmUrl: options.wasmUrl ?? 'akarisub-worker.wasm',
+                asyncRender: shouldUseAsyncRender,
+                fullTrackWarmup: options.fullTrackWarmup ?? false,
+                onDemandRender: this._onDemandRender,
+                initialTime: (this._video?.currentTime ?? 0) + this.timeOffset,
+                width: this._canvasctrl.width || 0,
+                height: this._canvasctrl.height || 0,
+                blendMode: options.blendMode ?? 'wasm',
+                subUrl: options.subUrl,
+                subContent: options.subContent || null,
+                encryptedSubContent: options.encryptedSubContent || null,
+                fonts: options.fonts || [],
+                availableFonts: options.availableFonts || { 'liberation sans': './default.woff2' },
+                fallbackFonts: options.fallbackFonts || ['liberation sans'],
+                debug: this.debug,
+                targetFps: options.targetFps || 24,
+                dropAllAnimations: options.dropAllAnimations,
+                dropAllBlur: options.dropAllBlur,
+                clampPos: options.clampPos,
+                libassMemoryLimit: options.libassMemoryLimit ?? 128,
+                libassGlyphLimit: options.libassGlyphLimit ?? 2048,
+                useLocalFonts: typeof globalThis.queryLocalFonts !== 'undefined' && (options.useLocalFonts ?? true),
+                hasBitmapBug: AkariSub._hasBitmapBug
+            };
+            this._worker.postMessage(initMessage, AkariSub._getSubtitleTransfers(options.subContent, options.encryptedSubContent));
+            if (this._offscreenRender) {
+                this.sendMessage('offscreenCanvas', {}, [this._canvasctrl]);
+            }
+        });
+    }
+    // ==========================================================================
+    // Static Methods
+    // ==========================================================================
+    static async _testImageBugs() {
+        if (AkariSub._hasBitmapBug !== null)
+            return;
+        const canvas1 = document.createElement('canvas');
+        const ctx1 = canvas1.getContext('2d', { willReadFrequently: true });
+        if (!ctx1)
+            throw new Error('Canvas rendering not supported');
+        // Test ImageData constructor
+        if (typeof ImageData.prototype.constructor === 'function') {
+            try {
+                new ImageData(new Uint8ClampedArray([0, 0, 0, 0]), 1, 1);
+            }
+            catch {
+                console.log('Detected that ImageData is not constructable despite browser saying so');
+            }
+        }
+        const canvas2 = document.createElement('canvas');
+        const ctx2 = canvas2.getContext('2d', { willReadFrequently: true });
+        if (!ctx2)
+            throw new Error('Canvas rendering not supported');
+        canvas1.width = canvas2.width = 1;
+        canvas1.height = canvas2.height = 1;
+        ctx1.clearRect(0, 0, 1, 1);
+        ctx2.clearRect(0, 0, 1, 1);
+        const prePut = ctx2.getImageData(0, 0, 1, 1).data;
+        ctx1.putImageData(new ImageData(new Uint8ClampedArray([0, 255, 0, 0]), 1, 1), 0, 0);
+        ctx2.drawImage(canvas1, 0, 0);
+        const postPut = ctx2.getImageData(0, 0, 1, 1).data;
+        AkariSub._hasAlphaBug = prePut[1] !== postPut[1];
+        if (AkariSub._hasAlphaBug) {
+            console.log('Detected a browser having issue with transparent pixels, applying workaround');
+        }
+        if (typeof createImageBitmap !== 'undefined') {
+            const subarray = new Uint8ClampedArray([255, 0, 255, 0, 255]).subarray(1, 5);
+            ctx2.drawImage(await createImageBitmap(new ImageData(subarray, 1)), 0, 0);
+            const { data } = ctx2.getImageData(0, 0, 1, 1);
+            AkariSub._hasBitmapBug = false;
+            for (let i = 0; i < data.length; i++) {
+                if (Math.abs(subarray[i] - data[i]) > 15) {
+                    AkariSub._hasBitmapBug = true;
+                    console.log('Detected a browser having issue with partial bitmaps, applying workaround');
+                    break;
+                }
+            }
+        }
+        else {
+            AkariSub._hasBitmapBug = false;
+        }
+        canvas1.remove();
+        canvas2.remove();
+    }
+    static async _test() {
+        await AkariSub._testImageBugs();
+    }
+    static _getSubtitleTransfers(subContent, encryptedSubContent) {
+        const transfers = [];
+        if (subContent instanceof ArrayBuffer) {
+            transfers.push(subContent);
+        }
+        else if (subContent instanceof Uint8Array) {
+            transfers.push(subContent.buffer);
+        }
+        if (encryptedSubContent?.encrypted) {
+            transfers.push(encryptedSubContent.encrypted);
+        }
+        for (const chunk of encryptedSubContent?.encryptedChunks || []) {
+            transfers.push(chunk);
+        }
+        return transfers;
+    }
+    // ==========================================================================
+    // GPU Renderer Management (WebGPU → WebGL2 → Canvas2D fallback)
+    // ==========================================================================
+    /**
+     * Attempt to initialise the best available GPU renderer.
+     */
+    async _initGPURenderer() {
+        if (isWebGPUSupported()) {
+            try {
+                const renderer = new WebGPURenderer();
+                await renderer.init();
+                if (!this._canvas)
+                    return;
+                await renderer.setCanvas(this._canvas, Math.max(1, this._canvas.width || 1), Math.max(1, this._canvas.height || 1));
+                this._gpuRenderer = renderer;
+                this._rendererType = 'webgpu';
+                console.log('[AkariSub] Using WebGPU renderer');
+                return;
+            }
+            catch (error) {
+                console.warn('[AkariSub] WebGPU init failed, trying WebGL2:', error);
+            }
+        }
+        if (isWebGL2Supported()) {
+            try {
+                const renderer = new WebGL2Renderer();
+                await renderer.init();
+                if (!this._canvas)
+                    return;
+                await renderer.setCanvas(this._canvas, Math.max(1, this._canvas.width || 1), Math.max(1, this._canvas.height || 1));
+                this._gpuRenderer = renderer;
+                this._rendererType = 'webgl2';
+                console.log('[AkariSub] Using WebGL2 renderer');
+                return;
+            }
+            catch (error) {
+                console.warn('[AkariSub] WebGL2 init failed, falling back to Canvas2D:', error);
+            }
+        }
+        this._rendererType = 'canvas2d';
+        if (!this._offscreenRender && !this._ctx) {
+            this._ctx = this._canvas.getContext('2d', { alpha: true, desynchronized: true });
+        }
+        this.sendMessage('setAsyncRender', { value: false });
+        this._onCanvasFallback?.();
+    }
+    /** Returns which renderer backend is currently active. */
+    get rendererType() {
+        return this._rendererType;
+    }
+    /** @deprecated Use rendererType === 'webgpu' */
+    get isUsingWebGPU() {
+        return this._rendererType === 'webgpu';
+    }
+    /** Returns true when a hardware-accelerated GPU renderer is active. */
+    get isUsingGPURenderer() {
+        return this._gpuRenderer !== null;
+    }
+    // ==========================================================================
+    // Canvas Management
+    // ==========================================================================
+    _createCanvas() {
+        this._canvas = document.createElement('canvas');
+        this._canvas.style.display = 'block';
+        this._canvas.style.position = 'absolute';
+        this._canvas.style.pointerEvents = 'none';
+        this._canvasParent.appendChild(this._canvas);
+        return this._canvas;
+    }
+    /**
+     * Resize the canvas to given parameters. Auto-generated if values are omitted.
+     */
+    resize(width = 0, height = 0, top = 0, left = 0, force = this._video?.paused ?? false) {
+        if ((!width || !height) && this._video) {
+            const videoSize = getVideoPosition(this._video);
+            let renderSize;
+            if (this._videoWidth) {
+                const widthRatio = this._video.videoWidth / this._videoWidth;
+                const heightRatio = this._video.videoHeight / this._videoHeight;
+                renderSize = computeCanvasSize((videoSize.width || 0) / widthRatio, (videoSize.height || 0) / heightRatio, this.prescaleFactor, this.prescaleHeightLimit, this.maxRenderHeight);
+            }
+            else {
+                renderSize = computeCanvasSize(videoSize.width || 0, videoSize.height || 0, this.prescaleFactor, this.prescaleHeightLimit, this.maxRenderHeight);
+            }
+            width = renderSize.width;
+            height = renderSize.height;
+            if (this._canvasParent) {
+                top = videoSize.y - (this._canvasParent.getBoundingClientRect().top - this._video.getBoundingClientRect().top);
+                left = videoSize.x;
+            }
+            this._canvas.style.width = videoSize.width + 'px';
+            this._canvas.style.height = videoSize.height + 'px';
+        }
+        this._canvas.style.top = top + 'px';
+        this._canvas.style.left = left + 'px';
+        if (width > 0 && height > 0) {
+            this._canvasctrl.width = width;
+            this._canvasctrl.height = height;
+        }
+        // Update GPU renderer size if using a GPU renderer
+        if (this._gpuRenderer && width > 0 && height > 0) {
+            this._gpuRenderer.updateSize(width, height);
+        }
+        if (force && this.busy === false) {
+            this.busy = true;
+        }
+        else {
+            force = false;
+        }
+        this.sendMessage('canvas', {
+            width,
+            height,
+            videoWidth: this._videoWidth || this._video?.videoWidth || 0,
+            videoHeight: this._videoHeight || this._video?.videoHeight || 0,
+            force
+        });
+    }
+    // ==========================================================================
+    // Video Management
+    // ==========================================================================
+    _timeupdate(event) {
+        const eventmap = {
+            seeking: true,
+            waiting: true,
+            playing: false
+        };
+        const playing = eventmap[event.type];
+        if (playing != null)
+            this._playstate = playing;
+        this.setCurrentTime(this._video.paused || this._playstate, this._video.currentTime + this.timeOffset);
+    }
+    /**
+     * Change the video to use as target for event listeners.
+     */
+    setVideo(video) {
+        if (video instanceof HTMLVideoElement) {
+            this._removeListeners();
+            this._video = video;
+            if (this._onDemandRender) {
+                if (!this._destroyed && this._video === video) {
+                    ;
+                    video.requestVideoFrameCallback(this._boundHandleRVFC);
+                }
+            }
+            else {
+                this._playstate = video.paused;
+                video.addEventListener('timeupdate', this._boundTimeUpdate, false);
+                video.addEventListener('progress', this._boundTimeUpdate, false);
+                video.addEventListener('waiting', this._boundTimeUpdate, false);
+                video.addEventListener('seeking', this._boundTimeUpdate, false);
+                video.addEventListener('playing', this._boundTimeUpdate, false);
+                video.addEventListener('ratechange', this._boundSetRate, false);
+                video.addEventListener('resize', this._boundResize, false);
+            }
+            if ('VideoFrame' in window) {
+                video.addEventListener('loadedmetadata', this._boundUpdateColorSpace, false);
+                if (video.readyState > 2)
+                    this._updateColorSpace();
+            }
+            if (video.videoWidth > 0)
+                this.resize();
+            if (typeof ResizeObserver !== 'undefined') {
+                if (!this._ro)
+                    this._ro = new ResizeObserver(() => this.resize());
+                this._ro.observe(video);
+            }
+        }
+        else {
+            this._error(new Error('Video element invalid!'));
+        }
+    }
+    /**
+     * Run a benchmark on the worker.
+     */
+    runBenchmark() {
+        this.sendMessage('runBenchmark');
+    }
+    // ==========================================================================
+    // Track Management
+    // ==========================================================================
+    /**
+     * Overwrites the current subtitle content by URL.
+     */
+    setTrackByUrl(url) {
+        this.sendMessage('setTrackByUrl', { url });
+        this._reAttachOffscreen();
+        if (this._ctx)
+            this._ctx.filter = 'none';
+    }
+    /**
+     * Overwrites the current subtitle content.
+     */
+    setTrack(content) {
+        this.sendMessage('setTrack', { content }, AkariSub._getSubtitleTransfers(content));
+        this._reAttachOffscreen();
+        if (this._ctx)
+            this._ctx.filter = 'none';
+    }
+    /**
+     * Overwrites the current subtitle content with encrypted v2 payloads.
+     * Decryption happens inside the AkariSub worker so plaintext ASS text is not
+     * materialized in the main thread.
+     */
+    setEncryptedTrack(content) {
+        this.sendMessage('setEncryptedTrack', { content }, AkariSub._getSubtitleTransfers(undefined, content));
+        this._reAttachOffscreen();
+        if (this._ctx)
+            this._ctx.filter = 'none';
+    }
+    /**
+     * Free currently used subtitle track.
+     */
+    freeTrack() {
+        this.sendMessage('freeTrack');
+    }
+    // ==========================================================================
+    // Playback Control
+    // ==========================================================================
+    /**
+     * Sets the playback state of the media.
+     */
+    setIsPaused(isPaused) {
+        this.sendMessage('video', { isPaused });
+    }
+    /**
+     * Sets the playback rate of the media.
+     */
+    setRate(rate) {
+        this.sendMessage('video', { rate });
+    }
+    /**
+     * Sets the current time, playback state and rate of the subtitles.
+     */
+    setCurrentTime(isPaused, currentTime, rate) {
+        this.sendMessage('video', {
+            isPaused,
+            currentTime,
+            rate,
+            colorSpace: this._videoColorSpace
+        });
+    }
+    // ==========================================================================
+    // Event Management
+    // ==========================================================================
+    /**
+     * Create a new ASS event directly.
+     */
+    createEvent(event) {
+        this.sendMessage('createEvent', { event });
+    }
+    /**
+     * Overwrite the data of the event with the specified index.
+     */
+    setEvent(event, index) {
+        this.sendMessage('setEvent', { event, index });
+    }
+    /**
+     * Remove the event with the specified index.
+     */
+    removeEvent(index) {
+        this.sendMessage('removeEvent', { index });
+    }
+    /**
+     * Get all ASS events.
+     */
+    async getEvents() {
+        const data = await this._fetchFromWorker({ target: 'getEvents' });
+        return data.events ?? [];
+    }
+    // ==========================================================================
+    // Style Management
+    // ==========================================================================
+    /**
+     * Set a style override.
+     */
+    styleOverride(style) {
+        this.sendMessage('styleOverride', { style });
+    }
+    /**
+     * Disable style override.
+     */
+    disableStyleOverride() {
+        this.sendMessage('disableStyleOverride');
+    }
+    /**
+     * Create a new ASS style directly.
+     */
+    createStyle(style) {
+        this.sendMessage('createStyle', { style });
+    }
+    /**
+     * Overwrite the data of the style with the specified index.
+     */
+    setStyle(style, index) {
+        this.sendMessage('setStyle', { style, index });
+    }
+    /**
+     * Remove the style with the specified index.
+     */
+    removeStyle(index) {
+        this.sendMessage('removeStyle', { index });
+    }
+    /**
+     * Get all ASS styles.
+     */
+    async getStyles() {
+        const data = await this._fetchFromWorker({ target: 'getStyles' });
+        return data.styles ?? [];
+    }
+    // ==========================================================================
+    // Font Management
+    // ==========================================================================
+    /**
+     * Adds a font to the renderer.
+     */
+    addFont(font) {
+        this.sendMessage('addFont', { font });
+    }
+    /**
+     * Changes the font family of the default font.
+     */
+    setDefaultFont(font) {
+        this.sendMessage('defaultFont', { font });
+    }
+    // ==========================================================================
+    // Performance Stats
+    // ==========================================================================
+    /**
+     * Get real-time performance statistics.
+     */
+    async getStats() {
+        const data = await this._fetchFromWorker({ target: 'getStats' });
+        const stats = data.stats;
+        return {
+            framesRendered: stats.framesRendered ?? 0,
+            framesDropped: stats.framesDropped ?? 0,
+            avgRenderTime: stats.avgRenderTime ?? 0,
+            maxRenderTime: stats.maxRenderTime ?? 0,
+            minRenderTime: stats.minRenderTime ?? 0,
+            lastRenderTime: stats.lastRenderTime ?? 0,
+            pendingRenders: stats.pendingRenders ?? 0,
+            totalEvents: stats.totalEvents ?? 0,
+            cacheHits: stats.cacheHits ?? 0,
+            cacheMisses: stats.cacheMisses ?? 0,
+            renderFps: stats.avgRenderTime && stats.avgRenderTime > 0 ? Math.round(1000 / stats.avgRenderTime) : 0,
+            usingWorker: true,
+            offscreenRender: this._offscreenRender,
+            onDemandRender: this._onDemandRender
+        };
+    }
+    /**
+     * Reset performance statistics counters.
+     */
+    async resetStats() {
+        await this._fetchFromWorker({ target: 'resetStats' });
+    }
+    /**
+     * Get event count
+     */
+    async getEventCount() {
+        const data = await this._fetchFromWorker({ target: 'getEventCount' });
+        return data.count;
+    }
+    /**
+     * Get style count
+     */
+    async getStyleCount() {
+        const data = await this._fetchFromWorker({ target: 'getStyleCount' });
+        return data.count;
+    }
+    // ==========================================================================
+    // Private Methods
+    // ==========================================================================
+    _sendLocalFont(name) {
+        try {
+            ;
+            globalThis.queryLocalFonts().then((fontData) => {
+                const font = fontData?.find((obj) => obj.fullName.toLowerCase() === name);
+                if (font) {
+                    font.blob().then((blob) => {
+                        blob.arrayBuffer().then((buffer) => {
+                            this.addFont(new Uint8Array(buffer));
+                        });
+                    });
+                }
+            });
+        }
+        catch (e) {
+            console.warn('Local fonts API:', e);
+        }
+    }
+    _getLocalFont(data) {
+        try {
+            if (navigator?.permissions?.query) {
+                ;
+                navigator.permissions.query({ name: 'local-fonts' }).then((permission) => {
+                    if (permission.state === 'granted') {
+                        this._sendLocalFont(data.font);
+                    }
+                });
+            }
+            else {
+                this._sendLocalFont(data.font);
+            }
+        }
+        catch (e) {
+            console.warn('Local fonts API:', e);
+        }
+    }
+    _unbusy() {
+        this._observeDemandCompletion();
+        if (this._pendingDemandTimes.length > 0) {
+            if (this._pendingDemandTimes.length > 1) {
+                const latestDemand = this._pendingDemandTimes[this._pendingDemandTimes.length - 1];
+                this._pendingDemandTimes.length = 0;
+                this._pendingDemandTimes.push(latestDemand);
+            }
+            const nextDemand = this._pendingDemandTimes.shift();
+            if (nextDemand) {
+                this._demandRender(nextDemand);
+                return;
+            }
+        }
+        this.busy = false;
+    }
+    _markDemandDispatched() {
+        if (!this._onDemandRender)
+            return;
+        this._activeDemandStartedAt = performance.now();
+    }
+    _observeDemandCompletion() {
+        if (!this._onDemandRender || this._activeDemandStartedAt === 0)
+            return;
+        const elapsed = performance.now() - this._activeDemandStartedAt;
+        this._activeDemandStartedAt = 0;
+        if (!Number.isFinite(elapsed) || elapsed <= 0)
+            return;
+        this._smoothedDemandLatencyMs = this._smoothedDemandLatencyMs <= 0
+            ? elapsed
+            : this._smoothedDemandLatencyMs * 0.75 + elapsed * 0.25;
+    }
+    _getDemandPipelineLeadSeconds(now, metadata) {
+        const expectedDisplayTime = metadata.expectedDisplayTime ?? metadata.presentationTime ?? now;
+        const displayLeadSeconds = Math.max(0, expectedDisplayTime - now) / 1000;
+        return Math.max(0, this._smoothedDemandLatencyMs / 1000 - displayLeadSeconds);
+    }
+    _enqueueDemand(metadata) {
+        const queue = this._pendingDemandTimes;
+        if (queue.length > 0) {
+            const lastQueued = queue[queue.length - 1];
+            if (Math.abs(lastQueued.mediaTime - metadata.mediaTime) > 0.25) {
+                queue.length = 0;
+            }
+        }
+        if (queue.length >= AkariSub.MAX_PENDING_DEMANDS) {
+            queue.shift();
+        }
+        queue.push(metadata);
+    }
+    _handleRVFC(now, metadata) {
+        if (this._destroyed)
+            return;
+        // Get the video's playback rate to correctly scale time offsets
+        const playbackRate = this._video?.playbackRate ?? 1;
+        const pipelineLeadSeconds = this._getDemandPipelineLeadSeconds(now, metadata);
+        const renderTime = metadata.mediaTime + (pipelineLeadSeconds + this.renderAhead) * playbackRate;
+        const demandData = {
+            mediaTime: renderTime,
+            width: metadata.width,
+            height: metadata.height
+        };
+        if (!this._workerReady) {
+            this._enqueueDemand(demandData);
+            this._video.requestVideoFrameCallback(this._boundHandleRVFC);
+            return;
+        }
+        if (this.busy) {
+            this._enqueueDemand(demandData);
+        }
+        else {
+            this.busy = true;
+            this._demandRender(demandData);
+        }
+        ;
+        this._video.requestVideoFrameCallback(this._boundHandleRVFC);
+    }
+    _demandRender(metadata) {
+        if (metadata.width !== this._videoWidth || metadata.height !== this._videoHeight) {
+            this._videoWidth = metadata.width;
+            this._videoHeight = metadata.height;
+            this.resize();
+        }
+        this._markDemandDispatched();
+        this.sendMessage('demand', { time: metadata.mediaTime + this.timeOffset });
+    }
+    _detachOffscreen() {
+        if (!this._offscreenRender || this._ctx)
+            return;
+        this._canvas.remove();
+        this._createCanvas();
+        this._canvasctrl = this._canvas;
+        this._ctx = this._canvasctrl.getContext('2d', { alpha: true, desynchronized: true });
+        this.sendMessage('detachOffscreen');
+        this.busy = false;
+        this._activeDemandStartedAt = 0;
+        this._pendingDemandTimes.length = 0;
+        this.resize(0, 0, 0, 0, true);
+    }
+    _reAttachOffscreen() {
+        if (!this._offscreenRender || !this._ctx)
+            return;
+        this._canvas.remove();
+        this._createCanvas();
+        this._canvasctrl = this._canvas.transferControlToOffscreen();
+        this._ctx = false;
+        this.sendMessage('offscreenCanvas', {}, [this._canvasctrl]);
+        this.resize(0, 0, 0, 0, true);
+    }
+    _updateColorSpace() {
+        ;
+        this._video.requestVideoFrameCallback(() => {
+            try {
+                const frame = new globalThis.VideoFrame(this._video);
+                this._videoColorSpace = webYCbCrMap[frame.colorSpace.matrix] ?? null;
+                frame.close();
+                this.sendMessage('getColorSpace');
+            }
+            catch (e) {
+                console.warn(e);
+            }
+        });
+    }
+    _verifyColorSpace(data) {
+        const { subtitleColorSpace, videoColorSpace = this._videoColorSpace } = data;
+        if (!subtitleColorSpace || !videoColorSpace)
+            return;
+        if (subtitleColorSpace === videoColorSpace)
+            return;
+        this._detachOffscreen();
+        const matrix = colorMatrixConversionMap[subtitleColorSpace]?.[videoColorSpace];
+        if (matrix && this._ctx) {
+            this._ctx.filter = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feColorMatrix type='matrix' values='${matrix} 0 0 0 0 0 1 0'/></filter></svg>#f")`;
+        }
+    }
+    _render(data) {
+        try {
+            const dataWidth = data.width;
+            const dataHeight = data.height;
+            if (this.debug) {
+                data.times.IPCTime = Date.now() - (data.times.JSRenderTime || 0);
+            }
+            // Check if canvas size changed
+            const sizeChanged = this._canvasctrl.width !== dataWidth || this._canvasctrl.height !== dataHeight;
+            if (sizeChanged) {
+                this._canvasctrl.width = dataWidth;
+                this._canvasctrl.height = dataHeight;
+                this._lastRenderWidth = dataWidth;
+                this._lastRenderHeight = dataHeight;
+                // Update GPU renderer size if canvas size changed
+                if (this._gpuRenderer) {
+                    this._gpuRenderer.updateSize(dataWidth, dataHeight);
+                }
+                this._verifyColorSpace({ subtitleColorSpace: data.colorSpace });
+            }
+            // Use GPU renderer (WebGPU or WebGL2) if available
+            if (this._gpuRenderer) {
+                this._renderGPU(data);
+                return;
+            }
+            if (!this._ctx)
+                return;
+            const ctx = this._ctx;
+            const images = data.images;
+            const imageCount = images.length;
+            ctx.clearRect(0, 0, dataWidth, dataHeight);
+            if (data.asyncRender) {
+                for (let i = 0; i < imageCount; i++) {
+                    const image = images[i];
+                    if (image.image) {
+                        ctx.drawImage(image.image, image.x, image.y);
+                        image.image.close();
+                    }
+                }
+            }
+            else {
+                const hasAlphaBug = AkariSub._hasAlphaBug ?? false;
+                for (let i = 0; i < imageCount; i++) {
+                    const image = images[i];
+                    if (image.image) {
+                        const imgW = image.w;
+                        const imgH = image.h;
+                        const rawImage = image.image;
+                        const rawData = rawImage instanceof Uint8ClampedArray
+                            ? rawImage
+                            : rawImage instanceof Uint8Array
+                                ? new Uint8ClampedArray(rawImage.buffer, rawImage.byteOffset, rawImage.byteLength)
+                                : new Uint8ClampedArray(rawImage);
+                        const fixedData = fixAlpha(rawData, hasAlphaBug);
+                        ctx.putImageData(new ImageData(fixedData, imgW, imgH), image.x, image.y);
+                    }
+                }
+            }
+            if (this.debug) {
+                data.times.JSRenderTime = Date.now() - (data.times.JSRenderTime || 0) - (data.times.IPCTime || 0);
+                let total = 0;
+                const count = data.times.bitmaps || imageCount;
+                delete data.times.bitmaps;
+                for (const key in data.times) {
+                    total += data.times[key] || 0;
+                }
+                console.log('Bitmaps: ' + count + ' Total: ' + (total | 0) + 'ms', data.times);
+            }
+        }
+        finally {
+            this._unbusy();
+        }
+    }
+    _renderGPU(data) {
+        const renderer = this._gpuRenderer;
+        if (!renderer)
+            return;
+        if (data.images.length === 0) {
+            renderer.clear();
+            return;
+        }
+        if (data.asyncRender) {
+            // For async render mode with ImageBitmaps
+            const bitmapImages = this._gpuBitmapImages;
+            let bitmapCount = 0;
+            for (let i = 0; i < data.images.length; i++) {
+                const img = data.images[i];
+                if (!(img.image instanceof ImageBitmap))
+                    continue;
+                const target = bitmapImages[bitmapCount] || (bitmapImages[bitmapCount] = { image: img.image, x: 0, y: 0 });
+                target.image = img.image;
+                target.x = img.x;
+                target.y = img.y;
+                bitmapCount++;
+            }
+            bitmapImages.length = bitmapCount;
+            renderer.renderBitmaps(bitmapImages, this._canvasctrl.width, this._canvasctrl.height);
+            // Close ImageBitmaps after rendering
+            for (const img of data.images) {
+                if (img.image instanceof ImageBitmap) {
+                    img.image.close();
+                }
+            }
+        }
+        else {
+            // For non-async render mode with ArrayBuffer data
+            renderer.render(data.images, this._canvasctrl.width, this._canvasctrl.height);
+        }
+        if (this.debug) {
+            data.times.JSRenderTime = Date.now() - (data.times.JSRenderTime || 0) - (data.times.IPCTime || 0);
+            let total = 0;
+            const count = data.times.bitmaps || data.images.length;
+            delete data.times.bitmaps;
+            for (const key in data.times) {
+                total += data.times[key] || 0;
+            }
+            console.log(`[${this._rendererType.toUpperCase()}] Bitmaps: ` + count + ' Total: ' + (total | 0) + 'ms', data.times);
+        }
+    }
+    _ready() {
+        this._workerReady = true;
+        this._init();
+        if (this._onDemandRender && this._video) {
+            this.setCurrentTime(this._video.paused, this._video.currentTime + this.timeOffset, this._video.playbackRate);
+            const pending = this._pendingDemandTimes.length > 0
+                ? this._pendingDemandTimes[this._pendingDemandTimes.length - 1]
+                : {
+                    mediaTime: this._video.currentTime + this.renderAhead * (this._video.playbackRate || 1),
+                    width: this._video.videoWidth,
+                    height: this._video.videoHeight
+                };
+            this._pendingDemandTimes.length = 0;
+            this.busy = true;
+            this._demandRender(pending);
+        }
+        this.dispatchEvent(new CustomEvent('ready'));
+    }
+    /**
+     * Handler for partial_ready message from worker.
+     * Emitted early for large subtitle files to allow playback to start
+     * while font loading and track parsing continues.
+     */
+    _partial_ready() {
+        this.dispatchEvent(new CustomEvent('partial_ready'));
+    }
+    _trackReady() {
+        this.dispatchEvent(new CustomEvent('trackReady'));
+    }
+    /**
+     * Send data and execute function in the worker.
+     */
+    async sendMessage(target, data = {}, transferable) {
+        await this._loaded;
+        if (transferable) {
+            this._worker.postMessage({ target, transferable, ...data }, [...transferable]);
+        }
+        else {
+            this._worker.postMessage({ target, ...data });
+        }
+    }
+    _fetchFromWorker(workerOptions) {
+        return new Promise((resolve, reject) => {
+            try {
+                const target = workerOptions.target;
+                const timeout = setTimeout(() => {
+                    cleanup();
+                    reject(new Error('Error: Timeout while trying to fetch ' + target));
+                }, 5000);
+                const handleMessage = (event) => {
+                    if (event.data.target === target) {
+                        cleanup();
+                        resolve(event.data);
+                    }
+                };
+                const handleError = (event) => {
+                    cleanup();
+                    reject(event instanceof Error ? event : event.error || new Error('Worker error'));
+                };
+                const cleanup = () => {
+                    this._worker.removeEventListener('message', handleMessage);
+                    this._worker.removeEventListener('error', handleError);
+                    clearTimeout(timeout);
+                };
+                this._worker.addEventListener('message', handleMessage);
+                this._worker.addEventListener('error', handleError);
+                this._worker.postMessage(workerOptions);
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+    }
+    _console(data) {
+        ;
+        console[data.command].apply(console, JSON.parse(data.content));
+    }
+    _onmessage(event) {
+        const target = event.data.target;
+        if (target === 'error') {
+            this._error(event.data.error || 'Unknown worker error');
+            return;
+        }
+        const handler = this['_' + target];
+        if (handler) {
+            handler.call(this, event.data);
+        }
+    }
+    _error(err) {
+        const error = err instanceof Error
+            ? err
+            : err instanceof ErrorEvent
+                ? err.error || new Error(err.message)
+                : new Error(String(err));
+        const event = err instanceof Event ? new ErrorEvent(err.type, err) : new ErrorEvent('error', { error });
+        this.dispatchEvent(event);
+        console.error(error);
+        return error;
+    }
+    _removeListeners() {
+        if (this._video) {
+            if (this._ro)
+                this._ro.unobserve(this._video);
+            if (this._ctx)
+                this._ctx.filter = 'none';
+            this._video.removeEventListener('timeupdate', this._boundTimeUpdate);
+            this._video.removeEventListener('progress', this._boundTimeUpdate);
+            this._video.removeEventListener('waiting', this._boundTimeUpdate);
+            this._video.removeEventListener('seeking', this._boundTimeUpdate);
+            this._video.removeEventListener('playing', this._boundTimeUpdate);
+            this._video.removeEventListener('ratechange', this._boundSetRate);
+            this._video.removeEventListener('resize', this._boundResize);
+            this._video.removeEventListener('loadedmetadata', this._boundUpdateColorSpace);
+        }
+    }
+    /**
+     * Destroy the object, worker, listeners and all data.
+     */
+    destroy(err) {
+        const error = err ? this._error(err) : undefined;
+        if (this._video && this._canvasParent) {
+            this._video.parentNode?.removeChild(this._canvasParent);
+        }
+        // Clean up GPU renderer
+        if (this._gpuRenderer) {
+            this._gpuRenderer.destroy();
+            this._gpuRenderer = null;
+            this._rendererType = 'canvas2d';
+        }
+        this._destroyed = true;
+        this._removeListeners();
+        this.sendMessage('destroy');
+        this._worker?.terminate();
+        return error;
+    }
+}
+//# sourceMappingURL=akarisub.js.map