remotion 4.0.0-alpha13 → 4.0.0-alpha14

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.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/SequenceAndAssetManager.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { TSequence } from './CompositionManager.js';
+export declare type SequenceManagerContext = {
+    registerSequence: (seq: TSequence) => void;
+    unregisterSequence: (id: string) => void;
+    sequences: TSequence[];
+};
+export declare const SequenceManager: React.Context<SequenceManagerContext>;
+export declare const SequenceAndAssetManagerProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/cjs/SequenceAndAssetManager.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceAndAssetManagerProvider = exports.SequenceManager = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.SequenceManager = react_1.default.createContext({
+    registerSequence: () => {
+        throw new Error('SequenceManagerContext not initialized');
+    },
+    unregisterSequence: () => {
+        throw new Error('SequenceManagerContext not initialized');
+    },
+    sequences: [],
+});
+const SequenceAndAssetManagerProvider = ({ children }) => {
+    const [sequences, setSequences] = (0, react_1.useState)([]);
+    const registerSequence = (0, react_1.useCallback)((seq) => {
+        setSequences((seqs) => {
+            return [...seqs, seq];
+        });
+    }, []);
+    const unregisterSequence = (0, react_1.useCallback)((seq) => {
+        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
+    }, []);
+    const context = (0, react_1.useMemo)(() => {
+        return {
+            registerSequence,
+            sequences,
+            unregisterSequence,
+        };
+    }, [registerSequence, sequences, unregisterSequence]);
+    return ((0, jsx_runtime_1.jsx)(exports.SequenceManager.Provider, { value: context, children: children }));
+};
+exports.SequenceAndAssetManagerProvider = SequenceAndAssetManagerProvider;

package/dist/cjs/config.d.ts

