remotion 4.0.136 → 4.0.138

package/dist/cjs/Composition.js

@@ -7,15 +7,15 @@ const react_dom_1 = require("react-dom");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
-const delay_render_js_1 = require("./delay-render.js");
 const Folder_js_1 = require("./Folder.js");
+const NativeLayers_js_1 = require("./NativeLayers.js");
+const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
+const delay_render_js_1 = require("./delay-render.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const is_player_js_1 = require("./is-player.js");
 const loading_indicator_js_1 = require("./loading-indicator.js");
-const NativeLayers_js_1 = require("./NativeLayers.js");
 const nonce_js_1 = require("./nonce.js");
 const portal_node_js_1 = require("./portal-node.js");
-const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const use_lazy_component_js_1 = require("./use-lazy-component.js");
 const use_video_js_1 = require("./use-video.js");
 const validate_composition_id_js_1 = require("./validation/validate-composition-id.js");

package/dist/cjs/CompositionManager.js

@@ -26,11 +26,11 @@ 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 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");
+const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 exports.compositionsRef = react_1.default.createRef();
 const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     var _a;

package/dist/cjs/RemotionRoot.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemotionRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const buffering_js_1 = require("./buffering.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
-const delay_render_js_1 = require("./delay-render.js");
 const EditorProps_js_1 = require("./EditorProps.js");
 const NativeLayers_js_1 = require("./NativeLayers.js");
+const buffering_js_1 = require("./buffering.js");
+const delay_render_js_1 = require("./delay-render.js");
 const nonce_js_1 = require("./nonce.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const random_js_1 = require("./random.js");

package/dist/cjs/ResolveCompositionConfig.js

@@ -4,8 +4,8 @@ exports.useResolvedVideoConfig = exports.ResolveCompositionConfig = exports.need
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
-const input_props_js_1 = require("./config/input-props.js");
 const EditorProps_js_1 = require("./EditorProps.js");
+const input_props_js_1 = require("./config/input-props.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");

package/dist/cjs/Sequence.js

@@ -4,10 +4,10 @@ exports.Sequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
-const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
-const nonce_js_1 = require("./nonce.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
+const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
+const nonce_js_1 = require("./nonce.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, loopDisplay, stack, ...other }, ref) => {

package/dist/cjs/audio/Audio.js

@@ -4,6 +4,7 @@ exports.Audio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
+const Sequence_js_1 = require("../Sequence.js");
 const absolute_src_js_1 = require("../absolute-src.js");
 const calculate_loop_js_1 = require("../calculate-loop.js");
 const cancel_render_js_1 = require("../cancel-render.js");
@@ -11,7 +12,6 @@ const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-trac
 const get_remotion_environment_js_1 = require("../get-remotion-environment.js");
 const index_js_1 = require("../loop/index.js");
 const prefetch_js_1 = require("../prefetch.js");
-const Sequence_js_1 = require("../Sequence.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
 const validate_start_from_props_js_1 = require("../validate-start-from-props.js");

package/dist/cjs/audio/AudioForPreview.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioForPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const prefetch_js_1 = require("../prefetch.js");
-const random_js_1 = require("../random.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
+const prefetch_js_1 = require("../prefetch.js");
+const random_js_1 = require("../random.js");
 const use_media_buffering_js_1 = require("../use-media-buffering.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");

package/dist/cjs/audio/AudioForRendering.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
 const absolute_src_js_1 = require("../absolute-src.js");
 const delay_render_js_1 = require("../delay-render.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");
 const volume_prop_js_1 = require("../volume-prop.js");

package/dist/cjs/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="node" />
+/// <reference types="react" />
 import './asset-types.js';
 import type { Codec } from './codec.js';
 import type { TRenderAsset } from './CompositionManager.js';
@@ -25,6 +26,7 @@ declare global {
         remotion_setBundleMode: (bundleMode: BundleState) => void;
         remotion_staticBase: string;
         remotion_staticFiles: StaticFile[];
+        remotion_publicPath: string;
         remotion_publicFolderExists: string | null;
         remotion_editorName: string | null;
         remotion_numberOfAudioTags: number;

package/dist/cjs/internals.d.ts

@@ -161,4 +161,4 @@ export declare const Internals: {
         };
     }) => number;
 };
-export type { TComposition, TimelinePosition as Timeline, TCompMetadata, TSequence, TRenderAsset as TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, WatchRemotionStaticFilesPayload, };
+export type { CompositionManagerContext, CompProps, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TRenderAsset as TAsset, TCompMetadata, TComposition, TimelinePosition as Timeline, TimelineContextValue, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/no-react.d.ts

@@ -1,7 +1,7 @@
 export type { TRenderAsset } from './CompositionManager';
-export { EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, } from './interpolate';
 export type { ClipRegion } from './NativeLayers';
-export { random, RandomSeed } from './random.js';
+export { EasingFunction, ExtrapolateType, InterpolateOptions, interpolate, } from './interpolate';
+export { RandomSeed, random } from './random.js';
 export type { VideoConfig } from './video-config';
 import { processColor } from './interpolate-colors';
 import { truthy } from './truthy';

package/dist/cjs/series/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Series = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const Sequence_js_1 = require("../Sequence.js");
+const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
 const flatten_children_js_1 = require("./flatten-children.js");
 const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {

package/dist/cjs/use-media-in-timeline.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaInTimeline = void 0;
 const react_1 = require("react");
+const SequenceContext_js_1 = require("./SequenceContext.js");
+const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const nonce_js_1 = require("./nonce.js");
 const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
-const SequenceContext_js_1 = require("./SequenceContext.js");
-const SequenceManager_js_1 = require("./SequenceManager.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const volume_prop_js_1 = require("./volume-prop.js");

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.136";
+export declare const VERSION = "4.0.138";

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.0.136';
+exports.VERSION = '4.0.138';

package/dist/cjs/video/OffthreadVideo.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OffthreadVideo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const get_remotion_environment_js_1 = require("../get-remotion-environment.js");
 const Sequence_js_1 = require("../Sequence.js");
+const get_remotion_environment_js_1 = require("../get-remotion-environment.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
 const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
 const OffthreadVideoForRendering_js_1 = require("./OffthreadVideoForRendering.js");

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OffthreadVideoForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Img_js_1 = require("../Img.js");
+const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
 const absolute_src_js_1 = require("../absolute-src.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");
 const use_current_frame_js_1 = require("../use-current-frame.js");

package/dist/cjs/video/Video.js

@@ -4,19 +4,19 @@ exports.Video = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
+const Sequence_js_1 = require("../Sequence.js");
 const absolute_src_js_1 = require("../absolute-src.js");
 const calculate_loop_js_1 = require("../calculate-loop.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const get_remotion_environment_js_1 = require("../get-remotion-environment.js");
 const index_js_1 = require("../loop/index.js");
 const prefetch_js_1 = require("../prefetch.js");
-const Sequence_js_1 = require("../Sequence.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");
 const validate_start_from_props_js_1 = require("../validate-start-from-props.js");
-const duration_state_js_1 = require("./duration-state.js");
 const VideoForPreview_js_1 = require("./VideoForPreview.js");
 const VideoForRendering_js_1 = require("./VideoForRendering.js");
+const duration_state_js_1 = require("./duration-state.js");
 const VideoForwardingFunction = (props, ref) => {
     var _a, _b;
     const { startFrom, endAt, name, pauseWhenBuffering, stack, _remotionInternalNativeLoopPassed, showInTimeline, ...otherProps } = props;

package/dist/cjs/video/VideoForPreview.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoForPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
-const prefetch_js_1 = require("../prefetch.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
+const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
+const prefetch_js_1 = require("../prefetch.js");
 const use_media_buffering_js_1 = require("../use-media-buffering.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");

package/dist/cjs/video/VideoForRendering.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
 const absolute_src_js_1 = require("../absolute-src.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const delay_render_js_1 = require("../delay-render.js");
 const get_remotion_environment_js_1 = require("../get-remotion-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");
 const use_unsafe_video_config_js_1 = require("../use-unsafe-video-config.js");

package/dist/cjs/video/index.d.ts

@@ -1,3 +1,3 @@
 export { OffthreadVideo } from './OffthreadVideo.js';
-export { OffthreadVideoProps as RemotionOffthreadVideoProps, RemotionMainVideoProps, RemotionVideoProps, } from './props.js';
 export { Video } from './Video.js';
+export { RemotionMainVideoProps, OffthreadVideoProps as RemotionOffthreadVideoProps, RemotionVideoProps, } from './props.js';

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

@@ -29,16 +29,16 @@ 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 buffering_js_1 = require("./buffering.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");
+const buffering_js_1 = require("./buffering.js");
+const nonce_js_1 = require("./nonce.js");
+const prefetch_state_js_1 = require("./prefetch-state.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 function useRemotionContexts() {
     const compositionManagerCtx = react_1.default.useContext(CompositionManagerContext_js_1.CompositionManager);

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useMemo, useLayoutEffect, useContext, useEffect, forwardRef, useRef, useCallback, createRef, useImperativeHandle, useReducer, Suspense, Children } from 'react';
+import React, { createContext, useState, useMemo, useLayoutEffect, useContext, useEffect, forwardRef, useCallback, useRef, createRef, useImperativeHandle, useReducer, Suspense, Children } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -105,7 +105,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.136';
+const VERSION = '4.0.138';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -178,25 +178,6 @@ const AbsoluteFillRefForwarding = (props, ref) => {
  */
 const AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
 
-const NonceContext = createContext({
-    getNonce: () => 0,
-    fastRefreshes: 0,
-});
-const useNonce = () => {
-    const context = useContext(NonceContext);
-    const [nonce, setNonce] = useState(() => context.getNonce());
-    const lastContext = useRef(context);
-    // Only if context changes, but not initially
-    useEffect(() => {
-        if (lastContext.current === context) {
-            return;
-        }
-        lastContext.current = context;
-        setNonce(context.getNonce);
-    }, [context]);
-    return nonce;
-};
-
 const SequenceContext = createContext(null);
 
 const SequenceManager = React.createContext({
@@ -241,6 +222,25 @@ const SequenceManagerProvider = ({ children }) => {
     return (jsx(SequenceManager.Provider, { value: sequenceContext, children: jsx(SequenceVisibilityToggleContext.Provider, { value: hiddenContext, children: children }) }));
 };
 
+const NonceContext = createContext({
+    getNonce: () => 0,
+    fastRefreshes: 0,
+});
+const useNonce = () => {
+    const context = useContext(NonceContext);
+    const [nonce, setNonce] = useState(() => context.getNonce());
+    const lastContext = useRef(context);
+    // Only if context changes, but not initially
+    useEffect(() => {
+        if (lastContext.current === context) {
+            return;
+        }
+        lastContext.current = context;
+        setNonce(context.getNonce);
+    }, [context]);
+    return nonce;
+};
+
 const CompositionManager = createContext({
     compositions: [],
     registerComposition: () => undefined,
@@ -254,6 +254,31 @@ const CompositionManager = createContext({
     setCanvasContent: () => undefined,
 });
 
+const EditorPropsContext = createContext({
+    props: {},
+    updateProps: () => {
+        throw new Error('Not implemented');
+    },
+});
+const EditorPropsProvider = ({ children }) => {
+    const [props, setProps] = React.useState({});
+    const updateProps = useCallback(({ defaultProps, id, newProps, }) => {
+        setProps((prev) => {
+            var _a;
+            return {
+                ...prev,
+                [id]: typeof newProps === 'function'
+                    ? newProps((_a = prev[id]) !== null && _a !== void 0 ? _a : defaultProps)
+                    : newProps,
+            };
+        });
+    }, []);
+    const ctx = useMemo(() => {
+        return { props, updateProps };
+    }, [props, updateProps]);
+    return (jsx(EditorPropsContext.Provider, { value: ctx, children: children }));
+};
+
 const problematicCharacters = {
     '%3A': ':',
     '%2F': '/',
@@ -394,31 +419,6 @@ const getInputProps = () => {
     return parsed;
 };
 
-const EditorPropsContext = createContext({
-    props: {},
-    updateProps: () => {
-        throw new Error('Not implemented');
-    },
-});
-const EditorPropsProvider = ({ children }) => {
-    const [props, setProps] = React.useState({});
-    const updateProps = useCallback(({ defaultProps, id, newProps, }) => {
-        setProps((prev) => {
-            var _a;
-            return {
-                ...prev,
-                [id]: typeof newProps === 'function'
-                    ? newProps((_a = prev[id]) !== null && _a !== void 0 ? _a : defaultProps)
-                    : newProps,
-            };
-        });
-    }, []);
-    const ctx = useMemo(() => {
-        return { props, updateProps };
-    }, [props, updateProps]);
-    return (jsx(EditorPropsContext.Provider, { value: ctx, children: children }));
-};
-
 const validCodecs = [
     'h264',
     'h265',
@@ -2537,6 +2537,42 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
 };
 const AudioForPreview = forwardRef(AudioForDevelopmentForwardRefFunction);
 
+const RenderAssetManager = createContext({
+    // Must be undefined, otherwise error in Player
+    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 }));
+};
+
 if (typeof window !== 'undefined') {
     window.remotion_renderReady = false;
 }
@@ -2616,42 +2652,6 @@ const continueRender = (handle) => {
     }
 };
 
-const RenderAssetManager = createContext({
-    // Must be undefined, otherwise error in Player
-    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();

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.136';
+const VERSION = '4.0.138';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.136",
+  "version": "4.0.138",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -18,16 +18,16 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@jonny/eslint-config": "3.0.276",
+    "@jonny/eslint-config": "3.0.281",
     "@rollup/plugin-typescript": "^8.2.0",
     "@testing-library/react": "14.0.0",
     "@types/node": "18.14.6",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
-    "eslint": "8.42.0",
+    "eslint": "8.56.0",
     "eslint-plugin-require-extensions": "^0.1.2",
     "jsdom": "21.1.0",
-    "prettier": "3.1.1",
+    "prettier": "3.2.5",
     "prettier-plugin-organize-imports": "3.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/dist/cjs/audio/AudioForDevelopment.d.ts

@@ -1,17 +0,0 @@
-import type { ForwardRefExoticComponent, RefAttributes } from 'react';
-import React from 'react';
-export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
-    name?: string | undefined;
-    volume?: import("../volume-prop.js").VolumeProp | undefined;
-    playbackRate?: number | undefined;
-    acceptableTimeShiftInSeconds?: number | undefined;
-    allowAmplificationDuringRender?: boolean | undefined;
-    _remotionInternalNeedsDurationCalculation?: boolean | undefined;
-    _remotionInternalNativeLoopPassed?: boolean | undefined;
-    toneFrequency?: number | undefined;
-} & {
-    shouldPreMountAudioTags: boolean;
-    onDuration: (src: string, durationInSeconds: number) => void;
-    _remotionInternalNativeLoopPassed: boolean;
-    _remotionInternalStack: string | null;
-} & RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/AudioForDevelopment.js

@@ -1,117 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AudioForDevelopment = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const prefetch_js_1 = require("../prefetch.js");
-const random_js_1 = require("../random.js");
-const SequenceContext_js_1 = require("../SequenceContext.js");
-const SequenceManager_js_1 = require("../SequenceManager.js");
-const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
-const use_media_playback_js_1 = require("../use-media-playback.js");
-const use_media_tag_volume_js_1 = require("../use-media-tag-volume.js");
-const use_sync_volume_with_media_tag_js_1 = require("../use-sync-volume-with-media-tag.js");
-const volume_position_state_js_1 = require("../volume-position-state.js");
-const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
-const use_audio_frame_js_1 = require("./use-audio-frame.js");
-const AudioForDevelopmentForwardRefFunction = (props, ref) => {
-    var _a;
-    const [initialShouldPreMountAudioElements] = (0, react_1.useState)(props.shouldPreMountAudioTags);
-    if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
-        throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
-    }
-    const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
-    const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
-    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, ...nativeProps } = props;
-    const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
-    if (!src) {
-        throw new TypeError("No 'src' was passed to <Audio>.");
-    }
-    const preloadedSrc = (0, prefetch_js_1.usePreload)(src);
-    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
-    const isSequenceHidden = (_a = hidden[timelineId]) !== null && _a !== void 0 ? _a : false;
-    const propsToPass = (0, react_1.useMemo)(() => {
-        return {
-            muted: muted || mediaMuted || isSequenceHidden,
-            src: preloadedSrc,
-            loop: _remotionInternalNativeLoopPassed,
-            ...nativeProps,
-        };
-    }, [
-        _remotionInternalNativeLoopPassed,
-        isSequenceHidden,
-        mediaMuted,
-        muted,
-        nativeProps,
-        preloadedSrc,
-    ]);
-    // Generate a string that's as unique as possible for this asset
-    // but at the same time deterministic. We use it to combat strict mode issues.
-    const id = (0, react_1.useMemo)(() => `audio-${(0, random_js_1.random)(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
-        src,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
-        props.muted,
-        props.loop,
-    ]);
-    const audioRef = (0, shared_audio_tags_js_1.useSharedAudio)(propsToPass, id).el;
-    const actualVolume = (0, use_media_tag_volume_js_1.useMediaTagVolume)(audioRef);
-    (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
-        volumePropFrame,
-        actualVolume,
-        volume,
-        mediaVolume,
-        mediaRef: audioRef,
-    });
-    (0, use_media_in_timeline_js_1.useMediaInTimeline)({
-        volume,
-        mediaVolume,
-        mediaRef: audioRef,
-        src,
-        mediaType: 'audio',
-        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
-        displayName: name !== null && name !== void 0 ? name : null,
-        id: timelineId,
-        stack: props._remotionInternalStack,
-    });
-    (0, use_media_playback_js_1.useMediaPlayback)({
-        mediaRef: audioRef,
-        src,
-        mediaType: 'audio',
-        playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
-        onlyWarnForMediaSeekingError: false,
-        acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
-    });
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return audioRef.current;
-    }, [audioRef]);
-    const currentOnDurationCallback = (0, react_1.useRef)();
-    currentOnDurationCallback.current = onDuration;
-    (0, react_1.useEffect)(() => {
-        var _a;
-        const { current } = audioRef;
-        if (!current) {
-            return;
-        }
-        if (current.duration) {
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
-            return;
-        }
-        const onLoadedMetadata = () => {
-            var _a;
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, current.src, current.duration);
-        };
-        current.addEventListener('loadedmetadata', onLoadedMetadata);
-        return () => {
-            current.removeEventListener('loadedmetadata', onLoadedMetadata);
-        };
-    }, [audioRef, src]);
-    if (initialShouldPreMountAudioElements) {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)("audio", { ref: audioRef, preload: "metadata", ...propsToPass });
-};
-exports.AudioForDevelopment = (0, react_1.forwardRef)(AudioForDevelopmentForwardRefFunction);

package/dist/cjs/get-timeline-clip-name.d.ts

@@ -1 +0,0 @@
-export declare const getTimelineClipName: (children: React.ReactNode) => string;

package/dist/cjs/get-timeline-clip-name.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimelineClipName = void 0;
-const react_1 = require("react");
-const HIDDEN_NAMES = ['__WEBPACK_DEFAULT_EXPORT__'];
-const getTimelineClipName = (children) => {
-    var _a;
-    const tree = (_a = react_1.Children.map(children, (ch) => {
-        if (!(0, react_1.isValidElement)(ch)) {
-            return null;
-        }
-        // Must be name, not ID
-        const name = typeof ch.type !== 'string' && ch.type.name;
-        if (name && !HIDDEN_NAMES.includes(name)) {
-            return name;
-        }
-        if (ch.props.children) {
-            const chName = (0, exports.getTimelineClipName)(ch.props.children);
-            return chName;
-        }
-        return null;
-    })) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
-    return (tree === null || tree === void 0 ? void 0 : tree.length) ? tree[0] : '';
-};
-exports.getTimelineClipName = getTimelineClipName;

package/dist/cjs/video/VideoForDevelopment.d.ts

@@ -1,15 +0,0 @@
-import type { ForwardRefExoticComponent, RefAttributes } from 'react';
-import React from 'react';
-export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
-    name?: string | undefined;
-    volume?: import("../volume-prop.js").VolumeProp | undefined;
-    playbackRate?: number | undefined;
-    acceptableTimeShiftInSeconds?: number | undefined;
-    allowAmplificationDuringRender?: boolean | undefined;
-    toneFrequency?: number | undefined;
-} & {
-    onlyWarnForMediaSeekingError: boolean;
-    onDuration: (src: string, durationInSeconds: number) => void;
-    _remotionInternalNativeLoopPassed: boolean;
-    _remotionInternalStack: string | null;
-} & RefAttributes<HTMLVideoElement>>;

package/dist/cjs/video/VideoForDevelopment.js

@@ -1,149 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoForDevelopment = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
-const prefetch_js_1 = require("../prefetch.js");
-const SequenceContext_js_1 = require("../SequenceContext.js");
-const SequenceManager_js_1 = require("../SequenceManager.js");
-const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
-const use_media_playback_js_1 = require("../use-media-playback.js");
-const use_media_tag_volume_js_1 = require("../use-media-tag-volume.js");
-const use_sync_volume_with_media_tag_js_1 = require("../use-sync-volume-with-media-tag.js");
-const use_video_config_js_1 = require("../use-video-config.js");
-const volume_position_state_js_1 = require("../volume-position-state.js");
-const video_fragment_js_1 = require("./video-fragment.js");
-const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
-    var _a, _b, _c;
-    const videoRef = (0, react_1.useRef)(null);
-    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
-    const { fps, durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
-    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
-    const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
-    const isSequenceHidden = (_a = hidden[timelineId]) !== null && _a !== void 0 ? _a : false;
-    const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
-    // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, ...nativeProps } = props;
-    if (typeof acceptableTimeShift !== 'undefined') {
-        throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
-    }
-    const actualVolume = (0, use_media_tag_volume_js_1.useMediaTagVolume)(videoRef);
-    const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
-    const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
-    (0, use_media_in_timeline_js_1.useMediaInTimeline)({
-        mediaRef: videoRef,
-        volume,
-        mediaVolume,
-        mediaType: 'video',
-        src,
-        playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
-        displayName: name !== null && name !== void 0 ? name : null,
-        id: timelineId,
-        stack: props._remotionInternalStack,
-    });
-    (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
-        volumePropFrame,
-        actualVolume,
-        volume,
-        mediaVolume,
-        mediaRef: videoRef,
-    });
-    (0, use_media_playback_js_1.useMediaPlayback)({
-        mediaRef: videoRef,
-        src,
-        mediaType: 'video',
-        playbackRate: (_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1,
-        onlyWarnForMediaSeekingError,
-        acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
-    });
-    const actualFrom = parentSequence
-        ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
-        : 0;
-    const duration = parentSequence
-        ? Math.min(parentSequence.durationInFrames, durationInFrames)
-        : durationInFrames;
-    const actualSrc = (0, video_fragment_js_1.useAppendVideoFragment)({
-        actualSrc: (0, prefetch_js_1.usePreload)(src),
-        actualFrom,
-        duration,
-        fps,
-    });
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return videoRef.current;
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const { current } = videoRef;
-        if (!current) {
-            return;
-        }
-        const errorHandler = () => {
-            var _a;
-            if (current === null || current === void 0 ? void 0 : current.error) {
-                // eslint-disable-next-line no-console
-                console.error('Error occurred in video', current === null || current === void 0 ? void 0 : current.error);
-                // If user is handling the error, we don't cause an unhandled exception
-                if (props.onError) {
-                    return;
-                }
-                throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${(_a = current === null || current === void 0 ? void 0 : current.error) === null || _a === void 0 ? void 0 : _a.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
-            }
-            else {
-                throw new Error('The browser threw an error');
-            }
-        };
-        current.addEventListener('error', errorHandler, { once: true });
-        return () => {
-            current.removeEventListener('error', errorHandler);
-        };
-    }, [props.onError, src]);
-    const currentOnDurationCallback = (0, react_1.useRef)();
-    currentOnDurationCallback.current = onDuration;
-    (0, react_1.useEffect)(() => {
-        var _a;
-        const { current } = videoRef;
-        if (!current) {
-            return;
-        }
-        if (current.duration) {
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
-            return;
-        }
-        const onLoadedMetadata = () => {
-            var _a;
-            (_a = currentOnDurationCallback.current) === null || _a === void 0 ? void 0 : _a.call(currentOnDurationCallback, src, current.duration);
-        };
-        current.addEventListener('loadedmetadata', onLoadedMetadata);
-        return () => {
-            current.removeEventListener('loadedmetadata', onLoadedMetadata);
-        };
-    }, [src]);
-    (0, react_1.useEffect)(() => {
-        const { current } = videoRef;
-        if (!current) {
-            return;
-        }
-        // Without this, on iOS Safari, the video cannot be seeked.
-        // if a seek is triggered before `loadedmetadata` is fired,
-        // the video will not seek, even if `loadedmetadata` is fired afterwards.
-        // Also, this needs to happen in a useEffect, because otherwise
-        // the SSR props will be applied.
-        if ((0, video_fragment_js_1.isIosSafari)()) {
-            current.preload = 'metadata';
-        }
-        else {
-            current.preload = 'auto';
-        }
-    }, []);
-    const actualStyle = (0, react_1.useMemo)(() => {
-        var _a;
-        return {
-            ...style,
-            opacity: isSequenceHidden ? 0 : (_a = style === null || style === void 0 ? void 0 : style.opacity) !== null && _a !== void 0 ? _a : 1,
-        };
-    }, [isSequenceHidden, style]);
-    return ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, ...nativeProps }));
-};
-// Copy types from forwardRef but not necessary to remove ref
-exports.VideoForDevelopment = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);