@remotion/media 4.0.364 → 4.0.366

package/dist/audio-iterator-manager.js

@@ -0,0 +1,181 @@
+import { AudioBufferSink } from 'mediabunny';
+import { isAlreadyQueued, makeAudioIterator, } from './audio/audio-preview-iterator';
+export const audioIteratorManager = ({ audioTrack, delayPlaybackHandleIfNotPremounting, sharedAudioContext, }) => {
+    let muted = false;
+    let currentVolume = 1;
+    const gainNode = sharedAudioContext.createGain();
+    gainNode.connect(sharedAudioContext.destination);
+    const audioSink = new AudioBufferSink(audioTrack);
+    let audioBufferIterator = null;
+    let audioIteratorsCreated = 0;
+    const scheduleAudioChunk = ({ buffer, mediaTimestamp, playbackRate, scheduleAudioNode, }) => {
+        if (!audioBufferIterator) {
+            throw new Error('Audio buffer iterator not found');
+        }
+        const node = sharedAudioContext.createBufferSource();
+        node.buffer = buffer;
+        node.playbackRate.value = playbackRate;
+        node.connect(gainNode);
+        scheduleAudioNode(node, mediaTimestamp);
+        const iterator = audioBufferIterator;
+        iterator.addQueuedAudioNode(node, mediaTimestamp, buffer);
+        node.onended = () => {
+            // Some leniancy is needed as we find that sometimes onended is fired a bit too early
+            setTimeout(() => {
+                iterator.removeQueuedAudioNode(node);
+            }, 30);
+        };
+    };
+    const onAudioChunk = ({ getIsPlaying, buffer, playbackRate, scheduleAudioNode, }) => {
+        if (getIsPlaying()) {
+            scheduleAudioChunk({
+                buffer: buffer.buffer,
+                mediaTimestamp: buffer.timestamp,
+                playbackRate,
+                scheduleAudioNode,
+            });
+        }
+        else {
+            if (!audioBufferIterator) {
+                throw new Error('Audio buffer iterator not found');
+            }
+            audioBufferIterator.addChunkForAfterResuming(buffer.buffer, buffer.timestamp);
+        }
+    };
+    const startAudioIterator = async ({ nonce, playbackRate, startFromSecond, getIsPlaying, scheduleAudioNode, }) => {
+        audioBufferIterator?.destroy();
+        const delayHandle = delayPlaybackHandleIfNotPremounting();
+        const iterator = makeAudioIterator(audioSink, startFromSecond);
+        audioIteratorsCreated++;
+        audioBufferIterator = iterator;
+        // Schedule up to 3 buffers ahead of the current time
+        for (let i = 0; i < 3; i++) {
+            const result = await iterator.getNext();
+            if (iterator.isDestroyed()) {
+                delayHandle.unblock();
+                return;
+            }
+            if (nonce.isStale()) {
+                delayHandle.unblock();
+                return;
+            }
+            if (!result.value) {
+                // media ended
+                delayHandle.unblock();
+                return;
+            }
+            onAudioChunk({
+                getIsPlaying,
+                buffer: result.value,
+                playbackRate,
+                scheduleAudioNode,
+            });
+        }
+        delayHandle.unblock();
+    };
+    const pausePlayback = () => {
+        if (!audioBufferIterator) {
+            return;
+        }
+        audioBufferIterator.moveQueuedChunksToPauseQueue();
+    };
+    const seek = async ({ newTime, nonce, fps, playbackRate, getIsPlaying, scheduleAudioNode, }) => {
+        if (!audioBufferIterator) {
+            await startAudioIterator({
+                nonce,
+                playbackRate,
+                startFromSecond: newTime,
+                getIsPlaying,
+                scheduleAudioNode,
+            });
+            return;
+        }
+        const currentTimeIsAlreadyQueued = isAlreadyQueued(newTime, audioBufferIterator.getQueuedPeriod([]));
+        const toBeScheduled = [];
+        if (!currentTimeIsAlreadyQueued) {
+            const audioSatisfyResult = await audioBufferIterator.tryToSatisfySeek(newTime, false);
+            if (nonce.isStale()) {
+                return;
+            }
+            if (audioSatisfyResult.type === 'not-satisfied') {
+                await startAudioIterator({
+                    nonce,
+                    playbackRate,
+                    startFromSecond: newTime,
+                    getIsPlaying,
+                    scheduleAudioNode,
+                });
+                return;
+            }
+            toBeScheduled.push(...audioSatisfyResult.buffers);
+        }
+        const nextTime = newTime +
+            // start of next frame
+            (1 / fps) * playbackRate +
+            // need the full duration of the next frame to be queued
+            (1 / fps) * playbackRate;
+        const nextIsAlreadyQueued = isAlreadyQueued(nextTime, audioBufferIterator.getQueuedPeriod(toBeScheduled));
+        if (!nextIsAlreadyQueued) {
+            // here we allow waiting for the next buffer to be loaded
+            // it's better than to create a new iterator
+            // because we already know we are in the right spot
+            const audioSatisfyResult = await audioBufferIterator.tryToSatisfySeek(nextTime, true);
+            if (nonce.isStale()) {
+                return;
+            }
+            if (audioSatisfyResult.type === 'not-satisfied') {
+                await startAudioIterator({
+                    nonce,
+                    playbackRate,
+                    startFromSecond: newTime,
+                    getIsPlaying,
+                    scheduleAudioNode,
+                });
+                return;
+            }
+            toBeScheduled.push(...audioSatisfyResult.buffers);
+        }
+        for (const buffer of toBeScheduled) {
+            onAudioChunk({
+                getIsPlaying,
+                buffer,
+                playbackRate,
+                scheduleAudioNode,
+            });
+        }
+    };
+    const resumeScheduledAudioChunks = ({ playbackRate, scheduleAudioNode, }) => {
+        if (!audioBufferIterator) {
+            return;
+        }
+        for (const chunk of audioBufferIterator.getAndClearAudioChunksForAfterResuming()) {
+            scheduleAudioChunk({
+                buffer: chunk.buffer,
+                mediaTimestamp: chunk.timestamp,
+                playbackRate,
+                scheduleAudioNode,
+            });
+        }
+    };
+    return {
+        startAudioIterator,
+        resumeScheduledAudioChunks,
+        pausePlayback,
+        getAudioBufferIterator: () => audioBufferIterator,
+        destroy: () => {
+            audioBufferIterator?.destroy();
+            audioBufferIterator = null;
+        },
+        seek,
+        getAudioIteratorsCreated: () => audioIteratorsCreated,
+        setMuted: (newMuted) => {
+            muted = newMuted;
+            gainNode.gain.value = muted ? 0 : currentVolume;
+        },
+        setVolume: (volume) => {
+            currentVolume = Math.max(0, volume);
+            gainNode.gain.value = muted ? 0 : currentVolume;
+        },
+        scheduleAudioChunk,
+    };
+};

