@remotion/media 4.0.357 → 4.0.358

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,7 +77,7 @@ 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;
             }
@@ -85,7 +85,7 @@ 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 <Audio>`);
+                Internals.Log.warn({ logLevel, tag: '@remotion/media' }, `Network error fetching ${src}, falling back to <Html5Audio>`);
                 setReplaceWithHtml5Audio(true);
                 return;
             }
@@ -153,8 +153,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 };