libbitsub 1.11.0 → 1.12.0

package/dist/ts/renderers.js

@@ -6,10 +6,12 @@ import { SubtitleDiagnosticError, createSubtitleDiagnosticError, createSubtitleW
 import { fetchSubtitleAsset, fetchSubtitleText } from './range-loader';
 import { initWasm } from './wasm';
 import { getOrCreateWorker, sendToWorker } from './worker';
+import { canUseWorkerOffscreenRender } from './capabilities';
 import { binarySearchTimestamp, convertFrameData, createWorkerSessionId, createWorkerState, detectSubtitleFormat, getSubtitleBounds, isMksSource, setCacheLimit as applyCacheLimit, setCachedFrame } from './utils';
-import { PgsParser, VobSubParserLowLevel } from './parsers';
+import { PgsParser, DvbParser, VobSubParserLowLevel } from './parsers';
 import { WebGPURenderer, isWebGPUSupported } from './webgpu-renderer';
 import { WebGL2Renderer, isWebGL2Supported } from './webgl2-renderer';
+import { VideoFrameScheduler, supportsFrameAwareSync } from './video-frame-scheduler';
 /** Default display settings */
 const DEFAULT_DISPLAY_SETTINGS = {
     scale: 1.0,
@@ -40,8 +42,14 @@ class BaseVideoSubtitleRenderer {
     subUrl;
     subContent;
     canvas = null;
+    providedCanvas;
+    requestedContainer;
+    overlayContainer = null;
+    ownsCanvas = false;
+    devicePixelRatioCap;
+    backendOption;
     ctx = null;
-    animationFrameId = null;
+    frameScheduler = null;
     isLoaded = false;
     lastRenderedIndex = -1;
     lastRenderedTime = -1;
@@ -55,8 +63,7 @@ class BaseVideoSubtitleRenderer {
     parserMetadata = null;
     /** Display settings for subtitle rendering */
     displaySettings = { ...DEFAULT_DISPLAY_SETTINGS };
-    /** Time offset in seconds added to video.currentTime for subtitle lookup */
-    timeOffset = 0;
+    _timeOffset = 0;
     cacheLimit = 24;
     prefetchBefore = 0;
     prefetchAfter = 0;
@@ -69,6 +76,7 @@ class BaseVideoSubtitleRenderer {
     lastRenderInfo = null;
     loadedMetadataHandler = null;
     seekedHandler = null;
+    initPromise = null;
     // WebGPU renderer (optional, falls back to WebGL2 then Canvas2D)
     webgpuRenderer = null;
     useWebGPU = false;
@@ -77,6 +85,18 @@ class BaseVideoSubtitleRenderer {
     webgl2Renderer = null;
     useWebGL2 = false;
     onWebGL2Fallback;
+    offscreenRenderOption;
+    frameAwareSync;
+    pendingWorkerOffscreen = false;
+    useWorkerOffscreen = false;
+    canvasPixelWidth = 1;
+    canvasPixelHeight = 1;
+    presentationToken = 0;
+    offscreenAttachPromise = null;
+    offscreenTransferPending = false;
+    offscreenFrameMetadata = new Map();
+    lastSynchronizedTime = null;
+    lastPresentedFrames = null;
     // Performance tracking
     perfStats = {
         framesRendered: 0,
@@ -91,8 +111,19 @@ class BaseVideoSubtitleRenderer {
         this.format = format;
         this.subUrl = options.subUrl;
         this.subContent = options.subContent;
+        this.providedCanvas = options.canvas ?? null;
+        this.requestedContainer = options.container ?? null;
+        this.devicePixelRatioCap =
+            options.devicePixelRatioCap !== undefined &&
+                Number.isFinite(options.devicePixelRatioCap) &&
+                options.devicePixelRatioCap > 0
+                ? options.devicePixelRatioCap
+                : null;
+        this.backendOption = options.backend ?? 'auto';
         this.onWebGPUFallback = options.onWebGPUFallback;
         this.onWebGL2Fallback = options.onWebGL2Fallback;
+        this.offscreenRenderOption = options.offscreenRender !== false;
+        this.frameAwareSync = options.frameAwareSync !== false;
         this.onEvent = options.onEvent;
         this.onWarning = options.onWarning;
         this.debug = Boolean(options.debug);
@@ -132,6 +163,20 @@ class BaseVideoSubtitleRenderer {
     getDisplaySettings() {
         return { ...this.displaySettings };
     }
+    /** Time offset in seconds added to the active video clock for subtitle lookup. */
+    get timeOffset() {
+        return this._timeOffset;
+    }
+    set timeOffset(value) {
+        if (value === this._timeOffset)
+            return;
+        this._timeOffset = value;
+        this.invalidatePresentation();
+        this.lastSynchronizedTime = null;
+        this.lastRenderedIndex = -1;
+        this.lastRenderedTime = -1;
+        this.renderPausedFrame();
+    }
     /** Get cache-related diagnostics for the active renderer session. */
     getCacheStats() {
         const state = this.getWorkerRendererState();
@@ -188,9 +233,16 @@ class BaseVideoSubtitleRenderer {
             minRenderTime: Math.round(minRenderTime * 100) / 100,
             lastRenderTime: Math.round(this.perfStats.lastRenderTime * 100) / 100,
             renderFps: this.perfStats.fpsTimestamps.length,
-            currentIndex: this.lastRenderedIndex
+            currentIndex: this.lastRenderedIndex,
+            syncMode: this.getSynchronizationMode()
         };
     }
+    /** Get the active video synchronization clock. */
+    getSynchronizationMode() {
+        if (this.frameScheduler)
+            return this.frameScheduler.mode;
+        return supportsFrameAwareSync(this.video, this.frameAwareSync) ? 'video-frame' : 'animation-frame';
+    }
     /** Set display settings and force re-render */
     setDisplaySettings(settings) {
         const nextSettings = {
@@ -210,19 +262,24 @@ class BaseVideoSubtitleRenderer {
         this.displaySettings = nextSettings;
         // Force re-render if settings changed
         if (changed) {
+            this.invalidatePresentation();
             this.lastRenderedIndex = -1;
             this.lastRenderedTime = -1;
+            this.renderPausedFrame();
         }
     }
     /** Reset display settings to defaults */
     resetDisplaySettings() {
         this.displaySettings = { ...DEFAULT_DISPLAY_SETTINGS };
+        this.invalidatePresentation();
         this.lastRenderedIndex = -1;
         this.lastRenderedTime = -1;
+        this.renderPausedFrame();
     }
     /** Start initialization. */
     startInit() {
-        this.init().catch((error) => {
+        this.initPromise = this.init();
+        this.initPromise.catch((error) => {
             this.emitEvent({
                 type: 'error',
                 format: this.format,
@@ -230,51 +287,275 @@ class BaseVideoSubtitleRenderer {
             });
         });
     }
+    /** Wait for canvas, parser, and worker initialization before accepting pushed data. */
+    async waitUntilInitialized() {
+        await this.initPromise;
+        if (this.disposed) {
+            throw new Error(`${this.format.toUpperCase()} renderer has been disposed`);
+        }
+    }
+    /** Re-run cue selection after a live stream mutation. */
+    refreshStreamPresentation() {
+        this.invalidatePresentation();
+        this.lastRenderedIndex = -1;
+        this.lastRenderedTime = -1;
+        this.renderPausedFrame();
+    }
+    /** Clear the currently presented cue after a live stream reset. */
+    clearStreamPresentation() {
+        this.invalidatePresentation();
+        this.lastSynchronizedTime = null;
+        this.lastRenderedIndex = -1;
+        this.lastRenderedTime = -1;
+        this.lastRenderedData = null;
+        this.lastCueIndex = null;
+        this.currentCueMetadata = null;
+        this.lastRenderInfo = null;
+        this.offscreenFrameMetadata.clear();
+        const state = this.getWorkerRendererState();
+        if (this.useWorkerOffscreen && state.workerReady && state.sessionId) {
+            sendToWorker({ type: 'clearOffscreenCanvas', sessionId: state.sessionId }).catch(() => { });
+        }
+        else if (this.useWebGPU && this.webgpuRenderer) {
+            this.webgpuRenderer.clear();
+        }
+        else if (this.useWebGL2 && this.webgl2Renderer) {
+            this.webgl2Renderer.clear();
+        }
+        else if (this.ctx && this.canvas) {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        }
+        this.emitEvent({ type: 'cue-change', cue: null });
+    }
     /** Initialize the renderer. */
     async init() {
         await initWasm();
         this.createCanvas();
         await new Promise((resolve) => setTimeout(resolve, 0));
         await this.loadSubtitles();
+        await this.ensureWorkerOffscreenAttached();
         this.startRenderLoop();
     }
-    /** Create the canvas overlay positioned over the video. */
-    createCanvas() {
-        this.canvas = document.createElement('canvas');
-        Object.assign(this.canvas.style, {
-            position: 'absolute',
-            pointerEvents: 'none',
-            zIndex: '10'
-        });
-        const parent = this.video.parentElement;
-        if (parent) {
-            if (window.getComputedStyle(parent).position === 'static') {
-                parent.style.position = 'relative';
-            }
-            parent.appendChild(this.canvas);
+    shouldPreferWorkerOffscreen() {
+        return !this.providedCanvas && this.offscreenRenderOption && canUseWorkerOffscreenRender();
+    }
+    isWorkerOffscreenPresent() {
+        return this.useWorkerOffscreen;
+    }
+    getDefaultContainer() {
+        if (this.video.parentElement)
+            return this.video.parentElement;
+        const parent = this.video.parentNode;
+        if (parent && 'appendChild' in parent && 'host' in parent) {
+            return parent;
+        }
+        return null;
+    }
+    getContainerElement(container) {
+        return 'host' in container ? container.host : container;
+    }
+    getCanvasParent(canvas) {
+        return canvas.parentNode ?? canvas.parentElement;
+    }
+    removeOwnedCanvas() {
+        if (!this.ownsCanvas || !this.canvas)
+            return;
+        this.getCanvasParent(this.canvas)?.removeChild(this.canvas);
+    }
+    mountOverlayCanvas(canvas) {
+        if (!canvas.style.position)
+            canvas.style.position = 'absolute';
+        if (!canvas.style.pointerEvents)
+            canvas.style.pointerEvents = 'none';
+        if (!canvas.style.zIndex)
+            canvas.style.zIndex = '10';
+        const existingContainer = this.getCanvasParent(canvas);
+        const container = this.requestedContainer ??
+            (existingContainer &&
+                'appendChild' in existingContainer &&
+                ('style' in existingContainer || 'host' in existingContainer)
+                ? existingContainer
+                : this.getDefaultContainer());
+        this.overlayContainer = container;
+        if (!container)
+            return;
+        const containerElement = this.getContainerElement(container);
+        if (window.getComputedStyle(containerElement).position === 'static') {
+            containerElement.style.position = 'relative';
+        }
+        if (this.getCanvasParent(canvas) !== container) {
+            container.appendChild(canvas);
+        }
+    }
+    selectBackend() {
+        if (this.backendOption === 'webgpu') {
+            void this.initWebGPU(false);
+            return;
+        }
+        if (this.backendOption === 'webgl2') {
+            void this.initWebGL2(false);
+            return;
+        }
+        if (this.backendOption === 'worker-offscreen') {
+            this.pendingWorkerOffscreen = true;
+            return;
+        }
+        if (this.backendOption === 'canvas2d') {
+            this.initCanvas2D();
+            return;
         }
-        // Try WebGPU first, then WebGL2, then Canvas2D
         if (isWebGPUSupported()) {
-            this.initWebGPU();
+            void this.initWebGPU();
         }
         else if (isWebGL2Supported()) {
-            this.initWebGL2();
+            void this.initWebGL2();
+        }
+        else if (this.shouldPreferWorkerOffscreen()) {
+            this.pendingWorkerOffscreen = true;
         }
         else {
             this.initCanvas2D();
         }
+    }
+    /** Create the canvas overlay positioned over the video. */
+    createCanvas() {
+        this.canvas = this.providedCanvas ?? document.createElement('canvas');
+        this.ownsCanvas = !this.providedCanvas;
+        this.mountOverlayCanvas(this.canvas);
+        this.selectBackend();
         this.updateCanvasSize();
         this.resizeObserver = new ResizeObserver(() => this.updateCanvasSize());
         this.resizeObserver.observe(this.video);
         this.loadedMetadataHandler = () => this.updateCanvasSize();
         this.seekedHandler = () => {
+            this.invalidatePresentation();
             this.lastRenderedIndex = -1;
             this.lastRenderedTime = -1;
+            this.lastSynchronizedTime = null;
+            this.offscreenFrameMetadata.clear();
             this.onSeek();
+            this.renderPausedFrame();
         };
         this.video.addEventListener('loadedmetadata', this.loadedMetadataHandler);
         this.video.addEventListener('seeked', this.seekedHandler);
     }
+    preferWorkerOffscreenOrCanvas2D() {
+        if (this.backendOption === 'auto' && this.shouldPreferWorkerOffscreen()) {
+            this.pendingWorkerOffscreen = true;
+            const state = this.getWorkerRendererState();
+            if (state.useWorker && state.workerReady && state.sessionId) {
+                void this.ensureWorkerOffscreenAttached();
+            }
+            return;
+        }
+        this.initCanvas2D();
+    }
+    ensureWorkerOffscreenAttached() {
+        if (this.disposed)
+            return Promise.resolve();
+        if (this.offscreenAttachPromise)
+            return this.offscreenAttachPromise;
+        if (!this.pendingWorkerOffscreen || !this.canvas)
+            return Promise.resolve();
+        const state = this.getWorkerRendererState();
+        if (!state.useWorker || !state.workerReady || !state.sessionId) {
+            this.pendingWorkerOffscreen = false;
+            this.initCanvas2D();
+            this.updateCanvasSize();
+            return Promise.resolve();
+        }
+        const sessionId = state.sessionId;
+        this.pendingWorkerOffscreen = false;
+        this.offscreenTransferPending = true;
+        let attachPromise;
+        attachPromise = this.attachWorkerOffscreen(sessionId).finally(() => {
+            this.offscreenTransferPending = false;
+            if (this.offscreenAttachPromise === attachPromise) {
+                this.offscreenAttachPromise = null;
+            }
+        });
+        this.offscreenAttachPromise = attachPromise;
+        return attachPromise;
+    }
+    async attachWorkerOffscreen(sessionId) {
+        try {
+            const transferableCanvas = this.canvas;
+            const offscreen = transferableCanvas.transferControlToOffscreen();
+            const attachResponse = await sendToWorker({
+                type: 'attachOffscreenCanvas',
+                sessionId,
+                canvas: offscreen
+            });
+            if (attachResponse.type === 'error') {
+                throw new Error(attachResponse.message);
+            }
+            if (attachResponse.type !== 'offscreenAttached') {
+                throw new Error('Worker OffscreenCanvas attach failed');
+            }
+            if (this.disposed) {
+                await sendToWorker({ type: 'detachOffscreenCanvas', sessionId });
+                return;
+            }
+            this.useWorkerOffscreen = true;
+            this.emitRendererBackend('worker-offscreen');
+            this.lastRenderedIndex = -1;
+            this.lastRenderedTime = -1;
+            await sendToWorker({
+                type: 'resizeOffscreenCanvas',
+                sessionId,
+                width: this.canvasPixelWidth,
+                height: this.canvasPixelHeight
+            });
+        }
+        catch (error) {
+            this.offscreenTransferPending = false;
+            this.useWorkerOffscreen = false;
+            if (this.disposed)
+                return;
+            this.recreateCanvasForMainThreadFallback();
+            this.emitWarning(createSubtitleWarning('WORKER_FALLBACK', 'Worker OffscreenCanvas present unavailable; falling back to main-thread Canvas2D.', {
+                format: this.format,
+                details: { reason: error instanceof Error ? error.message : String(error) }
+            }));
+        }
+    }
+    recreateCanvasForMainThreadFallback() {
+        this.removeOwnedCanvas();
+        this.canvas = document.createElement('canvas');
+        this.ownsCanvas = true;
+        this.mountOverlayCanvas(this.canvas);
+        this.initCanvas2D();
+        this.updateCanvasSize();
+        if (!this.tempCanvas) {
+            this.tempCanvas = document.createElement('canvas');
+            this.tempCtx = this.tempCanvas.getContext('2d');
+        }
+    }
+    fallbackFromWorkerOffscreen(reason) {
+        if (!this.useWorkerOffscreen || this.disposed)
+            return;
+        const state = this.getWorkerRendererState();
+        this.invalidatePresentation();
+        this.useWorkerOffscreen = false;
+        this.pendingWorkerOffscreen = false;
+        this.offscreenFrameMetadata.clear();
+        if (state.sessionId) {
+            sendToWorker({ type: 'detachOffscreenCanvas', sessionId: state.sessionId }).catch(() => { });
+        }
+        this.recreateCanvasForMainThreadFallback();
+        this.lastRenderedIndex = -2;
+        this.lastRenderedTime = -1;
+        this.emitWarning(createSubtitleWarning('WORKER_FALLBACK', 'Worker OffscreenCanvas present failed; falling back to main-thread Canvas2D.', {
+            format: this.format,
+            details: { reason }
+        }));
+    }
+    getOffscreenFrameMetadata(index) {
+        return this.offscreenFrameMetadata.get(index) ?? null;
+    }
+    clearOffscreenFrameMetadata() {
+        this.offscreenFrameMetadata.clear();
+    }
     emitEvent(event) {
         this.onEvent?.(event);
     }
@@ -318,15 +599,16 @@ class BaseVideoSubtitleRenderer {
         this.lastRenderInfo = info;
     }
     /** Initialize WebGPU renderer. */
-    async initWebGPU() {
+    async initWebGPU(allowBackendFallback = true) {
         try {
             this.webgpuRenderer = new WebGPURenderer();
             await this.webgpuRenderer.init();
             if (!this.canvas)
                 return;
             const bounds = this.getVideoContentBounds();
-            const width = Math.max(1, bounds.width * window.devicePixelRatio);
-            const height = Math.max(1, bounds.height * window.devicePixelRatio);
+            const pixelRatio = this.getDevicePixelRatio();
+            const width = Math.max(1, bounds.width * pixelRatio);
+            const height = Math.max(1, bounds.height * pixelRatio);
             await this.webgpuRenderer.setCanvas(this.canvas, width, height);
             this.useWebGPU = true;
             this.emitRendererBackend('webgpu');
@@ -336,25 +618,25 @@ class BaseVideoSubtitleRenderer {
             this.webgpuRenderer = null;
             this.useWebGPU = false;
             this.onWebGPUFallback?.();
-            // Try WebGL2 before Canvas2D
-            if (isWebGL2Supported()) {
-                this.initWebGL2();
+            if (allowBackendFallback && isWebGL2Supported()) {
+                void this.initWebGL2();
             }
             else {
-                this.initCanvas2D();
+                this.preferWorkerOffscreenOrCanvas2D();
             }
         }
     }
     /** Initialize WebGL2 renderer. */
-    async initWebGL2() {
+    async initWebGL2(allowBackendFallback = true) {
         try {
             this.webgl2Renderer = new WebGL2Renderer();
             await this.webgl2Renderer.init();
             if (!this.canvas)
                 return;
             const bounds = this.getVideoContentBounds();
-            const width = Math.max(1, bounds.width * window.devicePixelRatio);
-            const height = Math.max(1, bounds.height * window.devicePixelRatio);
+            const pixelRatio = this.getDevicePixelRatio();
+            const width = Math.max(1, bounds.width * pixelRatio);
+            const height = Math.max(1, bounds.height * pixelRatio);
             await this.webgl2Renderer.setCanvas(this.canvas, width, height);
             this.useWebGL2 = true;
             this.emitRendererBackend('webgl2');
@@ -364,7 +646,12 @@ class BaseVideoSubtitleRenderer {
             this.webgl2Renderer = null;
             this.useWebGL2 = false;
             this.onWebGL2Fallback?.();
-            this.initCanvas2D();
+            if (allowBackendFallback) {
+                this.preferWorkerOffscreenOrCanvas2D();
+            }
+            else {
+                this.initCanvas2D();
+            }
         }
     }
     /** Initialize Canvas2D renderer. */
@@ -378,6 +665,23 @@ class BaseVideoSubtitleRenderer {
     }
     /** Called when video seeks. */
     onSeek() { }
+    getDevicePixelRatio() {
+        const devicePixelRatio = Number.isFinite(window.devicePixelRatio) && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
+        return this.devicePixelRatioCap === null ? devicePixelRatio : Math.min(devicePixelRatio, this.devicePixelRatioCap);
+    }
+    getCanvasMountOffset() {
+        if (!this.overlayContainer)
+            return { x: 0, y: 0 };
+        const containerElement = this.getContainerElement(this.overlayContainer);
+        if (typeof containerElement.getBoundingClientRect !== 'function')
+            return { x: 0, y: 0 };
+        const videoRect = this.video.getBoundingClientRect();
+        const containerRect = containerElement.getBoundingClientRect();
+        return {
+            x: (videoRect.left ?? videoRect.x) - (containerRect.left ?? containerRect.x),
+            y: (videoRect.top ?? videoRect.y) - (containerRect.top ?? containerRect.y)
+        };
+    }
     /** Calculate the actual video content bounds, accounting for letterboxing/pillarboxing */
     getVideoContentBounds() {
         const rect = this.video.getBoundingClientRect();
@@ -420,96 +724,181 @@ class BaseVideoSubtitleRenderer {
         const bounds = this.getVideoContentBounds();
         const width = bounds.width > 0 ? bounds.width : this.video.videoWidth || 1920;
         const height = bounds.height > 0 ? bounds.height : this.video.videoHeight || 1080;
-        const pixelWidth = Math.max(1, width * window.devicePixelRatio);
-        const pixelHeight = Math.max(1, height * window.devicePixelRatio);
-        this.canvas.width = pixelWidth;
-        this.canvas.height = pixelHeight;
+        const pixelRatio = this.getDevicePixelRatio();
+        const pixelWidth = Math.max(1, width * pixelRatio);
+        const pixelHeight = Math.max(1, height * pixelRatio);
+        this.canvasPixelWidth = pixelWidth;
+        this.canvasPixelHeight = pixelHeight;
         // Position canvas to match video content area
-        this.canvas.style.left = `${bounds.x}px`;
-        this.canvas.style.top = `${bounds.y}px`;
+        const mountOffset = this.getCanvasMountOffset();
+        this.canvas.style.left = `${mountOffset.x + bounds.x}px`;
+        this.canvas.style.top = `${mountOffset.y + bounds.y}px`;
         this.canvas.style.width = `${bounds.width}px`;
         this.canvas.style.height = `${bounds.height}px`;
-        // Update GPU renderer size if active
-        if (this.useWebGPU && this.webgpuRenderer) {
-            this.webgpuRenderer.updateSize(pixelWidth, pixelHeight);
+        if (this.useWorkerOffscreen || this.pendingWorkerOffscreen || this.offscreenTransferPending) {
+            const state = this.getWorkerRendererState();
+            if (this.useWorkerOffscreen && state.sessionId && state.workerReady) {
+                sendToWorker({
+                    type: 'resizeOffscreenCanvas',
+                    sessionId: state.sessionId,
+                    width: pixelWidth,
+                    height: pixelHeight
+                }).catch(() => { });
+            }
         }
-        else if (this.useWebGL2 && this.webgl2Renderer) {
-            this.webgl2Renderer.updateSize(pixelWidth, pixelHeight);
+        else {
+            this.canvas.width = pixelWidth;
+            this.canvas.height = pixelHeight;
+            // Update GPU renderer size if active
+            if (this.useWebGPU && this.webgpuRenderer) {
+                this.webgpuRenderer.updateSize(pixelWidth, pixelHeight);
+            }
+            else if (this.useWebGL2 && this.webgl2Renderer) {
+                this.webgl2Renderer.updateSize(pixelWidth, pixelHeight);
+            }
         }
         this.lastRenderedIndex = -1;
         this.lastRenderedTime = -1;
+        this.invalidatePresentation();
+        if (this.frameScheduler) {
+            this.renderPausedFrame();
+        }
     }
     /** Start the render loop. */
     startRenderLoop() {
-        // Create reusable temp canvas for rendering
-        this.tempCanvas = document.createElement('canvas');
-        this.tempCtx = this.tempCanvas.getContext('2d');
-        const render = () => {
-            if (this.disposed)
-                return;
-            if (this.isLoaded) {
-                const currentTime = this.video.currentTime + this.timeOffset;
-                const currentIndex = this.findCurrentIndex(currentTime);
-                // Only re-render if index changed
-                if (currentIndex !== this.lastRenderedIndex) {
-                    const cacheHit = currentIndex >= 0 && this.getWorkerRendererState().frameCache.has(currentIndex);
-                    const startTime = performance.now();
-                    const outcome = this.renderFrame(currentTime, currentIndex);
-                    const endTime = performance.now();
-                    // Track performance
-                    const renderTime = endTime - startTime;
-                    this.perfStats.lastRenderTime = renderTime;
-                    this.perfStats.renderTimes.push(renderTime);
-                    // Keep only last 60 samples for rolling average
-                    if (this.perfStats.renderTimes.length > 60) {
-                        this.perfStats.renderTimes.shift();
-                    }
-                    this.perfStats.framesRendered++;
-                    this.perfStats.fpsTimestamps.push(endTime);
-                    // Check for frame drop (if render took longer than frame budget ~16.67ms for 60fps)
-                    const frameBudget = 16.67;
-                    if (renderTime > frameBudget) {
-                        this.perfStats.framesDropped++;
-                    }
-                    if (outcome.warning) {
-                        this.emitWarning(outcome.warning);
-                    }
-                    this.lastRenderedIndex = currentIndex;
-                    this.lastRenderedTime = currentTime;
-                    const cue = currentIndex >= 0 ? this.buildCueMetadata(currentIndex) : null;
-                    this.emitCueChange(cue);
-                    this.recordLastRenderInfo({
-                        time: currentTime,
-                        index: currentIndex,
-                        status: outcome.status,
-                        backend: this.currentRendererBackend,
-                        usingWorker: this.getCacheStats().usingWorker,
-                        cacheHit,
-                        renderDuration: Math.round(renderTime * 100) / 100,
-                        frameWidth: outcome.data?.width ?? null,
-                        frameHeight: outcome.data?.height ?? null,
-                        compositionCount: outcome.data?.compositionData.length ?? 0,
-                        cue,
-                        cache: this.getCacheStats(),
-                        capturedAt: endTime
-                    });
-                    this.emitEvent({ type: 'stats', stats: this.getStats() });
-                    if (currentIndex >= 0 && (this.prefetchBefore > 0 || this.prefetchAfter > 0)) {
-                        const prefetch = this
-                            .prefetchAroundTime;
-                        prefetch?.call(this, currentTime).catch(() => { });
-                    }
-                }
+        if (!this.useWorkerOffscreen) {
+            this.tempCanvas = document.createElement('canvas');
+            this.tempCtx = this.tempCanvas.getContext('2d');
+        }
+        this.frameScheduler = new VideoFrameScheduler(this.video, this.frameAwareSync, (tick) => this.renderSynchronizedFrame(tick));
+        this.renderPausedFrame();
+        this.frameScheduler.start();
+    }
+    renderPausedFrame() {
+        if (!this.video.paused && !this.video.ended)
+            return;
+        this.renderSynchronizedFrame({ mediaTime: this.video.currentTime, presentedFrames: null });
+    }
+    renderSynchronizedFrame(tick) {
+        if (this.disposed || !this.isLoaded)
+            return;
+        const currentTime = tick.mediaTime + this.timeOffset;
+        this.lastSynchronizedTime = currentTime;
+        if (tick.presentedFrames !== null) {
+            if (this.lastPresentedFrames !== null && tick.presentedFrames > this.lastPresentedFrames + 1) {
+                this.perfStats.framesDropped += tick.presentedFrames - this.lastPresentedFrames - 1;
             }
-            this.animationFrameId = requestAnimationFrame(render);
-        };
-        this.animationFrameId = requestAnimationFrame(render);
+            this.lastPresentedFrames = tick.presentedFrames;
+        }
+        const currentIndex = this.findCurrentIndex(currentTime);
+        if (currentIndex === this.lastRenderedIndex)
+            return;
+        const cacheHit = !this.useWorkerOffscreen && currentIndex >= 0 && this.getWorkerRendererState().frameCache.has(currentIndex);
+        const workerOffscreenPresent = this.useWorkerOffscreen;
+        const startTime = performance.now();
+        this.presentationToken++;
+        const outcome = this.renderFrame(currentTime, currentIndex);
+        const endTime = performance.now();
+        this.lastRenderedIndex = currentIndex;
+        this.lastRenderedTime = currentTime;
+        // Worker OffscreenCanvas presentation completes asynchronously. Its
+        // callback records the real status, metadata, and render duration.
+        if (workerOffscreenPresent)
+            return;
+        const renderTime = endTime - startTime;
+        this.recordRenderPerformance(renderTime, endTime);
+        if (outcome.warning) {
+            this.emitWarning(outcome.warning);
+        }
+        const cue = currentIndex >= 0 ? this.buildCueMetadata(currentIndex) : null;
+        this.emitCueChange(cue);
+        this.recordLastRenderInfo({
+            time: currentTime,
+            index: currentIndex,
+            status: outcome.status,
+            backend: this.currentRendererBackend,
+            usingWorker: this.getCacheStats().usingWorker,
+            cacheHit,
+            renderDuration: Math.round(renderTime * 100) / 100,
+            frameWidth: outcome.data?.width ?? null,
+            frameHeight: outcome.data?.height ?? null,
+            compositionCount: outcome.data?.compositionData.length ?? 0,
+            cue,
+            cache: this.getCacheStats(),
+            capturedAt: endTime
+        });
+        this.emitEvent({ type: 'stats', stats: this.getStats() });
+        if (currentIndex >= 0 && (this.prefetchBefore > 0 || this.prefetchAfter > 0)) {
+            const prefetch = this.prefetchAroundTime;
+            prefetch?.call(this, currentTime).catch(() => { });
+        }
+    }
+    getCurrentSynchronizationTime() {
+        return this.lastSynchronizedTime ?? this.video.currentTime + this.timeOffset;
+    }
+    getPresentationToken() {
+        return this.presentationToken;
+    }
+    isCurrentPresentation(token) {
+        return !this.disposed && token === this.presentationToken;
+    }
+    invalidatePresentation() {
+        this.presentationToken++;
+    }
+    watchPendingRender(index, pending) {
+        const token = this.getPresentationToken();
+        void pending.then(() => {
+            if (!this.isCurrentPresentation(token))
+                return;
+            if (this.findCurrentIndex(this.getCurrentSynchronizationTime()) !== index)
+                return;
+            this.lastRenderedIndex = -1;
+            this.renderPausedFrame();
+        }, () => { });
+    }
+    recordRenderPerformance(renderTime, capturedAt, countAsDropped = true) {
+        this.perfStats.lastRenderTime = renderTime;
+        this.perfStats.renderTimes.push(renderTime);
+        if (this.perfStats.renderTimes.length > 60) {
+            this.perfStats.renderTimes.shift();
+        }
+        this.perfStats.framesRendered++;
+        this.perfStats.fpsTimestamps.push(capturedAt);
+        if (countAsDropped && renderTime > 16.67) {
+            this.perfStats.framesDropped++;
+        }
+    }
+    recordOffscreenRenderCompletion(time, index, status, width, height, compositionCount, startedAt) {
+        const completedAt = performance.now();
+        const renderTime = completedAt - startedAt;
+        this.recordRenderPerformance(renderTime, completedAt, false);
+        const cue = index >= 0 ? this.buildCueMetadata(index) : null;
+        this.emitCueChange(cue);
+        this.recordLastRenderInfo({
+            time,
+            index,
+            status,
+            backend: this.currentRendererBackend,
+            usingWorker: this.getCacheStats().usingWorker,
+            cacheHit: false,
+            renderDuration: Math.round(renderTime * 100) / 100,
+            frameWidth: width,
+            frameHeight: height,
+            compositionCount,
+            cue,
+            cache: this.getCacheStats(),
+            capturedAt: completedAt
+        });
+        this.emitEvent({ type: 'stats', stats: this.getStats() });
     }
     /** Render a subtitle frame to the canvas. */
     renderFrame(time, index) {
         if (!this.canvas) {
             return { status: 'failed', data: null, warning: null };
         }
+        if (this.useWorkerOffscreen) {
+            return this.renderFrameWorkerOffscreen(time, index);
+        }
         // Get the data for this index
         const data = index >= 0 ? this.renderAtIndex(index) : undefined;
         // If data is undefined, it means async loading is in progress
@@ -546,6 +935,83 @@ class BaseVideoSubtitleRenderer {
         }
         return { status: 'rendered', data, warning: null };
     }
+    renderFrameWorkerOffscreen(time, index) {
+        const state = this.getWorkerRendererState();
+        if (!state.sessionId || !state.workerReady) {
+            queueMicrotask(() => this.fallbackFromWorkerOffscreen('Worker session is not ready.'));
+            return { status: 'pending', data: null, warning: null };
+        }
+        const token = this.getPresentationToken();
+        const sessionId = state.sessionId;
+        const startedAt = performance.now();
+        void sendToWorker({
+            type: 'presentOffscreen',
+            sessionId,
+            format: this.format,
+            index,
+            canvasWidth: this.canvasPixelWidth,
+            canvasHeight: this.canvasPixelHeight,
+            displaySettings: { ...this.displaySettings }
+        })
+            .then((response) => {
+            if (!this.isCurrentPresentation(token))
+                return;
+            if (response.type === 'error') {
+                this.recordOffscreenRenderCompletion(time, index, 'failed', null, null, 0, startedAt);
+                this.fallbackFromWorkerOffscreen(response.message);
+                return;
+            }
+            if (response.type !== 'offscreenPresented') {
+                this.recordOffscreenRenderCompletion(time, index, 'failed', null, null, 0, startedAt);
+                this.fallbackFromWorkerOffscreen(`Unexpected worker response: ${response.type}`);
+                return;
+            }
+            if (response.status === 'failed') {
+                const warning = warningFromRenderIssue(response.renderIssue?.trim() || null, {
+                    format: this.format,
+                    cueIndex: index
+                });
+                if (warning) {
+                    this.emitWarning(warning);
+                }
+                this.recordOffscreenRenderCompletion(time, index, 'failed', response.width ?? null, response.height ?? null, response.compositionCount ?? 0, startedAt);
+                if (response.fatal) {
+                    this.fallbackFromWorkerOffscreen(response.renderIssue || 'Offscreen presentation failed.');
+                }
+                return;
+            }
+            if (response.status === 'cleared' || response.status === 'empty' || response.compositionCount === 0) {
+                this.lastRenderedData = null;
+            }
+            if (index >= 0) {
+                this.offscreenFrameMetadata.set(index, {
+                    width: response.width ?? null,
+                    height: response.height ?? null,
+                    bounds: response.bounds ?? null,
+                    compositionCount: response.compositionCount ?? 0
+                });
+            }
+            const warning = warningFromRenderIssue(response.renderIssue?.trim() || null, {
+                format: this.format,
+                cueIndex: index
+            });
+            if (warning) {
+                this.emitWarning(warning);
+            }
+            this.recordOffscreenRenderCompletion(time, index, response.status, response.width ?? null, response.height ?? null, response.compositionCount ?? 0, startedAt);
+        })
+            .catch((error) => {
+            if (!this.isCurrentPresentation(token))
+                return;
+            this.recordOffscreenRenderCompletion(time, index, 'failed', null, null, 0, startedAt);
+            this.fallbackFromWorkerOffscreen(error instanceof Error ? error.message : String(error));
+        });
+        if (index < 0) {
+            this.lastRenderedData = null;
+            return { status: 'cleared', data: null, warning: null };
+        }
+        return { status: 'pending', data: null, warning: null };
+    }
     computeLayout(data) {
         if (!this.canvas) {
             return { scaleX: 1, scaleY: 1, shiftX: 0, shiftY: 0, opacity: this.displaySettings.opacity };
@@ -675,10 +1141,9 @@ class BaseVideoSubtitleRenderer {
     /** Dispose of all resources. */
     dispose() {
         this.disposed = true;
-        if (this.animationFrameId !== null) {
-            cancelAnimationFrame(this.animationFrameId);
-            this.animationFrameId = null;
-        }
+        this.invalidatePresentation();
+        this.frameScheduler?.stop();
+        this.frameScheduler = null;
         this.resizeObserver?.disconnect();
         this.resizeObserver = null;
         if (this.loadedMetadataHandler) {
@@ -698,7 +1163,11 @@ class BaseVideoSubtitleRenderer {
             this.webgl2Renderer.destroy();
             this.webgl2Renderer = null;
         }
-        this.canvas?.parentElement?.removeChild(this.canvas);
+        const state = this.getWorkerRendererState();
+        if (this.useWorkerOffscreen && state.sessionId) {
+            sendToWorker({ type: 'detachOffscreenCanvas', sessionId: state.sessionId }).catch(() => { });
+        }
+        this.removeOwnedCanvas();
         this.canvas = null;
         this.ctx = null;
         this.tempCanvas = null;
@@ -707,8 +1176,13 @@ class BaseVideoSubtitleRenderer {
         this.currentCueMetadata = null;
         this.parserMetadata = null;
         this.lastRenderInfo = null;
+        this.offscreenFrameMetadata.clear();
         this.useWebGPU = false;
         this.useWebGL2 = false;
+        this.useWorkerOffscreen = false;
+        this.pendingWorkerOffscreen = false;
+        this.offscreenTransferPending = false;
+        this.offscreenAttachPromise = null;
     }
 }
 /**
@@ -718,6 +1192,8 @@ class BaseVideoSubtitleRenderer {
 export class PgsRenderer extends BaseVideoSubtitleRenderer {
     pgsParser = null;
     state = createWorkerState();
+    streamOperationQueue = Promise.resolve();
+    streamGeneration = 0;
     onLoading;
     onLoaded;
     onError;
@@ -741,7 +1217,9 @@ export class PgsRenderer extends BaseVideoSubtitleRenderer {
                 return;
             }
             if (!this.subUrl) {
-                throw new Error('No subtitle content or URL provided');
+                await this.beginPgsPushSession();
+                this.onLoaded?.();
+                return;
             }
             if (!this.streamingLoad) {
                 const { data, strategy, rangeSupported, total } = await fetchSubtitleAsset(this.subUrl, {
@@ -775,6 +1253,150 @@ export class PgsRenderer extends BaseVideoSubtitleRenderer {
             }
         }
     }
+    async beginPgsPushSession() {
+        if (this.state.useWorker) {
+            try {
+                this.state.sessionId = createWorkerSessionId();
+                await getOrCreateWorker();
+                this.emitWorkerState(true, false, this.state.sessionId);
+                const response = await sendToWorker({ type: 'beginPgs', sessionId: this.state.sessionId });
+                if (response.type === 'error')
+                    throw new Error(response.message);
+                if (response.type !== 'pgsProgress')
+                    throw new Error('Unexpected PGS worker response');
+                this.applyPgsIndexState(response.metadata, response.timestamps, true, true);
+                this.state.workerReady = true;
+                this.isLoaded = true;
+                this.emitWorkerState(true, true, this.state.sessionId);
+                return;
+            }
+            catch (workerError) {
+                this.state.useWorker = false;
+                this.state.workerReady = false;
+                this.state.sessionId = null;
+                this.emitWorkerState(false, false, null, true);
+                this.emitWarning(createSubtitleWarning('WORKER_FALLBACK', 'PGS worker initialization failed, falling back to main-thread rendering.', {
+                    format: 'pgs',
+                    details: { reason: workerError instanceof Error ? workerError.message : String(workerError) }
+                }));
+            }
+        }
+        await this.yieldToMain();
+        this.pgsParser = new PgsParser({ debug: this.debug, onWarning: (warning) => this.emitWarning(warning) });
+        this.pgsParser.reset();
+        const metadata = this.pgsParser.getMetadata();
+        this.applyPgsIndexState(metadata, this.pgsParser.getTimestamps(), true, false);
+        this.isLoaded = true;
+    }
+    enqueueStreamOperation(operation) {
+        const run = async () => {
+            try {
+                await this.waitUntilInitialized();
+                return await operation();
+            }
+            catch (error) {
+                const resolvedError = normalizeSubtitleError(error, { format: 'pgs' });
+                this.emitEvent({ type: 'error', format: 'pgs', error: resolvedError });
+                this.onError?.(resolvedError);
+                throw resolvedError;
+            }
+        };
+        const result = this.streamOperationQueue.then(run, run);
+        this.streamOperationQueue = result.then(() => undefined, () => undefined);
+        return result;
+    }
+    /** Append a chunk to the active PGS stream and return the number of newly indexed cues. */
+    append(data) {
+        return this.enqueueStreamOperation(async () => {
+            const chunk = data instanceof Uint8Array ? data : new Uint8Array(data);
+            if (chunk.byteLength === 0)
+                return 0;
+            let added;
+            if (this.state.useWorker && this.state.workerReady && this.state.sessionId) {
+                const response = await sendToWorker({
+                    type: 'appendPgs',
+                    sessionId: this.state.sessionId,
+                    data: createTransferableBuffer(chunk, true)
+                });
+                if (response.type === 'error')
+                    throw new Error(response.message);
+                if (response.type !== 'pgsProgress')
+                    throw new Error('Unexpected PGS worker response');
+                added = response.added;
+                if (added > 0) {
+                    this.applyPgsIndexState(response.metadata, response.timestamps, true, true);
+                }
+                else {
+                    this.state.metadata = response.metadata;
+                    this.state.timestamps = response.timestamps;
+                }
+            }
+            else {
+                if (!this.pgsParser)
+                    throw new Error('PGS parser is not initialized');
+                added = this.pgsParser.feed(chunk);
+                if (added > 0) {
+                    this.applyPgsIndexState(this.pgsParser.getMetadata(), this.pgsParser.getTimestamps(), true, false);
+                }
+            }
+            if (added > 0)
+                this.refreshStreamPresentation();
+            return added;
+        });
+    }
+    /** Flush incomplete trailing PGS input and return the total indexed cue count. */
+    flush() {
+        return this.enqueueStreamOperation(async () => {
+            let count;
+            if (this.state.useWorker && this.state.workerReady && this.state.sessionId) {
+                const response = await sendToWorker({ type: 'finishPgs', sessionId: this.state.sessionId });
+                if (response.type === 'error')
+                    throw new Error(response.message);
+                if (response.type !== 'pgsProgress')
+                    throw new Error('Unexpected PGS worker response');
+                count = response.count;
+                this.applyPgsIndexState(response.metadata, response.timestamps, false, true);
+            }
+            else {
+                if (!this.pgsParser)
+                    throw new Error('PGS parser is not initialized');
+                count = this.pgsParser.finishFeed();
+                this.applyPgsIndexState(this.pgsParser.getMetadata(), this.pgsParser.getTimestamps(), false, false);
+            }
+            this.refreshStreamPresentation();
+            return count;
+        });
+    }
+    /** Reset the PGS stream while keeping the renderer and canvas ready for more chunks. */
+    reset() {
+        return this.enqueueStreamOperation(async () => {
+            this.streamGeneration++;
+            try {
+                if (this.state.useWorker && this.state.workerReady && this.state.sessionId) {
+                    const response = await sendToWorker({ type: 'resetPgs', sessionId: this.state.sessionId });
+                    if (response.type === 'error')
+                        throw new Error(response.message);
+                    if (response.type !== 'pgsProgress')
+                        throw new Error('Unexpected PGS worker response');
+                    this.applyPgsIndexState(response.metadata, response.timestamps, true, true);
+                }
+                else {
+                    if (!this.pgsParser)
+                        throw new Error('PGS parser is not initialized');
+                    this.pgsParser.reset();
+                    this.applyPgsIndexState(this.pgsParser.getMetadata(), this.pgsParser.getTimestamps(), true, false);
+                }
+                this.state.frameCache.clear();
+                this.state.renderIssues.clear();
+                this.state.pendingRenders.clear();
+                this.clearStreamPresentation();
+                this.emitCacheChange(0, 0);
+            }
+            finally {
+                this.streamGeneration++;
+            }
+        });
+    }
     async loadPgsBuffer(data, preserveSource) {
         if (this.state.useWorker) {
             try {
@@ -973,6 +1595,7 @@ export class PgsRenderer extends BaseVideoSubtitleRenderer {
         }
         if (this.state.useWorker && this.state.workerReady) {
             if (!this.state.pendingRenders.has(index)) {
+                const generation = this.streamGeneration;
                 const renderTask = sendToWorker({
                     type: 'renderPgsAtIndex',
                     sessionId: this.state.sessionId,
@@ -990,15 +1613,14 @@ export class PgsRenderer extends BaseVideoSubtitleRenderer {
                 this.state.pendingRenders.set(index, renderPromise);
                 this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
                 renderTask.then(({ frame, renderIssue }) => {
+                    if (generation !== this.streamGeneration || this.disposed)
+                        return;
                     setCachedFrame(this.state, index, frame, renderIssue);
                     this.state.pendingRenders.delete(index);
                     this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
-                    // Force re-render on next frame by resetting lastRenderedIndex
-                    if (this.findCurrentIndex(this.video.currentTime + this.timeOffset) === index) {
-                        this.lastRenderedIndex = -1;
-                    }
                 });
             }
+            this.watchPendingRender(index, this.state.pendingRenders.get(index));
             // Return undefined to indicate async loading in progress
             return undefined;
         }
@@ -1017,6 +1639,7 @@ export class PgsRenderer extends BaseVideoSubtitleRenderer {
         const startTime = this.state.timestamps[index];
         const endTime = this.state.timestamps[index + 1] ?? startTime + 5000;
         const frame = this.state.frameCache.get(index) ?? null;
+        const offscreenFrame = this.getOffscreenFrameMetadata(index);
         return {
             index,
             format: 'pgs',
@@ -1025,8 +1648,8 @@ export class PgsRenderer extends BaseVideoSubtitleRenderer {
             duration: Math.max(0, endTime - startTime),
             screenWidth: metadata.screenWidth,
             screenHeight: metadata.screenHeight,
-            bounds: frame ? getSubtitleBounds(frame) : null,
-            compositionCount: frame?.compositionData.length ?? 0
+            bounds: frame ? getSubtitleBounds(frame) : (offscreenFrame?.bounds ?? null),
+            compositionCount: frame?.compositionData.length ?? offscreenFrame?.compositionCount ?? 0
         };
     }
     isPendingRender(index) {
@@ -1047,15 +1670,18 @@ export class PgsRenderer extends BaseVideoSubtitleRenderer {
         this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
     }
     clearFrameCache() {
+        this.invalidatePresentation();
         this.state.frameCache.clear();
         this.state.renderIssues.clear();
         this.state.pendingRenders.clear();
+        this.clearOffscreenFrameMetadata();
         this.lastRenderedIndex = -1;
         if (this.state.useWorker && this.state.workerReady) {
             sendToWorker({ type: 'clearPgsCache', sessionId: this.state.sessionId }).catch(() => { });
         }
         this.pgsParser?.clearCache();
         this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
+        this.renderPausedFrame();
     }
     async prefetchRange(startIndex, endIndex) {
         const safeStart = Math.max(0, Math.min(startIndex, endIndex));
@@ -1087,6 +1713,7 @@ export class PgsRenderer extends BaseVideoSubtitleRenderer {
         };
     }
     dispose() {
+        this.streamGeneration++;
         super.dispose();
         this.state.frameCache.clear();
         this.state.renderIssues.clear();
@@ -1427,11 +2054,14 @@ export class VobSubRenderer extends BaseVideoSubtitleRenderer {
             }
             // Start async lookup if not already pending
             if (!this.pendingIndexLookup) {
-                this.pendingIndexLookup = sendToWorker({
+                const presentationToken = this.getPresentationToken();
+                const lookup = sendToWorker({
                     type: 'findVobSubIndex',
                     sessionId: this.state.sessionId,
                     timeMs
                 }).then((response) => {
+                    if (!this.isCurrentPresentation(presentationToken))
+                        return this.cachedIndex;
                     if (response.type === 'vobSubIndex') {
                         const newIndex = response.index;
                         const oldIndex = this.cachedIndex;
@@ -1442,9 +2072,18 @@ export class VobSubRenderer extends BaseVideoSubtitleRenderer {
                             this.lastRenderedIndex = -2; // Use -2 to force update even when new index is -1
                         }
                     }
-                    this.pendingIndexLookup = null;
                     return this.cachedIndex;
                 });
+                this.pendingIndexLookup = lookup;
+                void lookup.then(() => {
+                    if (this.pendingIndexLookup !== lookup)
+                        return;
+                    this.pendingIndexLookup = null;
+                    this.renderPausedFrame();
+                }, () => {
+                    if (this.pendingIndexLookup === lookup)
+                        this.pendingIndexLookup = null;
+                });
             }
             return this.cachedIndex;
         }
@@ -1477,12 +2116,9 @@ export class VobSubRenderer extends BaseVideoSubtitleRenderer {
                     setCachedFrame(this.state, index, frame, renderIssue);
                     this.state.pendingRenders.delete(index);
                     this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
-                    // Force re-render on next frame by resetting lastRenderedIndex
-                    if (this.findCurrentIndex(this.video.currentTime + this.timeOffset) === index) {
-                        this.lastRenderedIndex = -1;
-                    }
                 });
             }
+            this.watchPendingRender(index, this.state.pendingRenders.get(index));
             // Return undefined to indicate async loading in progress
             return undefined;
         }
@@ -1501,6 +2137,7 @@ export class VobSubRenderer extends BaseVideoSubtitleRenderer {
         const startTime = this.state.timestamps[index];
         const endTime = this.state.timestamps[index + 1] ?? startTime + 5000;
         const frame = this.state.frameCache.get(index) ?? null;
+        const offscreenFrame = this.getOffscreenFrameMetadata(index);
         return {
             index,
             format: 'vobsub',
@@ -1509,8 +2146,8 @@ export class VobSubRenderer extends BaseVideoSubtitleRenderer {
             duration: Math.max(0, endTime - startTime),
             screenWidth: metadata.screenWidth,
             screenHeight: metadata.screenHeight,
-            bounds: frame ? getSubtitleBounds(frame) : null,
-            compositionCount: frame?.compositionData.length ?? 0,
+            bounds: frame ? getSubtitleBounds(frame) : (offscreenFrame?.bounds ?? null),
+            compositionCount: frame?.compositionData.length ?? offscreenFrame?.compositionCount ?? 0,
             language: metadata.language ?? null,
             trackId: metadata.trackId ?? null
         };
@@ -1537,9 +2174,11 @@ export class VobSubRenderer extends BaseVideoSubtitleRenderer {
         this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
     }
     clearFrameCache() {
+        this.invalidatePresentation();
         this.state.frameCache.clear();
         this.state.renderIssues.clear();
         this.state.pendingRenders.clear();
+        this.clearOffscreenFrameMetadata();
         this.cachedIndex = -1;
         this.cachedIndexTime = -1;
         this.pendingIndexLookup = null;
@@ -1549,6 +2188,7 @@ export class VobSubRenderer extends BaseVideoSubtitleRenderer {
         }
         this.vobsubParser?.clearCache();
         this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
+        this.renderPausedFrame();
     }
     async prefetchRange(startIndex, endIndex) {
         const safeStart = Math.max(0, Math.min(startIndex, endIndex));
@@ -1585,10 +2225,13 @@ export class VobSubRenderer extends BaseVideoSubtitleRenderer {
             sendToWorker({ type: 'setVobSubDebandEnabled', sessionId: this.state.sessionId, enabled }).catch(() => { });
         }
         this.vobsubParser?.setDebandEnabled(enabled);
+        this.invalidatePresentation();
         // Clear cache to force re-render with new settings
         this.state.frameCache.clear();
+        this.clearOffscreenFrameMetadata();
         this.lastRenderedIndex = -1;
         this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
+        this.renderPausedFrame();
     }
     /** Set debanding threshold (0-255, default: 64) */
     setDebandThreshold(threshold) {
@@ -1596,10 +2239,13 @@ export class VobSubRenderer extends BaseVideoSubtitleRenderer {
             sendToWorker({ type: 'setVobSubDebandThreshold', sessionId: this.state.sessionId, threshold }).catch(() => { });
         }
         this.vobsubParser?.setDebandThreshold(threshold);
+        this.invalidatePresentation();
         // Clear cache to force re-render with new settings
         this.state.frameCache.clear();
+        this.clearOffscreenFrameMetadata();
         this.lastRenderedIndex = -1;
         this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
+        this.renderPausedFrame();
     }
     /** Set debanding sample range in pixels (1-64, default: 15) */
     setDebandRange(range) {
@@ -1607,10 +2253,13 @@ export class VobSubRenderer extends BaseVideoSubtitleRenderer {
             sendToWorker({ type: 'setVobSubDebandRange', sessionId: this.state.sessionId, range }).catch(() => { });
         }
         this.vobsubParser?.setDebandRange(range);
+        this.invalidatePresentation();
         // Clear cache to force re-render with new settings
         this.state.frameCache.clear();
+        this.clearOffscreenFrameMetadata();
         this.lastRenderedIndex = -1;
         this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
+        this.renderPausedFrame();
     }
     /** Check if debanding is enabled */
     get debandEnabled() {
@@ -1629,17 +2278,571 @@ export class VobSubRenderer extends BaseVideoSubtitleRenderer {
         this.state.sessionId = null;
     }
 }
-/** Create a video subtitle renderer with automatic format detection. */
-export function createAutoSubtitleRenderer(options) {
-    const format = detectSubtitleFormat({
-        data: options.subContent,
-        idxContent: options.idxContent,
-        fileName: options.fileName,
-        subUrl: options.subUrl,
-        idxUrl: options.idxUrl
-    });
-    if (format === 'pgs') {
-        return new PgsRenderer(options);
+export class DvbRenderer extends BaseVideoSubtitleRenderer {
+    dvbParser = null;
+    endTimestamps = new Float64Array(0);
+    state = createWorkerState();
+    streamOperationQueue = Promise.resolve();
+    streamGeneration = 0;
+    onLoading;
+    onLoaded;
+    onError;
+    constructor(options) {
+        super(options, 'dvb');
+        this.onLoading = options.onLoading;
+        this.onLoaded = options.onLoaded;
+        this.onError = options.onError;
+        applyCacheLimit(this.state, this.cacheLimit);
+        this.startInit();
+    }
+    async loadSubtitles() {
+        try {
+            this.emitEvent({ type: 'loading', format: 'dvb' });
+            this.onLoading?.();
+            if (this.subContent) {
+                const data = new Uint8Array(this.subContent);
+                this.emitLoadProgress('dvb', this.memoryProgress(data.byteLength), 0);
+                await this.loadDvbBuffer(data, true);
+                this.onLoaded?.();
+                return;
+            }
+            if (!this.subUrl) {
+                await this.beginDvbPushSession();
+                this.onLoaded?.();
+                return;
+            }
+            if (!this.streamingLoad) {
+                const { data, strategy, rangeSupported, total } = await fetchSubtitleAsset(this.subUrl, {
+                    preferRange: this.rangeRequests,
+                    onProgress: (progress) => this.emitLoadProgress('dvb', progress, this.state.timestamps.length)
+                });
+                this.emitLoadProgress('dvb', { loaded: data.byteLength, total: total ?? data.byteLength, ratio: 1, rangeSupported, strategy }, 0);
+                await this.loadDvbBuffer(data, false);
+                this.onLoaded?.();
+                return;
+            }
+            await this.loadDvbStreaming(this.subUrl);
+            this.onLoaded?.();
+        }
+        catch (error) {
+            const resolvedError = normalizeSubtitleError(error, { format: 'dvb' });
+            this.emitEvent({ type: 'error', format: 'dvb', error: resolvedError });
+            this.onError?.(resolvedError);
+        }
+    }
+    applyDvbIndexState(metadata, timestamps, endTimestamps, partial, usingWorker) {
+        this.state.metadata = metadata;
+        this.state.timestamps = timestamps;
+        this.endTimestamps = endTimestamps;
+        this.setParserMetadata(metadata);
+        this.emitIndexed('dvb', metadata, partial);
+        if (!this.isLoaded && timestamps.length > 0) {
+            this.isLoaded = true;
+            if (usingWorker) {
+                this.state.workerReady = true;
+                this.emitWorkerState(true, true, this.state.sessionId);
+            }
+        }
+    }
+    async beginDvbPushSession() {
+        if (this.state.useWorker) {
+            try {
+                this.state.sessionId = createWorkerSessionId();
+                await getOrCreateWorker();
+                this.emitWorkerState(true, false, this.state.sessionId);
+                const response = await sendToWorker({ type: 'beginDvb', sessionId: this.state.sessionId });
+                if (response.type === 'error')
+                    throw new Error(response.message);
+                if (response.type !== 'dvbProgress')
+                    throw new Error('Unexpected DVB worker response');
+                this.applyDvbIndexState(response.metadata, response.timestamps, response.endTimestamps, true, true);
+                this.state.workerReady = true;
+                this.isLoaded = true;
+                this.emitWorkerState(true, true, this.state.sessionId);
+                return;
+            }
+            catch (workerError) {
+                this.state.useWorker = false;
+                this.state.workerReady = false;
+                this.state.sessionId = null;
+                this.emitWorkerState(false, false, null, true);
+                this.emitWarning(createSubtitleWarning('WORKER_FALLBACK', 'DVB worker initialization failed, falling back to main-thread rendering.', {
+                    format: 'dvb',
+                    details: { reason: workerError instanceof Error ? workerError.message : String(workerError) }
+                }));
+            }
+        }
+        await this.yieldToMain();
+        this.dvbParser = new DvbParser({ debug: this.debug, onWarning: (warning) => this.emitWarning(warning) });
+        this.dvbParser.reset();
+        const metadata = this.dvbParser.getMetadata();
+        this.applyDvbIndexState(metadata, this.dvbParser.getTimestamps(), this.dvbParser.getEndTimestamps(), true, false);
+        this.isLoaded = true;
+    }
+    enqueueStreamOperation(operation) {
+        const run = async () => {
+            try {
+                await this.waitUntilInitialized();
+                return await operation();
+            }
+            catch (error) {
+                const resolvedError = normalizeSubtitleError(error, { format: 'dvb' });
+                this.emitEvent({ type: 'error', format: 'dvb', error: resolvedError });
+                this.onError?.(resolvedError);
+                throw resolvedError;
+            }
+        };
+        const result = this.streamOperationQueue.then(run, run);
+        this.streamOperationQueue = result.then(() => undefined, () => undefined);
+        return result;
+    }
+    /** Append a chunk to the active DVB stream and return the number of newly indexed cues. */
+    append(data) {
+        return this.enqueueStreamOperation(async () => {
+            const chunk = data instanceof Uint8Array ? data : new Uint8Array(data);
+            if (chunk.byteLength === 0)
+                return 0;
+            let added;
+            if (this.state.useWorker && this.state.workerReady && this.state.sessionId) {
+                const response = await sendToWorker({
+                    type: 'appendDvb',
+                    sessionId: this.state.sessionId,
+                    data: createTransferableBuffer(chunk, true)
+                });
+                if (response.type === 'error')
+                    throw new Error(response.message);
+                if (response.type !== 'dvbProgress')
+                    throw new Error('Unexpected DVB worker response');
+                added = response.added;
+                if (added > 0) {
+                    this.applyDvbIndexState(response.metadata, response.timestamps, response.endTimestamps, true, true);
+                }
+                else {
+                    this.state.metadata = response.metadata;
+                    this.state.timestamps = response.timestamps;
+                    this.endTimestamps = response.endTimestamps;
+                }
+            }
+            else {
+                if (!this.dvbParser)
+                    throw new Error('DVB parser is not initialized');
+                added = this.dvbParser.feed(chunk);
+                if (added > 0) {
+                    this.applyDvbIndexState(this.dvbParser.getMetadata(), this.dvbParser.getTimestamps(), this.dvbParser.getEndTimestamps(), true, false);
+                }
+            }
+            if (added > 0)
+                this.refreshStreamPresentation();
+            return added;
+        });
+    }
+    /** Flush incomplete trailing DVB input and return the total indexed cue count. */
+    flush() {
+        return this.enqueueStreamOperation(async () => {
+            let count;
+            if (this.state.useWorker && this.state.workerReady && this.state.sessionId) {
+                const response = await sendToWorker({ type: 'finishDvb', sessionId: this.state.sessionId });
+                if (response.type === 'error')
+                    throw new Error(response.message);
+                if (response.type !== 'dvbProgress')
+                    throw new Error('Unexpected DVB worker response');
+                count = response.count;
+                this.applyDvbIndexState(response.metadata, response.timestamps, response.endTimestamps, false, true);
+            }
+            else {
+                if (!this.dvbParser)
+                    throw new Error('DVB parser is not initialized');
+                count = this.dvbParser.finishFeed();
+                this.applyDvbIndexState(this.dvbParser.getMetadata(), this.dvbParser.getTimestamps(), this.dvbParser.getEndTimestamps(), false, false);
+            }
+            this.refreshStreamPresentation();
+            return count;
+        });
+    }
+    /** Reset the DVB stream while keeping the renderer and canvas ready for more chunks. */
+    reset() {
+        return this.enqueueStreamOperation(async () => {
+            this.streamGeneration++;
+            try {
+                if (this.state.useWorker && this.state.workerReady && this.state.sessionId) {
+                    const response = await sendToWorker({ type: 'resetDvb', sessionId: this.state.sessionId });
+                    if (response.type === 'error')
+                        throw new Error(response.message);
+                    if (response.type !== 'dvbProgress')
+                        throw new Error('Unexpected DVB worker response');
+                    this.applyDvbIndexState(response.metadata, response.timestamps, response.endTimestamps, true, true);
+                }
+                else {
+                    if (!this.dvbParser)
+                        throw new Error('DVB parser is not initialized');
+                    this.dvbParser.reset();
+                    this.applyDvbIndexState(this.dvbParser.getMetadata(), this.dvbParser.getTimestamps(), this.dvbParser.getEndTimestamps(), true, false);
+                }
+                this.state.frameCache.clear();
+                this.state.renderIssues.clear();
+                this.state.pendingRenders.clear();
+                this.clearStreamPresentation();
+                this.emitCacheChange(0, 0);
+            }
+            finally {
+                this.streamGeneration++;
+            }
+        });
+    }
+    async loadDvbBuffer(data, preserveSource) {
+        if (this.state.useWorker) {
+            try {
+                this.state.sessionId = createWorkerSessionId();
+                await getOrCreateWorker();
+                this.emitWorkerState(true, false, this.state.sessionId);
+                const transferableData = createTransferableBuffer(data, preserveSource);
+                const loadResponse = await sendToWorker({
+                    type: 'loadDvb',
+                    sessionId: this.state.sessionId,
+                    data: transferableData
+                });
+                if (loadResponse.type === 'dvbLoaded') {
+                    this.state.workerReady = true;
+                    this.state.metadata = loadResponse.metadata;
+                    this.state.timestamps = loadResponse.timestamps;
+                    this.endTimestamps = loadResponse.endTimestamps;
+                    this.isLoaded = true;
+                    this.setParserMetadata(loadResponse.metadata);
+                    this.emitIndexed('dvb', loadResponse.metadata, false);
+                    this.emitWorkerState(true, true, this.state.sessionId);
+                    return;
+                }
+                else if (loadResponse.type === 'error') {
+                    throw new Error(loadResponse.message);
+                }
+            }
+            catch (workerError) {
+                this.state.useWorker = false;
+                this.emitWorkerState(false, false, this.state.sessionId, true);
+                this.emitWarning(createSubtitleWarning('WORKER_FALLBACK', 'DVB worker initialization failed, falling back to main-thread rendering.', {
+                    format: 'dvb',
+                    details: { reason: workerError instanceof Error ? workerError.message : String(workerError) }
+                }));
+            }
+        }
+        await this.loadOnMainThread(data);
+    }
+    async loadDvbStreaming(url) {
+        let usedWorker = false;
+        let indexedOnce = false;
+        if (this.state.useWorker) {
+            try {
+                this.state.sessionId = createWorkerSessionId();
+                await getOrCreateWorker();
+                this.emitWorkerState(true, false, this.state.sessionId);
+                const begin = await sendToWorker({ type: 'beginDvb', sessionId: this.state.sessionId });
+                if (begin.type === 'error')
+                    throw new Error(begin.message);
+                usedWorker = true;
+            }
+            catch (workerError) {
+                this.state.useWorker = false;
+                usedWorker = false;
+                this.emitWorkerState(false, false, this.state.sessionId, true);
+                this.emitWarning(createSubtitleWarning('WORKER_FALLBACK', 'DVB worker initialization failed, falling back to main-thread rendering.', {
+                    format: 'dvb',
+                    details: { reason: workerError instanceof Error ? workerError.message : String(workerError) }
+                }));
+            }
+        }
+        if (!usedWorker) {
+            await this.yieldToMain();
+            this.dvbParser = new DvbParser({ debug: this.debug, onWarning: (warning) => this.emitWarning(warning) });
+            this.dvbParser.reset();
+        }
+        try {
+            const { data, strategy, rangeSupported, total } = await fetchSubtitleAsset(url, {
+                preferRange: this.rangeRequests,
+                onProgress: (progress) => this.emitLoadProgress('dvb', progress, this.state.timestamps.length)
+            }, async (chunk, progress) => {
+                if (chunk.byteLength === 0)
+                    return;
+                if (usedWorker && this.state.sessionId) {
+                    const transferable = createTransferableBuffer(chunk, true);
+                    const response = await sendToWorker({
+                        type: 'appendDvb',
+                        sessionId: this.state.sessionId,
+                        data: transferable
+                    });
+                    if (response.type === 'dvbProgress') {
+                        if (response.added > 0 || !indexedOnce) {
+                            this.applyDvbIndexState(response.metadata, response.timestamps, response.endTimestamps, true, true);
+                            indexedOnce = true;
+                        }
+                        else {
+                            this.state.timestamps = response.timestamps;
+                            this.endTimestamps = response.endTimestamps;
+                            this.state.metadata = response.metadata;
+                        }
+                    }
+                    else if (response.type === 'error') {
+                        throw new Error(response.message);
+                    }
+                }
+                else if (this.dvbParser) {
+                    const added = this.dvbParser.feed(chunk);
+                    if (added > 0 || !indexedOnce) {
+                        const metadata = this.dvbParser.getMetadata();
+                        this.applyDvbIndexState(metadata, this.dvbParser.getTimestamps(), this.dvbParser.getEndTimestamps(), true, false);
+                        indexedOnce = true;
+                    }
+                }
+                this.emitLoadProgress('dvb', progress, this.state.timestamps.length);
+            });
+            if (usedWorker && this.state.sessionId) {
+                const finish = await sendToWorker({ type: 'finishDvb', sessionId: this.state.sessionId });
+                if (finish.type === 'dvbProgress') {
+                    this.applyDvbIndexState(finish.metadata, finish.timestamps, finish.endTimestamps, false, true);
+                    this.state.workerReady = true;
+                    this.isLoaded = true;
+                    this.emitWorkerState(true, true, this.state.sessionId);
+                }
+                else if (finish.type === 'error') {
+                    throw new Error(finish.message);
+                }
+            }
+            else if (this.dvbParser) {
+                this.dvbParser.finishFeed();
+                const metadata = this.dvbParser.getMetadata();
+                this.state.timestamps = this.dvbParser.getTimestamps();
+                this.endTimestamps = this.dvbParser.getEndTimestamps();
+                this.state.metadata = metadata;
+                this.isLoaded = true;
+                this.setParserMetadata(metadata);
+                this.emitIndexed('dvb', metadata, false);
+                if (metadata.cueCount === 0) {
+                    this.state.renderIssues.set(-1, 'INVALID_SUBTITLE_DATA');
+                }
+            }
+            this.emitLoadProgress('dvb', {
+                loaded: data.byteLength,
+                total: total ?? data.byteLength,
+                ratio: 1,
+                rangeSupported,
+                strategy: strategy
+            }, this.state.timestamps.length);
+        }
+        catch (error) {
+            if (usedWorker) {
+                this.state.useWorker = false;
+                this.emitWorkerState(false, false, this.state.sessionId, true);
+            }
+            this.emitWarning(createSubtitleWarning('RANGE_FALLBACK', 'Progressive DVB load failed; retrying with a full buffer fetch.', {
+                format: 'dvb',
+                details: { reason: error instanceof Error ? error.message : String(error) }
+            }));
+            const { data } = await fetchSubtitleAsset(url, { preferRange: this.rangeRequests });
+            await this.loadDvbBuffer(data, false);
+        }
+    }
+    async loadOnMainThread(data) {
+        await this.yieldToMain();
+        this.dvbParser = new DvbParser({ debug: this.debug, onWarning: (warning) => this.emitWarning(warning) });
+        await new Promise((resolve) => {
+            const scheduleTask = typeof requestIdleCallback !== 'undefined'
+                ? (cb) => requestIdleCallback(() => cb(), { timeout: 1000 })
+                : (cb) => setTimeout(cb, 0);
+            scheduleTask(() => {
+                const count = this.dvbParser.load(data);
+                this.state.timestamps = this.dvbParser.getTimestamps();
+                this.endTimestamps = this.dvbParser.getEndTimestamps();
+                this.state.metadata = this.dvbParser.getMetadata();
+                this.isLoaded = true;
+                this.setParserMetadata(this.state.metadata);
+                this.emitIndexed('dvb', this.state.metadata, false);
+                if (count === 0) {
+                    this.state.renderIssues.set(-1, 'INVALID_SUBTITLE_DATA');
+                }
+                resolve();
+            });
+        });
+    }
+    getWorkerRendererState() {
+        return this.state;
+    }
+    /** Yield to main thread to prevent UI blocking */
+    yieldToMain() {
+        // Use scheduler.yield if available (Chrome 115+)
+        const globalScheduler = globalThis.scheduler;
+        if (globalScheduler && typeof globalScheduler.yield === 'function') {
+            return globalScheduler.yield();
+        }
+        // Fallback to setTimeout
+        return new Promise((resolve) => setTimeout(resolve, 0));
+    }
+    renderAtTime(time) {
+        const index = this.findCurrentIndex(time);
+        return index < 0 ? undefined : this.renderAtIndex(index);
+    }
+    findCurrentIndex(time) {
+        if (this.state.useWorker && this.state.workerReady) {
+            const timeMs = time * 1000;
+            const index = binarySearchTimestamp(this.state.timestamps, timeMs);
+            return index >= 0 && timeMs < (this.endTimestamps[index] ?? this.state.timestamps[index]) ? index : -1;
+        }
+        return this.dvbParser?.findIndexAtTimestamp(time) ?? -1;
+    }
+    renderAtIndex(index) {
+        if (this.state.frameCache.has(index)) {
+            return this.state.frameCache.get(index) ?? undefined;
+        }
+        if (this.state.useWorker && this.state.workerReady) {
+            if (!this.state.pendingRenders.has(index)) {
+                const generation = this.streamGeneration;
+                const renderTask = sendToWorker({
+                    type: 'renderDvbAtIndex',
+                    sessionId: this.state.sessionId,
+                    index
+                }).then((response) => {
+                    if (response.type === 'dvbFrame') {
+                        return {
+                            frame: response.frame ? convertFrameData(response.frame) : null,
+                            renderIssue: response.renderIssue?.trim() || null
+                        };
+                    }
+                    return { frame: null, renderIssue: null };
+                });
+                const renderPromise = renderTask.then(({ frame }) => frame);
+                this.state.pendingRenders.set(index, renderPromise);
+                this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
+                renderTask.then(({ frame, renderIssue }) => {
+                    if (generation !== this.streamGeneration || this.disposed)
+                        return;
+                    setCachedFrame(this.state, index, frame, renderIssue);
+                    this.state.pendingRenders.delete(index);
+                    this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
+                });
+            }
+            this.watchPendingRender(index, this.state.pendingRenders.get(index));
+            // Return undefined to indicate async loading in progress
+            return undefined;
+        }
+        const rendered = this.dvbParser?.renderAtIndex(index) ?? null;
+        setCachedFrame(this.state, index, rendered, this.dvbParser?.getLastRenderIssue() ?? null);
+        this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
+        return rendered ?? undefined;
+    }
+    buildCueMetadata(index) {
+        if (this.dvbParser) {
+            return this.dvbParser.getCueMetadata(index);
+        }
+        const metadata = this.state.metadata;
+        if (!metadata || index < 0 || index >= this.state.timestamps.length)
+            return null;
+        const startTime = this.state.timestamps[index];
+        const endTime = this.endTimestamps[index] ?? startTime;
+        const frame = this.state.frameCache.get(index) ?? null;
+        const offscreenFrame = this.getOffscreenFrameMetadata(index);
+        return {
+            index,
+            format: 'dvb',
+            startTime,
+            endTime,
+            duration: Math.max(0, endTime - startTime),
+            screenWidth: metadata.screenWidth,
+            screenHeight: metadata.screenHeight,
+            bounds: frame ? getSubtitleBounds(frame) : (offscreenFrame?.bounds ?? null),
+            compositionCount: frame?.compositionData.length ?? offscreenFrame?.compositionCount ?? 0
+        };
+    }
+    isPendingRender(index) {
+        return this.state.pendingRenders.has(index);
+    }
+    onSeek() {
+        this.state.frameCache.clear();
+        this.state.renderIssues.clear();
+        this.state.pendingRenders.clear();
+        this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
+        if (this.state.useWorker && this.state.workerReady) {
+            sendToWorker({ type: 'clearDvbCache', sessionId: this.state.sessionId }).catch(() => { });
+        }
+        this.dvbParser?.clearCache();
+    }
+    setCacheLimit(limit) {
+        this.cacheLimit = applyCacheLimit(this.state, limit);
+        this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
+    }
+    clearFrameCache() {
+        this.invalidatePresentation();
+        this.state.frameCache.clear();
+        this.state.renderIssues.clear();
+        this.state.pendingRenders.clear();
+        this.clearOffscreenFrameMetadata();
+        this.lastRenderedIndex = -1;
+        if (this.state.useWorker && this.state.workerReady) {
+            sendToWorker({ type: 'clearDvbCache', sessionId: this.state.sessionId }).catch(() => { });
+        }
+        this.dvbParser?.clearCache();
+        this.emitCacheChange(this.state.frameCache.size, this.state.pendingRenders.size);
+        this.renderPausedFrame();
+    }
+    async prefetchRange(startIndex, endIndex) {
+        const safeStart = Math.max(0, Math.min(startIndex, endIndex));
+        const safeEnd = Math.min(Math.max(startIndex, endIndex), this.state.timestamps.length - 1);
+        for (let index = safeStart; index <= safeEnd; index++) {
+            if (this.state.frameCache.has(index))
+                continue;
+            const result = this.renderAtIndex(index);
+            if (result === undefined && this.state.pendingRenders.has(index)) {
+                await this.state.pendingRenders.get(index);
+            }
+        }
+    }
+    async prefetchAroundTime(time, before = this.prefetchBefore, after = this.prefetchAfter) {
+        const currentIndex = this.findCurrentIndex(time);
+        if (currentIndex < 0)
+            return;
+        await this.prefetchRange(currentIndex - before, currentIndex + after);
+    }
+    /** Get performance statistics for DVB renderer */
+    getStats() {
+        const baseStats = this.getBaseStats();
+        return {
+            ...baseStats,
+            usingWorker: this.state.useWorker && this.state.workerReady,
+            cachedFrames: this.state.frameCache.size,
+            pendingRenders: this.state.pendingRenders.size,
+            totalEntries: this.state.timestamps.length || (this.dvbParser?.getTimestamps().length ?? 0)
+        };
+    }
+    dispose() {
+        this.streamGeneration++;
+        super.dispose();
+        this.state.frameCache.clear();
+        this.state.renderIssues.clear();
+        this.state.pendingRenders.clear();
+        if (this.state.useWorker && this.state.workerReady) {
+            sendToWorker({ type: 'disposeDvb', sessionId: this.state.sessionId }).catch(() => { });
+        }
+        this.dvbParser?.dispose();
+        this.dvbParser = null;
+        this.endTimestamps = new Float64Array(0);
+        this.state.sessionId = null;
+    }
+}
+/**
+ * High-level VobSub subtitle renderer with Web Worker support.
+ * Compatible with the old libpgs-js API.
+ */
+/** Create a video subtitle renderer with automatic format detection. */
+export function createAutoSubtitleRenderer(options) {
+    const format = detectSubtitleFormat({
+        data: options.subContent,
+        idxContent: options.idxContent,
+        fileName: options.fileName,
+        subUrl: options.subUrl,
+        idxUrl: options.idxUrl
+    });
+    if (format === 'pgs') {
+        return new PgsRenderer(options);
+    }
+    if (format === 'dvb') {
+        return new DvbRenderer(options);
     }
     if (format === 'vobsub') {
         return new VobSubRenderer(options);