@remotion/media 4.0.362 → 4.0.364

package/dist/audio/audio-for-preview.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Internals, Audio as RemotionAudio, useBufferState, useCurrentFrame, } from 'remotion';
+import { MediaPlayer } from '../media-player';
 import { useLoopDisplay } from '../show-in-timeline';
 import { useMediaInTimeline } from '../use-media-in-timeline';
-import { MediaPlayer } from '../video/media-player';
 const { useUnsafeVideoConfig, Timeline, SharedAudioContext, useMediaMutedState, useMediaVolumeState, useFrameForVolumeProp, evaluateVolume, warnAboutTooHighVolume, usePreload, SequenceContext, } = Internals;
 const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVolumeCurveBehavior, loop, trimAfter, trimBefore, name, showInTimeline, stack, disallowFallbackToHtml5Audio, toneFrequency, audioStreamIndex, fallbackHtml5AudioProps, }) => {
     const videoConfig = useUnsafeVideoConfig();
@@ -76,6 +76,8 @@ const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVo
                 canvas: null,
                 playbackRate,
                 audioStreamIndex: audioStreamIndex ?? 0,
+                debugOverlay: false,
+                bufferState: buffer,
             });
             mediaPlayerRef.current = player;
             player
@@ -152,6 +154,7 @@ const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVo
         videoConfig.fps,
         audioStreamIndex,
         disallowFallbackToHtml5Audio,
+        buffer,
     ]);
     useEffect(() => {
         const audioPlayer = mediaPlayerRef.current;

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

@@ -5,7 +5,7 @@ import { applyVolume } from '../convert-audiodata/apply-volume';
 import { TARGET_SAMPLE_RATE } from '../convert-audiodata/resample-audiodata';
 import { frameForVolumeProp } from '../looped-frame';
 import { extractFrameViaBroadcastChannel } from '../video-extraction/extract-frame-via-broadcast-channel';
-export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, logLevel = window.remotion_logLevel, loop, fallbackHtml5AudioProps, audioStreamIndex, showInTimeline, style, name, disallowFallbackToHtml5Audio, toneFrequency, trimAfter, trimBefore, }) => {
+export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted, loopVolumeCurveBehavior, delayRenderRetries, delayRenderTimeoutInMilliseconds, logLevel, loop, fallbackHtml5AudioProps, audioStreamIndex, showInTimeline, style, name, disallowFallbackToHtml5Audio, toneFrequency, trimAfter, trimBefore, }) => {
     const frame = useCurrentFrame();
     const absoluteFrame = Internals.useTimelinePosition();
     const videoConfig = Internals.useUnsafeVideoConfig();
@@ -54,7 +54,7 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
             timeInSeconds: timestamp,
             durationInSeconds,
             playbackRate: playbackRate ?? 1,
-            logLevel,
+            logLevel: logLevel ?? window.remotion_logLevel,
             includeAudio: shouldRenderAudio,
             includeVideo: false,
             isClientSideRendering: environment.isClientSideRendering,
@@ -69,7 +69,10 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 if (disallowFallbackToHtml5Audio) {
                     cancelRender(new Error(`Unknown container format ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
                 }
-                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
+                Internals.Log.warn({
+                    logLevel: logLevel ?? window.remotion_logLevel,
+                    tag: '@remotion/media',
+                }, `Unknown container format for ${src} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }
@@ -77,7 +80,10 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 if (disallowFallbackToHtml5Audio) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
                 }
-                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Cannot decode ${src}, falling back to <Html5Audio>`);
+                Internals.Log.warn({
+                    logLevel: logLevel ?? window.remotion_logLevel,
+                    tag: '@remotion/media',
+                }, `Cannot decode ${src}, falling back to <Html5Audio>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }
@@ -88,7 +94,10 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
                 if (disallowFallbackToHtml5Audio) {
                     cancelRender(new Error(`Cannot decode ${src}, and 'disallowFallbackToHtml5Audio' was set. Failing the render.`));
                 }
-                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Network error fetching ${src}, falling back to <Html5Audio>`);
+                Internals.Log.warn({
+                    logLevel: logLevel ?? window.remotion_logLevel,
+                    tag: '@remotion/media',
+                }, `Network error fetching ${src}, falling back to <Html5Audio>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }

package/dist/audio/audio-iterator.d.ts

@@ -0,0 +1,11 @@
+import type { AudioBufferSink } from 'mediabunny';
+export declare const HEALTHY_BUFFER_THRESHOLD_SECONDS = 1;
+export declare const makeAudioIterator: (audioSink: AudioBufferSink, startFromSecond: number) => {
+    iterator: AsyncGenerator<import("mediabunny").WrappedAudioBuffer, void, unknown>;
+    destroy: () => void;
+    isReadyToPlay: () => boolean;
+    setAudioIteratorStarted: (started: boolean) => void;
+    getNext: () => Promise<IteratorResult<import("mediabunny").WrappedAudioBuffer, void>>;
+    setAudioBufferHealth: (health: number) => void;
+};
+export type AudioIterator = ReturnType<typeof makeAudioIterator>;

package/dist/audio/audio-iterator.js

