remotion 4.1.0-alpha10 → 4.1.0-alpha12

package/dist/cjs/CompositionManager.d.ts

@@ -54,7 +54,7 @@ export type TSequence = {
     nonce: number;
     loopDisplay: LoopDisplay | undefined;
 } & EnhancedTSequenceData;
-export type TAsset = {
+export type TRenderAsset = {
     type: 'audio' | 'video';
     src: string;
     id: string;

package/dist/cjs/CompositionManager.js

@@ -26,9 +26,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionManagerProvider = exports.compositionsRef = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const AssetManager_js_1 = require("./AssetManager.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
+const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 exports.compositionsRef = react_1.default.createRef();
@@ -112,6 +112,6 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
         unregisterFolder,
         currentCompositionMetadata,
     ]);
-    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(AssetManager_js_1.AssetManagerProvider, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManagerProvider, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/audio/Audio.js

@@ -28,8 +28,16 @@ const AudioRefForwardingFunction = (props, ref) => {
     }
     const onError = (0, react_1.useCallback)((e) => {
         console.log(e.currentTarget.error);
-        (0, cancel_render_js_1.cancelRender)(new Error(`Could not play audio with src ${otherProps.src}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`));
-    }, [otherProps.src]);
+        // If there is no `loop` property, we don't need to get the duration
+        // and thsi does not need to be a fatal error
+        const errMessage = `Could not play audio with src ${otherProps.src}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
+        if (loop) {
+            (0, cancel_render_js_1.cancelRender)(new Error(errMessage));
+        }
+        else {
+            console.warn(errMessage);
+        }
+    }, [loop, otherProps.src]);
     const onDuration = (0, react_1.useCallback)((src, durationInSeconds) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);

package/dist/cjs/audio/AudioForRendering.js

@@ -4,10 +4,10 @@ exports.AudioForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
-const AssetManager_js_1 = require("../AssetManager.js");
 const delay_render_js_1 = require("../delay-render.js");
 const get_environment_js_1 = require("../get-environment.js");
 const random_js_1 = require("../random.js");
+const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
@@ -19,7 +19,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(AssetManager_js_1.AssetManager);
+    const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
     const environment = (0, get_environment_js_1.useRemotionEnvironment)();
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
@@ -51,7 +51,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         if (volume <= 0) {
             return;
         }
-        registerAsset({
+        registerRenderAsset({
             type: 'audio',
             src: (0, absolute_src_js_1.getAbsoluteSrc)(props.src),
             id,
@@ -61,14 +61,14 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
         });
-        return () => unregisterAsset(id);
+        return () => unregisterRenderAsset(id);
     }, [
         props.muted,
         props.src,
-        registerAsset,
+        registerRenderAsset,
         absoluteFrame,
         id,
-        unregisterAsset,
+        unregisterRenderAsset,
         volume,
         volumePropFrame,
         frame,

package/dist/cjs/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 import './asset-types.js';
-import type { TAsset } from './CompositionManager.js';
+import type { TRenderAsset } from './CompositionManager.js';
 import type { StaticFile } from './get-static-files.js';
 import type { ClipRegion } from './NativeLayers.js';
 import type { VideoConfig } from './video-config.js';
@@ -23,6 +23,7 @@ declare global {
         remotion_setBundleMode: (bundleMode: BundleState) => void;
         remotion_staticBase: string;
         remotion_staticFiles: StaticFile[];
+        remotion_publicFolderExists: string | null;
         remotion_editorName: string | null;
         remotion_numberOfAudioTags: number;
         remotion_projectName: string;
@@ -36,7 +37,7 @@ declare global {
         remotion_puppeteerTimeout: number;
         remotion_inputProps: string;
         remotion_envVariables: string;
-        remotion_collectAssets: () => TAsset[];
+        remotion_collectAssets: () => TRenderAsset[];
         remotion_getClipRegion: () => ClipRegion | null;
         remotion_isPlayer: boolean;
         remotion_isBuilding: undefined | (() => void);
@@ -63,7 +64,7 @@ export * from './AbsoluteFill.js';
 export * from './audio/index.js';
 export { cancelRender } from './cancel-render.js';
 export { CalculateMetadataFunction, Composition, CompositionProps, CompProps, StillProps, } from './Composition.js';
-export { AnyCompMetadata, AnyComposition, SmallTCompMetadata, TAsset, TCompMetadata, } from './CompositionManager.js';
+export { AnyCompMetadata, AnyComposition, SmallTCompMetadata, TCompMetadata, TRenderAsset, } from './CompositionManager.js';
 export { getInputProps } from './config/input-props.js';
 export { continueRender, delayRender } from './delay-render.js';
 export * from './easing.js';

package/dist/cjs/internals.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type CompProps } from './Composition.js';
-import type { TAsset, TCompMetadata, TComposition, TSequence } from './CompositionManager.js';
+import type { TCompMetadata, TComposition, TRenderAsset, TSequence } from './CompositionManager.js';
 import type { CompositionManagerContext } from './CompositionManagerContext.js';
 import * as CSSUtils from './default-css.js';
 import type { RemotionEnvironment } from './get-environment.js';
@@ -126,7 +126,7 @@ export declare const Internals: {
         children: import("react").ReactNode;
     }>>;
     readonly REMOTION_STUDIO_CONTAINER_ELEMENT: "__remotion-studio-container";
-    readonly AssetManager: import("react").Context<import("./AssetManager.js").AssetManagerContext>;
+    readonly RenderAssetManager: import("react").Context<import("./RenderAssetManager.js").RenderAssetManagerContext>;
     readonly bundleName: "bundle.js";
     readonly bundleMapName: "bundle.js.map";
     readonly persistCurrentFrame: (frame: number, composition: string) => void;
@@ -146,4 +146,4 @@ export declare const Internals: {
         children?: import("react").ReactNode;
     }>;
 };
-export type { TComposition, Timeline, TCompMetadata, TSequence, TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, };
+export type { TComposition, Timeline, TCompMetadata, TSequence, TRenderAsset as TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, };

package/dist/cjs/internals.js

@@ -24,7 +24,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Internals = void 0;
-const AssetManager_js_1 = require("./AssetManager.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const Composition_js_1 = require("./Composition.js");
@@ -45,6 +44,7 @@ const prefetch_state_js_1 = require("./prefetch-state.js");
 const prefetch_js_1 = require("./prefetch.js");
 const register_root_js_1 = require("./register-root.js");
 const RemotionRoot_js_1 = require("./RemotionRoot.js");
+const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
@@ -119,7 +119,7 @@ exports.Internals = {
     resolveCompositionsRef: ResolveCompositionConfig_js_1.resolveCompositionsRef,
     ResolveCompositionConfig: ResolveCompositionConfig_js_1.ResolveCompositionConfig,
     REMOTION_STUDIO_CONTAINER_ELEMENT: get_preview_dom_element_js_1.REMOTION_STUDIO_CONTAINER_ELEMENT,
-    AssetManager: AssetManager_js_1.AssetManager,
+    RenderAssetManager: RenderAssetManager_js_1.RenderAssetManager,
     bundleName: 'bundle.js',
     bundleMapName: 'bundle.js.map',
     persistCurrentFrame: timeline_position_state_js_1.persistCurrentFrame,

package/dist/cjs/resolve-video-config.js

@@ -17,11 +17,15 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
             abortSignal: signal,
         })
         : null;
+    const fallbackProps = {
+        ...((_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {}),
+        ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+    };
     if (calculatedProm !== null &&
         typeof calculatedProm === 'object' &&
         'then' in calculatedProm) {
         return calculatedProm.then((c) => {
-            var _a, _b, _c;
+            var _a, _b;
             const { height, width, durationInFrames, fps } = validateCalculated({
                 calculated: c,
                 composition,
@@ -33,7 +37,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
                 durationInFrames,
                 id: composition.id,
                 defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
-                props: (_c = (_b = c.props) !== null && _b !== void 0 ? _b : composition.defaultProps) !== null && _c !== void 0 ? _c : {},
+                props: (_b = c.props) !== null && _b !== void 0 ? _b : fallbackProps,
             };
         });
     }
@@ -45,11 +49,8 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         return {
             ...data,
             id: composition.id,
-            defaultProps: (_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {},
-            props: {
-                ...((_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {}),
-                ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
-            },
+            defaultProps: (_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {},
+            props: fallbackProps,
         };
     }
     return {

package/dist/cjs/use-media-playback.js

@@ -32,8 +32,18 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (!src) {
             throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
         }
-        mediaRef.current.playbackRate = Math.max(0, playbackRate);
-        const shouldBeTime = (0, get_current_time_js_1.getMediaTime)({
+        const playbackRateToSet = Math.max(0, playbackRate);
+        if (mediaRef.current.playbackRate !== playbackRateToSet) {
+            mediaRef.current.playbackRate = playbackRateToSet;
+        }
+        // Let's throttle the seeking to only every 10 frames when a video is playing to avoid bottlenecking
+        // the video tag.
+        if (playing) {
+            if (absoluteFrame % 10 !== 0) {
+                return;
+            }
+        }
+        const desiredUnclampedTime = (0, get_current_time_js_1.getMediaTime)({
             fps,
             frame,
             src,
@@ -41,15 +51,20 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             startFrom: -mediaStartsAt,
             mediaType,
         });
+        const { duration } = mediaRef.current;
+        const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
+            ? Math.min(duration, desiredUnclampedTime)
+            : desiredUnclampedTime;
         const isTime = mediaRef.current.currentTime;
         const timeShift = Math.abs(shouldBeTime - isTime);
-        if (timeShift > acceptableTimeshift && !mediaRef.current.ended) {
+        if (timeShift > acceptableTimeshift) {
             // If scrubbing around, adjust timing
-            // or if time shift is bigger than 0.2sec
+            // or if time shift is bigger than 0.45sec
             mediaRef.current.currentTime = shouldBeTime;
             if (!onlyWarnForMediaSeekingError) {
                 (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
+            return;
         }
         // Only perform a seek if the time is not already the same.
         // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
@@ -57,15 +72,15 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         // Refer to the https://github.com/remotion-dev/video-buffering-example
         // which is fixed by only seeking conditionally.
         const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
+        if (!makesSenseToSeek) {
+            return;
+        }
         if (!playing || absoluteFrame === 0) {
-            if (makesSenseToSeek) {
-                mediaRef.current.currentTime = shouldBeTime;
-            }
+            mediaRef.current.currentTime = shouldBeTime;
+            return;
         }
         if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
-            if (makesSenseToSeek) {
-                mediaRef.current.currentTime = shouldBeTime;
-            }
+            mediaRef.current.currentTime = shouldBeTime;
             (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
         }
     }, [

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.1.0-alpha10";
+export declare const VERSION = "4.1.0-alpha12";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '4.1.0-alpha10';
+exports.VERSION = '4.1.0-alpha12';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -4,12 +4,12 @@ exports.OffthreadVideoForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
-const AssetManager_js_1 = require("../AssetManager.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const cancel_render_js_1 = require("../cancel-render.js");
 const default_css_js_1 = require("../default-css.js");
 const Img_js_1 = require("../Img.js");
 const random_js_1 = require("../random.js");
+const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const truthy_js_1 = require("../truthy.js");
@@ -24,7 +24,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
     const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
-    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(AssetManager_js_1.AssetManager);
+    const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
     if (!src) {
         throw new TypeError('No `src` was passed to <OffthreadVideo>.');
     }
@@ -58,7 +58,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         if (volume <= 0) {
             return;
         }
-        registerAsset({
+        registerRenderAsset({
             type: 'video',
             src: (0, absolute_src_js_1.getAbsoluteSrc)(src),
             id,
@@ -68,13 +68,13 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
         });
-        return () => unregisterAsset(id);
+        return () => unregisterRenderAsset(id);
     }, [
         muted,
         src,
-        registerAsset,
+        registerRenderAsset,
         id,
-        unregisterAsset,
+        unregisterRenderAsset,
         volume,
         frame,
         absoluteFrame,

package/dist/cjs/video/VideoForRendering.js

@@ -4,12 +4,12 @@ exports.VideoForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
-const AssetManager_js_1 = require("../AssetManager.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const delay_render_js_1 = require("../delay-render.js");
 const get_environment_js_1 = require("../get-environment.js");
 const is_approximately_the_same_js_1 = require("../is-approximately-the-same.js");
 const random_js_1 = require("../random.js");
+const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
@@ -26,7 +26,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const environment = (0, get_environment_js_1.useRemotionEnvironment)();
-    const { registerAsset, unregisterAsset } = (0, react_1.useContext)(AssetManager_js_1.AssetManager);
+    const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
     const id = (0, react_1.useMemo)(() => {
@@ -60,7 +60,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         if (!window.remotion_audioEnabled) {
             return;
         }
-        registerAsset({
+        registerRenderAsset({
             type: 'video',
             src: (0, absolute_src_js_1.getAbsoluteSrc)(props.src),
             id,
@@ -70,13 +70,13 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
         });
-        return () => unregisterAsset(id);
+        return () => unregisterRenderAsset(id);
     }, [
         props.muted,
         props.src,
-        registerAsset,
+        registerRenderAsset,
         id,
-        unregisterAsset,
+        unregisterRenderAsset,
         volume,
         frame,
         absoluteFrame,

package/dist/cjs/wrap-remotion-context.d.ts

@@ -21,7 +21,7 @@ export declare function useRemotionContexts(): {
             error: Error;
         }) | undefined;
     } | null;
-    assetManagerContext: import("./AssetManager.js").AssetManagerContext;
+    renderAssetManagerContext: import("./RenderAssetManager.js").RenderAssetManagerContext;
     sequenceManagerContext: import("./SequenceManager.js").SequenceManagerContext;
 };
 export interface RemotionContextProviderProps {

package/dist/cjs/wrap-remotion-context.js

@@ -29,12 +29,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // such as in React Three Fiber. All the contexts need to be passed again
 // for them to be useable
 const react_1 = __importStar(require("react"));
-const AssetManager_js_1 = require("./AssetManager.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const NativeLayers_js_1 = require("./NativeLayers.js");
 const nonce_js_1 = require("./nonce.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
+const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
@@ -49,7 +49,7 @@ function useRemotionContexts() {
     const nativeLayersContext = react_1.default.useContext(NativeLayers_js_1.NativeLayersContext);
     const preloadContext = react_1.default.useContext(prefetch_state_js_1.PreloadContext);
     const resolveCompositionContext = react_1.default.useContext(ResolveCompositionConfig_js_1.ResolveCompositionContext);
-    const assetManagerContext = react_1.default.useContext(AssetManager_js_1.AssetManager);
+    const renderAssetManagerContext = react_1.default.useContext(RenderAssetManager_js_1.RenderAssetManager);
     const sequenceManagerContext = react_1.default.useContext(SequenceManager_js_1.SequenceManager);
     return (0, react_1.useMemo)(() => ({
         compositionManagerCtx,
@@ -61,7 +61,7 @@ function useRemotionContexts() {
         nativeLayersContext,
         preloadContext,
         resolveCompositionContext,
-        assetManagerContext,
+        renderAssetManagerContext,
         sequenceManagerContext,
     }), [
         compositionManagerCtx,
@@ -73,13 +73,13 @@ function useRemotionContexts() {
         nativeLayersContext,
         preloadContext,
         resolveCompositionContext,
-        assetManagerContext,
+        renderAssetManagerContext,
         sequenceManagerContext,
     ]);
 }
 exports.useRemotionContexts = useRemotionContexts;
 const RemotionContextProvider = (props) => {
     const { children, contexts } = props;
-    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: (0, jsx_runtime_1.jsx)(AssetManager_js_1.AssetManager.Provider, { value: contexts.assetManagerContext, children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionContextProvider = RemotionContextProvider;

package/dist/esm/index.mjs

@@ -59,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.1.0-alpha10';
+const VERSION = '4.1.0-alpha12';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -549,11 +549,15 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
             abortSignal: signal,
         })
         : null;
+    const fallbackProps = {
+        ...((_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {}),
+        ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+    };
     if (calculatedProm !== null &&
         typeof calculatedProm === 'object' &&
         'then' in calculatedProm) {
         return calculatedProm.then((c) => {
-            var _a, _b, _c;
+            var _a, _b;
             const { height, width, durationInFrames, fps } = validateCalculated({
                 calculated: c,
                 composition,
@@ -565,7 +569,7 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
                 durationInFrames,
                 id: composition.id,
                 defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
-                props: (_c = (_b = c.props) !== null && _b !== void 0 ? _b : composition.defaultProps) !== null && _c !== void 0 ? _c : {},
+                props: (_b = c.props) !== null && _b !== void 0 ? _b : fallbackProps,
             };
         });
     }
@@ -577,11 +581,8 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         return {
             ...data,
             id: composition.id,
-            defaultProps: (_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {},
-            props: {
-                ...((_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {}),
-                ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
-            },
+            defaultProps: (_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {},
+            props: fallbackProps,
         };
     }
     return {
@@ -1772,8 +1773,18 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (!src) {
             throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
         }
-        mediaRef.current.playbackRate = Math.max(0, playbackRate);
-        const shouldBeTime = getMediaTime({
+        const playbackRateToSet = Math.max(0, playbackRate);
+        if (mediaRef.current.playbackRate !== playbackRateToSet) {
+            mediaRef.current.playbackRate = playbackRateToSet;
+        }
+        // Let's throttle the seeking to only every 10 frames when a video is playing to avoid bottlenecking
+        // the video tag.
+        if (playing) {
+            if (absoluteFrame % 10 !== 0) {
+                return;
+            }
+        }
+        const desiredUnclampedTime = getMediaTime({
             fps,
             frame,
             src,
@@ -1781,15 +1792,20 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             startFrom: -mediaStartsAt,
             mediaType,
         });
+        const { duration } = mediaRef.current;
+        const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
+            ? Math.min(duration, desiredUnclampedTime)
+            : desiredUnclampedTime;
         const isTime = mediaRef.current.currentTime;
         const timeShift = Math.abs(shouldBeTime - isTime);
-        if (timeShift > acceptableTimeshift && !mediaRef.current.ended) {
+        if (timeShift > acceptableTimeshift) {
             // If scrubbing around, adjust timing
-            // or if time shift is bigger than 0.2sec
+            // or if time shift is bigger than 0.45sec
             mediaRef.current.currentTime = shouldBeTime;
             if (!onlyWarnForMediaSeekingError) {
                 warnAboutNonSeekableMedia(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
+            return;
         }
         // Only perform a seek if the time is not already the same.
         // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
@@ -1797,15 +1813,15 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         // Refer to the https://github.com/remotion-dev/video-buffering-example
         // which is fixed by only seeking conditionally.
         const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
+        if (!makesSenseToSeek) {
+            return;
+        }
         if (!playing || absoluteFrame === 0) {
-            if (makesSenseToSeek) {
-                mediaRef.current.currentTime = shouldBeTime;
-            }
+            mediaRef.current.currentTime = shouldBeTime;
+            return;
         }
         if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
-            if (makesSenseToSeek) {
-                mediaRef.current.currentTime = shouldBeTime;
-            }
+            mediaRef.current.currentTime = shouldBeTime;
             playAndHandleNotAllowedError(mediaRef, mediaType);
         }
     }, [
@@ -2201,41 +2217,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
 };
 const AudioForDevelopment = forwardRef(AudioForDevelopmentForwardRefFunction);
 
-const AssetManager = createContext({
-    registerAsset: () => undefined,
-    unregisterAsset: () => undefined,
-    assets: [],
-});
-const AssetManagerProvider = ({ children }) => {
-    const [assets, setAssets] = useState([]);
-    const registerAsset = useCallback((asset) => {
-        setAssets((assts) => {
-            return [...assts, asset];
-        });
-    }, []);
-    const unregisterAsset = useCallback((id) => {
-        setAssets((assts) => {
-            return assts.filter((a) => a.id !== id);
-        });
-    }, []);
-    useLayoutEffect(() => {
-        if (typeof window !== 'undefined') {
-            window.remotion_collectAssets = () => {
-                setAssets([]); // clear assets at next render
-                return assets;
-            };
-        }
-    }, [assets]);
-    const contextValue = useMemo(() => {
-        return {
-            registerAsset,
-            unregisterAsset,
-            assets,
-        };
-    }, [assets, registerAsset, unregisterAsset]);
-    return (jsx(AssetManager.Provider, { value: contextValue, children: children }));
-};
-
 if (typeof window !== 'undefined') {
     window.remotion_renderReady = false;
 }
@@ -2315,13 +2296,48 @@ const continueRender = (handle) => {
     }
 };
 
+const RenderAssetManager = createContext({
+    registerRenderAsset: () => undefined,
+    unregisterRenderAsset: () => undefined,
+    renderAssets: [],
+});
+const RenderAssetManagerProvider = ({ children }) => {
+    const [renderAssets, setRenderAssets] = useState([]);
+    const registerRenderAsset = useCallback((renderAsset) => {
+        setRenderAssets((assets) => {
+            return [...assets, renderAsset];
+        });
+    }, []);
+    const unregisterRenderAsset = useCallback((id) => {
+        setRenderAssets((assts) => {
+            return assts.filter((a) => a.id !== id);
+        });
+    }, []);
+    useLayoutEffect(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_collectAssets = () => {
+                setRenderAssets([]); // clear assets at next render
+                return renderAssets;
+            };
+        }
+    }, [renderAssets]);
+    const contextValue = useMemo(() => {
+        return {
+            registerRenderAsset,
+            unregisterRenderAsset,
+            renderAssets,
+        };
+    }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
+    return (jsx(RenderAssetManager.Provider, { value: contextValue, children: children }));
+};
+
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const audioRef = useRef(null);
     const absoluteFrame = useTimelinePosition();
     const volumePropFrame = useFrameForVolumeProp();
     const frame = useCurrentFrame();
     const sequenceContext = useContext(SequenceContext);
-    const { registerAsset, unregisterAsset } = useContext(AssetManager);
+    const { registerRenderAsset, unregisterRenderAsset } = useContext(RenderAssetManager);
     const environment = useRemotionEnvironment();
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
@@ -2353,7 +2369,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         if (volume <= 0) {
             return;
         }
-        registerAsset({
+        registerRenderAsset({
             type: 'audio',
             src: getAbsoluteSrc(props.src),
             id,
@@ -2363,14 +2379,14 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
         });
-        return () => unregisterAsset(id);
+        return () => unregisterRenderAsset(id);
     }, [
         props.muted,
         props.src,
-        registerAsset,
+        registerRenderAsset,
         absoluteFrame,
         id,
-        unregisterAsset,
+        unregisterRenderAsset,
         volume,
         volumePropFrame,
         frame,
@@ -2425,8 +2441,16 @@ const AudioRefForwardingFunction = (props, ref) => {
     }
     const onError = useCallback((e) => {
         console.log(e.currentTarget.error);
-        cancelRender(new Error(`Could not play audio with src ${otherProps.src}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`));
-    }, [otherProps.src]);
+        // If there is no `loop` property, we don't need to get the duration
+        // and thsi does not need to be a fatal error
+        const errMessage = `Could not play audio with src ${otherProps.src}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
+        if (loop) {
+            cancelRender(new Error(errMessage));
+        }
+        else {
+            console.warn(errMessage);
+        }
+    }, [loop, otherProps.src]);
     const onDuration = useCallback((src, durationInSeconds) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
@@ -3141,7 +3165,7 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
         unregisterFolder,
         currentCompositionMetadata,
     ]);
