remotion 4.0.272 → 4.0.274

package/dist/cjs/Composition.d.ts

@@ -52,5 +52,5 @@ export type CompositionProps<Schema extends AnyZodObject, Props extends Record<s
     readonly id: string;
     readonly schema?: Schema;
 } & CompositionCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }: CompositionProps<Schema, Props>) => React.ReactPortal | null;
+export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: CompositionProps<Schema, Props>) => import("react/jsx-runtime.js").JSX.Element | null;
 export {};

package/dist/cjs/Composition.js

@@ -26,13 +26,10 @@ const Fallback = () => {
     }, []);
     return null;
 };
-/*
- * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
- * @see [Documentation](https://remotion.dev/docs/composition)
- */
-const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
+const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
     var _a, _b;
-    const { registerComposition, unregisterComposition } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const compManager = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
+    const { registerComposition, unregisterComposition } = compManager;
     const video = (0, use_video_js_1.useVideo)();
     const lazy = (0, use_lazy_component_js_1.useLazyComponent)({
         compProps: compProps,
@@ -83,13 +80,13 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
         id,
         folderName,
         defaultProps,
-        registerComposition,
-        unregisterComposition,
         width,
         nonce,
         parentName,
         schema,
         compProps.calculateMetadata,
+        registerComposition,
+        unregisterComposition,
     ]);
     const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(id);
     if (environment.isStudio && video && video.component === lazy) {
@@ -108,4 +105,16 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
     }
     return null;
 };
+/*
+ * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
+ * @see [Documentation](https://remotion.dev/docs/composition)
+ */
+const Composition = (props) => {
+    const { onlyRenderComposition } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
+    if (onlyRenderComposition && onlyRenderComposition !== props.id) {
+        return null;
+    }
+    // @ts-expect-error
+    return (0, jsx_runtime_1.jsx)(InnerComposition, { ...props });
+};
 exports.Composition = Composition;

package/dist/cjs/CompositionManager.d.ts

@@ -2,6 +2,7 @@ import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
 import type { AnyZodObject } from 'zod';
 import type { CalculateMetadataFunction } from './Composition.js';
+import type { BaseMetadata } from './CompositionManagerContext.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     width: number | undefined;
@@ -20,7 +21,6 @@ export type AnyComposition = TComposition<AnyZodObject, Record<string, unknown>>
 export type TCompMetadataWithCalcFunction<Schema extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps' | 'calculateMetadata'>;
 export type TCompMetadata<Schema extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
 export type AnyCompMetadata = TCompMetadata<AnyZodObject, Record<string, unknown>>;
