@remotion/media 4.0.357 → 4.0.361

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

@@ -1,8 +1,10 @@
 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 { 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, useMediaInTimeline, SequenceContext, } = Internals;
+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();
     const frame = useCurrentFrame();
@@ -34,8 +36,14 @@ const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVo
     const currentTimeRef = useRef(currentTime);
     currentTimeRef.current = currentTime;
     const preloadedSrc = usePreload(src);
-    const [timelineId] = useState(() => String(Math.random()));
     const parentSequence = useContext(SequenceContext);
+    const loopDisplay = useLoopDisplay({
+        loop,
+        mediaDurationInSeconds: videoConfig.durationInFrames,
+        playbackRate,
+        trimAfter,
+        trimBefore,
+    });
     useMediaInTimeline({
         volume,
         mediaVolume,
@@ -43,11 +51,13 @@ const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVo
         src,
         playbackRate,
         displayName: name ?? null,
-        id: timelineId,
         stack,
         showInTimeline,
         premountDisplay: parentSequence?.premountDisplay ?? null,
         postmountDisplay: parentSequence?.postmountDisplay ?? null,
+        loopDisplay,
+        trimAfter,
+        trimBefore,
     });
     useEffect(() => {
         if (!sharedAudioContext)
@@ -60,10 +70,9 @@ const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVo
                 logLevel,
                 sharedAudioContext: sharedAudioContext.audioContext,
                 loop,
-                trimAfterSeconds: trimAfter ? trimAfter / videoConfig.fps : undefined,
-                trimBeforeSeconds: trimBefore
-                    ? trimBefore / videoConfig.fps
-                    : undefined,
+                trimAfter,
+                trimBefore,
+                fps: videoConfig.fps,
                 canvas: null,
                 playbackRate,
                 audioStreamIndex: audioStreamIndex ?? 0,
@@ -76,7 +85,7 @@ const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVo
                     if (disallowFallbackToHtml5Audio) {
                         throw new Error(`Unknown container format ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
                     }
-                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Audio>`);
+                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Unknown container format for ${preloadedSrc} (Supported formats: https://www.remotion.dev/docs/mediabunny/formats), falling back to <Html5Audio>`);
                     setShouldFallbackToNativeAudio(true);
                     return;
                 }
@@ -84,7 +93,7 @@ const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVo
                     if (disallowFallbackToHtml5Audio) {
                         throw new Error(`Network error fetching ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
                     }
-                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Network error fetching ${preloadedSrc}, falling back to <Audio>`);
+                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Network error fetching ${preloadedSrc}, falling back to <Html5Audio>`);
                     setShouldFallbackToNativeAudio(true);
                     return;
                 }
@@ -92,7 +101,7 @@ const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVo
                     if (disallowFallbackToHtml5Audio) {
                         throw new Error(`Cannot decode ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
                     }
-                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Cannot decode ${preloadedSrc}, falling back to <Audio>`);
+                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Cannot decode ${preloadedSrc}, falling back to <Html5Audio>`);
                     setShouldFallbackToNativeAudio(true);
                     return;
                 }
@@ -100,7 +109,7 @@ const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVo
                     if (disallowFallbackToHtml5Audio) {
                         throw new Error(`No video or audio tracks found for ${preloadedSrc}, and 'disallowFallbackToHtml5Audio' was set.`);
                     }
-                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `No video or audio tracks found for ${preloadedSrc}, falling back to <Audio>`);
+                    Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `No video or audio tracks found for ${preloadedSrc}, falling back to <Html5Audio>`);
                     setShouldFallbackToNativeAudio(true);
                     return;
                 }
@@ -193,7 +202,7 @@ const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVo
             return;
         }
         audioPlayer.setVolume(userPreferredVolume);
-    }, [userPreferredVolume, mediaPlayerReady, logLevel]);
+    }, [userPreferredVolume, mediaPlayerReady]);
     const effectivePlaybackRate = useMemo(() => playbackRate * globalPlaybackRate, [playbackRate, globalPlaybackRate]);
     useEffect(() => {
         const audioPlayer = mediaPlayerRef.current;
@@ -201,7 +210,14 @@ const NewAudioForPreview = ({ src, playbackRate, logLevel, muted, volume, loopVo
             return;
         }
         audioPlayer.setPlaybackRate(effectivePlaybackRate);
-    }, [effectivePlaybackRate, mediaPlayerReady, logLevel]);
+    }, [effectivePlaybackRate, mediaPlayerReady]);
+    useEffect(() => {
+        const audioPlayer = mediaPlayerRef.current;
+        if (!audioPlayer || !mediaPlayerReady) {
+            return;
+        }
+        audioPlayer.setFps(videoConfig.fps);
+    }, [videoConfig.fps, mediaPlayerReady]);
     if (shouldFallbackToNativeAudio && !disallowFallbackToHtml5Audio) {
         return (_jsx(RemotionAudio, { src: src, muted: muted, volume: volume, startFrom: trimBefore, endAt: trimAfter, playbackRate: playbackRate, loopVolumeCurveBehavior: loopVolumeCurveBehavior, name: name, loop: loop, showInTimeline: showInTimeline, stack: stack ?? undefined, toneFrequency: toneFrequency, audioStreamIndex: audioStreamIndex, pauseWhenBuffering: fallbackHtml5AudioProps?.pauseWhenBuffering, ...fallbackHtml5AudioProps }));
     }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useLayoutEffect, useMemo, useState } from 'react';