@@ -0,0 +1,24 @@
+export const HEALTHY_BUFFER_THRESHOLD_SECONDS = 1;
+export const makeAudioIterator = (audioSink, startFromSecond) => {
+    const iterator = audioSink.buffers(startFromSecond);
+    let audioIteratorStarted = false;
+    let audioBufferHealth = 0;
+    return {
+        iterator,
+        destroy: () => {
+            iterator.return().catch(() => undefined);
+        },
+        isReadyToPlay: () => {
+            return audioIteratorStarted && audioBufferHealth > 0;
+        },
+        setAudioIteratorStarted: (started) => {
+            audioIteratorStarted = started;
+        },
+        getNext: () => {
+            return iterator.next();
+        },
+        setAudioBufferHealth: (health) => {
+            audioBufferHealth = health;
+        },
+    };
+};

package/dist/audio/audio-preview-iterator.d.ts

@@ -0,0 +1,14 @@
+import type { AudioBufferSink } from 'mediabunny';
+export declare const HEALTHY_BUFFER_THRESHOLD_SECONDS = 1;
+export declare const makeAudioIterator: (audioSink: AudioBufferSink, startFromSecond: number) => {
+    cleanupAudioQueue: () => void;
+    destroy: () => void;
+    isReadyToPlay: () => boolean;
+    setAudioIteratorStarted: (started: boolean) => void;
+    getNext: () => Promise<IteratorResult<import("mediabunny").WrappedAudioBuffer, void>>;
+    setAudioBufferHealth: (health: number) => void;
+    isDestroyed: () => boolean;
+    addQueuedAudioNode: (node: AudioBufferSourceNode) => void;
+    removeQueuedAudioNode: (node: AudioBufferSourceNode) => void;
+};
+export type AudioIterator = ReturnType<typeof makeAudioIterator>;

package/dist/audio/audio-preview-iterator.js

@@ -0,0 +1,43 @@
+export const HEALTHY_BUFFER_THRESHOLD_SECONDS = 1;
+export const makeAudioIterator = (audioSink, startFromSecond) => {
+    let destroyed = false;
+    const iterator = audioSink.buffers(startFromSecond);
+    let audioIteratorStarted = false;
+    let audioBufferHealth = 0;
+    const queuedAudioNodes = new Set();
+    const cleanupAudioQueue = () => {
+        for (const node of queuedAudioNodes) {
+            node.stop();
+        }
+        queuedAudioNodes.clear();
+    };
+    return {
+        cleanupAudioQueue,
+        destroy: () => {
+            cleanupAudioQueue();
+            destroyed = true;
+            iterator.return().catch(() => undefined);
+        },
+        isReadyToPlay: () => {
+            return audioIteratorStarted && audioBufferHealth > 0;
+        },
+        setAudioIteratorStarted: (started) => {
+            audioIteratorStarted = started;
+        },
+        getNext: () => {
+            return iterator.next();
+        },
+        setAudioBufferHealth: (health) => {
+            audioBufferHealth = health;
+        },
+        isDestroyed: () => {
+            return destroyed;
+        },
+        addQueuedAudioNode: (node) => {
+            queuedAudioNodes.add(node);
+        },
+        removeQueuedAudioNode: (node) => {
+            queuedAudioNodes.delete(node);
+        },
+    };
+};

package/dist/audio/audio.js

@@ -17,5 +17,4 @@ export const Audio = (props) => {
     }
     return _jsx(AudioForPreview, { name: name, ...otherProps, stack: stack ?? null });
 };
-// TODO: Doesn't work
 Internals.addSequenceStackTraces(Audio);

package/dist/caches.js

@@ -14,7 +14,8 @@ export const getTotalCacheStats = async () => {
     };
 };
 const getUncachedMaxCacheSize = (logLevel) => {
-    if (window.remotion_mediaCacheSizeInBytes !== undefined &&
+    if (typeof window !== 'undefined' &&
+        window.remotion_mediaCacheSizeInBytes !== undefined &&
         window.remotion_mediaCacheSizeInBytes !== null) {
         if (window.remotion_mediaCacheSizeInBytes < 240 * 1024 * 1024) {
             cancelRender(new Error(`The minimum value for the "mediaCacheSizeInBytes" prop is 240MB (${240 * 1024 * 1024}), got: ${window.remotion_mediaCacheSizeInBytes}`));
@@ -25,7 +26,8 @@ const getUncachedMaxCacheSize = (logLevel) => {
         Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Using cache size set using "mediaCacheSizeInBytes": ${(window.remotion_mediaCacheSizeInBytes / 1024 / 1024).toFixed(1)} MB`);
         return window.remotion_mediaCacheSizeInBytes;
     }
-    if (window.remotion_initialMemoryAvailable !== undefined &&
+    if (typeof window !== 'undefined' &&
+        window.remotion_initialMemoryAvailable !== undefined &&
         window.remotion_initialMemoryAvailable !== null) {
         const value = window.remotion_initialMemoryAvailable / 2;
         if (value < 500 * 1024 * 1024) {

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

@@ -0,0 +1,5 @@
+export type DebugStats = {
+    videoIteratorsCreated: number;
+    framesRendered: number;
+};
+export declare const drawPreviewOverlay: (context: CanvasRenderingContext2D, stats: DebugStats, audioContextState: AudioContextState, audioSyncAnchor: number) => void;

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

@@ -0,0 +1,13 @@
+export const drawPreviewOverlay = (context, stats, audioContextState, audioSyncAnchor) => {
+    // Optionally, set a background for text legibility
+    context.fillStyle = 'rgba(0, 0, 0, 1)';
+    context.fillRect(20, 20, 600, 180);
+    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);
+};