@remotion/media 4.0.351 → 4.0.352

package/dist/video/video-for-rendering.js

@@ -1,21 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
+import { cancelRender, Internals, useCurrentFrame, useDelayRender, useRemotionEnvironment, useVideoConfig, } from 'remotion';
 import { extractFrameViaBroadcastChannel } from '../video-extraction/extract-frame-via-broadcast-channel';
 export const VideoForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, 
 // call when a frame of the video, i.e. frame drawn on canvas
-onVideoFrame, logLevel = window.remotion_logLevel, loop, style, }) => {
+onVideoFrame, logLevel = window.remotion_logLevel, loop, style, className, }) => {
     const absoluteFrame = Internals.useTimelinePosition();
-    const videoConfig = Internals.useUnsafeVideoConfig();
+    const { fps } = useVideoConfig();
     const canvasRef = useRef(null);
     const { registerRenderAsset, unregisterRenderAsset } = useContext(Internals.RenderAssetManager);
     const frame = useCurrentFrame();
     const volumePropsFrame = Internals.useFrameForVolumeProp(loopVolumeCurveBehavior ?? 'repeat');
     const environment = useRemotionEnvironment();
     const [id] = useState(() => `${Math.random()}`.replace('0.', ''));
-    if (!videoConfig) {
-        throw new Error('No video config found');
-    }
     if (!src) {
         throw new TypeError('No `src` was passed to <Video>.');
     }
@@ -37,7 +34,6 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, }) => {
         }
         return true;
     }, [muted, volume]);
