remotion 4.0.0-alpha13 → 4.0.0-alpha16

package/dist/cjs/AssetManager.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { TAsset } from './CompositionManager.js';
-export declare type AssetManagerContext = {
+export type AssetManagerContext = {
     registerAsset: (asset: TAsset) => void;
     unregisterAsset: (id: string) => void;
     assets: TAsset[];

package/dist/cjs/Composition.d.ts

@@ -2,34 +2,34 @@ import type { ComponentType } from 'react';
 import React from 'react';
 import type { AnyZodObject } from 'zod';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
-declare type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
-export declare type CompProps<Props> = {
+type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
+export type CompProps<Props> = {
     lazyComponent: () => Promise<{
         default: LooseComponentType<Props>;
     }>;
 } | {
     component: LooseComponentType<Props>;
 };
-export declare type CalcMetadataReturnType<T> = {
+export type CalcMetadataReturnType<T> = {
     durationInFrames?: number;
     fps?: number;
     width?: number;
     height?: number;
     props?: T;
 };
-export declare type CalculateMetadataFunction<T> = (options: {
+export type CalculateMetadataFunction<T> = (options: {
     defaultProps: T;
     props: T;
     abortSignal: AbortSignal;
 }) => Promise<CalcMetadataReturnType<T>> | CalcMetadataReturnType<T>;
-export declare type StillProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = {
+export type StillProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = {
     width: number;
     height: number;
     id: string;
     calculateMetadata?: CalculateMetadataFunction<InferProps<Schema, Props>>;
     schema?: Schema;
 } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-export declare type CompositionProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = StillProps<Schema, Props> & {
+export type CompositionProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = StillProps<Schema, Props> & {
     fps: number;
     durationInFrames: number;
 };

package/dist/cjs/CompositionManager.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import type { AnyZodObject } from 'zod';
 import type { CalculateMetadataFunction } from './Composition.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
-export declare type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = {
+export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = {
     width: number;
     height: number;
     fps: number;
@@ -16,13 +16,13 @@ export declare type TComposition<Schema extends AnyZodObject, Props extends Reco
     schema: Schema | null;
     calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>> | null;
 } & PropsIfHasProps<Schema, Props>;
-export declare type AnyComposition = TComposition<AnyZodObject, Record<string, unknown> | undefined>;
-export declare type TCompMetadataWithCalcFunction<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps' | 'calculateMetadata'>;
-export declare type TCompMetadata<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
-export declare type AnyCompMetadata = TCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
-export declare type SmallTCompMetadata<T extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<T, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition<T, Props>, 'defaultProps'>>;
-export declare type AnySmallCompMetadata = SmallTCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
-declare type EnhancedTSequenceData = {
+export type AnyComposition = TComposition<AnyZodObject, Record<string, unknown> | undefined>;
+export type TCompMetadataWithCalcFunction<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps' | 'calculateMetadata'>;
+export type TCompMetadata<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
+export type AnyCompMetadata = TCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
+export type SmallTCompMetadata<T extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<T, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition<T, Props>, 'defaultProps'>>;
+export type AnySmallCompMetadata = SmallTCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
+type EnhancedTSequenceData = {
     type: 'sequence';
 } | {
     type: 'audio';
@@ -39,12 +39,12 @@ declare type EnhancedTSequenceData = {
     startMediaFrom: number;
     playbackRate: number;
 };
-export declare type LoopDisplay = {
+export type LoopDisplay = {
     numberOfTimes: number;
     startOffset: number;
     durationInFrames: number;
 };
-export declare type TSequence = {
+export type TSequence = {
     from: number;
     duration: number;
     id: string;
@@ -55,7 +55,7 @@ export declare type TSequence = {
     nonce: number;
     loopDisplay: LoopDisplay | undefined;
 } & EnhancedTSequenceData;
-export declare type TAsset = {
+export type TAsset = {
     type: 'audio' | 'video';
     src: string;
     id: string;

package/dist/cjs/CompositionManagerContext.d.ts

@@ -2,8 +2,8 @@
 import type { AnyZodObject } from 'zod';
 import type { AnyCompMetadata, AnyComposition, TComposition } from './CompositionManager.js';
 import type { TFolder } from './Folder.js';
-export declare type BaseMetadata = Pick<AnyCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
-export declare type CompositionManagerContext = {
+export type BaseMetadata = Pick<AnyCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
+export type CompositionManagerContext = {
     compositions: AnyComposition[];
     registerComposition: <Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined>(comp: TComposition<Schema, Props>) => void;
     unregisterComposition: (name: string) => void;

package/dist/cjs/EditorProps.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-declare type Props = Record<string, Record<string, unknown>>;
-export declare type EditorPropsContextType = {
+type Props = Record<string, Record<string, unknown>>;
+export type EditorPropsContextType = {
     props: Props;
     updateProps: (options: {
         id: string;

package/dist/cjs/Folder.d.ts

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
-export declare type TFolder = {
+export type TFolder = {
     name: string;
     parent: string | null;
 };
-declare type FolderContextType = {
+type FolderContextType = {
     folderName: string | null;
     parentName: string | null;
 };

package/dist/cjs/NativeLayers.d.ts

@@ -1,11 +1,11 @@
 import type { PropsWithChildren } from 'react';
-export declare type ClipRegion = {
+export type ClipRegion = {
     x: number;
     y: number;
     width: number;
     height: number;
 } | 'hide';
-export declare type TNativeLayersContext = {
+export type TNativeLayersContext = {
     clipRegion: ClipRegion | null;
     setClipRegion: React.Dispatch<React.SetStateAction<ClipRegion | null>>;
 };

package/dist/cjs/RemotionRoot.js

@@ -57,7 +57,6 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
         };
     }, [fastRefreshes]);
     (0, react_1.useEffect)(() => {
-        // TODO: This can be moved to renderer?
         if (typeof __webpack_module__ !== 'undefined') {
             if (__webpack_module__.hot) {
                 __webpack_module__.hot.addStatusHandler((status) => {

package/dist/cjs/ResolveCompositionConfig.d.ts

@@ -1,13 +1,13 @@
 import type { PropsWithChildren } from 'react';
 import type { AnyComposition } from './CompositionManager.js';
 import type { VideoConfig } from './video-config.js';
-declare type ResolveCompositionConfigContect = Record<string, VideoConfigState | undefined>;
+type ResolveCompositionConfigContect = Record<string, VideoConfigState | undefined>;
 export declare const ResolveCompositionContext: import("react").Context<ResolveCompositionConfigContect | null>;
 export declare const resolveCompositionsRef: import("react").RefObject<{
     setCurrentRenderModalComposition: (compositionId: string | null) => void;
     reloadCurrentlySelectedComposition: () => void;
 }>;
-declare type VideoConfigState = {
+type VideoConfigState = {
     type: 'loading';
 } | {
     type: 'success';

package/dist/cjs/ResolveCompositionConfig.js

@@ -12,7 +12,7 @@ exports.ResolveCompositionContext = (0, react_1.createContext)(null);
 exports.resolveCompositionsRef = (0, react_1.createRef)();
 const ResolveCompositionConfig = ({ children }) => {
     const [currentRenderModalComposition, setCurrentRenderModalComposition] = (0, react_1.useState)(null);
-    const { compositions, currentComposition } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { compositions, currentComposition, currentCompositionMetadata } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
     const selectedComposition = compositions.find((c) => c.id === currentComposition);
     const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
     const { props: allEditorProps } = (0, react_1.useContext)(EditorProps_js_1.EditorPropsContext);
@@ -31,6 +31,9 @@ const ResolveCompositionConfig = ({ children }) => {
     }, [allEditorProps, renderModalComposition]);
     const doResolution = (0, react_1.useCallback)((composition, editorProps) => {
         const controller = new AbortController();
+        if (currentCompositionMetadata) {
+            return controller;
+        }
         const { signal } = controller;
         const promOrNot = (0, resolve_video_config_js_1.resolveVideoConfig)({ composition, editorProps, signal });
         if (typeof promOrNot === 'object' && 'then' in promOrNot) {
@@ -76,7 +79,7 @@ const ResolveCompositionConfig = ({ children }) => {
             }));
         }
         return controller;
-    }, []);
+    }, [currentCompositionMetadata]);
     (0, react_1.useImperativeHandle)(exports.resolveCompositionsRef, () => {
         return {
             setCurrentRenderModalComposition: (id) => {
@@ -141,7 +144,7 @@ exports.needsResolution = needsResolution;
 const useResolvedVideoConfig = (preferredCompositionId) => {
     const context = (0, react_1.useContext)(exports.ResolveCompositionContext);
     const { props: allEditorProps } = (0, react_1.useContext)(EditorProps_js_1.EditorPropsContext);
-    const { compositions, currentComposition } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { compositions, currentComposition, currentCompositionMetadata } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
     const compositionId = preferredCompositionId !== null && preferredCompositionId !== void 0 ? preferredCompositionId : currentComposition;
     const composition = compositions.find((c) => c.id === compositionId);
     const selectedEditorProps = (0, react_1.useMemo)(() => {
@@ -149,23 +152,33 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         return composition ? (_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {} : {};
     }, [allEditorProps, composition]);
     return (0, react_1.useMemo)(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!composition) {
             return null;
         }
+        if (currentCompositionMetadata) {
+            return {
+                type: 'success',
+                result: {
+                    ...currentCompositionMetadata,
+                    id: composition.id,
+                    defaultProps: (_a = currentCompositionMetadata.defaultProps) !== null && _a !== void 0 ? _a : {},
+                },
+            };
+        }
         if (!(0, exports.needsResolution)(composition)) {
             return {
                 type: 'success',
                 result: {
                     ...composition,
                     defaultProps: {
-                        ...((_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {}),
+                        ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
                         ...(selectedEditorProps !== null && selectedEditorProps !== void 0 ? selectedEditorProps : {}),
                         ...(typeof window === 'undefined' ||
                             (0, get_environment_js_1.getRemotionEnvironment)() === 'player-development' ||
                             (0, get_environment_js_1.getRemotionEnvironment)() === 'player-production'
                             ? {}
-                            : (_b = (0, input_props_js_1.getInputProps)()) !== null && _b !== void 0 ? _b : {}),
+                            : (_c = (0, input_props_js_1.getInputProps)()) !== null && _c !== void 0 ? _c : {}),
                     },
                 },
             };
@@ -174,6 +187,6 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
             return null;
         }
         return context[composition.id];
-    }, [composition, context, selectedEditorProps]);
+    }, [composition, context, currentCompositionMetadata, selectedEditorProps]);
 };
 exports.useResolvedVideoConfig = useResolvedVideoConfig;

package/dist/cjs/Sequence.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { LoopDisplay } from './CompositionManager.js';
-export declare type LayoutAndStyle = {
+export type LayoutAndStyle = {
     layout: 'none';
 } | {
     layout?: 'absolute-fill';
     style?: React.CSSProperties;
     className?: string;
 };
-export declare type SequenceProps = {
+export type SequenceProps = {
     children: React.ReactNode;
     from?: number;
     durationInFrames?: number;

package/dist/cjs/SequenceContext.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const SequenceContext: import("react").Context<SequenceContextType | null>;
-export declare type SequenceContextType = {
+export type SequenceContextType = {
     cumulatedFrom: number;
     relativeFrom: number;
     parentFrom: number;

package/dist/cjs/SequenceManager.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { TSequence } from './CompositionManager.js';
-export declare type SequenceManagerContext = {
+export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
     unregisterSequence: (id: string) => void;
     sequences: TSequence[];

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import type { VolumeProp } from '../volume-prop.js';
-export declare type RemotionMainAudioProps = {
+export type RemotionMainAudioProps = {
     startFrom?: number;
     endAt?: number;
 };
-export declare type RemotionAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce' | 'onResize' | 'onResizeCapture'> & {
+export type RemotionAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce' | 'onResize' | 'onResizeCapture'> & {
     volume?: VolumeProp;
     playbackRate?: number;
     acceptableTimeShiftInSeconds?: number;

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -12,13 +12,13 @@ import type { RemotionAudioProps } from './props.js';
  *
  * The behavior can be disabled by passing `0` as the number of shared audio tracks.
  */
-declare type AudioElem = {
+type AudioElem = {
     id: number;
     props: RemotionAudioProps;
     el: React.RefObject<HTMLAudioElement>;
     audioId: string;
 };
-declare type SharedContext = {
+type SharedContext = {
     registerAudio: (aud: RemotionAudioProps, audioId: string) => AudioElem;
     unregisterAudio: (id: number) => void;
     updateAudio: (options: {

package/dist/cjs/freeze.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type FreezeProps = {
+type FreezeProps = {
     frame: number;
     children: React.ReactNode;
 };

package/dist/cjs/get-environment.d.ts

@@ -1,3 +1,3 @@
-export declare type RemotionEnvironment = 'preview' | 'rendering' | 'player-development' | 'player-production';
+export type RemotionEnvironment = 'preview' | 'rendering' | 'player-development' | 'player-production';
 export declare const getRemotionEnvironment: () => RemotionEnvironment;
 export declare const useRemotionEnvironment: () => RemotionEnvironment;

package/dist/cjs/get-static-files.d.ts

@@ -3,7 +3,7 @@
  * @see [Documentation](https://www.remotion.dev/docs/getstaticfiles)
  */
 export declare const getStaticFiles: () => StaticFile[];
-export declare type StaticFile = {
+export type StaticFile = {
     /**
      * A string that you can pass to the `src` attribute of an `<Audio>`, `<Img>` and `<Video>` element.
      */

package/dist/cjs/index.d.ts

@@ -7,9 +7,10 @@ declare global {
     interface Window {
         remotion_renderReady: boolean;
         remotion_cancelledError: string | undefined;
+        remotion_getCompositionNames: () => string[];
         getStaticCompositions: () => Promise<AnyCompMetadata[]>;
-        calculateComposition: (compId: string) => Promise<VideoConfig>;
-        setBundleMode: (bundleMode: BundleState) => void;
+        remotion_calculateComposition: (compId: string) => Promise<VideoConfig>;
+        remotion_setBundleMode: (bundleMode: BundleState) => void;
         remotion_staticBase: string;
         remotion_staticFiles: StaticFile[];
         remotion_editorName: string | null;
@@ -35,7 +36,7 @@ declare global {
         remotion_imported: string | boolean;
     }
 }
-export declare type BundleState = {
+export type BundleState = {
     type: 'index';
 } | {
     type: 'evaluation';

package/dist/cjs/internals.d.ts

@@ -126,5 +126,6 @@ export declare const Internals: {
     }>>;
     REMOTION_STUDIO_CONTAINER_ELEMENT: string;
     AssetManager: import("react").Context<import("./AssetManager.js").AssetManagerContext>;
+    bundleName: string;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, };

package/dist/cjs/internals.js

@@ -116,4 +116,5 @@ exports.Internals = {
     ResolveCompositionConfig: ResolveCompositionConfig_js_1.ResolveCompositionConfig,
     REMOTION_STUDIO_CONTAINER_ELEMENT: get_preview_dom_element_js_1.REMOTION_STUDIO_CONTAINER_ELEMENT,
     AssetManager: AssetManager_js_1.AssetManager,
+    bundleName: 'bundle.js',
 };

package/dist/cjs/interpolate.d.ts

@@ -1,9 +1,9 @@
-export declare type ExtrapolateType = 'extend' | 'identity' | 'clamp';
+export type ExtrapolateType = 'extend' | 'identity' | 'clamp';
 /**
  * @description This function allows you to map a range of values to another with a conside syntax
  * @see [Documentation](https://www.remotion.dev/docs/interpolate)
  */
-export declare type InterpolateOptions = Partial<{
+export type InterpolateOptions = Partial<{
     easing: (input: number) => number;
     extrapolateLeft: ExtrapolateType;
     extrapolateRight: ExtrapolateType;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { LayoutAndStyle } from '../Sequence.js';
-export declare type LoopProps = {
+export type LoopProps = {
     durationInFrames: number;
     times?: number;
     name?: string;

package/dist/cjs/nonce.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type TNonceContext = {
+export type TNonceContext = {
     getNonce: () => number;
     fastRefreshes: number;
 };

package/dist/cjs/prefetch-state.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type Value = Record<string, string>;
+type Value = Record<string, string>;
 export declare const PreloadContext: React.Context<Value>;
 export declare const setPreloads: (updater: (p: Value) => Value) => void;
 export declare const PrefetchProvider: React.FC<{

package/dist/cjs/prefetch.d.ts

@@ -1,5 +1,5 @@
 export declare const usePreload: (src: string) => string;
-declare type FetchAndPreload = {
+type FetchAndPreload = {
     free: () => void;
     waitUntilDone: () => Promise<string>;
 };

package/dist/cjs/props-if-has-props.d.ts

@@ -1,10 +1,10 @@
 import type { AnyZodObject, z } from 'zod';
-declare type And<A extends boolean, B extends boolean> = A extends true ? B extends true ? true : false : false;
-export declare type PropsIfHasProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = And<AnyZodObject extends Schema ? true : false, {} extends Props ? true : false> extends true ? {
+type And<A extends boolean, B extends boolean> = A extends true ? B extends true ? true : false : false;
+export type PropsIfHasProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = And<AnyZodObject extends Schema ? true : false, {} extends Props ? true : false> extends true ? {
     defaultProps?: {};
 } : {
     defaultProps: InferProps<Schema, Props>;
 };
-export declare type InferProps<Schema extends AnyZodObject, Props> = AnyZodObject extends Schema ? {} extends Props ? unknown : Props : {} extends Props ? z.infer<Schema> : // Props and schema specified
+export type InferProps<Schema extends AnyZodObject, Props> = AnyZodObject extends Schema ? {} extends Props ? unknown : Props : {} extends Props ? z.infer<Schema> : // Props and schema specified
 z.infer<Schema> & Props;
 export {};

package/dist/cjs/random.d.ts

@@ -1,4 +1,4 @@
-export declare type RandomSeed = number | string | null;
+export type RandomSeed = number | string | null;
 /**
  * @description A deterministic pseudo-random number generator. Pass in the same seed and get the same pseudorandom number.
  * @see [Documentation](https://remotion.dev/docs/random)

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

@@ -6,7 +6,7 @@ const get_environment_js_1 = require("./get-environment.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");
 const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const calculatedProm = composition.calculateMetadata
         ? composition.calculateMetadata({
             defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
@@ -44,10 +44,17 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         calculated: calculatedProm,
         composition,
     });
+    if (calculatedProm === null) {
+        return {
+            ...data,
+            id: composition.id,
+            defaultProps: (_d = composition === null || composition === void 0 ? void 0 : composition.defaultProps) !== null && _d !== void 0 ? _d : {},
+        };
+    }
     return {
         ...data,
         id: composition.id,
-        defaultProps: ((_d = calculatedProm === null || calculatedProm === void 0 ? void 0 : calculatedProm.props) !== null && _d !== void 0 ? _d : {}),
+        defaultProps: ((_e = calculatedProm === null || calculatedProm === void 0 ? void 0 : calculatedProm.props) !== null && _e !== void 0 ? _e : {}),
     };
 };
 exports.resolveVideoConfig = resolveVideoConfig;

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

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import type { LayoutAndStyle, SequenceProps } from '../Sequence.js';
-declare type SeriesSequenceProps = PropsWithChildren<{
+type SeriesSequenceProps = PropsWithChildren<{
     durationInFrames: number;
     offset?: number;
 } & Pick<SequenceProps, 'layout' | 'name'> & LayoutAndStyle>;

package/dist/cjs/spring/spring-utils.d.ts

@@ -1,11 +1,11 @@
-declare type AnimationNode = {
+type AnimationNode = {
     lastTimestamp: number;
     toValue: number;
     current: number;
     velocity: number;
     prevPosition?: number;
 };
-export declare type SpringConfig = {
+export type SpringConfig = {
     damping: number;
     mass: number;
     stiffness: number;

package/dist/cjs/static-file.d.ts

@@ -17,8 +17,8 @@ declare const problematicCharacters: {
     '%2C': string;
     '%3B': string;
 };
-declare type HexCode = keyof typeof problematicCharacters;
-export declare type HexInfo = {
+type HexCode = keyof typeof problematicCharacters;
+export type HexInfo = {
     containsHex: false;
 } | {
     containsHex: true;

package/dist/cjs/timeline-position-state.d.ts

@@ -1,9 +1,9 @@
 import type { MutableRefObject } from 'react';
-export declare type PlayableMediaTag = {
+export type PlayableMediaTag = {
     play: () => void;
     id: string;
 };
-export declare type TimelineContextValue = {
+export type TimelineContextValue = {
     frame: number;
     playing: boolean;
     rootId: string;
@@ -12,7 +12,7 @@ export declare type TimelineContextValue = {
     setPlaybackRate: (u: React.SetStateAction<number>) => void;
     audioAndVideoTags: MutableRefObject<PlayableMediaTag[]>;
 };
-export declare type SetTimelineContextValue = {
+export type SetTimelineContextValue = {
     setFrame: (u: React.SetStateAction<number>) => void;
     setPlaying: (u: React.SetStateAction<boolean>) => void;
 };
@@ -20,7 +20,7 @@ export declare const TimelineContext: import("react").Context<TimelineContextVal
 export declare const SetTimelineContext: import("react").Context<SetTimelineContextValue>;
 export declare const useTimelinePosition: () => number;
 export declare const useTimelineSetFrame: () => (u: React.SetStateAction<number>) => void;
-declare type PlayingReturnType = readonly [
+type PlayingReturnType = readonly [
     boolean,
     (u: React.SetStateAction<boolean>) => void,
     MutableRefObject<boolean>

package/dist/cjs/truthy.d.ts

@@ -1,3 +1,3 @@
-declare type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T;
+type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T;
 export declare function truthy<T>(value: T): value is Truthy<T>;
 export {};

package/dist/cjs/use-lazy-component.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, ComponentType, ExoticComponent } from 'react';
 import type { CompProps } from './Composition.js';
-declare type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
+type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
     readonly _result: T;
 };
 export declare const useLazyComponent: <Props>(compProps: CompProps<Props>) => LazyExoticComponent<ComponentType<Props>>;

package/dist/cjs/use-sync-volume-with-media-tag.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import type { VolumeProp } from './volume-prop.js';
-export declare type UseSyncVolumeWithMediaTagOptions = {
+export type UseSyncVolumeWithMediaTagOptions = {
     volumePropFrame: number;
     actualVolume: number;
     volume?: VolumeProp;

package/dist/cjs/use-video.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, LazyExoticComponent } from 'react';
 import type { VideoConfig } from './video-config.js';
-declare type ReturnType = (VideoConfig & {
+type ReturnType = (VideoConfig & {
     component: LazyExoticComponent<ComponentType<Record<string, unknown> | undefined>>;
 }) | null;
 export declare const useVideo: () => ReturnType;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.0-alpha13";
+export declare const VERSION = "4.0.0-alpha16";

package/dist/cjs/version.js

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

package/dist/cjs/video/duration-state.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-declare type DurationState = Record<string, number>;
-declare type DurationAction = {
+type DurationState = Record<string, number>;
+type DurationAction = {
     type: 'got-duration';
     src: string;
     durationInSeconds: number;
 };
 export declare const durationReducer: (state: DurationState, action: DurationAction) => DurationState;
-declare type TDurationsContext = {
+type TDurationsContext = {
     durations: DurationState;
     setDurations: React.Dispatch<DurationAction>;
 };

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

@@ -1,22 +1,22 @@
 import type React from 'react';
 import type { VolumeProp } from '../volume-prop.js';
-export declare type RemotionMainVideoProps = {
+export type RemotionMainVideoProps = {
     startFrom?: number;
     endAt?: number;
 };
-export declare type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce'> & {
+export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce'> & {
     volume?: VolumeProp;
     playbackRate?: number;
     acceptableTimeShiftInSeconds?: number;
     allowAmplificationDuringRender?: boolean;
 };
-declare type DeprecatedOffthreadVideoProps = {
+type DeprecatedOffthreadVideoProps = {
     /**
      * @deprecated Use the `transparent` prop instead
      */
     imageFormat?: never;
 };
-export declare type OffthreadVideoProps = {
+export type OffthreadVideoProps = {
     src: string;
     className?: string;
     id?: string;

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

@@ -1,4 +1,4 @@
-export declare type VideoConfig = {
+export type VideoConfig = {
     width: number;
     height: number;
     fps: number;

package/dist/cjs/volume-position-state.d.ts

@@ -1,17 +1,17 @@
 /// <reference types="react" />
-export declare type MediaVolumeContextValue = {
+export type MediaVolumeContextValue = {
     mediaMuted: boolean;
     mediaVolume: number;
 };
-export declare type SetMediaVolumeContextValue = {
+export type SetMediaVolumeContextValue = {
     setMediaMuted: (u: React.SetStateAction<boolean>) => void;
     setMediaVolume: (u: number) => void;
 };
 export declare const MediaVolumeContext: import("react").Context<MediaVolumeContextValue>;
 export declare const SetMediaVolumeContext: import("react").Context<SetMediaVolumeContextValue>;
-declare type MediaVolumeReturnType = readonly [number, (u: number) => void];
+type MediaVolumeReturnType = readonly [number, (u: number) => void];
 export declare const useMediaVolumeState: () => MediaVolumeReturnType;
-declare type MediaMutedReturnType = readonly [
+type MediaMutedReturnType = readonly [
     boolean,
     (u: React.SetStateAction<boolean>) => void
 ];

package/dist/cjs/volume-prop.d.ts

@@ -1,4 +1,4 @@
-export declare type VolumeProp = number | ((frame: number) => number);
+export type VolumeProp = number | ((frame: number) => number);
 export declare const evaluateVolume: ({ frame, volume, mediaVolume, allowAmplificationDuringRender, }: {
     frame: number;
     volume: VolumeProp | undefined;

package/dist/esm/index.mjs

@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.0-alpha13';
+const VERSION = '4.0.0-alpha16';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -378,7 +378,7 @@ const validateDurationInFrames = ({ allowFloats, component, durationInFrames, })
 };
 
 const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const calculatedProm = composition.calculateMetadata
         ? composition.calculateMetadata({
             defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
@@ -416,10 +416,17 @@ const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined,
         calculated: calculatedProm,
         composition,
     });
+    if (calculatedProm === null) {
+        return {
+            ...data,
+            id: composition.id,
+            defaultProps: (_d = composition === null || composition === void 0 ? void 0 : composition.defaultProps) !== null && _d !== void 0 ? _d : {},
+        };
+    }
     return {
         ...data,
         id: composition.id,
-        defaultProps: ((_d = calculatedProm === null || calculatedProm === void 0 ? void 0 : calculatedProm.props) !== null && _d !== void 0 ? _d : {}),
+        defaultProps: ((_e = calculatedProm === null || calculatedProm === void 0 ? void 0 : calculatedProm.props) !== null && _e !== void 0 ? _e : {}),
     };
 };
 const validateCalculated = ({ composition, calculated, }) => {
@@ -455,7 +462,7 @@ const ResolveCompositionContext = createContext(null);
 const resolveCompositionsRef = createRef();
 const ResolveCompositionConfig = ({ children }) => {
     const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState(null);
-    const { compositions, currentComposition } = useContext(CompositionManager);
+    const { compositions, currentComposition, currentCompositionMetadata } = useContext(CompositionManager);
     const selectedComposition = compositions.find((c) => c.id === currentComposition);
     const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
     const { props: allEditorProps } = useContext(EditorPropsContext);
@@ -474,6 +481,9 @@ const ResolveCompositionConfig = ({ children }) => {
     }, [allEditorProps, renderModalComposition]);
     const doResolution = useCallback((composition, editorProps) => {
         const controller = new AbortController();
+        if (currentCompositionMetadata) {
+            return controller;
+        }
         const { signal } = controller;
         const promOrNot = resolveVideoConfig({ composition, editorProps, signal });
         if (typeof promOrNot === 'object' && 'then' in promOrNot) {
@@ -519,7 +529,7 @@ const ResolveCompositionConfig = ({ children }) => {
             }));
         }
         return controller;
-    }, []);
+    }, [currentCompositionMetadata]);
     useImperativeHandle(resolveCompositionsRef, () => {
         return {
             setCurrentRenderModalComposition: (id) => {
@@ -582,7 +592,7 @@ const needsResolution = (composition) => {
 const useResolvedVideoConfig = (preferredCompositionId) => {
     const context = useContext(ResolveCompositionContext);
     const { props: allEditorProps } = useContext(EditorPropsContext);
-    const { compositions, currentComposition } = useContext(CompositionManager);
+    const { compositions, currentComposition, currentCompositionMetadata } = useContext(CompositionManager);
     const compositionId = preferredCompositionId !== null && preferredCompositionId !== void 0 ? preferredCompositionId : currentComposition;
     const composition = compositions.find((c) => c.id === compositionId);
     const selectedEditorProps = useMemo(() => {
@@ -590,23 +600,33 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
         return composition ? (_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {} : {};
     }, [allEditorProps, composition]);
     return useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!composition) {
             return null;
         }
+        if (currentCompositionMetadata) {
+            return {
+                type: 'success',
+                result: {
+                    ...currentCompositionMetadata,
+                    id: composition.id,
+                    defaultProps: (_a = currentCompositionMetadata.defaultProps) !== null && _a !== void 0 ? _a : {},
+                },
+            };
+        }
         if (!needsResolution(composition)) {
             return {
                 type: 'success',
                 result: {
                     ...composition,
                     defaultProps: {
-                        ...((_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {}),
+                        ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
                         ...(selectedEditorProps !== null && selectedEditorProps !== void 0 ? selectedEditorProps : {}),
                         ...(typeof window === 'undefined' ||
                             getRemotionEnvironment() === 'player-development' ||
                             getRemotionEnvironment() === 'player-production'
                             ? {}
-                            : (_b = getInputProps()) !== null && _b !== void 0 ? _b : {}),
+                            : (_c = getInputProps()) !== null && _c !== void 0 ? _c : {}),
                     },
                 },
             };
@@ -615,7 +635,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
             return null;
         }
         return context[composition.id];
-    }, [composition, context, selectedEditorProps]);
+    }, [composition, context, currentCompositionMetadata, selectedEditorProps]);
 };
 
 const useVideo = () => {
@@ -3478,7 +3498,6 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
         };
     }, [fastRefreshes]);
     useEffect(() => {
-        // TODO: This can be moved to renderer?
         if (typeof __webpack_module__ !== 'undefined') {
             if (__webpack_module__.hot) {
                 __webpack_module__.hot.addStatusHandler((status) => {
@@ -3641,6 +3660,7 @@ const Internals = {
     ResolveCompositionConfig,
     REMOTION_STUDIO_CONTAINER_ELEMENT,
     AssetManager,
+    bundleName: 'bundle.js',
 };
 
 const flattenChildren = (children) => {

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.0-alpha13';
+const VERSION = '4.0.0-alpha16';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.0-alpha13",
+  "version": "4.0.0-alpha16",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -25,7 +25,7 @@
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "@vitejs/plugin-react": "^2.0.0",
-    "eslint": "8.25.0",
+    "eslint": "8.42.0",
     "eslint-plugin-require-extensions": "^0.1.2",
     "jsdom": "21.1.0",
     "prettier": "^2.7.1",
@@ -34,7 +34,7 @@
     "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.70.1",
-    "typescript": "^4.7.0",
+    "typescript": "4.9.5",
     "vitest": "0.31.1",
     "webpack": "5.83.1",
     "zod": "3.21.4"