-    return (jsx(CompositionManager.Provider, { value: contextValue, children: jsx(SequenceManagerProvider, { children: jsx(AssetManagerProvider, { children: jsx(ResolveCompositionConfig, { children: jsx(SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
+    return (jsx(CompositionManager.Provider, { value: contextValue, children: jsx(SequenceManagerProvider, { children: jsx(RenderAssetManagerProvider, { children: jsx(ResolveCompositionConfig, { children: jsx(SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
 };
 
 const injected = {};
@@ -3749,7 +3773,7 @@ function useRemotionContexts() {
     const nativeLayersContext = React.useContext(NativeLayersContext);
     const preloadContext = React.useContext(PreloadContext);
     const resolveCompositionContext = React.useContext(ResolveCompositionContext);
-    const assetManagerContext = React.useContext(AssetManager);
+    const renderAssetManagerContext = React.useContext(RenderAssetManager);
     const sequenceManagerContext = React.useContext(SequenceManager);
     return useMemo(() => ({
         compositionManagerCtx,
@@ -3761,7 +3785,7 @@ function useRemotionContexts() {
         nativeLayersContext,
         preloadContext,
         resolveCompositionContext,
-        assetManagerContext,
+        renderAssetManagerContext,
         sequenceManagerContext,
     }), [
         compositionManagerCtx,
@@ -3773,13 +3797,13 @@ function useRemotionContexts() {
         nativeLayersContext,
         preloadContext,
         resolveCompositionContext,
-        assetManagerContext,
+        renderAssetManagerContext,
         sequenceManagerContext,
     ]);
 }
 const RemotionContextProvider = (props) => {
     const { children, contexts } = props;
-    return (jsx(CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx(NonceContext.Provider, { value: contexts.nonceContext, children: jsx(NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: jsx(PreloadContext.Provider, { value: contexts.preloadContext, children: jsx(CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx(SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: jsx(AssetManager.Provider, { value: contexts.assetManagerContext, children: jsx(ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx(CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx(NonceContext.Provider, { value: contexts.nonceContext, children: jsx(NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: jsx(PreloadContext.Provider, { value: contexts.preloadContext, children: jsx(CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx(SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: jsx(RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: jsx(ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 
 const Timeline = TimelinePosition;
@@ -3836,7 +3860,7 @@ const Internals = {
     resolveCompositionsRef,
     ResolveCompositionConfig,
     REMOTION_STUDIO_CONTAINER_ELEMENT,
-    AssetManager,
+    RenderAssetManager,
     bundleName: 'bundle.js',
     bundleMapName: 'bundle.js.map',
     persistCurrentFrame,
@@ -4188,7 +4212,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
     const videoConfig = useUnsafeVideoConfig();
     const sequenceContext = useContext(SequenceContext);
     const mediaStartsAt = useMediaStartsAt();
-    const { registerAsset, unregisterAsset } = useContext(AssetManager);
+    const { registerRenderAsset, unregisterRenderAsset } = useContext(RenderAssetManager);
     if (!src) {
         throw new TypeError('No `src` was passed to <OffthreadVideo>.');
     }
@@ -4222,7 +4246,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         if (volume <= 0) {
             return;
         }
-        registerAsset({
+        registerRenderAsset({
             type: 'video',
             src: getAbsoluteSrc(src),
             id,
@@ -4232,13 +4256,13 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
         });
-        return () => unregisterAsset(id);
+        return () => unregisterRenderAsset(id);
     }, [
         muted,
         src,
-        registerAsset,
+        registerRenderAsset,
         id,
-        unregisterAsset,
+        unregisterRenderAsset,
         volume,
         frame,
         absoluteFrame,
@@ -4468,7 +4492,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     const sequenceContext = useContext(SequenceContext);
     const mediaStartsAt = useMediaStartsAt();
     const environment = useRemotionEnvironment();
-    const { registerAsset, unregisterAsset } = useContext(AssetManager);
+    const { registerRenderAsset, unregisterRenderAsset } = useContext(RenderAssetManager);
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
     const id = useMemo(() => {
@@ -4502,7 +4526,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
         if (!window.remotion_audioEnabled) {
             return;
         }
-        registerAsset({
+        registerRenderAsset({
             type: 'video',
             src: getAbsoluteSrc(props.src),
             id,
@@ -4512,13 +4536,13 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
         });
-        return () => unregisterAsset(id);
+        return () => unregisterRenderAsset(id);
     }, [
         props.muted,
         props.src,
-        registerAsset,
+        registerRenderAsset,
         id,
-        unregisterAsset,
+        unregisterRenderAsset,
         volume,
         frame,
         absoluteFrame,

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.1.0-alpha10';
+const VERSION = '4.1.0-alpha12';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.1.0-alpha10",
+  "version": "4.1.0-alpha12",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",