-import { Audio, cancelRender, Internals, random, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
+import { cancelRender, Html5Audio, Internals, random, useCurrentFrame, useDelayRender, useRemotionEnvironment, } from 'remotion';
 import { applyVolume } from '../convert-audiodata/apply-volume';
 import { TARGET_SAMPLE_RATE } from '../convert-audiodata/resample-audiodata';
 import { frameForVolumeProp } from '../looped-frame';
@@ -69,7 +69,7 @@ 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 <Audio>`);
+                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>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }
@@ -77,15 +77,18 @@ 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 <Audio>`);
+                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Cannot decode ${src}, falling back to <Html5Audio>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }
+            if (result.type === 'cannot-decode-alpha') {
+                throw new Error(`Cannot decode alpha component for ${src}, and 'disallowFallbackToHtml5Audio' was set. But this should never happen, since you used the <Audio> tag. Please report this as a bug.`);
+            }
             if (result.type === 'network-error') {
                 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 <Audio>`);
+                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Network error fetching ${src}, falling back to <Html5Audio>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }
@@ -153,8 +156,7 @@ export const AudioForRendering = ({ volume: volumeProp, playbackRate, src, muted
         replaceWithHtml5Audio,
     ]);
     if (replaceWithHtml5Audio) {
-        // TODO: Loop and other props
-        return (_jsx(Audio, { src: src, playbackRate: playbackRate, muted: muted, loop: loop, volume: volumeProp, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, style: style, loopVolumeCurveBehavior: loopVolumeCurveBehavior, audioStreamIndex: audioStreamIndex, useWebAudioApi: fallbackHtml5AudioProps?.useWebAudioApi, onError: fallbackHtml5AudioProps?.onError, toneFrequency: toneFrequency, acceptableTimeShiftInSeconds: fallbackHtml5AudioProps?.acceptableTimeShiftInSeconds, name: name, showInTimeline: showInTimeline }));
+        return (_jsx(Html5Audio, { src: src, playbackRate: playbackRate, muted: muted, loop: loop, volume: volumeProp, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, style: style, loopVolumeCurveBehavior: loopVolumeCurveBehavior, audioStreamIndex: audioStreamIndex, useWebAudioApi: fallbackHtml5AudioProps?.useWebAudioApi, onError: fallbackHtml5AudioProps?.onError, toneFrequency: toneFrequency, acceptableTimeShiftInSeconds: fallbackHtml5AudioProps?.acceptableTimeShiftInSeconds, name: name, showInTimeline: showInTimeline }));
     }
     return null;
 };

package/dist/audio-extraction/extract-audio.js

@@ -28,6 +28,7 @@ const extractAudioInternal = async ({ src, timeInSeconds: unloopedTimeInSeconds,
         playbackRate,
         trimBefore,
         fps,
+        ifNoMediaDuration: 'fail',
     });
     if (timeInSeconds === null) {
         return { data: null, durationInSeconds: mediaDurationInSeconds };

package/dist/browser-can-use-webgl2.d.ts

@@ -0,0 +1 @@
+export declare const canBrowserUseWebGl2: () => boolean;

package/dist/browser-can-use-webgl2.js

@@ -0,0 +1,13 @@
+let browserCanUseWebGl2 = null;
+const browserCanUseWebGl2Uncached = () => {
+    const canvas = new OffscreenCanvas(1, 1);
+    const context = canvas.getContext('webgl2');
+    return context !== null;
+};
+export const canBrowserUseWebGl2 = () => {
+    if (browserCanUseWebGl2 !== null) {
+        return browserCanUseWebGl2;
+    }
+    browserCanUseWebGl2 = browserCanUseWebGl2Uncached();
+    return browserCanUseWebGl2;
+};

package/dist/caches.d.ts

@@ -7,7 +7,7 @@ export declare const keyframeManager: {
         videoSampleSink: import("mediabunny").VideoSampleSink;
         src: string;
         logLevel: LogLevel;
-    }) => Promise<import("./video-extraction/keyframe-bank").KeyframeBank | null>;
+    }) => Promise<import("./video-extraction/keyframe-bank").KeyframeBank | "has-alpha" | null>;
     getCacheStats: () => Promise<{
         count: number;
         totalSize: number;

package/dist/caches.js

@@ -28,9 +28,9 @@ const getUncachedMaxCacheSize = (logLevel) => {
     if (window.remotion_initialMemoryAvailable !== undefined &&
         window.remotion_initialMemoryAvailable !== null) {
         const value = window.remotion_initialMemoryAvailable / 2;
-        if (value < 240 * 1024 * 1024) {
-            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Using cache size set based on minimum value of 240MB (which is more than half of the available system memory!)`);
-            return 240 * 1024 * 1024;
+        if (value < 500 * 1024 * 1024) {
+            Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Using cache size set based on minimum value of 500MB (which is more than half of the available system memory!)`);
+            return 500 * 1024 * 1024;
         }
         if (value > 20000 * 1024 * 1024) {
             Internals.Log.verbose({ logLevel, tag: '@remotion/media' }, `Using cache size set based on maximum value of 20GB (which is less than half of the available system memory)`);