-export type SmallTCompMetadata<T extends AnyZodObject, Props extends Record<string, unknown>> = Pick<TComposition<T, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition<T, Props>, 'defaultProps'>>;
 type EnhancedTSequenceData = {
     type: 'sequence';
 } | {
@@ -83,5 +83,7 @@ export declare const compositionsRef: React.RefObject<{
 export declare const CompositionManagerProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly numberOfAudioTags: number;
+    readonly onlyRenderComposition: string | null;
+    readonly currentCompositionMetadata: BaseMetadata | null;
 }>;
 export {};

package/dist/cjs/CompositionManager.js

@@ -32,14 +32,13 @@ 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 }) => {
+const CompositionManagerProvider = ({ children, numberOfAudioTags, onlyRenderComposition, currentCompositionMetadata, }) => {
     var _a;
     // Wontfix, expected to have
     const [compositions, setCompositions] = (0, react_1.useState)([]);
     const currentcompositionsRef = (0, react_1.useRef)(compositions);
     const [folders, setFolders] = (0, react_1.useState)([]);
     const [canvasContent, setCanvasContent] = (0, react_1.useState)(null);
-    const [currentCompositionMetadata, setCurrentCompositionMetadata] = (0, react_1.useState)(null);
     const updateCompositions = (0, react_1.useCallback)((updateComps) => {
         setCompositions((comps) => {
             const updated = updateComps(comps);
@@ -104,28 +103,29 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             compositions,
+            folders,
+            currentCompositionMetadata,
+            canvasContent,
+        };
+    }, [compositions, folders, currentCompositionMetadata, canvasContent]);
+    const setters = (0, react_1.useMemo)(() => {
+        return {
             registerComposition,
             unregisterComposition,
-            folders,
             registerFolder,
             unregisterFolder,
-            currentCompositionMetadata,
-            setCurrentCompositionMetadata,
-            canvasContent,
             setCanvasContent,
             updateCompositionDefaultProps,
+            onlyRenderComposition,
         };
     }, [
-        compositions,
         registerComposition,
-        unregisterComposition,
-        folders,
         registerFolder,
+        unregisterComposition,
         unregisterFolder,
-        currentCompositionMetadata,
-        canvasContent,
         updateCompositionDefaultProps,
+        onlyRenderComposition,
     ]);
-    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 }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionSetters.Provider, { value: setters, 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/CompositionManagerContext.d.ts

@@ -14,17 +14,20 @@ export type CanvasContent = {
     type: 'output';
     path: string;
 };
-export type CompositionManagerContext = {
-    compositions: AnyComposition[];
+export type CompositionManagerSetters = {
     registerComposition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(comp: TComposition<Schema, Props>) => void;
-    updateCompositionDefaultProps: (id: string, newDefaultProps: Record<string, unknown>) => void;
     unregisterComposition: (name: string) => void;
     registerFolder: (name: string, parent: string | null) => void;
     unregisterFolder: (name: string, parent: string | null) => void;
-    setCurrentCompositionMetadata: (metadata: BaseMetadata) => void;
+    setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
+    updateCompositionDefaultProps: (id: string, newDefaultProps: Record<string, unknown>) => void;
+    onlyRenderComposition: string | null;
+};
+export type CompositionManagerContext = {
+    compositions: AnyComposition[];
     currentCompositionMetadata: BaseMetadata | null;
     folders: TFolder[];
     canvasContent: CanvasContent | null;
-    setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
 };
 export declare const CompositionManager: React.Context<CompositionManagerContext>;
+export declare const CompositionSetters: React.Context<CompositionManagerSetters>;

package/dist/cjs/CompositionManagerContext.js

@@ -1,17 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionManager = void 0;
+exports.CompositionSetters = exports.CompositionManager = void 0;
 const react_1 = require("react");
 exports.CompositionManager = (0, react_1.createContext)({
     compositions: [],
+    folders: [],
+    currentCompositionMetadata: null,
+    canvasContent: null,
+});
+exports.CompositionSetters = (0, react_1.createContext)({
     registerComposition: () => undefined,
     unregisterComposition: () => undefined,
     registerFolder: () => undefined,
     unregisterFolder: () => undefined,
-    setCurrentCompositionMetadata: () => undefined,
-    updateCompositionDefaultProps: () => undefined,
-    folders: [],
-    currentCompositionMetadata: null,
-    canvasContent: null,
     setCanvasContent: () => undefined,
+    updateCompositionDefaultProps: () => undefined,
+    onlyRenderComposition: null,
 });

package/dist/cjs/Folder.js

@@ -16,7 +16,7 @@ exports.FolderContext = (0, react_1.createContext)({
  */
 const Folder = ({ name, children }) => {
     const parent = (0, react_1.useContext)(exports.FolderContext);
-    const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
     (0, validate_folder_name_js_1.validateFolderName)(name);
     const parentNameArr = [parent.parentName, parent.folderName].filter(truthy_js_1.truthy);
     const parentName = parentNameArr.length === 0 ? null : parentNameArr.join('/');

package/dist/cjs/RemotionRoot.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
+import type { BaseMetadata } from './CompositionManagerContext.js';
 import type { LogLevel } from './log.js';
 export declare const RemotionRoot: React.FC<{
     readonly children: React.ReactNode;
     readonly numberOfAudioTags: number;
     readonly logLevel: LogLevel;
+    readonly onlyRenderComposition: string | null;
+    readonly currentCompositionMetadata: BaseMetadata | null;
 }>;

package/dist/cjs/RemotionRoot.js

@@ -13,7 +13,7 @@ const prefetch_state_js_1 = require("./prefetch-state.js");
 const random_js_1 = require("./random.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const duration_state_js_1 = require("./video/duration-state.js");
-const RemotionRoot = ({ children, numberOfAudioTags, logLevel }) => {
+const RemotionRoot = ({ children, numberOfAudioTags, logLevel, onlyRenderComposition, currentCompositionMetadata, }) => {
     const [remotionRootId] = (0, react_1.useState)(() => String((0, random_js_1.random)(null)));
     const [frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_js_1.getInitialFrameState)());
     const [playing, setPlaying] = (0, react_1.useState)(false);
@@ -90,6 +90,6 @@ const RemotionRoot = ({ children, numberOfAudioTags, logLevel }) => {
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, onlyRenderComposition: onlyRenderComposition, currentCompositionMetadata: currentCompositionMetadata, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRoot = RemotionRoot;

package/dist/cjs/ResolveCompositionConfig.js

@@ -317,10 +317,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                 result: {
                     ...currentCompositionMetadata,
                     id: composition.id,
-                    props: currentCompositionMetadata.props,
                     defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
-                    defaultCodec: currentCompositionMetadata.defaultCodec,
-                    defaultOutName: currentCompositionMetadata.defaultOutName,
                 },
             };
         }

package/dist/cjs/RootLog.d.ts

@@ -0,0 +1 @@
+export declare const RootLog: () => null;

package/dist/cjs/RootLog.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RootLog = void 0;
+const RootLog = () => {
+    console.log('gets logged ');
+    return null;
+};
+exports.RootLog = RootLog;

package/dist/cjs/buffer-until-first-frame.js

@@ -4,6 +4,10 @@ exports.useBufferUntilFirstFrame = void 0;
 const react_1 = require("react");
 const playback_logging_1 = require("./playback-logging");
 const use_buffer_state_1 = require("./use-buffer-state");
+const isWebkit = () => {
+    const isAppleWebKit = /AppleWebKit/.test(window.navigator.userAgent);
+    return isAppleWebKit;
+};
 const useBufferUntilFirstFrame = ({ mediaRef, mediaType, onVariableFpsVideoDetected, pauseWhenBuffering, logLevel, mountTime, }) => {
     const bufferingRef = (0, react_1.useRef)(false);
     const { delayPlayback } = (0, use_buffer_state_1.useBufferState)();
@@ -19,7 +23,13 @@ const useBufferUntilFirstFrame = ({ mediaRef, mediaType, onVariableFpsVideoDetec
         if (!current) {
             return;
         }
-        if (current.readyState >= current.HAVE_ENOUGH_DATA) {
+        (0, playback_logging_1.playbackLogging)({
+            logLevel,
+            message: `Checking if should buffer until first frame, ${current.readyState}`,
+            mountTime,
+            tag: 'buffer',
+        });
+        if (current.readyState >= current.HAVE_ENOUGH_DATA && !isWebkit()) {
             return;
         }
         if (!current.requestVideoFrameCallback) {

package/dist/cjs/delay-render.d.ts

@@ -1,6 +1,7 @@
 export declare const DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 export declare const DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
 export declare const DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
+export declare const DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";
 export type DelayRenderOptions = {
     timeoutInMilliseconds?: number;
     retries?: number;

package/dist/cjs/delay-render.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.continueRender = exports.delayRender = exports.DELAY_RENDER_RETRY_TOKEN = exports.DELAY_RENDER_RETRIES_LEFT = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
+exports.continueRender = exports.delayRender = exports.DELAY_RENDER_CLEAR_TOKEN = exports.DELAY_RENDER_RETRY_TOKEN = exports.DELAY_RENDER_RETRIES_LEFT = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
 const cancel_render_js_1 = require("./cancel-render.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
+const log_js_1 = require("./log.js");
 const truthy_js_1 = require("./truthy.js");
 if (typeof window !== 'undefined') {
     window.remotion_renderReady = false;
@@ -14,6 +15,7 @@ if (typeof window !== 'undefined') {
 exports.DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
 exports.DELAY_RENDER_RETRIES_LEFT = 'Retries left: ';
 exports.DELAY_RENDER_RETRY_TOKEN = '- Rendering the frame will be retried.';
+exports.DELAY_RENDER_CLEAR_TOKEN = 'handle was cleared after';
 const defaultTimeout = 30000;
 /*
  * @description Call this function to signal that a frame should not be rendered until an asynchronous task (such as data fetching) is complete. Use continueRender(handle) to proceed with rendering once the task is complete.
@@ -36,6 +38,7 @@ const delayRender = (label, options) => {
             const retriesLeft = ((_e = options === null || options === void 0 ? void 0 : options.retries) !== null && _e !== void 0 ? _e : 0) - (window.remotion_attempt - 1);
             window.remotion_delayRenderTimeouts[handle] = {
                 label: label !== null && label !== void 0 ? label : null,
+                startTime: Date.now(),
                 timeout: setTimeout(() => {
                     const message = [
                         `A delayRender()`,
@@ -75,6 +78,15 @@ const continueRender = (handle) => {
         if (h === handle) {
             if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
                 clearTimeout(window.remotion_delayRenderTimeouts[handle].timeout);
+                const { label, startTime } = window.remotion_delayRenderTimeouts[handle];
+                const message = [
+                    label ? `delayRender() "${label}"` : 'A delayRender()',
+                    exports.DELAY_RENDER_CLEAR_TOKEN,
+                    `${Date.now() - startTime}ms`,
+                ]
+                    .filter(truthy_js_1.truthy)
+                    .join(' ');
+                log_js_1.Log.verbose(window.remotion_logLevel, message);
                 delete window.remotion_delayRenderTimeouts[handle];
             }
             return false;

package/dist/cjs/index.d.ts

@@ -1,7 +1,7 @@
 import './_check-rsc.js';
 import './asset-types.js';
 import type { Codec } from './codec.js';
-import type { TRenderAsset } from './CompositionManager.js';
+import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, TRenderAsset } from './CompositionManager.js';
 import type { StaticFile } from './get-static-files.js';
 import type { LogLevel } from './log.js';
 import type { VideoConfig } from './video-config.js';
@@ -16,6 +16,7 @@ declare global {
             [key: string]: {
                 label: string | null;
                 timeout: number | Timer;
+                startTime: number;
             };
         };
         remotion_cancelledError: string | undefined;
@@ -55,11 +56,7 @@ declare global {
         remotion_unsavedProps: boolean | undefined;
     }
 }
-export type BundleState = {
-    type: 'index';
-} | {
-    type: 'evaluation';
-} | {
+export type BundleCompositionState = {
     type: 'composition';
     compositionName: string;
     serializedResolvedPropsWithSchema: string;
@@ -70,13 +67,19 @@ export type BundleState = {
     compositionDefaultCodec: Codec;
     compositionDefaultOutName: string | null;
 };
+export type BundleIndexState = {
+    type: 'index';
+};
+export type BundleEvaluationState = {
+    type: 'evaluation';
+};
+export type BundleState = BundleIndexState | BundleEvaluationState | BundleCompositionState;
 export * from './AbsoluteFill.js';
 export * from './animated-image/index.js';
 export { Artifact } from './Artifact.js';
 export * from './audio/index.js';
 export { cancelRender } from './cancel-render.js';
 export { CalculateMetadataFunction, Composition, CompositionProps, CompProps, StillProps, } from './Composition.js';
-export { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, SmallTCompMetadata, TCompMetadata, TRenderAsset, } from './CompositionManager.js';
 export type { CanvasContent } from './CompositionManagerContext.js';
 export { getInputProps } from './config/input-props.js';
 export { continueRender, delayRender } from './delay-render.js';
@@ -122,3 +125,12 @@ export declare const Experimental: {
     useIsPlayer: () => boolean;
 };
 export declare const Config: {};
+export type _InternalTypes = {
+    AnyComposition: AnyComposition;
+    BundleCompositionState: BundleCompositionState;
+    BundleState: BundleState;
+    VideoConfigWithSerializedProps: VideoConfigWithSerializedProps;
+    AnyCompMetadata: AnyCompMetadata;
+    AudioOrVideoAsset: AudioOrVideoAsset;
+    TRenderAsset: TRenderAsset;
+};

package/dist/cjs/internals.d.ts

@@ -15,12 +15,15 @@ export declare const Internals: {
     readonly useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
     readonly Timeline: typeof TimelinePosition;
     readonly CompositionManager: import("react").Context<CompositionManagerContext>;
+    readonly CompositionSetters: import("react").Context<import("./CompositionManagerContext.js").CompositionManagerSetters>;
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
     readonly SequenceVisibilityToggleContext: import("react").Context<import("./SequenceManager.js").SequenceVisibilityToggleState>;
     readonly RemotionRoot: import("react").FC<{
         readonly children: import("react").ReactNode;
         readonly numberOfAudioTags: number;
         readonly logLevel: import("./log.js").LogLevel;
+        readonly onlyRenderComposition: string | null;
+        readonly currentCompositionMetadata: import("./CompositionManagerContext.js").BaseMetadata | null;
     }>;
     readonly useVideo: () => (import("./video-config.js").VideoConfig & {
         component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown>>>;

package/dist/cjs/internals.js

@@ -71,6 +71,7 @@ exports.Internals = {
     useUnsafeVideoConfig: use_unsafe_video_config_js_1.useUnsafeVideoConfig,
     Timeline: TimelinePosition,
     CompositionManager: CompositionManagerContext_js_1.CompositionManager,
+    CompositionSetters: CompositionManagerContext_js_1.CompositionSetters,
     SequenceManager: SequenceManager_js_1.SequenceManager,
     SequenceVisibilityToggleContext: SequenceManager_js_1.SequenceVisibilityToggleContext,
     RemotionRoot: RemotionRoot_js_1.RemotionRoot,

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

@@ -29,6 +29,7 @@ export declare const NoReactInternals: {
     deserializeJSONWithCustomFields: <T = Record<string, unknown>>(data: string) => T;
     DELAY_RENDER_CALLSTACK_TOKEN: string;
     DELAY_RENDER_RETRY_TOKEN: string;
+    DELAY_RENDER_CLEAR_TOKEN: string;
     DELAY_RENDER_ATTEMPT_TOKEN: string;
     getOffthreadVideoSource: ({ src, transparent, currentTime, toneMapped, }: {
         src: string;

package/dist/cjs/no-react.js

@@ -32,6 +32,7 @@ exports.NoReactInternals = {
     deserializeJSONWithCustomFields: input_props_serialization_1.deserializeJSONWithCustomFields,
     DELAY_RENDER_CALLSTACK_TOKEN: delay_render_1.DELAY_RENDER_CALLSTACK_TOKEN,
     DELAY_RENDER_RETRY_TOKEN: delay_render_1.DELAY_RENDER_RETRY_TOKEN,
+    DELAY_RENDER_CLEAR_TOKEN: delay_render_1.DELAY_RENDER_CLEAR_TOKEN,
     DELAY_RENDER_ATTEMPT_TOKEN: delay_render_1.DELAY_RENDER_RETRIES_LEFT,
     getOffthreadVideoSource: offthread_video_source_1.getOffthreadVideoSource,
     getExpectedMediaFrameUncorrected: get_current_time_1.getExpectedMediaFrameUncorrected,

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

@@ -151,7 +151,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                 mountTime,
             });
             lastSeekDueToShift.current = lastSeek.current;
-            if (playing && !isVariableFpsVideo) {
+            if (playing) {
                 if (playbackRate > 0) {
                     bufferUntilFirstFrame(shouldBeTime);
                 }

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.272";
+export declare const VERSION = "4.0.274";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.272';
+exports.VERSION = '4.0.274';

package/dist/esm/index.mjs

@@ -104,7 +104,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.272";
+var VERSION = "4.0.274";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -297,6 +297,11 @@ import { useContext as useContext4, useMemo as useMemo5 } from "react";
 import { createContext as createContext5 } from "react";
 var CompositionManager = createContext5({
   compositions: [],
+  folders: [],
+  currentCompositionMetadata: null,
+  canvasContent: null
+});
+var CompositionSetters = createContext5({
   registerComposition: () => {
     return;
   },
@@ -309,18 +314,13 @@ var CompositionManager = createContext5({
   unregisterFolder: () => {
     return;
   },
-  setCurrentCompositionMetadata: () => {
+  setCanvasContent: () => {
     return;
   },
   updateCompositionDefaultProps: () => {
     return;
   },
-  folders: [],
-  currentCompositionMetadata: null,
-  canvasContent: null,
-  setCanvasContent: () => {
-    return;
-  }
+  onlyRenderComposition: null
 });
 
 // src/ResolveCompositionConfig.tsx
@@ -966,10 +966,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
         result: {
           ...currentCompositionMetadata,
           id: composition.id,
-          props: currentCompositionMetadata.props,
-          defaultProps: composition.defaultProps ?? {},
-          defaultCodec: currentCompositionMetadata.defaultCodec,
-          defaultOutName: currentCompositionMetadata.defaultOutName
+          defaultProps: composition.defaultProps ?? {}
         }
       };
     }
@@ -1482,6 +1479,40 @@ function cancelRender(err) {
   throw error;
 }
 
+// src/log.ts
+var logLevels = ["trace", "verbose", "info", "warn", "error"];
+var getNumberForLogLevel = (level) => {
+  return logLevels.indexOf(level);
+};
+var isEqualOrBelowLogLevel = (currentLevel, level) => {
+  return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
+};
+var Log = {
+  trace: (logLevel, ...args) => {
+    if (isEqualOrBelowLogLevel(logLevel, "trace")) {
+      return console.log(...args);
+    }
+  },
+  verbose: (logLevel, ...args) => {
+    if (isEqualOrBelowLogLevel(logLevel, "verbose")) {
+      return console.log(...args);
+    }
+  },
+  info: (logLevel, ...args) => {
+    if (isEqualOrBelowLogLevel(logLevel, "info")) {
+      return console.log(...args);
+    }
+  },
+  warn: (logLevel, ...args) => {
+    if (isEqualOrBelowLogLevel(logLevel, "warn")) {
+      return console.warn(...args);
+    }
+  },
+  error: (...args) => {
+    return console.error(...args);
+  }
+};
+
 // src/delay-render.ts
 if (typeof window !== "undefined") {
   window.remotion_renderReady = false;
@@ -1493,6 +1524,7 @@ if (typeof window !== "undefined") {
 var DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
 var DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
+var DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";
 var defaultTimeout = 30000;
 var delayRender = (label, options) => {
   if (typeof label !== "string" && typeof label !== "undefined") {
@@ -1507,6 +1539,7 @@ var delayRender = (label, options) => {
       const retriesLeft = (options?.retries ?? 0) - (window.remotion_attempt - 1);
       window.remotion_delayRenderTimeouts[handle] = {
         label: label ?? null,
+        startTime: Date.now(),
         timeout: setTimeout(() => {
           const message = [
             `A delayRender()`,
@@ -1538,6 +1571,13 @@ var continueRender = (handle) => {
     if (h === handle) {
       if (getRemotionEnvironment().isRendering) {
         clearTimeout(window.remotion_delayRenderTimeouts[handle].timeout);
+        const { label, startTime } = window.remotion_delayRenderTimeouts[handle];
+        const message = [
+          label ? `delayRender() "${label}"` : "A delayRender()",
+          DELAY_RENDER_CLEAR_TOKEN,
+          `${Date.now() - startTime}ms`
+        ].filter(truthy).join(" ");
+        Log.verbose(window.remotion_logLevel, message);
         delete window.remotion_delayRenderTimeouts[handle];
       }
       return false;
@@ -2113,40 +2153,6 @@ Loop.useLoop = useLoop;
 // src/prefetch.ts
 import { useContext as useContext12 } from "react";
 
-// src/log.ts
-var logLevels = ["trace", "verbose", "info", "warn", "error"];
-var getNumberForLogLevel = (level) => {
-  return logLevels.indexOf(level);
-};
-var isEqualOrBelowLogLevel = (currentLevel, level) => {
-  return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
-};
-var Log = {
-  trace: (logLevel, ...args) => {
-    if (isEqualOrBelowLogLevel(logLevel, "trace")) {
-      return console.log(...args);
-    }
-  },
-  verbose: (logLevel, ...args) => {
-    if (isEqualOrBelowLogLevel(logLevel, "verbose")) {
-      return console.log(...args);
-    }
-  },
-  info: (logLevel, ...args) => {
-    if (isEqualOrBelowLogLevel(logLevel, "info")) {
-      return console.log(...args);
-    }
-  },
-  warn: (logLevel, ...args) => {
-    if (isEqualOrBelowLogLevel(logLevel, "warn")) {
-      return console.warn(...args);
-    }
-  },
-  error: (...args) => {
-    return console.error(...args);
-  }
-};
-
 // src/playback-logging.ts
 var playbackLogging = ({
   logLevel,
@@ -2896,6 +2902,10 @@ var useBufferState = () => {
 };
 
 // src/buffer-until-first-frame.ts
+var isWebkit = () => {
+  const isAppleWebKit = /AppleWebKit/.test(window.navigator.userAgent);
+  return isAppleWebKit;
+};
 var useBufferUntilFirstFrame = ({
   mediaRef,
   mediaType,
@@ -2917,7 +2927,13 @@ var useBufferUntilFirstFrame = ({
     if (!current) {
       return;
     }
-    if (current.readyState >= current.HAVE_ENOUGH_DATA) {
+    playbackLogging({
+      logLevel,
+      message: `Checking if should buffer until first frame, ${current.readyState}`,
+      mountTime,
+      tag: "buffer"
+    });
+    if (current.readyState >= current.HAVE_ENOUGH_DATA && !isWebkit()) {
       return;
     }
     if (!current.requestVideoFrameCallback) {
@@ -3572,7 +3588,7 @@ var useMediaPlayback = ({
         mountTime
       });
       lastSeekDueToShift.current = lastSeek.current;
-      if (playing && !isVariableFpsVideo) {
+      if (playing) {
         if (playbackRate > 0) {
           bufferUntilFirstFrame(shouldBeTime);
         }
@@ -4355,7 +4371,7 @@ var FolderContext = createContext17({
 });
 var Folder = ({ name, children }) => {
   const parent = useContext24(FolderContext);
-  const { registerFolder, unregisterFolder } = useContext24(CompositionManager);
+  const { registerFolder, unregisterFolder } = useContext24(CompositionSetters);
   validateFolderName(name);
   const parentNameArr = [parent.parentName, parent.folderName].filter(truthy);
   const parentName = parentNameArr.length === 0 ? null : parentNameArr.join("/");
@@ -4525,7 +4541,7 @@ var Fallback = () => {
   }, []);
   return null;
 };
-var Composition = ({
+var InnerComposition = ({
   width,
   height,
   fps,
@@ -4535,7 +4551,8 @@ var Composition = ({
   schema,
   ...compProps
 }) => {
-  const { registerComposition, unregisterComposition } = useContext25(CompositionManager);
+  const compManager = useContext25(CompositionSetters);
+  const { registerComposition, unregisterComposition } = compManager;
   const video = useVideo();
   const lazy = useLazyComponent({
     compProps,
@@ -4584,13 +4601,13 @@ var Composition = ({
     id,
     folderName,
     defaultProps,
-    registerComposition,
-    unregisterComposition,
     width,
     nonce,
     parentName,
     schema,
-    compProps.calculateMetadata
+    compProps.calculateMetadata,
+    registerComposition,
+    unregisterComposition
   ]);
   const resolved = useResolvedVideoConfig(id);
   if (environment.isStudio && video && video.component === lazy) {
@@ -4623,117 +4640,13 @@ var Composition = ({
   }
   return null;
 };
-// src/CompositionManager.tsx
-import React20, {
-  useCallback as useCallback12,
-  useImperativeHandle as useImperativeHandle7,
-  useMemo as useMemo23,
-  useRef as useRef12,
-  useState as useState14
-} from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var compositionsRef = React20.createRef();
-var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
-  const [compositions, setCompositions] = useState14([]);
-  const currentcompositionsRef = useRef12(compositions);
-  const [folders, setFolders] = useState14([]);
-  const [canvasContent, setCanvasContent] = useState14(null);
-  const [currentCompositionMetadata, setCurrentCompositionMetadata] = useState14(null);
-  const updateCompositions = useCallback12((updateComps) => {
-    setCompositions((comps) => {
-      const updated = updateComps(comps);
-      currentcompositionsRef.current = updated;
-      return updated;
-    });
-  }, []);
-  const registerComposition = useCallback12((comp) => {
-    updateCompositions((comps) => {
-      if (comps.find((c) => c.id === comp.id)) {
-        throw new Error(`Multiple composition with id ${comp.id} are registered.`);
-      }
-      const value = [...comps, comp].slice().sort((a, b) => a.nonce - b.nonce);
-      return value;
-    });
-  }, [updateCompositions]);
-  const unregisterComposition = useCallback12((id) => {
-    setCompositions((comps) => {
-      return comps.filter((c) => c.id !== id);
-    });
-  }, []);
-  const registerFolder = useCallback12((name, parent) => {
-    setFolders((prevFolders) => {
-      return [
-        ...prevFolders,
-        {
-          name,
-          parent
-        }
-      ];
-    });
-  }, []);
-  const unregisterFolder = useCallback12((name, parent) => {
-    setFolders((prevFolders) => {
-      return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
-    });
-  }, []);
-  useImperativeHandle7(compositionsRef, () => {
-    return {
-      getCompositions: () => currentcompositionsRef.current
-    };
-  }, []);
-  const composition = compositions.find((c) => canvasContent?.type === "composition" ? c.id === canvasContent.compositionId : null);
-  const updateCompositionDefaultProps = useCallback12((id, newDefaultProps) => {
-    setCompositions((comps) => {
-      const updated = comps.map((c) => {
-        if (c.id === id) {
-          return {
-            ...c,
-            defaultProps: newDefaultProps
-          };
-        }
-        return c;
-      });
-      return updated;
-    });
-  }, []);
-  const contextValue = useMemo23(() => {
-    return {
-      compositions,
-      registerComposition,
-      unregisterComposition,
-      folders,
-      registerFolder,
-      unregisterFolder,
-      currentCompositionMetadata,
-      setCurrentCompositionMetadata,
-      canvasContent,
-      setCanvasContent,
-      updateCompositionDefaultProps
-    };
-  }, [
-    compositions,
-    registerComposition,
-    unregisterComposition,
-    folders,
-    registerFolder,
-    unregisterFolder,
-    currentCompositionMetadata,
-    canvasContent,
-    updateCompositionDefaultProps
-  ]);
-  return /* @__PURE__ */ jsx23(CompositionManager.Provider, {
-    value: contextValue,
-    children: /* @__PURE__ */ jsx23(SequenceManagerProvider, {
-      children: /* @__PURE__ */ jsx23(RenderAssetManagerProvider, {
-        children: /* @__PURE__ */ jsx23(ResolveCompositionConfig, {
-          children: /* @__PURE__ */ jsx23(SharedAudioContextProvider, {
-            numberOfAudioTags,
-            component: composition?.component ?? null,
-            children
-          })
-        })
-      })
-    })
+var Composition = (props2) => {
+  const { onlyRenderComposition } = useContext25(CompositionSetters);
+  if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx22(InnerComposition, {
+    ...props2
   });
 };
 // src/bezier.ts
@@ -4950,8 +4863,8 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback13, useState as useState15 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState14 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
   onError,
@@ -4959,15 +4872,15 @@ var IFrameRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   ...props2
 }, ref) => {
-  const [handle] = useState15(() => delayRender(`Loading <IFrame> with source ${props2.src}`, {
+  const [handle] = useState14(() => delayRender(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback13((e) => {
+  const didLoad = useCallback12((e) => {
     continueRender(handle);
     onLoad?.(e);
   }, [handle, onLoad]);
-  const didGetError = useCallback13((e) => {
+  const didGetError = useCallback12((e) => {
     continueRender(handle);
     if (onError) {
       onError(e);
@@ -4975,7 +4888,7 @@ var IFrameRefForwarding = ({
       console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
     }
   }, [handle, onError]);
-  return /* @__PURE__ */ jsx24("iframe", {
+  return /* @__PURE__ */ jsx23("iframe", {
     ...props2,
     ref,
     onError: didGetError,
@@ -4986,13 +4899,13 @@ var IFrame = forwardRef7(IFrameRefForwarding);
 // src/Img.tsx
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback14,
+  useCallback as useCallback13,
   useContext as useContext26,
-  useImperativeHandle as useImperativeHandle8,
+  useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect4,
-  useRef as useRef13
+  useRef as useRef12
 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
@@ -5006,18 +4919,18 @@ var ImgRefForwarding = ({
   onImageFrame,
   ...props2
 }, ref) => {
-  const imageRef = useRef13(null);
-  const errors = useRef13({});
+  const imageRef = useRef12(null);
+  const errors = useRef12({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext26(SequenceContext);
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  useImperativeHandle8(ref, () => {
+  useImperativeHandle7(ref, () => {
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback14((timeout) => {
+  const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -5034,7 +4947,7 @@ var ImgRefForwarding = ({
       imageRef.current.setAttribute("src", newSrc);
     }, timeout);
   }, []);
-  const didGetError = useCallback14((e) => {
+  const didGetError = useCallback13((e) => {
     if (!errors.current) {
       return;
     }
@@ -5120,13 +5033,135 @@ var ImgRefForwarding = ({
       onImageFrame
     ]);
   }
-  return /* @__PURE__ */ jsx25("img", {
+  return /* @__PURE__ */ jsx24("img", {
     ...props2,
     ref: imageRef,
     onError: didGetError
   });
 };
 var Img = forwardRef8(ImgRefForwarding);
+// src/CompositionManager.tsx
+import React22, {
+  useCallback as useCallback14,
+  useImperativeHandle as useImperativeHandle8,
+  useMemo as useMemo23,
+  useRef as useRef13,
+  useState as useState15
+} from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var compositionsRef = React22.createRef();
+var CompositionManagerProvider = ({
+  children,
+  numberOfAudioTags,
+  onlyRenderComposition,
+  currentCompositionMetadata
+}) => {
+  const [compositions, setCompositions] = useState15([]);
+  const currentcompositionsRef = useRef13(compositions);
+  const [folders, setFolders] = useState15([]);
+  const [canvasContent, setCanvasContent] = useState15(null);
+  const updateCompositions = useCallback14((updateComps) => {
+    setCompositions((comps) => {
+      const updated = updateComps(comps);
+      currentcompositionsRef.current = updated;
+      return updated;
+    });
+  }, []);
+  const registerComposition = useCallback14((comp) => {
+    updateCompositions((comps) => {
+      if (comps.find((c2) => c2.id === comp.id)) {
+        throw new Error(`Multiple composition with id ${comp.id} are registered.`);
+      }
+      const value = [...comps, comp].slice().sort((a2, b2) => a2.nonce - b2.nonce);
+      return value;
+    });
+  }, [updateCompositions]);
+  const unregisterComposition = useCallback14((id) => {
+    setCompositions((comps) => {
+      return comps.filter((c2) => c2.id !== id);
+    });
+  }, []);
+  const registerFolder = useCallback14((name, parent) => {
+    setFolders((prevFolders) => {
+      return [
+        ...prevFolders,
+        {
+          name,
+          parent
+        }
+      ];
+    });
+  }, []);
+  const unregisterFolder = useCallback14((name, parent) => {
+    setFolders((prevFolders) => {
+      return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
+    });
+  }, []);
+  useImperativeHandle8(compositionsRef, () => {
+    return {
+      getCompositions: () => currentcompositionsRef.current
+    };
+  }, []);
+  const composition = compositions.find((c2) => canvasContent?.type === "composition" ? c2.id === canvasContent.compositionId : null);
+  const updateCompositionDefaultProps = useCallback14((id, newDefaultProps) => {
+    setCompositions((comps) => {
+      const updated = comps.map((c2) => {
+        if (c2.id === id) {
+          return {
+            ...c2,
+            defaultProps: newDefaultProps
+          };
+        }
+        return c2;
+      });
+      return updated;
+    });
+  }, []);
+  const contextValue = useMemo23(() => {
+    return {
+      compositions,
+      folders,
+      currentCompositionMetadata,
+      canvasContent
+    };
+  }, [compositions, folders, currentCompositionMetadata, canvasContent]);
+  const setters = useMemo23(() => {
+    return {
+      registerComposition,
+      unregisterComposition,
+      registerFolder,
+      unregisterFolder,
+      setCanvasContent,
+      updateCompositionDefaultProps,
+      onlyRenderComposition
+    };
+  }, [
+    registerComposition,
+    registerFolder,
+    unregisterComposition,
+    unregisterFolder,
+    updateCompositionDefaultProps,
+    onlyRenderComposition
+  ]);
+  return /* @__PURE__ */ jsx25(CompositionManager.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsx25(CompositionSetters.Provider, {
+      value: setters,
+      children: /* @__PURE__ */ jsx25(SequenceManagerProvider, {
+        children: /* @__PURE__ */ jsx25(RenderAssetManagerProvider, {
+          children: /* @__PURE__ */ jsx25(ResolveCompositionConfig, {
+            children: /* @__PURE__ */ jsx25(SharedAudioContextProvider, {
+              numberOfAudioTags,
+              component: composition?.component ?? null,
+              children
+            })
+          })
+        })
+      })
+    })
+  });
+};
+
 // src/default-css.ts
 var exports_default_css = {};
 __export(exports_default_css, {
@@ -5224,7 +5259,13 @@ import {
   useState as useState16
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-var RemotionRoot = ({ children, numberOfAudioTags, logLevel }) => {
+var RemotionRoot = ({
+  children,
+  numberOfAudioTags,
+  logLevel,
+  onlyRenderComposition,
+  currentCompositionMetadata
+}) => {
   const [remotionRootId] = useState16(() => String(random(null)));
   const [frame, setFrame] = useState16(() => getInitialFrameState());
   const [playing, setPlaying] = useState16(false);
@@ -5308,6 +5349,8 @@ var RemotionRoot = ({ children, numberOfAudioTags, logLevel }) => {
             children: /* @__PURE__ */ jsx26(PrefetchProvider, {
               children: /* @__PURE__ */ jsx26(CompositionManagerProvider, {
                 numberOfAudioTags,
+                onlyRenderComposition,
+                currentCompositionMetadata,
                 children: /* @__PURE__ */ jsx26(DurationsContextProvider, {
                   children: /* @__PURE__ */ jsx26(BufferingProvider, {
                     children
@@ -5527,6 +5570,7 @@ var Internals = {
   useUnsafeVideoConfig,
   Timeline: exports_timeline_position_state,
   CompositionManager,
+  CompositionSetters,
   SequenceManager,
   SequenceVisibilityToggleContext,
   RemotionRoot,

package/dist/esm/no-react.mjs

@@ -148,6 +148,7 @@ if (typeof window !== "undefined") {
 var DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
 var DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
+var DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after";
 
 // src/input-props-serialization.ts
 var DATE_TOKEN = "remotion-date:";
@@ -636,6 +637,7 @@ var NoReactInternals = {
   deserializeJSONWithCustomFields,
   DELAY_RENDER_CALLSTACK_TOKEN,
   DELAY_RENDER_RETRY_TOKEN,
+  DELAY_RENDER_CLEAR_TOKEN,
   DELAY_RENDER_ATTEMPT_TOKEN: DELAY_RENDER_RETRIES_LEFT,
   getOffthreadVideoSource,
   getExpectedMediaFrameUncorrected,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.272";
+var VERSION = "4.0.274";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.272",
+  "version": "4.0.274",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.272"
+    "@remotion/eslint-config-internal": "4.0.274"
   },
   "keywords": [
     "remotion",