@@ -0,0 +1,294 @@
+/**
+ * The configuration has moved to @remotion/cli.
+ * For the moment the type definitions are going to stay here
+ */
+import type { Configuration } from 'webpack';
+declare type Concurrency = number | null;
+declare type BrowserExecutable = string | null;
+declare type FrameRange = number | [number, number];
+declare type FfmpegExecutable = string | null;
+declare type Loop = number | null;
+declare type CodecOrUndefined = 'h264' | 'h265' | 'vp8' | 'vp9' | 'mp3' | 'aac' | 'wav' | 'prores' | 'h264-mkv' | 'gif' | undefined;
+declare type Crf = number | undefined;
+export declare type WebpackConfiguration = Configuration;
+export declare type WebpackOverrideFn = (currentConfiguration: WebpackConfiguration) => WebpackConfiguration;
+declare type FlatConfig = RemotionConfigObject['Bundling'] & RemotionConfigObject['Log'] & RemotionConfigObject['Preview'] & RemotionConfigObject['Puppeteer'] & RemotionConfigObject['Output'] & RemotionConfigObject['Rendering'] & {
+    /**
+     * Set the audio codec to use for the output video.
+     * See the Encoding guide in the docs for defaults and available options.
+     */
+    setAudioCodec: (codec: 'pcm-16' | 'aac' | 'mp3' | 'opus') => void;
+};
+declare global {
+    interface RemotionBundlingOptions {
+        /**
+         * Specify the entry point so you don't have to specify it in the
+         * CLI command
+         */
+        readonly setEntryPoint: (src: string) => void;
+        /**
+         * Whether Webpack bundles should be cached to make
+         * subsequent renders faster. Default: true
+         */
+        readonly setCachingEnabled: (flag: boolean) => void;
+        /**
+         * Define on which port Remotion should start it's HTTP servers during preview and rendering.
+         * By default, Remotion will try to find a free port.
+         * If you specify a port, but it's not available, Remotion will throw an error.
+         */
+        readonly setPort: (port: number | undefined) => void;
+        /**
+         * Define the location of the public/ directory.
+         * By default it is a folder named "public" inside the current working directory.
+         * You can set an absolute path or a relative path that will be resolved from the closest package.json location.
+         */
+        readonly setPublicDir: (publicDir: string | null) => void;
+        readonly overrideWebpackConfig: (f: WebpackOverrideFn) => void;
+    }
+    interface RemotionConfigObject {
+        /**
+         * @deprecated New flat config format: You can now replace `Config.Preview.` with `Config.`
+         */
+        readonly Preview: {
+            /**
+             * Change the maximum amount of tracks that are shown in the timeline.
+             * @param maxTracks The maximum amount of timeline tracks that you would like to show.
+             * @default 15
+             */
+            readonly setMaxTimelineTracks: (maxTracks: number) => void;
+            /**
+             * Enable Keyboard shortcuts in the Remotion Preview.
+             * @param enabled Boolean whether to enable the keyboard shortcuts
+             * @default true
+             */
+            readonly setKeyboardShortcutsEnabled: (enableShortcuts: boolean) => void;
+            /**
+             * Set number of shared audio tags. https://www.remotion.dev/docs/player/autoplay#use-the-numberofsharedaudiotags-property
+             * @param numberOfAudioTags
+             * @default 0
+             */
+            readonly setNumberOfSharedAudioTags: (numberOfAudioTags: number) => void;
+            /**
+             * Enable Webpack polling instead of file system listeners for hot reloading in the preview.
+             * This is useful if you are using a remote directory or a virtual machine.
+             * @param interval
+             * @default null
+             */
+            readonly setWebpackPollingInMilliseconds: (interval: number | null) => void;
+            /**
+             * Whether Remotion should open a browser when starting the Preview.
+             * @param should
+             * @default true
+             */
+            readonly setShouldOpenBrowser: (should: boolean) => void;
+        };
+        /**
+         * @deprecated New flat config format: You can now replace `Config.Bundling.` with `Config.`
+         */
+        readonly Bundling: RemotionBundlingOptions;
+        /**
+         * @deprecated New flat config format: You can now replace `Config.Log.` with `Config.`
+         */
+        readonly Log: {
+            /**
+             * Set the log level.
+             * Acceptable values: 'error' | 'warning' | 'info' | 'verbose'
+             * Default value: 'info'
+             *
+             * Set this to 'verbose' to get browser logs and other IO.
+             */
+            readonly setLevel: (newLogLevel: 'verbose' | 'info' | 'warn' | 'error') => void;
+        };
+        /**
+         * @deprecated New flat config format: You can now replace `Config.Puppeteer.` with `Config.`
+         */
+        readonly Puppeteer: {
+            /**
+             * Specify executable path for the browser to use.
+             * Default: null, which will make Remotion find or download a version of said browser.
+             */
+            readonly setBrowserExecutable: (newBrowserExecutablePath: BrowserExecutable) => void;
+            /**
+             * Set how many milliseconds a frame may take to render before it times out.
+             * Default: `30000`
+             */
+            readonly setDelayRenderTimeoutInMilliseconds: (newPuppeteerTimeout: number) => void;
+            /**
+             * @deprecated Renamed to `setDelayRenderTimeoutInMilliseconds`.
+             * Set how many milliseconds a frame may take to render before it times out.
+             * Default: `30000`
+             */
+            readonly setTimeoutInMilliseconds: (newPuppeteerTimeout: number) => void;
+            /**
+             * Setting deciding whether to disable CORS and other Chrome security features.
+             * Default: false
+             */
+            readonly setChromiumDisableWebSecurity: (should: boolean) => void;
+            /**
+             * Setting whether to ignore any invalid SSL certificates, such as self-signed ones.
+             * Default: false
+             */
+            readonly setChromiumIgnoreCertificateErrors: (should: boolean) => void;
+            /**
+             * If false, will open an actual browser during rendering to observe progress.
+             * Default: true
+             */
+            readonly setChromiumHeadlessMode: (should: boolean) => void;
+            /**
+             * Set the OpenGL rendering backend for Chrome. Possible values: 'egl', 'angle', 'swiftshader' and 'swangle'.
+             * Default: 'swangle' in Lambda, null elsewhere.
+             */
+            readonly setChromiumOpenGlRenderer: (renderer: 'swangle' | 'angle' | 'egl' | 'swiftshader') => void;
+            /**
+             * Set the user agent for Chrome. Only works during rendering.
+             * Default:
+             */
+            readonly setChromiumUserAgent: (userAgent: string | null) => void;
+        };
+        /**
+         * @deprecated New flat config format: You can now replace `Config.Rendering.` with `Config.`
+         */
+        readonly Rendering: {
+            /**
+             * Set a custom location for a .env file.
+             * Default: `.env`
+             */
+            readonly setDotEnvLocation: (file: string) => void;
+            /**
+             * Sets how many Puppeteer instances will work on rendering your video in parallel.
+             * Default: `null`, meaning half of the threads available on your CPU.
+             */
+            readonly setConcurrency: (newConcurrency: Concurrency) => void;
+            /**
+             * Set the JPEG quality for the frames.
+             * Must be between 0 and 100.
+             * Must be between 0 and 100.
+             * Default: 80
+             */
+            readonly setQuality: (q: number | undefined) => void;
+            /** Decide in which image format to render. Can be either 'jpeg' or 'png'.
+             * PNG is slower, but supports transparency.
+             */
+            readonly setImageFormat: (format: 'png' | 'jpeg' | 'none') => void;
+            /**
+             * Render only a subset of a video.
+             * Pass in a tuple [20, 30] to only render frames 20-30 into a video.
+             * Pass in a single number `20` to only render a single frame as an image.
+             * The frame count starts at 0.
+             */
+            readonly setFrameRange: (newFrameRange: FrameRange | null) => void;
+            /**
+             * Specify local ffmpeg executable.
+             * Default: null, which will use ffmpeg available in PATH.
+             */
+            readonly setFfmpegExecutable: (ffmpegPath: FfmpegExecutable) => void;
+            /**
+             * Specify local ffprobe executable.
+             * Default: null, which will use ffprobe available in PATH.
+             */
+            readonly setFfprobeExecutable: (ffprobePath: FfmpegExecutable) => void;
+            /**
+             * Scales the output dimensions by a factor.
+             * Default: 1.
+             */
+            readonly setScale: (newScale: number) => void;
+            /**
+             * Specify which frames should be picked for rendering a GIF
+             * Default: 1, which means every frame
+             * https://remotion.dev/docs/render-as-gif
+             */
+            readonly setEveryNthFrame: (frame: number) => void;
+            /**
+             * Specify the number of Loop a GIF should have.
+             * Default: null (means GIF will loop infinite)
+             */
+            readonly setNumberOfGifLoops: (newLoop: Loop) => void;
+            /**
+             * Disable audio output.
+             * Default: false
+             */
+            readonly setMuted: (muted: boolean) => void;
+            /**
+             * Don't render an audio track if it would be silent.
+             * Default: true
+             */
+            readonly setEnforceAudioTrack: (enforceAudioTrack: boolean) => void;
+        };
+        /**
+         * @deprecated New flat config format: You can now replace `Config.Output.` with `Config.`
+         */
+        readonly Output: {
+            /**
+             * Set the output file location string. Default: `out/{composition}.{codec}`
+             */
+            readonly setOutputLocation: (newOutputLocation: string) => void;
+            /**
+             * If the video file already exists, should Remotion overwrite
+             * the output? Default: true
+             */
+            readonly setOverwriteOutput: (newOverwrite: boolean) => void;
+            /**
+             * Sets the pixel format in FFMPEG.
+             * See https://trac.ffmpeg.org/wiki/Chroma%20Subsampling for an explanation.
+             * You can override this using the `--pixel-format` Cli flag.
+             */
+            readonly setPixelFormat: (format: 'yuv420p' | 'yuva420p' | 'yuv422p' | 'yuv444p' | 'yuv420p10le' | 'yuv422p10le' | 'yuv444p10le' | 'yuva444p10le') => void;
+            /**
+             * @deprecated Use setCodec() and setImageSequence() instead.
+             * Specify what kind of output you, either `mp4` or `png-sequence`.
+             */
+            readonly setOutputFormat: (newLegacyFormat: 'mp4' | 'png-sequence') => void;
+            /**
+             * Specify the codec for stitching the frames into a video.
+             * Can be `h264` (default), `h265`, `vp8` or `vp9`
+             */
+            readonly setCodec: (newCodec: CodecOrUndefined) => void;
+            /**
+             * Set the Constant Rate Factor to pass to FFMPEG.
+             * Lower values mean better quality, but be aware that the ranges of
+             * possible values greatly differs between codecs.
+             */
+            readonly setCrf: (newCrf: Crf) => void;
+            /**
+             * Set to true if don't want a video but an image sequence as the output.
+             */
+            readonly setImageSequence: (newImageSequence: boolean) => void;
+            /**
+             * Overrides the height of a composition
+             */
+            readonly overrideHeight: (newHeight: number) => void;
+            /**
+             * Overrides the width of a composition
+             */
+            readonly overrideWidth: (newWidth: number) => void;
+            /**
+             * Set the ProRes profile.
+             * This method is only valid if the codec has been set to 'prores'.
+             * Possible values: 4444-xq, 4444, hq, standard, light, proxy. Default: 'hq'
+             * See https://avpres.net/FFmpeg/im_ProRes.html for meaning of possible values.
+             */
+            readonly setProResProfile: (profile: '4444-xq' | '4444' | 'hq' | 'standard' | 'light' | 'proxy' | undefined) => void;
+            /**
+             * Override the arguments that Remotion passes to FFMPEG.
+             * Consult https://remotion.dev/docs/renderer/render-media#ffmpegoverride before using this feature.
+             */
+            readonly overrideFfmpegCommand: (command: (info: {
+                type: 'pre-stitcher' | 'stitcher';
+                args: string[];
+            }) => string[]) => void;
+            /**
+             * Set a target audio bitrate to be passed to FFMPEG.
+             */
+            readonly setAudioBitrate: (bitrate: string | null) => void;
+            /**
+             * Set a target video bitrate to be passed to FFMPEG.
+             * Mutually exclusive with setCrf().
+             */
+            readonly setVideoBitrate: (bitrate: string | null) => void;
+        };
+    }
+}
+export declare type ConfigType = RemotionConfigObject & FlatConfig;
+export type { Concurrency };
+export declare const Config: ConfigType;
+export declare const enableLegacyRemotionConfig: () => void;

