remotion 4.0.154 → 4.0.156

package/dist/cjs/Composition.d.ts

@@ -49,8 +49,8 @@ export type StillProps<Schema extends AnyZodObject, Props extends Record<string,
 } & StillCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
 export declare const ClipComposition: React.FC<PropsWithChildren>;
 export type CompositionProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
-    id: string;
-    schema?: Schema;
+    readonly id: string;
+    readonly schema?: Schema;
 } & CompositionCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
 /**
  * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.

package/dist/cjs/CompositionManager.js

@@ -91,6 +91,20 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     const composition = compositions.find((c) => (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
         ? c.id === canvasContent.compositionId
         : null);
+    const updateCompositionDefaultProps = (0, react_1.useCallback)((id, newDefaultProps) => {
+        setCompositions((comps) => {
+            const updated = comps.map((c) => {
+                if (c.id === id) {
+                    return {
+                        ...c,
+                        defaultProps: newDefaultProps,
+                    };
+                }
+                return c;
+            });
+            return updated;
+        });
+    }, []);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             compositions,
@@ -103,6 +117,7 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
             setCurrentCompositionMetadata,
             canvasContent,
             setCanvasContent,
+            updateCompositionDefaultProps,
         };
     }, [
         compositions,
@@ -113,7 +128,7 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
         unregisterFolder,
         currentCompositionMetadata,
         canvasContent,
-        setCanvasContent,
+        updateCompositionDefaultProps,
     ]);
     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 }) }) }) }) }));
 };

package/dist/cjs/CompositionManagerContext.d.ts

@@ -17,6 +17,7 @@ export type CanvasContent = {
 export type CompositionManagerContext = {
     compositions: AnyComposition[];
     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;

package/dist/cjs/CompositionManagerContext.js

@@ -9,6 +9,7 @@ exports.CompositionManager = (0, react_1.createContext)({
     registerFolder: () => undefined,
     unregisterFolder: () => undefined,
     setCurrentCompositionMetadata: () => undefined,
+    updateCompositionDefaultProps: () => undefined,
     folders: [],
     currentCompositionMetadata: null,
     canvasContent: null,

package/dist/cjs/EditorProps.d.ts

@@ -7,6 +7,7 @@ export type EditorPropsContextType = {
         defaultProps: Record<string, unknown>;
         newProps: Record<string, unknown> | ((oldProps: Record<string, unknown>) => Record<string, unknown>);
     }) => void;
+    resetUnsaved: () => void;
 };
 export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
 export declare const editorPropsProviderRef: React.RefObject<{

package/dist/cjs/EditorProps.js

@@ -31,6 +31,9 @@ exports.EditorPropsContext = (0, react_1.createContext)({
     updateProps: () => {
         throw new Error('Not implemented');
     },
+    resetUnsaved: () => {
+        throw new Error('Not implemented');
+    },
 });
 exports.editorPropsProviderRef = react_1.default.createRef();
 const EditorPropsProvider = ({ children }) => {
@@ -46,6 +49,9 @@ const EditorPropsProvider = ({ children }) => {
             };
         });
     }, []);
+    const resetUnsaved = (0, react_1.useCallback)(() => {
+        setProps({});
+    }, []);
     (0, react_1.useImperativeHandle)(exports.editorPropsProviderRef, () => {
         return {
             getProps: () => props,
@@ -53,8 +59,8 @@ const EditorPropsProvider = ({ children }) => {
         };
     }, [props]);
     const ctx = (0, react_1.useMemo)(() => {
-        return { props, updateProps };
-    }, [props, updateProps]);
+        return { props, updateProps, resetUnsaved };
+    }, [props, resetUnsaved, updateProps]);
     return ((0, jsx_runtime_1.jsx)(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
 };
 exports.EditorPropsProvider = EditorPropsProvider;

package/dist/cjs/ResolveCompositionConfig.d.ts

@@ -20,6 +20,7 @@ type VideoConfigState = {
     error: Error;
 };
 export declare const needsResolution: (composition: AnyComposition) => boolean;
+export declare const PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
 export declare const ResolveCompositionConfig: React.FC<PropsWithChildren<{
     children: React.ReactNode;
 }>>;

package/dist/cjs/ResolveCompositionConfig.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResolvedVideoConfig = exports.ResolveCompositionConfig = exports.needsResolution = exports.resolveCompositionsRef = exports.ResolveCompositionContext = void 0;
+exports.useResolvedVideoConfig = exports.ResolveCompositionConfig = exports.PROPS_UPDATED_EXTERNALLY = exports.needsResolution = exports.resolveCompositionsRef = exports.ResolveCompositionContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.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 nonce_js_1 = require("./nonce.js");
 const resolve_video_config_js_1 = require("./resolve-video-config.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
 const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
@@ -17,14 +18,24 @@ const needsResolution = (composition) => {
     return Boolean(composition.calculateMetadata);
 };
 exports.needsResolution = needsResolution;
+exports.PROPS_UPDATED_EXTERNALLY = 'remotion.propsUpdatedExternally';
 const ResolveCompositionConfig = ({ children }) => {
     const [currentRenderModalComposition, setCurrentRenderModalComposition] = (0, react_1.useState)(null);
     const { compositions, canvasContent, currentCompositionMetadata } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
-    const selectedComposition = compositions.find((c) => canvasContent &&
-        canvasContent.type === 'composition' &&
-        canvasContent.compositionId === c.id);
+    const { fastRefreshes } = (0, react_1.useContext)(nonce_js_1.NonceContext);
+    const selectedComposition = (0, react_1.useMemo)(() => {
+        return compositions.find((c) => canvasContent &&
+            canvasContent.type === 'composition' &&
+            canvasContent.compositionId === c.id);
+    }, [canvasContent, compositions]);
     const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
     const { props: allEditorProps } = (0, react_1.useContext)(EditorProps_js_1.EditorPropsContext);
+    const inputProps = (0, react_1.useMemo)(() => {
+        var _a;
+        return typeof window === 'undefined' || (0, get_remotion_environment_js_1.getRemotionEnvironment)().isPlayer
+            ? {}
+            : (_a = (0, input_props_js_1.getInputProps)()) !== null && _a !== void 0 ? _a : {};
+    }, []);
     const [resolvedConfigs, setResolvedConfigs] = (0, react_1.useState)({});
     const selectedEditorProps = (0, react_1.useMemo)(() => {
         var _a;
@@ -38,30 +49,32 @@ const ResolveCompositionConfig = ({ children }) => {
             ? (_a = allEditorProps[renderModalComposition.id]) !== null && _a !== void 0 ? _a : {}
             : {};
     }, [allEditorProps, renderModalComposition]);
-    const doResolution = (0, react_1.useCallback)((composition, editorProps) => {
-        var _a;
+    const hasResolution = Boolean(currentCompositionMetadata);
+    const doResolution = (0, react_1.useCallback)(({ calculateMetadata, combinedProps, compositionDurationInFrames, compositionFps, compositionHeight, compositionId, compositionWidth, defaultProps, }) => {
         const controller = new AbortController();
-        if (currentCompositionMetadata) {
+        if (hasResolution) {
             return controller;
         }
-        const inputProps = typeof window === 'undefined' || (0, get_remotion_environment_js_1.getRemotionEnvironment)().isPlayer
-            ? {}
-            : (_a = (0, input_props_js_1.getInputProps)()) !== null && _a !== void 0 ? _a : {};
         const { signal } = controller;
         const promOrNot = (0, resolve_video_config_js_1.resolveVideoConfig)({
-            composition,
-            editorProps,
-            inputProps,
+            compositionId,
+            calculateMetadata,
+            originalProps: combinedProps,
             signal,
+            defaultProps,
+            compositionDurationInFrames,
+            compositionFps,
+            compositionHeight,
+            compositionWidth,
         });
         if (typeof promOrNot === 'object' && 'then' in promOrNot) {
             setResolvedConfigs((r) => {
-                const prev = r[composition.id];
+                const prev = r[compositionId];
                 if ((prev === null || prev === void 0 ? void 0 : prev.type) === 'success' ||
                     (prev === null || prev === void 0 ? void 0 : prev.type) === 'success-and-refreshing') {
                     return {
                         ...r,
-                        [composition.id]: {
+                        [compositionId]: {
                             type: 'success-and-refreshing',
                             result: prev.result,
                         },
@@ -69,7 +82,7 @@ const ResolveCompositionConfig = ({ children }) => {
                 }
                 return {
                     ...r,
-                    [composition.id]: {
+                    [compositionId]: {
                         type: 'loading',
                     },
                 };
@@ -81,7 +94,7 @@ const ResolveCompositionConfig = ({ children }) => {
                 }
                 setResolvedConfigs((r) => ({
                     ...r,
-                    [composition.id]: {
+                    [compositionId]: {
                         type: 'success',
                         result: c,
                     },
@@ -93,7 +106,7 @@ const ResolveCompositionConfig = ({ children }) => {
                 }
                 setResolvedConfigs((r) => ({
                     ...r,
-                    [composition.id]: {
+                    [compositionId]: {
                         type: 'error',
                         error: err,
                     },
@@ -103,14 +116,14 @@ const ResolveCompositionConfig = ({ children }) => {
         else {
             setResolvedConfigs((r) => ({
                 ...r,
-                [composition.id]: {
+                [compositionId]: {
                     type: 'success',
                     result: promOrNot,
                 },
             }));
         }
         return controller;
-    }, [currentCompositionMetadata]);
+    }, [hasResolution]);
     const currentComposition = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     (0, react_1.useImperativeHandle)(exports.resolveCompositionsRef, () => {
         return {
@@ -118,7 +131,7 @@ const ResolveCompositionConfig = ({ children }) => {
                 setCurrentRenderModalComposition(id);
             },
             reloadCurrentlySelectedComposition: () => {
-                var _a;
+                var _a, _b, _c, _d, _e, _f;
                 if (!currentComposition) {
                     return;
                 }
@@ -127,27 +140,123 @@ const ResolveCompositionConfig = ({ children }) => {
                     throw new Error(`Could not find composition with id ${currentComposition}`);
                 }
                 const editorProps = (_a = allEditorProps[currentComposition]) !== null && _a !== void 0 ? _a : {};
-                doResolution(composition, editorProps);
+                const defaultProps = {
+                    ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
+                    ...(editorProps !== null && editorProps !== void 0 ? editorProps : {}),
+                };
+                const props = {
+                    ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+                };
+                doResolution({
+                    defaultProps,
+                    calculateMetadata: composition.calculateMetadata,
+                    combinedProps: props,
+                    compositionDurationInFrames: (_c = composition.durationInFrames) !== null && _c !== void 0 ? _c : null,
+                    compositionFps: (_d = composition.fps) !== null && _d !== void 0 ? _d : null,
+                    compositionHeight: (_e = composition.height) !== null && _e !== void 0 ? _e : null,
+                    compositionWidth: (_f = composition.width) !== null && _f !== void 0 ? _f : null,
+                    compositionId: composition.id,
+                });
             },
         };
-    }, [allEditorProps, compositions, currentComposition, doResolution]);
+    }, [
+        allEditorProps,
+        compositions,
+        currentComposition,
+        doResolution,
+        inputProps,
+    ]);
     const isTheSame = (selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.id) === (renderModalComposition === null || renderModalComposition === void 0 ? void 0 : renderModalComposition.id);
+    const currentDefaultProps = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            ...((_a = selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.defaultProps) !== null && _a !== void 0 ? _a : {}),
+            ...(selectedEditorProps !== null && selectedEditorProps !== void 0 ? selectedEditorProps : {}),
+        };
+    }, [selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.defaultProps, selectedEditorProps]);
+    const originalProps = (0, react_1.useMemo)(() => {
+        return {
+            ...currentDefaultProps,
+            ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+        };
+    }, [currentDefaultProps, inputProps]);
+    const canResolve = selectedComposition && (0, exports.needsResolution)(selectedComposition);
+    const shouldIgnoreUpdate = typeof window !== 'undefined' &&
+        window.remotion_ignoreFastRefreshUpdate &&
+        fastRefreshes <= window.remotion_ignoreFastRefreshUpdate;
     (0, react_1.useEffect)(() => {
-        if (selectedComposition && (0, exports.needsResolution)(selectedComposition)) {
-            const controller = doResolution(selectedComposition, selectedEditorProps);
+        var _a, _b, _c, _d;
+        if (shouldIgnoreUpdate) {
+            // We already have the current state, we just saved it back
+            // to the file
+            return;
+        }
+        if (canResolve) {
+            const controller = doResolution({
+                calculateMetadata: selectedComposition.calculateMetadata,
+                combinedProps: originalProps,
+                compositionDurationInFrames: (_a = selectedComposition.durationInFrames) !== null && _a !== void 0 ? _a : null,
+                compositionFps: (_b = selectedComposition.fps) !== null && _b !== void 0 ? _b : null,
+                compositionHeight: (_c = selectedComposition.height) !== null && _c !== void 0 ? _c : null,
+                compositionWidth: (_d = selectedComposition.width) !== null && _d !== void 0 ? _d : null,
+                defaultProps: currentDefaultProps,
+                compositionId: selectedComposition.id,
+            });
             return () => {
                 controller.abort();
             };
         }
-    }, [doResolution, selectedComposition, selectedEditorProps]);
+    }, [
+        canResolve,
+        currentDefaultProps,
+        doResolution,
+        originalProps,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.calculateMetadata,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.durationInFrames,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.fps,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.height,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.id,
+        selectedComposition === null || selectedComposition === void 0 ? void 0 : selectedComposition.width,
+        shouldIgnoreUpdate,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (shouldIgnoreUpdate) {
+            // We already have the current state, we just saved it back
+            // to the file
+            return;
+        }
+        window.dispatchEvent(new CustomEvent('remotion.propsUpdatedExternally'));
+    }, [fastRefreshes, shouldIgnoreUpdate]);
     (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d, _e;
         if (renderModalComposition && !isTheSame) {
-            const controller = doResolution(renderModalComposition, renderModalProps);
+            const combinedProps = {
+                ...((_a = renderModalComposition.defaultProps) !== null && _a !== void 0 ? _a : {}),
+                ...(renderModalProps !== null && renderModalProps !== void 0 ? renderModalProps : {}),
+                ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
+            };
+            const controller = doResolution({
+                calculateMetadata: renderModalComposition.calculateMetadata,
+                compositionDurationInFrames: (_b = renderModalComposition.durationInFrames) !== null && _b !== void 0 ? _b : null,
+                compositionFps: (_c = renderModalComposition.fps) !== null && _c !== void 0 ? _c : null,
+                compositionHeight: (_d = renderModalComposition.height) !== null && _d !== void 0 ? _d : null,
+                compositionId: renderModalComposition.id,
+                compositionWidth: (_e = renderModalComposition.width) !== null && _e !== void 0 ? _e : null,
+                defaultProps: currentDefaultProps,
+                combinedProps,
+            });
             return () => {
                 controller.abort();
             };
         }
-    }, [doResolution, isTheSame, renderModalComposition, renderModalProps]);
+    }, [
+        currentDefaultProps,
+        doResolution,
+        inputProps,
+        isTheSame,
+        renderModalComposition,
+        renderModalProps,
+    ]);
     const resolvedConfigsIncludingStaticOnes = (0, react_1.useMemo)(() => {
         const staticComps = compositions.filter((c) => {
             return c.calculateMetadata === null;

package/dist/cjs/index.d.ts

@@ -29,6 +29,7 @@ declare global {
         remotion_publicPath: string;
         remotion_publicFolderExists: string | null;
         remotion_editorName: string | null;
+        remotion_ignoreFastRefreshUpdate: number | null;
         remotion_numberOfAudioTags: number;
         remotion_projectName: string;
         remotion_cwd: string;

package/dist/cjs/internals.d.ts

@@ -88,11 +88,16 @@ export declare const Internals: {
     readonly EditorPropsContext: import("react").Context<import("./EditorProps.js").EditorPropsContextType>;
     readonly usePreload: (src: string) => string;
     readonly NonceContext: import("react").Context<import("./nonce.js").TNonceContext>;
-    readonly resolveVideoConfig: ({ composition, editorProps: editorPropsOrUndefined, signal, inputProps, }: {
-        composition: import("./CompositionManager.js").TCompMetadataWithCalcFunction<import("zod").AnyZodObject, Record<string, unknown>>;
-        editorProps: object;
+    readonly resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: {
+        compositionId: string;
+        compositionWidth: number | null;
+        compositionHeight: number | null;
+        compositionFps: number | null;
+        compositionDurationInFrames: number | null;
+        calculateMetadata: import("./Composition.js").CalculateMetadataFunction<Record<string, unknown>> | null;
         signal: AbortSignal;
-        inputProps: Record<string, unknown>;
+        defaultProps: Record<string, unknown>;
+        originalProps: Record<string, unknown>;
     }) => import("./video-config.js").VideoConfig | Promise<import("./video-config.js").VideoConfig>;
     readonly useResolvedVideoConfig: (preferredCompositionId: string | null) => ({
         type: "loading";
@@ -166,5 +171,6 @@ export declare const Internals: {
             [x: string]: Record<string, unknown>;
         }>>;
     }>;
+    readonly PROPS_UPDATED_EXTERNALLY: "remotion.propsUpdatedExternally";
 };
 export type { CompositionManagerContext, CompProps, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TRenderAsset as TAsset, TCompMetadata, TComposition, TimelinePosition as Timeline, TimelineContextValue, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -125,4 +125,5 @@ exports.Internals = {
     PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,
     calculateScale: use_current_scale_js_1.calculateScale,
     editorPropsProviderRef: EditorProps_js_1.editorPropsProviderRef,
+    PROPS_UPDATED_EXTERNALLY: ResolveCompositionConfig_js_1.PROPS_UPDATED_EXTERNALLY,
 };

package/dist/cjs/resolve-video-config.d.ts

@@ -1,9 +1,15 @@
 import type { AnyZodObject } from 'zod';
-import type { TCompMetadataWithCalcFunction } from './CompositionManager.js';
+import type { CalculateMetadataFunction } from './Composition.js';
+import type { InferProps } from './props-if-has-props.js';
 import type { VideoConfig } from './video-config.js';
-export declare const resolveVideoConfig: ({ composition, editorProps: editorPropsOrUndefined, signal, inputProps, }: {
-    composition: TCompMetadataWithCalcFunction<AnyZodObject, Record<string, unknown>>;
-    editorProps: object;
+export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: {
+    compositionId: string;
+    compositionWidth: number | null;
+    compositionHeight: number | null;
+    compositionFps: number | null;
+    compositionDurationInFrames: number | null;
+    calculateMetadata: CalculateMetadataFunction<InferProps<AnyZodObject, Record<string, unknown>>> | null;
     signal: AbortSignal;
-    inputProps: Record<string, unknown>;
+    defaultProps: Record<string, unknown>;
+    originalProps: Record<string, unknown>;
 }) => VideoConfig | Promise<VideoConfig>;

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

@@ -5,80 +5,83 @@ const validate_default_codec_js_1 = require("./validation/validate-default-codec
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
 const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
 const validate_fps_js_1 = require("./validation/validate-fps.js");
-const validateCalculated = ({ composition, calculated, }) => {
+const validateCalculated = ({ calculated, compositionId, compositionFps, compositionHeight, compositionWidth, compositionDurationInFrames, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const calculateMetadataErrorLocation = `calculated by calculateMetadata() for the composition "${composition.id}"`;
-    const defaultErrorLocation = `of the "<Composition />" component with the id "${composition.id}"`;
-    const width = (_b = (_a = calculated === null || calculated === void 0 ? void 0 : calculated.width) !== null && _a !== void 0 ? _a : composition.width) !== null && _b !== void 0 ? _b : undefined;
+    const calculateMetadataErrorLocation = `calculated by calculateMetadata() for the composition "${compositionId}"`;
+    const defaultErrorLocation = `of the "<Composition />" component with the id "${compositionId}"`;
+    const width = (_b = (_a = calculated === null || calculated === void 0 ? void 0 : calculated.width) !== null && _a !== void 0 ? _a : compositionWidth) !== null && _b !== void 0 ? _b : undefined;
     (0, validate_dimensions_js_1.validateDimension)(width, 'width', (calculated === null || calculated === void 0 ? void 0 : calculated.width) ? calculateMetadataErrorLocation : defaultErrorLocation);
-    const height = (_d = (_c = calculated === null || calculated === void 0 ? void 0 : calculated.height) !== null && _c !== void 0 ? _c : composition.height) !== null && _d !== void 0 ? _d : undefined;
+    const height = (_d = (_c = calculated === null || calculated === void 0 ? void 0 : calculated.height) !== null && _c !== void 0 ? _c : compositionHeight) !== null && _d !== void 0 ? _d : undefined;
     (0, validate_dimensions_js_1.validateDimension)(height, 'height', (calculated === null || calculated === void 0 ? void 0 : calculated.height) ? calculateMetadataErrorLocation : defaultErrorLocation);
-    const fps = (_f = (_e = calculated === null || calculated === void 0 ? void 0 : calculated.fps) !== null && _e !== void 0 ? _e : composition.fps) !== null && _f !== void 0 ? _f : null;
+    const fps = (_f = (_e = calculated === null || calculated === void 0 ? void 0 : calculated.fps) !== null && _e !== void 0 ? _e : compositionFps) !== null && _f !== void 0 ? _f : null;
     (0, validate_fps_js_1.validateFps)(fps, (calculated === null || calculated === void 0 ? void 0 : calculated.fps) ? calculateMetadataErrorLocation : defaultErrorLocation, false);
-    const durationInFrames = (_h = (_g = calculated === null || calculated === void 0 ? void 0 : calculated.durationInFrames) !== null && _g !== void 0 ? _g : composition.durationInFrames) !== null && _h !== void 0 ? _h : null;
+    const durationInFrames = (_h = (_g = calculated === null || calculated === void 0 ? void 0 : calculated.durationInFrames) !== null && _g !== void 0 ? _g : compositionDurationInFrames) !== null && _h !== void 0 ? _h : null;
     (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, {
         allowFloats: false,
-        component: `of the "<Composition />" component with the id "${composition.id}"`,
+        component: `of the "<Composition />" component with the id "${compositionId}"`,
     });
     const defaultCodec = calculated === null || calculated === void 0 ? void 0 : calculated.defaultCodec;
     (0, validate_default_codec_js_1.validateDefaultCodec)(defaultCodec, calculateMetadataErrorLocation);
     return { width, height, fps, durationInFrames, defaultCodec };
 };
-const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, inputProps, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const originalProps = {
-        ...((_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {}),
-        ...(editorPropsOrUndefined !== null && editorPropsOrUndefined !== void 0 ? editorPropsOrUndefined : {}),
-        ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}),
-    };
-    const calculatedProm = composition.calculateMetadata
-        ? composition.calculateMetadata({
-            defaultProps: (_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {},
+const resolveVideoConfig = ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }) => {
+    var _a, _b;
+    const calculatedProm = calculateMetadata
+        ? calculateMetadata({
+            defaultProps,
             props: originalProps,
             abortSignal: signal,
-            compositionId: composition.id,
+            compositionId,
         })
         : null;
     if (calculatedProm !== null &&
         typeof calculatedProm === 'object' &&
         'then' in calculatedProm) {
         return calculatedProm.then((c) => {
-            var _a, _b;
+            var _a;
             const { height, width, durationInFrames, fps, defaultCodec } = validateCalculated({
                 calculated: c,
-                composition,
+                compositionDurationInFrames,
+                compositionFps,
+                compositionHeight,
+                compositionWidth,
+                compositionId,
             });
             return {
                 width,
                 height,
                 fps,
                 durationInFrames,
-                id: composition.id,
-                defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
-                props: (_b = c.props) !== null && _b !== void 0 ? _b : originalProps,
+                id: compositionId,
+                defaultProps,
+                props: (_a = c.props) !== null && _a !== void 0 ? _a : originalProps,
                 defaultCodec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : null,
             };
         });
     }
     const data = validateCalculated({
         calculated: calculatedProm,
-        composition,
+        compositionDurationInFrames,
+        compositionFps,
+        compositionHeight,
+        compositionWidth,
+        compositionId,
     });
     if (calculatedProm === null) {
         return {
             ...data,
-            id: composition.id,
-            defaultProps: (_c = composition.defaultProps) !== null && _c !== void 0 ? _c : {},
+            id: compositionId,
+            defaultProps: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {},
             props: originalProps,
             defaultCodec: null,
         };
     }
     return {
         ...data,
-        id: composition.id,
-        defaultProps: (_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {},
-        props: (_e = calculatedProm.props) !== null && _e !== void 0 ? _e : originalProps,
-        defaultCodec: (_f = calculatedProm.defaultCodec) !== null && _f !== void 0 ? _f : null,
+        id: compositionId,
+        defaultProps: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {},
+        props: (_a = calculatedProm.props) !== null && _a !== void 0 ? _a : originalProps,
+        defaultCodec: (_b = calculatedProm.defaultCodec) !== null && _b !== void 0 ? _b : null,
     };
 };
 exports.resolveVideoConfig = resolveVideoConfig;

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.154";
+export declare const VERSION = "4.0.156";

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.154';
+exports.VERSION = '4.0.156';

package/dist/esm/index.mjs

@@ -132,7 +132,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.154";
+var VERSION = "4.0.156";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -359,6 +359,9 @@ var CompositionManager = createContext5({
   setCurrentCompositionMetadata: () => {
     return;
   },
+  updateCompositionDefaultProps: () => {
+    return;
+  },
   folders: [],
   currentCompositionMetadata: null,
   canvasContent: null,
@@ -393,6 +396,9 @@ var EditorPropsContext = createContext6({
   props: {},
   updateProps: () => {
     throw new Error("Not implemented");
+  },
+  resetUnsaved: () => {
+    throw new Error("Not implemented");
   }
 });
 var editorPropsProviderRef = React4.createRef();
@@ -410,6 +416,9 @@ var EditorPropsProvider = ({ children }) => {
       };
     });
   }, []);
+  const resetUnsaved = useCallback2(() => {
+    setProps({});
+  }, []);
   useImperativeHandle(editorPropsProviderRef, () => {
     return {
       getProps: () => props,
@@ -417,8 +426,8 @@ var EditorPropsProvider = ({ children }) => {
     };
   }, [props]);
   const ctx = useMemo4(() => {
-    return { props, updateProps };
-  }, [props, updateProps]);
+    return { props, updateProps, resetUnsaved };
+  }, [props, resetUnsaved, updateProps]);
   return jsx5(EditorPropsContext.Provider, {
     value: ctx,
     children
@@ -639,56 +648,64 @@ function validateFps(fps, location, isGif) {
 
 // src/resolve-video-config.ts
 var validateCalculated = ({
-  composition,
-  calculated
+  calculated,
+  compositionId,
+  compositionFps,
+  compositionHeight,
+  compositionWidth,
+  compositionDurationInFrames
 }) => {
-  const calculateMetadataErrorLocation = `calculated by calculateMetadata() for the composition "${composition.id}"`;
-  const defaultErrorLocation = `of the "<Composition />" component with the id "${composition.id}"`;
-  const width = calculated?.width ?? composition.width ?? undefined;
+  const calculateMetadataErrorLocation = `calculated by calculateMetadata() for the composition "${compositionId}"`;
+  const defaultErrorLocation = `of the "<Composition />" component with the id "${compositionId}"`;
+  const width = calculated?.width ?? compositionWidth ?? undefined;
   validateDimension(width, "width", calculated?.width ? calculateMetadataErrorLocation : defaultErrorLocation);
-  const height = calculated?.height ?? composition.height ?? undefined;
+  const height = calculated?.height ?? compositionHeight ?? undefined;
   validateDimension(height, "height", calculated?.height ? calculateMetadataErrorLocation : defaultErrorLocation);
-  const fps = calculated?.fps ?? composition.fps ?? null;
+  const fps = calculated?.fps ?? compositionFps ?? null;
   validateFps(fps, calculated?.fps ? calculateMetadataErrorLocation : defaultErrorLocation, false);
-  const durationInFrames = calculated?.durationInFrames ?? composition.durationInFrames ?? null;
+  const durationInFrames = calculated?.durationInFrames ?? compositionDurationInFrames ?? null;
   validateDurationInFrames(durationInFrames, {
     allowFloats: false,
-    component: `of the "<Composition />" component with the id "${composition.id}"`
+    component: `of the "<Composition />" component with the id "${compositionId}"`
   });
   const defaultCodec = calculated?.defaultCodec;
   validateDefaultCodec(defaultCodec, calculateMetadataErrorLocation);
   return { width, height, fps, durationInFrames, defaultCodec };
 };
 var resolveVideoConfig = ({
-  composition,
-  editorProps: editorPropsOrUndefined,
+  calculateMetadata,
   signal,
-  inputProps
+  defaultProps,
+  originalProps,
+  compositionId,
+  compositionDurationInFrames,
+  compositionFps,
+  compositionHeight,
+  compositionWidth
 }) => {
-  const originalProps = {
-    ...composition.defaultProps ?? {},
-    ...editorPropsOrUndefined ?? {},
-    ...inputProps ?? {}
-  };
-  const calculatedProm = composition.calculateMetadata ? composition.calculateMetadata({
-    defaultProps: composition.defaultProps ?? {},
+  const calculatedProm = calculateMetadata ? calculateMetadata({
+    defaultProps,
     props: originalProps,
     abortSignal: signal,
-    compositionId: composition.id
+    compositionId
   }) : null;
   if (calculatedProm !== null && typeof calculatedProm === "object" && "then" in calculatedProm) {
     return calculatedProm.then((c) => {
       const { height, width, durationInFrames, fps, defaultCodec } = validateCalculated({
         calculated: c,
-        composition
+        compositionDurationInFrames,
+        compositionFps,
+        compositionHeight,
+        compositionWidth,
+        compositionId
       });
       return {
         width,
         height,
         fps,
         durationInFrames,
-        id: composition.id,
-        defaultProps: composition.defaultProps ?? {},
+        id: compositionId,
+        defaultProps,
         props: c.props ?? originalProps,
         defaultCodec: defaultCodec ?? null
       };
@@ -696,21 +713,25 @@ var resolveVideoConfig = ({
   }
   const data = validateCalculated({
     calculated: calculatedProm,
-    composition
+    compositionDurationInFrames,
+    compositionFps,
+    compositionHeight,
+    compositionWidth,
+    compositionId
   });
   if (calculatedProm === null) {
     return {
       ...data,
-      id: composition.id,
-      defaultProps: composition.defaultProps ?? {},
+      id: compositionId,
+      defaultProps: defaultProps ?? {},
       props: originalProps,
       defaultCodec: null
     };
   }
   return {
     ...data,
-    id: composition.id,
-    defaultProps: composition.defaultProps ?? {},
+    id: compositionId,
+    defaultProps: defaultProps ?? {},
     props: calculatedProm.props ?? originalProps,
     defaultCodec: calculatedProm.defaultCodec ?? null
   };
@@ -725,12 +746,19 @@ var resolveCompositionsRef = createRef();
 var needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
 };
+var PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
 var ResolveCompositionConfig = ({ children }) => {
   const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
   const { compositions, canvasContent, currentCompositionMetadata } = useContext5(CompositionManager);
-  const selectedComposition = compositions.find((c) => canvasContent && canvasContent.type === "composition" && canvasContent.compositionId === c.id);
+  const { fastRefreshes } = useContext5(NonceContext);
+  const selectedComposition = useMemo5(() => {
+    return compositions.find((c) => canvasContent && canvasContent.type === "composition" && canvasContent.compositionId === c.id);
+  }, [canvasContent, compositions]);
   const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
   const { props: allEditorProps } = useContext5(EditorPropsContext);
+  const inputProps = useMemo5(() => {
+    return typeof window === "undefined" || getRemotionEnvironment().isPlayer ? {} : getInputProps() ?? {};
+  }, []);
   const [resolvedConfigs, setResolvedConfigs] = useState4({});
   const selectedEditorProps = useMemo5(() => {
     return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
@@ -738,26 +766,40 @@ var ResolveCompositionConfig = ({ children }) => {
   const renderModalProps = useMemo5(() => {
     return renderModalComposition ? allEditorProps[renderModalComposition.id] ?? {} : {};
   }, [allEditorProps, renderModalComposition]);
-  const doResolution = useCallback3((composition, editorProps) => {
+  const hasResolution = Boolean(currentCompositionMetadata);
+  const doResolution = useCallback3(({
+    calculateMetadata,
+    combinedProps,
+    compositionDurationInFrames,
+    compositionFps,
+    compositionHeight,
+    compositionId,
+    compositionWidth,
+    defaultProps
+  }) => {
     const controller = new AbortController;
-    if (currentCompositionMetadata) {
+    if (hasResolution) {
       return controller;
     }
-    const inputProps = typeof window === "undefined" || getRemotionEnvironment().isPlayer ? {} : getInputProps() ?? {};
     const { signal } = controller;
     const promOrNot = resolveVideoConfig({
-      composition,
-      editorProps,
-      inputProps,
-      signal
+      compositionId,
+      calculateMetadata,
+      originalProps: combinedProps,
+      signal,
+      defaultProps,
+      compositionDurationInFrames,
+      compositionFps,
+      compositionHeight,
+      compositionWidth
     });
     if (typeof promOrNot === "object" && "then" in promOrNot) {
       setResolvedConfigs((r) => {
-        const prev = r[composition.id];
+        const prev = r[compositionId];
         if (prev?.type === "success" || prev?.type === "success-and-refreshing") {
           return {
             ...r,
-            [composition.id]: {
+            [compositionId]: {
               type: "success-and-refreshing",
               result: prev.result
             }
@@ -765,7 +807,7 @@ var ResolveCompositionConfig = ({ children }) => {
         }
         return {
           ...r,
-          [composition.id]: {
+          [compositionId]: {
             type: "loading"
           }
         };
@@ -776,7 +818,7 @@ var ResolveCompositionConfig = ({ children }) => {
         }
         setResolvedConfigs((r) => ({
           ...r,
-          [composition.id]: {
+          [compositionId]: {
             type: "success",
             result: c
           }
@@ -787,7 +829,7 @@ var ResolveCompositionConfig = ({ children }) => {
         }
         setResolvedConfigs((r) => ({
           ...r,
-          [composition.id]: {
+          [compositionId]: {
             type: "error",
             error: err
           }
@@ -796,14 +838,14 @@ var ResolveCompositionConfig = ({ children }) => {
     } else {
       setResolvedConfigs((r) => ({
         ...r,
-        [composition.id]: {
+        [compositionId]: {
           type: "success",
           result: promOrNot
         }
       }));
     }
     return controller;
-  }, [currentCompositionMetadata]);
+  }, [hasResolution]);
   const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   useImperativeHandle2(resolveCompositionsRef, () => {
     return {
@@ -819,27 +861,114 @@ var ResolveCompositionConfig = ({ children }) => {
           throw new Error(`Could not find composition with id ${currentComposition}`);
         }
         const editorProps = allEditorProps[currentComposition] ?? {};
-        doResolution(composition, editorProps);
+        const defaultProps = {
+          ...composition.defaultProps ?? {},
+          ...editorProps ?? {}
+        };
+        const props = {
+          ...inputProps ?? {}
+        };
+        doResolution({
+          defaultProps,
+          calculateMetadata: composition.calculateMetadata,
+          combinedProps: props,
+          compositionDurationInFrames: composition.durationInFrames ?? null,
+          compositionFps: composition.fps ?? null,
+          compositionHeight: composition.height ?? null,
+          compositionWidth: composition.width ?? null,
+          compositionId: composition.id
+        });
       }
     };
-  }, [allEditorProps, compositions, currentComposition, doResolution]);
+  }, [
+    allEditorProps,
+    compositions,
+    currentComposition,
+    doResolution,
+    inputProps
+  ]);
   const isTheSame = selectedComposition?.id === renderModalComposition?.id;
+  const currentDefaultProps = useMemo5(() => {
+    return {
+      ...selectedComposition?.defaultProps ?? {},
+      ...selectedEditorProps ?? {}
+    };
+  }, [selectedComposition?.defaultProps, selectedEditorProps]);
+  const originalProps = useMemo5(() => {
+    return {
+      ...currentDefaultProps,
+      ...inputProps ?? {}
+    };
+  }, [currentDefaultProps, inputProps]);
+  const canResolve = selectedComposition && needsResolution(selectedComposition);
+  const shouldIgnoreUpdate = typeof window !== "undefined" && window.remotion_ignoreFastRefreshUpdate && fastRefreshes <= window.remotion_ignoreFastRefreshUpdate;
   useEffect4(() => {
-    if (selectedComposition && needsResolution(selectedComposition)) {
-      const controller = doResolution(selectedComposition, selectedEditorProps);
+    if (shouldIgnoreUpdate) {
+      return;
+    }
+    if (canResolve) {
+      const controller = doResolution({
+        calculateMetadata: selectedComposition.calculateMetadata,
+        combinedProps: originalProps,
+        compositionDurationInFrames: selectedComposition.durationInFrames ?? null,
+        compositionFps: selectedComposition.fps ?? null,
+        compositionHeight: selectedComposition.height ?? null,
+        compositionWidth: selectedComposition.width ?? null,
+        defaultProps: currentDefaultProps,
+        compositionId: selectedComposition.id
+      });
       return () => {
         controller.abort();
       };
     }
-  }, [doResolution, selectedComposition, selectedEditorProps]);
+  }, [
+    canResolve,
+    currentDefaultProps,
+    doResolution,
+    originalProps,
+    selectedComposition?.calculateMetadata,
+    selectedComposition?.durationInFrames,
+    selectedComposition?.fps,
+    selectedComposition?.height,
+    selectedComposition?.id,
+    selectedComposition?.width,
+    shouldIgnoreUpdate
+  ]);
+  useEffect4(() => {
+    if (shouldIgnoreUpdate) {
+      return;
+    }
+    window.dispatchEvent(new CustomEvent("remotion.propsUpdatedExternally"));
+  }, [fastRefreshes, shouldIgnoreUpdate]);
   useEffect4(() => {
     if (renderModalComposition && !isTheSame) {
-      const controller = doResolution(renderModalComposition, renderModalProps);
+      const combinedProps = {
+        ...renderModalComposition.defaultProps ?? {},
+        ...renderModalProps ?? {},
+        ...inputProps ?? {}
+      };
+      const controller = doResolution({
+        calculateMetadata: renderModalComposition.calculateMetadata,
+        compositionDurationInFrames: renderModalComposition.durationInFrames ?? null,
+        compositionFps: renderModalComposition.fps ?? null,
+        compositionHeight: renderModalComposition.height ?? null,
+        compositionId: renderModalComposition.id,
+        compositionWidth: renderModalComposition.width ?? null,
+        defaultProps: currentDefaultProps,
+        combinedProps
+      });
       return () => {
         controller.abort();
       };
     }
-  }, [doResolution, isTheSame, renderModalComposition, renderModalProps]);
+  }, [
+    currentDefaultProps,
+    doResolution,
+    inputProps,
+    isTheSame,
+    renderModalComposition,
+    renderModalProps
+  ]);
   const resolvedConfigsIncludingStaticOnes = useMemo5(() => {
     const staticComps = compositions.filter((c) => {
       return c.calculateMetadata === null;
@@ -1182,7 +1311,7 @@ var RegularSequenceRefForwardingFunction = ({
   const parentSequence = useContext12(SequenceContext);
   const { rootId } = useContext12(TimelineContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
-  const nonce2 = useNonce();
+  const nonce3 = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
   }
@@ -1247,7 +1376,7 @@ var RegularSequenceRefForwardingFunction = ({
       type: "sequence",
       rootId,
       showInTimeline,
-      nonce: nonce2,
+      nonce: nonce3,
       loopDisplay,
       stack: stack ?? null,
       premountDisplay: premountDisplay ?? null
@@ -1267,7 +1396,7 @@ var RegularSequenceRefForwardingFunction = ({
     rootId,
     from,
     showInTimeline,
-    nonce2,
+    nonce3,
     loopDisplay,
     stack,
     premountDisplay
@@ -2044,7 +2173,7 @@ var useMediaInTimeline = ({
   const startsAt = useMediaStartsAt();
   const { registerSequence, unregisterSequence } = useContext16(SequenceManager);
   const [initialVolume] = useState8(() => volume);
-  const nonce3 = useNonce();
+  const nonce4 = useNonce();
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames) : videoConfig.durationInFrames;
   const doesVolumeChange = typeof volume === "function";
   const volumes = useMemo15(() => {
@@ -2089,7 +2218,7 @@ var useMediaInTimeline = ({
       rootId,
       volume: volumes,
       showInTimeline: true,
-      nonce: nonce3,
+      nonce: nonce4,
       startMediaFrom: 0 - startsAt,
       doesVolumeChange,
       loopDisplay: undefined,
@@ -2112,7 +2241,7 @@ var useMediaInTimeline = ({
     videoConfig,
     volumes,
     doesVolumeChange,
-    nonce3,
+    nonce4,
     mediaRef,
     mediaType,
     startsAt,
@@ -3490,7 +3619,7 @@ var Composition = ({
   const { registerComposition, unregisterComposition } = useContext24(CompositionManager);
   const video = useVideo();
   const lazy = useLazyComponent(compProps);
-  const nonce4 = useNonce();
+  const nonce5 = useNonce();
   const isPlayer = useIsPlayer();
   const environment = getRemotionEnvironment();
   const canUseComposition = useContext24(CanUseRemotionHooks);
@@ -3516,7 +3645,7 @@ var Composition = ({
       folderName,
       component: lazy,
       defaultProps,
-      nonce: nonce4,
+      nonce: nonce5,
       parentFolderName: parentName,
       schema: schema ?? null,
       calculateMetadata: compProps.calculateMetadata ?? null
@@ -3535,7 +3664,7 @@ var Composition = ({
     registerComposition,
     unregisterComposition,
     width,
-    nonce4,
+    nonce5,
     parentName,
     schema,
     compProps.calculateMetadata
@@ -3634,6 +3763,20 @@ var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     };
   }, []);
   const composition = compositions.find((c) => canvasContent?.type === "composition" ? c.id === canvasContent.compositionId : null);
+  const updateCompositionDefaultProps = useCallback8((id, newDefaultProps) => {
+    setCompositions((comps) => {
+      const updated = comps.map((c) => {
+        if (c.id === id) {
+          return {
+            ...c,
+            defaultProps: newDefaultProps
+          };
+        }
+        return c;
+      });
+      return updated;
+    });
+  }, []);
   const contextValue = useMemo24(() => {
     return {
       compositions,
@@ -3645,7 +3788,8 @@ var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
       currentCompositionMetadata,
       setCurrentCompositionMetadata,
       canvasContent,
-      setCanvasContent
+      setCanvasContent,
+      updateCompositionDefaultProps
     };
   }, [
     compositions,
@@ -3656,7 +3800,7 @@ var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     unregisterFolder,
     currentCompositionMetadata,
     canvasContent,
-    setCanvasContent
+    updateCompositionDefaultProps
   ]);
   return jsx22(CompositionManager.Provider, {
     value: contextValue,
@@ -4509,7 +4653,8 @@ var Internals = {
   CurrentScaleContext,
   PreviewSizeContext,
   calculateScale,
-  editorPropsProviderRef
+  editorPropsProviderRef,
+  PROPS_UPDATED_EXTERNALLY
 };
 // src/interpolate-colors.ts
 var call = function(...args) {

package/dist/esm/version.mjs

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

package/package.json

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