-    const { fps } = videoConfig;
     const { delayRender, continueRender } = useDelayRender();
     useLayoutEffect(() => {
         if (!canvasRef.current) {
@@ -64,7 +60,20 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, }) => {
             .then(({ frame: imageBitmap, audio }) => {
             if (imageBitmap) {
                 onVideoFrame?.(imageBitmap);
-                canvasRef.current?.getContext('2d')?.drawImage(imageBitmap, 0, 0);
+                const context = canvasRef.current?.getContext('2d');
+                if (!context) {
+                    return;
+                }
+                context.canvas.width =
+                    imageBitmap instanceof ImageBitmap
+                        ? imageBitmap.width
+                        : imageBitmap.displayWidth;
+                context.canvas.height =
+                    imageBitmap instanceof ImageBitmap
+                        ? imageBitmap.height
+                        : imageBitmap.displayHeight;
+                context.canvas.style.aspectRatio = `${context.canvas.width} / ${context.canvas.height}`;
+                context.drawImage(imageBitmap, 0, 0);
                 imageBitmap.close();
             }
             else if (window.remotion_videoEnabled) {
@@ -111,5 +120,10 @@ onVideoFrame, logLevel = window.remotion_logLevel, loop, style, }) => {
         volume,
         loop,
     ]);
-    return (_jsx("canvas", { ref: canvasRef, style: style, width: videoConfig.width, height: videoConfig.height }));
+    const classNameValue = useMemo(() => {
+        return [Internals.OBJECTFIT_CONTAIN_CLASS_NAME, className]
+            .filter(Internals.truthy)
+            .join(' ');
+    }, [className]);
+    return _jsx("canvas", { ref: canvasRef, style: style, className: classNameValue });
 };

package/dist/video-extraction/keyframe-manager.js

@@ -1,4 +1,4 @@
-import { getTotalCacheStats, MAX_CACHE_SIZE, SAFE_BACK_WINDOW_IN_SECONDS, } from '../caches';
+import { getMaxVideoCacheSize, getTotalCacheStats, SAFE_BACK_WINDOW_IN_SECONDS, } from '../caches';
 import { Log } from '../log';
 import { getFramesSinceKeyframe } from './get-frames-since-keyframe';
 export const makeKeyframeManager = () => {
@@ -69,7 +69,8 @@ export const makeKeyframeManager = () => {
     };
     const ensureToStayUnderMaxCacheSize = async (logLevel) => {
         let cacheStats = await getTotalCacheStats();
-        while (cacheStats.totalSize > MAX_CACHE_SIZE) {
+        const maxCacheSize = getMaxVideoCacheSize(logLevel);
+        while (cacheStats.totalSize > maxCacheSize) {
             await deleteOldestKeyframeBank(logLevel);
             cacheStats = await getTotalCacheStats();
         }

package/dist/video-extraction/media-player.d.ts

@@ -0,0 +1,64 @@
+import { type LogLevel } from '../log';
+export declare class MediaPlayer {
+    private canvas;
+    private context;
+    private src;
+    private logLevel;
+    private canvasSink;
+    private videoFrameIterator;
+    private nextFrame;
+    private audioSink;
+    private audioBufferIterator;
+    private queuedAudioNodes;
+    private gainNode;
+    private expectedAudioTime;
+    private sharedAudioContext;
+    private mediaTimeOffset;
+    private playing;
+    private animationFrameId;
+    private asyncId;
+    private initialized;
+    private totalDuration;
+    private actualFps;
+    private isStalled;
+    private onStalledChangeCallback?;
+    private lastAudioProgressAtMs;
+    private lastNetworkActivityAtMs;
+    private isNetworkActive;
+    private isSeeking;
+    private canStartAudio;
+    constructor({ canvas, src, logLevel, sharedAudioContext, }: {
+        canvas: HTMLCanvasElement;
+        src: string;
+        logLevel: LogLevel;
+        sharedAudioContext?: AudioContext | null;
+    });
+    initialize(startTime?: number): Promise<void>;
+    seekTo(time: number): void;
+    drawInitialFrame(time?: number): Promise<void>;
+    play(): Promise<void>;
+    pause(): void;
+    dispose(): void;
+    get currentTime(): number;
+    private getPlaybackTime;
+    get duration(): number;
+    get isPlaying(): boolean;
+    get stalled(): boolean;
+    onStalledChange(callback: (isStalled: boolean) => void): void;
+    private renderSingleFrame;
+    private startRenderLoop;
+    private stopRenderLoop;
+    private render;
+    private startVideoIterator;
+    private updateNextFrame;
+    private tryStartAudio;
+    private getCurrentTimeMs;
+    private resetAudioProgressStopwatch;
+    private getAudioLookaheadSec;
+    private calculateAudioStallThresholdSec;
+    private isNetworkStalled;
+    private checkVideoStall;
+    private checkIfStalled;
+    private updateStalledState;
+    private runAudioIterator;
+}

package/dist/video-extraction/media-player.js

@@ -0,0 +1,501 @@
+import { ALL_FORMATS, AudioBufferSink, CanvasSink, Input, UrlSource, } from 'mediabunny';
+import { Log } from '../log';
+const SEEK_THRESHOLD = 0.05;
+export class MediaPlayer {
+    constructor({ canvas, src, logLevel, sharedAudioContext, }) {
+        this.canvasSink = null;
+        this.videoFrameIterator = null;
+        this.nextFrame = null;
+        this.audioSink = null;
+        this.audioBufferIterator = null;
+        this.queuedAudioNodes = new Set();
+        this.gainNode = null;
+        this.expectedAudioTime = 0;
+        this.sharedAudioContext = null;
+        this.mediaTimeOffset = 0;
+        this.playing = false;
+        this.animationFrameId = null;
+        this.asyncId = 0;
+        this.initialized = false;
+        this.totalDuration = 0;
+        this.actualFps = null;
+        // for remotion buffer state
+        this.isStalled = false;
+        this.lastAudioProgressAtMs = 0;
+        this.lastNetworkActivityAtMs = 0;
+        this.isNetworkActive = false;
+        this.isSeeking = false;
+        // A/V sync coordination
+        this.canStartAudio = false;
+        this.render = () => {
+            const currentPlaybackTime = this.getPlaybackTime();
+            if (this.nextFrame && this.nextFrame.timestamp <= currentPlaybackTime) {
+                Log.trace(this.logLevel, `[MediaPlayer] Drawing frame at ${this.nextFrame.timestamp.toFixed(3)}s (playback time: ${currentPlaybackTime.toFixed(3)}s)`);
+                this.context.drawImage(this.nextFrame.canvas, 0, 0);
+                // For video-only content, track video progress as audio progress
+                if (!this.audioSink) {
+                    this.resetAudioProgressStopwatch();
+                }
+                this.nextFrame = null;
+                this.updateNextFrame();
+            }
+            this.updateStalledState();
+            // continue render loop only if playing
+            if (this.playing) {
+                this.animationFrameId = requestAnimationFrame(this.render);
+            }
+            else {
+                this.animationFrameId = null;
+            }
+        };
+        this.startVideoIterator = async (timeToSeek) => {
+            if (!this.canvasSink) {
+                return;
+            }
+            this.asyncId++;
+            const currentAsyncId = this.asyncId;
+            await this.videoFrameIterator?.return();
+            this.videoFrameIterator = this.canvasSink.canvases(timeToSeek);
+            try {
+                const firstFrame = (await this.videoFrameIterator.next()).value ?? null;
+                const secondFrame = (await this.videoFrameIterator.next()).value ?? null;
+                if (currentAsyncId !== this.asyncId) {
+                    Log.trace(this.logLevel, `[MediaPlayer] Race condition detected, aborting startVideoIterator for ${timeToSeek.toFixed(3)}s`);
+                    return;
+                }
+                if (firstFrame) {
+                    Log.trace(this.logLevel, `[MediaPlayer] Drew initial frame ${firstFrame.timestamp.toFixed(3)}s`);
+                    this.context.drawImage(firstFrame.canvas, 0, 0);
+                    // For video-only content, track video progress as audio progress
+                    if (!this.audioSink) {
+                        this.resetAudioProgressStopwatch();
+                    }
+                    this.canStartAudio = true;
+                    this.isSeeking = false;
+                    this.tryStartAudio();
+                }
+                this.nextFrame = secondFrame ?? null;
+                if (secondFrame) {
+                    Log.trace(this.logLevel, `[MediaPlayer] Buffered next frame ${secondFrame.timestamp.toFixed(3)}s`);
+                    // For video-only content, track video progress as audio progress
+                    if (!this.audioSink) {
+                        this.resetAudioProgressStopwatch();
+                    }
+                    if (!this.canStartAudio) {
+                        this.canStartAudio = true;
+                        this.tryStartAudio();
+                    }
+                }
+                this.updateStalledState();
+            }
+            catch (error) {
+                Log.error('[MediaPlayer] Failed to start video iterator', error);
+            }
+        };
+        this.updateNextFrame = async () => {
+            if (!this.videoFrameIterator) {
+                return;
+            }
+            const currentAsyncId = this.asyncId;
+            try {
+                while (true) {
+                    const newNextFrame = (await this.videoFrameIterator.next()).value ?? null;
+                    if (!newNextFrame) {
+                        break;
+                    }
+                    if (currentAsyncId !== this.asyncId) {
+                        Log.trace(this.logLevel, `[MediaPlayer] Race condition detected in updateNextFrame`);
+                        break;
+                    }
+                    if (newNextFrame.timestamp <= this.getPlaybackTime()) {
+                        Log.trace(this.logLevel, `[MediaPlayer] Drawing immediate frame ${newNextFrame.timestamp.toFixed(3)}s`);
+                        this.context.drawImage(newNextFrame.canvas, 0, 0);
+                        // For video-only content, track video progress as audio progress
+                        if (!this.audioSink) {
+                            this.resetAudioProgressStopwatch();
+                        }
+                    }
+                    else {
+                        this.nextFrame = newNextFrame;
+                        Log.trace(this.logLevel, `[MediaPlayer] Buffered next frame ${newNextFrame.timestamp.toFixed(3)}s`);
+                        // For video-only content, track video progress as audio progress
+                        if (!this.audioSink) {
+                            this.resetAudioProgressStopwatch();
+                        }
+                        // Open audio gate when new frames become available
+                        if (!this.canStartAudio) {
+                            this.canStartAudio = true;
+                            this.tryStartAudio();
+                        }
+                        break;
+                    }
+                }
+            }
+            catch (error) {
+                Log.error('[MediaPlayer] Failed to update next frame', error);
+            }
+            this.updateStalledState();
+        };
+        this.runAudioIterator = async () => {
+            if (!this.audioSink ||
+                !this.sharedAudioContext ||
+                !this.audioBufferIterator ||
+                !this.gainNode) {
+                return;
+            }
+            try {
+                this.expectedAudioTime = this.sharedAudioContext.currentTime;
+                for await (const { buffer, timestamp } of this.audioBufferIterator) {
+                    const node = this.sharedAudioContext.createBufferSource();
+                    node.buffer = buffer;
+                    node.connect(this.gainNode);
+                    if (this.expectedAudioTime >= this.sharedAudioContext.currentTime) {
+                        node.start(this.expectedAudioTime);
+                    }
+                    else {
+                        const offset = this.sharedAudioContext.currentTime - this.expectedAudioTime;
+                        node.start(this.sharedAudioContext.currentTime, offset);
+                    }
+                    this.queuedAudioNodes.add(node);
+                    node.onended = () => {
+                        this.queuedAudioNodes.delete(node);
+                    };
+                    this.expectedAudioTime += buffer.duration;
+                    this.updateStalledState();
+                    // If we're more than a second ahead of the current playback time, let's slow down the loop until time has
+                    // passed. Use timestamp for throttling logic as it represents media time.
+                    if (timestamp - this.getPlaybackTime() >= 1) {
+                        await new Promise((resolve) => {
+                            const check = () => {
+                                if (timestamp - this.getPlaybackTime() < 1) {
+                                    resolve();
+                                }
+                                else {
+                                    requestAnimationFrame(check);
+                                }
+                            };
+                            check();
+                        });
+                    }
+                }
+            }
+            catch (error) {
+                Log.error('[MediaPlayer] Failed to run audio iterator', error);
+            }
+        };
+        this.canvas = canvas;
+        this.src = src;
+        this.logLevel = logLevel ?? 'info';
+        this.sharedAudioContext = sharedAudioContext || null;
+        const context = canvas.getContext('2d', {
+            alpha: false,
+            desynchronized: true,
+        });
+        if (!context) {
+            throw new Error('Could not get 2D context from canvas');
+        }
+        this.context = context;
+        // Initialize audio progress stopwatch
+        this.resetAudioProgressStopwatch();
+        Log.trace(this.logLevel, `[MediaPlayer] Created for src: ${src}`);
+    }
+    async initialize(startTime = 0) {
+        if (this.initialized) {
+            Log.trace(this.logLevel, `[MediaPlayer] Already initialized, skipping`);
+            return;
+        }
+        try {
+            Log.trace(this.logLevel, `[MediaPlayer] Initializing at startTime: ${startTime.toFixed(3)}s...`);
+            const urlSource = new UrlSource(this.src);
+            urlSource.onread = () => {
+                this.lastNetworkActivityAtMs = this.getCurrentTimeMs();
+                this.isNetworkActive = true;
+            };
+            const input = new Input({
+                source: urlSource,
+                formats: ALL_FORMATS,
+            });
+            this.totalDuration = await input.computeDuration();
+            const videoTrack = await input.getPrimaryVideoTrack();
+            const audioTrack = await input.getPrimaryAudioTrack();
+            if (!videoTrack && !audioTrack) {
+                throw new Error(`No video or audio track found for ${this.src}`);
+            }
+            if (videoTrack) {
+                this.canvasSink = new CanvasSink(videoTrack, {
+                    poolSize: 2,
+                    fit: 'contain',
+                });
+                this.canvas.width = videoTrack.displayWidth;
+                this.canvas.height = videoTrack.displayHeight;
+                // Extract actual FPS for stall detection
+                const packetStats = await videoTrack.computePacketStats();
+                this.actualFps = packetStats.averagePacketRate;
+                Log.trace(this.logLevel, `[MediaPlayer] Detected video FPS: ${this.actualFps}`);
+            }
+            if (audioTrack && this.sharedAudioContext) {
+                this.audioSink = new AudioBufferSink(audioTrack);
+                this.gainNode = this.sharedAudioContext.createGain();
+                this.gainNode.connect(this.sharedAudioContext.destination);
+            }
+            // For audio-only content, allow audio to start immediately
+            if (!videoTrack && audioTrack) {
+                this.canStartAudio = true;
+            }
+            // Initialize timing offset based on actual starting position
+            if (this.sharedAudioContext) {
+                this.mediaTimeOffset = this.sharedAudioContext.currentTime - startTime;
+                Log.trace(this.logLevel, `[MediaPlayer] Set mediaTimeOffset to ${this.mediaTimeOffset.toFixed(3)}s (audioContext: ${this.sharedAudioContext.currentTime.toFixed(3)}s, startTime: ${startTime.toFixed(3)}s)`);
+                this.lastAudioProgressAtMs = this.getCurrentTimeMs();
+                this.lastNetworkActivityAtMs = this.getCurrentTimeMs();
+            }
+            this.initialized = true;
+            await this.startVideoIterator(startTime);
+            this.startRenderLoop();
+            Log.trace(this.logLevel, `[MediaPlayer] Initialized successfully with iterators started, duration: ${this.totalDuration}s`);
+        }
+        catch (error) {
+            Log.error('[MediaPlayer] Failed to initialize', error);
+            throw error;
+        }
+    }
+    seekTo(time) {
+        if (!this.initialized || !this.sharedAudioContext) {
+            return;
+        }
+        // Ensure mediaTimeOffset is initialized (safety fallback)
+        if (this.mediaTimeOffset === 0) {
+            this.mediaTimeOffset = this.sharedAudioContext.currentTime - time;
+            Log.trace(this.logLevel, `[MediaPlayer] Late-initialized mediaTimeOffset to ${this.mediaTimeOffset.toFixed(3)}s`);
+        }
+        const newTime = Math.max(0, Math.min(time, this.totalDuration));
+        const currentPlaybackTime = this.getPlaybackTime();
+        const isSignificantSeek = Math.abs(newTime - currentPlaybackTime) > SEEK_THRESHOLD;
+        // Update offset to make audio context time correspond to new media time
+        this.mediaTimeOffset = this.sharedAudioContext.currentTime - newTime;
+        if (isSignificantSeek) {
+            Log.trace(this.logLevel, `[MediaPlayer] Significant seek to ${newTime.toFixed(3)}s - creating new iterator`);
+            this.isSeeking = true;
+            this.canStartAudio = false;
+            this.updateStalledState();
+            // Stop existing audio first
+            if (this.playing && this.audioSink) {
+                this.audioBufferIterator?.return();
+                this.audioBufferIterator = null;
+                // Stop current audio nodes
+                for (const node of this.queuedAudioNodes) {
+                    node.stop();
+                }
+                this.queuedAudioNodes.clear();
+            }
+            // Start video iterator (which will open audio gate when ready)
+            this.startVideoIterator(newTime);
+        }
+        else {
+            Log.trace(this.logLevel, `[MediaPlayer] Minor time update to ${newTime.toFixed(3)}s - using existing iterator`);
+            // if paused, trigger a single frame update to show current position
+            if (!this.playing) {
+                this.renderSingleFrame();
+            }
+        }
+    }
+    async drawInitialFrame(time = 0) {
+        if (!this.initialized || !this.canvasSink) {
+            Log.trace(this.logLevel, `[MediaPlayer] Cannot draw initial frame - not initialized or no canvas sink`);
+            return;
+        }
+        try {
+            Log.trace(this.logLevel, `[MediaPlayer] Drawing initial frame at ${time.toFixed(3)}s`);
+            // create temporary iterator just to get the first frame
+            const tempIterator = this.canvasSink.canvases(time);
+            const firstFrame = (await tempIterator.next()).value;
+            if (firstFrame) {
+                this.context.drawImage(firstFrame.canvas, 0, 0);
+                Log.trace(this.logLevel, `[MediaPlayer] Drew initial frame at timestamp ${firstFrame.timestamp.toFixed(3)}s`);
+            }
+            else {
+                Log.trace(this.logLevel, `[MediaPlayer] No frame available at ${time.toFixed(3)}s`);
+            }
+            // clean up the temporary iterator
+            await tempIterator.return();
+        }
+        catch (error) {
+            Log.error('[MediaPlayer] Failed to draw initial frame', error);
+        }
+    }
+    async play() {
+        if (!this.initialized || !this.sharedAudioContext) {
+            return;
+        }
+        if (!this.playing) {
+            if (this.sharedAudioContext.state === 'suspended') {
+                await this.sharedAudioContext.resume();
+            }
+            this.playing = true;
+            Log.trace(this.logLevel, `[MediaPlayer] Play - starting render loop`);
+            this.startRenderLoop();
+            // Audio will start automatically when video signals readiness via tryStartAudio()
+            this.tryStartAudio();
+        }
+    }
+    pause() {
+        if (this.playing) {
+            this.playing = false;
+            // stop audio iterator
+            this.audioBufferIterator?.return();
+            this.audioBufferIterator = null;
+            // stop all playing audio nodes
+            for (const node of this.queuedAudioNodes) {
+                node.stop();
+            }
+            this.queuedAudioNodes.clear();
+            Log.trace(this.logLevel, `[MediaPlayer] Pause - stopping render loop`);
+            this.stopRenderLoop();
+        }
+    }
+    dispose() {
+        Log.trace(this.logLevel, `[MediaPlayer] Disposing...`);
+        this.stopRenderLoop();
+        // clean up video resources
+        this.videoFrameIterator?.return();
+        this.videoFrameIterator = null;
+        this.nextFrame = null;
+        this.canvasSink = null;
+        // Clean up audio resources
+        for (const node of this.queuedAudioNodes) {
+            node.stop();
+        }
+        this.queuedAudioNodes.clear();
+        this.audioBufferIterator?.return();
+        this.audioBufferIterator = null;
+        this.audioSink = null;
+        this.gainNode = null;
+        this.initialized = false;
+        this.asyncId++;
+    }
+    get currentTime() {
+        return this.getPlaybackTime();
+    }
+    // current position in the media
+    getPlaybackTime() {
+        if (!this.sharedAudioContext) {
+            return 0;
+        }
+        // Audio context is single source of truth
+        return this.sharedAudioContext.currentTime - this.mediaTimeOffset;
+    }
+    get duration() {
+        return this.totalDuration;
+    }
+    get isPlaying() {
+        return this.playing;
+    }
+    get stalled() {
+        return this.isStalled;
+    }
+    onStalledChange(callback) {
+        this.onStalledChangeCallback = callback;
+    }
+    renderSingleFrame() {
+        const currentPlaybackTime = this.getPlaybackTime();
+        if (this.nextFrame && this.nextFrame.timestamp <= currentPlaybackTime) {
+            Log.trace(this.logLevel, `[MediaPlayer] Single frame update at ${this.nextFrame.timestamp.toFixed(3)}s`);
+            this.context.drawImage(this.nextFrame.canvas, 0, 0);
+            // For video-only content, track video progress as audio progress
+            if (!this.audioSink) {
+                this.resetAudioProgressStopwatch();
+            }
+            this.nextFrame = null;
+            this.updateNextFrame();
+        }
+    }
+    startRenderLoop() {
+        if (this.animationFrameId !== null) {
+            return;
+        }
+        Log.trace(this.logLevel, `[MediaPlayer] Starting render loop`);
+        this.render();
+    }
+    stopRenderLoop() {
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+            Log.trace(this.logLevel, `[MediaPlayer] Stopped render loop`);
+        }
+    }
+    // A/V sync coordination methods (WIP)
+    tryStartAudio() {
+        // Only start if: playing + audio exists + gate is open + not already started
+        if (this.playing &&
+            this.audioSink &&
+            this.canStartAudio &&
+            !this.audioBufferIterator) {
+            this.audioBufferIterator = this.audioSink.buffers(this.getPlaybackTime());
+            this.runAudioIterator();
+            this.resetAudioProgressStopwatch();
+            Log.trace(this.logLevel, '[MediaPlayer] Audio started - A/V sync established');
+        }
+    }
+    // Unified time reference for stall detection
+    getCurrentTimeMs() {
+        if (!this.sharedAudioContext) {
+            return performance.now();
+        }
+        return this.sharedAudioContext.currentTime * 1000;
+    }
+    // Stall detection methods
+    resetAudioProgressStopwatch() {
+        this.lastAudioProgressAtMs = this.getCurrentTimeMs();
+    }
+    getAudioLookaheadSec() {
+        if (!this.sharedAudioContext)
+            return 0;
+        return this.expectedAudioTime - this.sharedAudioContext.currentTime;
+    }
+    calculateAudioStallThresholdSec() {
+        return 0.2; // Need 200ms of audio scheduled ahead
+    }
+    isNetworkStalled() {
+        const nowMs = this.getCurrentTimeMs();
+        const timeSinceNetworkMs = nowMs - this.lastNetworkActivityAtMs;
+        if (timeSinceNetworkMs > 100) {
+            this.isNetworkActive = false;
+        }
+        return !this.isNetworkActive && timeSinceNetworkMs >= 500;
+    }
+    checkVideoStall() {
+        if (!this.actualFps)
+            return false;
+        const nowMs = this.getCurrentTimeMs();
+        const frameIntervalMs = 1000 / this.actualFps;
+        const STALL_FRAME_COUNT = 6;
+        const calculatedThresholdMs = frameIntervalMs * STALL_FRAME_COUNT;
+        const MIN_THRESHOLD_MS = 150;
+        const MAX_THRESHOLD_MS = 300;
+        const threshold = Math.min(Math.max(calculatedThresholdMs, MIN_THRESHOLD_MS), MAX_THRESHOLD_MS);
+        // Use a separate video progress tracker for video-only content
+        const timeSinceVideoProgressMs = nowMs - this.lastAudioProgressAtMs; // Reuse for now
+        return (!this.nextFrame &&
+            timeSinceVideoProgressMs > threshold &&
+            this.playing &&
+            this.currentTime < this.duration);
+    }
+    checkIfStalled() {
+        // Only check what matters for playback readiness
+        if (this.audioSink && this.playing) {
+            const audioLookaheadSec = this.getAudioLookaheadSec();
+            const isAudioStarved = audioLookaheadSec < this.calculateAudioStallThresholdSec();
+            return isAudioStarved && this.isNetworkStalled();
+        }
+        // Video-only fallback
+        if (!this.audioSink) {
+            return this.checkVideoStall() && this.isNetworkStalled();
+        }
+        return false; // Remove: return this.isSeeking;
+    }
+    updateStalledState() {
+        const isStalled = this.checkIfStalled();
+        this.isStalled = isStalled;
+        this.onStalledChangeCallback?.(isStalled);
+    }
+}

package/dist/video-extraction/new-video-for-preview.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type LogLevel } from '../log';
+type NewVideoForPreviewProps = {
+    readonly src: string;
+    readonly style?: React.CSSProperties;
+    readonly playbackRate?: number;
+    readonly logLevel?: LogLevel;
+};
+export declare const NewVideoForPreview: React.FC<NewVideoForPreviewProps>;
+export {};