package/dist/cjs/config.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.enableLegacyRemotionConfig = exports.Config = void 0;
+const conf = {};
+let enabled = false;
+exports.Config = new Proxy(conf, {
+    get(target, prop, receiver) {
+        if (!enabled) {
+            if (typeof document !== 'undefined') {
+                // We are in the browser
+                return {};
+            }
+            throw new Error('To use the Remotion config file, you need to have @remotion/cli installed.\n- Make sure that all versions of Remotion are the same.\n- Make sure that @remotion/cli is installed.\n- Make sure Config is imported from "@remotion/cli", not "remotion".');
+        }
+        return Reflect.get(target, prop, receiver);
+    },
+});
+const enableLegacyRemotionConfig = () => {
+    enabled = true;
+};
+exports.enableLegacyRemotionConfig = enableLegacyRemotionConfig;

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/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/validation/validate-offthreadvideo-image-format.d.ts

@@ -0,0 +1 @@
+export declare const validateOffthreadVideoImageFormat: (input: unknown) => void;

package/dist/cjs/validation/validate-offthreadvideo-image-format.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateOffthreadVideoImageFormat = void 0;
+const validateOffthreadVideoImageFormat = (input) => {
+    if (typeof input === 'undefined') {
+        return;
+    }
+    if (typeof input !== 'string') {
+        throw new TypeError(`<OffthreadVideo imageFormat=""> must be a string, but got ${JSON.stringify(input)} instead.`);
+    }
+    if (input !== 'png' && input !== 'jpeg') {
+        throw new TypeError(`<OffthreadVideo imageFormat=""> must be either "png" or "jpeg", but got ${input}`);
+    }
+};
+exports.validateOffthreadVideoImageFormat = validateOffthreadVideoImageFormat;

package/dist/cjs/version.d.ts

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

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-alpha14';

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-alpha14';
 
 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-alpha14';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.0-alpha13",
+  "version": "4.0.0-alpha14",
   "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"