package/dist/calculate-playbacktime.d.ts

@@ -0,0 +1,5 @@
+export declare const calculatePlaybackTime: ({ audioSyncAnchor, currentTime, playbackRate, }: {
+    audioSyncAnchor: number;
+    currentTime: number;
+    playbackRate: number;
+}) => number;

package/dist/calculate-playbacktime.js

@@ -0,0 +1,4 @@
+export const calculatePlaybackTime = ({ audioSyncAnchor, currentTime, playbackRate, }) => {
+    const timeSinceAnchor = currentTime - audioSyncAnchor;
+    return timeSinceAnchor * playbackRate;
+};

package/dist/debug-overlay/preview-overlay.d.ts

@@ -1,5 +1,11 @@
-export type DebugStats = {
-    videoIteratorsCreated: number;
-    framesRendered: number;
-};
-export declare const drawPreviewOverlay: (context: CanvasRenderingContext2D, stats: DebugStats, audioContextState: AudioContextState, audioSyncAnchor: number) => void;
+import type { AudioIteratorManager } from '../audio-iterator-manager';
+import type { VideoIteratorManager } from '../video-iterator-manager';
+export declare const drawPreviewOverlay: ({ context, audioTime, audioContextState, audioSyncAnchor, playing, audioIteratorManager, videoIteratorManager, }: {
+    context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
+    audioTime: number;
+    audioContextState: AudioContextState;
+    audioSyncAnchor: number;
+    playing: boolean;
+    audioIteratorManager: AudioIteratorManager | null;
+    videoIteratorManager: VideoIteratorManager | null;
+}) => void;

package/dist/debug-overlay/preview-overlay.js

@@ -1,13 +1,42 @@
-export const drawPreviewOverlay = (context, stats, audioContextState, audioSyncAnchor) => {
-    // Optionally, set a background for text legibility
+export const drawPreviewOverlay = ({ context, audioTime, audioContextState, audioSyncAnchor, playing, audioIteratorManager, videoIteratorManager, }) => {
+    // Collect all lines to be rendered
+    const lines = [
+        'Debug overlay',
+        `Video iterators created: ${videoIteratorManager?.getVideoIteratorsCreated()}`,
+        `Audio iterators created: ${audioIteratorManager?.getAudioIteratorsCreated()}`,
+        `Frames rendered: ${videoIteratorManager?.getFramesRendered()}`,
+        `Audio context state: ${audioContextState}`,
+        `Audio time: ${(audioTime - audioSyncAnchor).toFixed(3)}s`,
+    ];
+    if (audioIteratorManager) {
+        const queuedPeriod = audioIteratorManager
+            .getAudioBufferIterator()
+            ?.getQueuedPeriod([]);
+        const numberOfChunksAfterResuming = audioIteratorManager
+            ?.getAudioBufferIterator()
+            ?.getNumberOfChunksAfterResuming();
+        if (queuedPeriod) {
+            lines.push(`Audio queued until: ${(queuedPeriod.until - (audioTime - audioSyncAnchor)).toFixed(3)}s`);
+        }
+        else if (numberOfChunksAfterResuming) {
+            lines.push(`Audio chunks for after resuming: ${numberOfChunksAfterResuming}`);
+        }
+        lines.push(`Playing: ${playing}`);
+    }
+    const lineHeight = 30; // px, should match or exceed font size
+    const boxPaddingX = 10;
+    const boxPaddingY = 10;
+    const boxLeft = 20;
+    const boxTop = 20;
+    const boxWidth = 600;
+    const boxHeight = lines.length * lineHeight + 2 * boxPaddingY;
+    // Draw background for text legibility
     context.fillStyle = 'rgba(0, 0, 0, 1)';
-    context.fillRect(20, 20, 600, 180);
+    context.fillRect(boxLeft, boxTop, boxWidth, boxHeight);
     context.fillStyle = 'white';
     context.font = '24px sans-serif';
     context.textBaseline = 'top';
-    context.fillText(`Debug overlay`, 30, 30);
-    context.fillText(`Video iterators created: ${stats.videoIteratorsCreated}`, 30, 60);
-    context.fillText(`Frames rendered: ${stats.framesRendered}`, 30, 90);
-    context.fillText(`Audio context state: ${audioContextState}`, 30, 120);
-    context.fillText(`Audio time: ${audioSyncAnchor.toFixed(3)}s`, 30, 150);
+    for (let i = 0; i < lines.length; i++) {
+        context.fillText(lines[i], boxLeft + boxPaddingX, boxTop + boxPaddingY + i * lineHeight);
+    }
 };