remotion 4.0.0-alpha.130 → 4.0.0-alpha.185

package/dist/cjs/Img.d.ts

@@ -3,4 +3,6 @@ import React from 'react';
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
  * @see [Documentation](https://www.remotion.dev/docs/img)
  */
-export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & React.RefAttributes<HTMLImageElement>>;
+export declare const Img: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & {
+    maxRetries?: number | undefined;
+}, "key" | "maxRetries" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & React.RefAttributes<HTMLImageElement>>;

package/dist/cjs/Img.js

@@ -4,49 +4,86 @@ exports.Img = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const delay_render_js_1 = require("./delay-render.js");
-const get_environment_js_1 = require("./get-environment.js");
 const prefetch_js_1 = require("./prefetch.js");
-const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
+function exponentialBackoff(errorCount) {
+    return 1000 * 2 ** (errorCount - 1);
+}
+const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
     const imageRef = (0, react_1.useRef)(null);
-    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
+    const errors = (0, react_1.useRef)({});
     (0, react_1.useImperativeHandle)(ref, () => {
         return imageRef.current;
     }, []);
     const actualSrc = (0, prefetch_js_1.usePreload)(src);
-    const didGetError = (0, react_1.useCallback)((e) => {
-        var _a;
-        if (onError) {
-            onError(e);
-        }
-        else {
-            console.error('Error loading image with src:', (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src, e, 'Handle the event using the onError() prop to make this message disappear.');
+    const retryIn = (0, react_1.useCallback)((timeout) => {
+        if (!imageRef.current) {
+            return;
         }
-    }, [onError]);
-    // If image source switches, make new handle
-    if (environment === 'rendering') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        (0, react_1.useLayoutEffect)(() => {
-            if (process.env.NODE_ENV === 'test') {
+        const currentSrc = imageRef.current.src;
+        setTimeout(() => {
+            var _a;
+            if (!imageRef.current) {
+                // Component has been unmounted, do not retry
                 return;
             }
-            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + src);
-            const { current } = imageRef;
-            const didLoad = () => {
-                (0, delay_render_js_1.continueRender)(newHandle);
-            };
-            if (current === null || current === void 0 ? void 0 : current.complete) {
-                (0, delay_render_js_1.continueRender)(newHandle);
+            const newSrc = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src;
+            if (newSrc !== currentSrc) {
+                // src has changed, do not retry
+                return;
             }
-            else {
-                current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
+            imageRef.current.removeAttribute('src');
+            imageRef.current.setAttribute('src', newSrc);
+        }, timeout);
+    }, []);
+    const didGetError = (0, react_1.useCallback)((e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (!errors.current) {
+            return;
+        }
+        errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src] =
+            ((_c = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _c !== void 0 ? _c : 0) + 1;
+        if (onError &&
+            ((_e = errors.current[(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src]) !== null && _e !== void 0 ? _e : 0) > maxRetries) {
+            onError(e);
+            return;
+        }
+        if (((_g = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _g !== void 0 ? _g : 0) <= maxRetries) {
+            const backoff = exponentialBackoff((_j = errors.current[(_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src]) !== null && _j !== void 0 ? _j : 0);
+            console.warn(`Could not load image with source ${(_k = imageRef.current) === null || _k === void 0 ? void 0 : _k.src}, retrying again in ${backoff}ms`);
+            retryIn(backoff);
+            return;
+        }
+        console.error('Error loading image with src:', (_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src, e, 'Handle the event using the onError() prop to make this message disappear.');
+    }, [maxRetries, onError, retryIn]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (process.env.NODE_ENV === 'test') {
+            return;
+        }
+        const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + src);
+        const { current } = imageRef;
+        const onComplete = () => {
+            var _a, _b, _c, _d;
+            if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
+                delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
+                console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
             }
-            // If tag gets unmounted, clear pending handles because image is not going to load
-            return () => {
-                current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
-                (0, delay_render_js_1.continueRender)(newHandle);
-            };
-        }, [src]);
-    }
+            (0, delay_render_js_1.continueRender)(newHandle);
+        };
+        const didLoad = () => {
+            onComplete();
+        };
+        if (current === null || current === void 0 ? void 0 : current.complete) {
+            onComplete();
+        }
+        else {
+            current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
+        }
+        // If tag gets unmounted, clear pending handles because image is not going to load
+        return () => {
+            current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
+            (0, delay_render_js_1.continueRender)(newHandle);
+        };
+    }, [src]);
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };
 /**

package/dist/cjs/config.d.ts

@@ -0,0 +1,289 @@
+/**
+ * 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;
+        };
+        /**
+         * @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

@@ -79,6 +79,7 @@ export * from './use-video-config.js';
 export * from './version.js';
 export * from './video-config.js';
 export * from './video/index.js';
+export { zColor } from './z-color.js';
 export declare const Experimental: {
     /**
      * @description This is a special component that will cause Remotion to only partially capture the frame of the video.
@@ -97,3 +98,4 @@ export declare const Experimental: {
     Null: import("react").FC<{}>;
     useIsPlayer: () => boolean;
 };
+export declare const Config: {};

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Experimental = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolate = exports.interpolateColors = exports.getStaticFiles = exports.delayRender = exports.continueRender = exports.getInputProps = exports.cancelRender = exports.z = void 0;
+exports.Config = exports.Experimental = exports.zColor = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolate = exports.interpolateColors = exports.getStaticFiles = exports.delayRender = exports.continueRender = exports.getInputProps = exports.cancelRender = exports.z = void 0;
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
 const is_player_js_1 = require("./is-player.js");
@@ -67,6 +67,8 @@ __exportStar(require("./use-video-config.js"), exports);
 __exportStar(require("./version.js"), exports);
 __exportStar(require("./video-config.js"), exports);
 __exportStar(require("./video/index.js"), exports);
+var z_color_js_1 = require("./z-color.js");
+Object.defineProperty(exports, "zColor", { enumerable: true, get: function () { return z_color_js_1.zColor; } });
 exports.Experimental = {
     /**
      * @description This is a special component that will cause Remotion to only partially capture the frame of the video.
@@ -80,3 +82,27 @@ exports.Experimental = {
     Null: Null_js_1.Null,
     useIsPlayer: is_player_js_1.useIsPlayer,
 };
+const proxyObj = {};
+exports.Config = new Proxy(proxyObj, {
+    get(_, prop) {
+        if (prop === 'Bundling' ||
+            prop === 'Rendering' ||
+            prop === 'Log' ||
+            prop === 'Puppeteer' ||
+            prop === 'Output') {
+            return exports.Config;
+        }
+        return () => {
+            console.warn('⚠️  The CLI configuration has been extracted from Remotion Core.');
+            console.warn('Update the import from the config file:');
+            console.warn();
+            console.warn('- Delete:');
+            console.warn('import {Config} from "remotion";');
+            console.warn('+ Replace:');
+            console.warn('import {Config} from "@remotion/cli/config";');
+            console.warn();
+            console.warn('For more information, see https://v4.remotion.dev/docs/4-0-migration.');
+            process.exit(1);
+        };
+    },
+});

package/dist/cjs/internals.d.ts

@@ -107,5 +107,13 @@ export declare const Internals: {
         children: import("react").ReactNode;
     }>;
     EditorPropsContext: import("react").Context<import("./EditorProps.js").EditorPropsContextType>;
+    usePreload: (src: string) => string;
+    REMOTION_COLOR_BRAND: string;
+    parseColor: (value: string) => {
+        a: number;
+        r: number;
+        g: number;
+        b: number;
+    };
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, };

package/dist/cjs/internals.js

@@ -35,6 +35,7 @@ const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
 const is_player_js_1 = require("./is-player.js");
 const portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
+const prefetch_js_1 = require("./prefetch.js");
 const register_root_js_1 = require("./register-root.js");
 const RemotionRoot_js_1 = require("./RemotionRoot.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
@@ -53,6 +54,7 @@ const validate_offthreadvideo_image_format_js_1 = require("./validation/validate
 const duration_state_js_1 = require("./video/duration-state.js");
 const volume_position_state_js_1 = require("./volume-position-state.js");
 const wrap_remotion_context_js_1 = require("./wrap-remotion-context.js");
+const z_color_js_1 = require("./z-color.js");
 const Timeline = TimelinePosition;
 // Mark them as Internals so use don't assume this is public
 // API and are less likely to use it
@@ -99,4 +101,7 @@ exports.Internals = {
     validateFrame: validate_frame_js_1.validateFrame,
     EditorPropsProvider: EditorProps_js_1.EditorPropsProvider,
     EditorPropsContext: EditorProps_js_1.EditorPropsContext,
+    usePreload: prefetch_js_1.usePreload,
+    REMOTION_COLOR_BRAND: z_color_js_1.REMOTION_COLOR_BRAND,
+    parseColor: z_color_js_1.parseColor,
 };

package/dist/cjs/interpolate-colors.d.ts

@@ -2,6 +2,7 @@
  * Copied from:
  * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
  */
+export declare function processColor(color: string): number;
 /**
  * @description This function allows you to map a range of values to colors using a concise syntax.
  * @see [Documentation](https://www.remotion.dev/docs/interpolate-colors)

package/dist/cjs/interpolate-colors.js

@@ -4,7 +4,7 @@
  * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.interpolateColors = void 0;
+exports.interpolateColors = exports.processColor = void 0;
 /* eslint no-bitwise: 0 */
 const interpolate_js_1 = require("./interpolate.js");
 // var INTEGER = '[-+]?\\d+';
@@ -356,15 +356,11 @@ const blue = (c) => {
 const rgbaColor = (r, g, b, alpha) => {
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
-function processColorInitially(color) {
-    let normalizedColor = normalizeColor(color);
-    normalizedColor = ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
-    return normalizedColor;
-}
 function processColor(color) {
-    const normalizedColor = processColorInitially(color);
-    return normalizedColor;
+    const normalizedColor = normalizeColor(color);
+    return ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
 }
+exports.processColor = processColor;
 const interpolateColorsRGB = (value, inputRange, colors) => {
     const [r, g, b, a] = [red, green, blue, opacity].map((f) => {
         const unrounded = (0, interpolate_js_1.interpolate)(value, inputRange, colors.map((c) => f(c)), {

package/dist/cjs/static-file.js

@@ -24,6 +24,20 @@ const staticFile = (path) => {
     if (path.startsWith('..') || path.startsWith('./')) {
         throw new TypeError(`staticFile() does not support relative paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
     }
+    if (path.startsWith('/Users') ||
+        path.startsWith('/home') ||
+        path.startsWith('/tmp') ||
+        path.startsWith('/etc') ||
+        path.startsWith('/opt') ||
+        path.startsWith('/var') ||
+        path.startsWith('C:') ||
+        path.startsWith('D:') ||
+        path.startsWith('E:')) {
+        throw new TypeError(`staticFile() does not support absolute paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
+    if (path.startsWith('public/')) {
+        throw new TypeError(`Do not include the public/ prefix when using staticFile() - got "${path}". See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
     const preparsed = inner(path);
     if (!preparsed.startsWith('/')) {
         return `/${preparsed}`;

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

@@ -42,7 +42,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         if (typeof volume === 'number') {
             return volume;
         }
-        return new Array(Math.max(0, duration + startsAt))
+        return new Array(Math.floor(Math.max(0, duration + startsAt)))
             .fill(true)
             .map((_, i) => {
             return (0, volume_prop_js_1.evaluateVolume)({

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.0-alpha.130+167d9bb7f";
+export declare const VERSION = "4.0.0-alpha.185+1b8f0e746";

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-alpha.130+167d9bb7f';
+exports.VERSION = '4.0.0-alpha.185+1b8f0e746';

package/dist/cjs/z-color.d.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+export declare const REMOTION_COLOR_BRAND = "__remotion-color";
+export declare const parseColor: (value: string) => {
+    a: number;
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const zColor: () => z.ZodEffects<z.ZodString, string, string>;

package/dist/cjs/z-color.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zColor = exports.parseColor = exports.REMOTION_COLOR_BRAND = void 0;
+const zod_1 = require("zod");
+const interpolate_colors_js_1 = require("./interpolate-colors.js");
+exports.REMOTION_COLOR_BRAND = '__remotion-color';
+const parseColor = (value) => {
+    const colored = (0, interpolate_colors_js_1.processColor)(value).toString(16).padStart(8, '0');
+    const opacity = parseInt(colored.slice(0, 2), 16);
+    const r = parseInt(colored.slice(2, 4), 16);
+    const g = parseInt(colored.slice(4, 6), 16);
+    const b = parseInt(colored.slice(6, 8), 16);
+    return { a: opacity, r, g, b };
+};
+exports.parseColor = parseColor;
+const zColor = () => zod_1.z
+    .string()
+    .refine((value) => {
+    try {
+        (0, exports.parseColor)(value);
+        return true;
+    }
+    catch (err) {
+        return false;
+    }
+}, { message: 'Invalid color' })
+    .describe(exports.REMOTION_COLOR_BRAND);
+exports.zColor = zColor;

package/dist/esm/index.mjs

@@ -60,7 +60,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.0-alpha.130+167d9bb7f';
+const VERSION = '4.0.0-alpha.185+1b8f0e746';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -990,7 +990,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         if (typeof volume === 'number') {
             return volume;
         }
-        return new Array(Math.max(0, duration + startsAt))
+        return new Array(Math.floor(Math.max(0, duration + startsAt)))
             .fill(true)
             .map((_, i) => {
             return evaluateVolume({
@@ -2507,47 +2507,85 @@ const IFrameRefForwarding = ({ onLoad, onError, ...props }, ref) => {
  */
 const IFrame = forwardRef(IFrameRefForwarding);
 
-const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
+function exponentialBackoff(errorCount) {
+    return 1000 * 2 ** (errorCount - 1);
+}
+const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
     const imageRef = useRef(null);
-    const environment = useRemotionEnvironment();
+    const errors = useRef({});
     useImperativeHandle(ref, () => {
         return imageRef.current;
     }, []);
     const actualSrc = usePreload(src);
-    const didGetError = useCallback((e) => {
-        var _a;
-        if (onError) {
-            onError(e);
-        }
-        else {
-            console.error('Error loading image with src:', (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src, e, 'Handle the event using the onError() prop to make this message disappear.');
+    const retryIn = useCallback((timeout) => {
+        if (!imageRef.current) {
+            return;
         }
-    }, [onError]);
-    // If image source switches, make new handle
-    if (environment === 'rendering') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useLayoutEffect(() => {
-            if (process.env.NODE_ENV === 'test') {
+        const currentSrc = imageRef.current.src;
+        setTimeout(() => {
+            var _a;
+            if (!imageRef.current) {
+                // Component has been unmounted, do not retry
                 return;
             }
-            const newHandle = delayRender('Loading <Img> with src=' + src);
-            const { current } = imageRef;
-            const didLoad = () => {
-                continueRender(newHandle);
-            };
-            if (current === null || current === void 0 ? void 0 : current.complete) {
-                continueRender(newHandle);
+            const newSrc = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src;
+            if (newSrc !== currentSrc) {
+                // src has changed, do not retry
+                return;
             }
-            else {
-                current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
+            imageRef.current.removeAttribute('src');
+            imageRef.current.setAttribute('src', newSrc);
+        }, timeout);
+    }, []);
+    const didGetError = useCallback((e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (!errors.current) {
+            return;
+        }
+        errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src] =
+            ((_c = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _c !== void 0 ? _c : 0) + 1;
+        if (onError &&
+            ((_e = errors.current[(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src]) !== null && _e !== void 0 ? _e : 0) > maxRetries) {
+            onError(e);
+            return;
+        }
+        if (((_g = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _g !== void 0 ? _g : 0) <= maxRetries) {
+            const backoff = exponentialBackoff((_j = errors.current[(_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src]) !== null && _j !== void 0 ? _j : 0);
+            console.warn(`Could not load image with source ${(_k = imageRef.current) === null || _k === void 0 ? void 0 : _k.src}, retrying again in ${backoff}ms`);
+            retryIn(backoff);
+            return;
+        }
+        console.error('Error loading image with src:', (_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src, e, 'Handle the event using the onError() prop to make this message disappear.');
+    }, [maxRetries, onError, retryIn]);
+    useLayoutEffect(() => {
+        if (process.env.NODE_ENV === 'test') {
+            return;
+        }
+        const newHandle = delayRender('Loading <Img> with src=' + src);
+        const { current } = imageRef;
+        const onComplete = () => {
+            var _a, _b, _c, _d;
+            if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
+                delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
+                console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
             }
-            // If tag gets unmounted, clear pending handles because image is not going to load
-            return () => {
-                current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
-                continueRender(newHandle);
-            };
-        }, [src]);
-    }
+            continueRender(newHandle);
+        };
+        const didLoad = () => {
+            onComplete();
+        };
+        if (current === null || current === void 0 ? void 0 : current.complete) {
+            onComplete();
+        }
+        else {
+            current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
+        }
+        // If tag gets unmounted, clear pending handles because image is not going to load
+        return () => {
+            current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
+            continueRender(newHandle);
+        };
+    }, [src]);
     return (jsx("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };
 /**
@@ -2805,54 +2843,6 @@ const RemotionContextProvider = (props) => {
     return (jsx(CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: jsx(NonceContext.Provider, { value: contexts.nonceContext, children: jsx(NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: jsx(PreloadContext.Provider, { value: contexts.preloadContext, children: jsx(CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: jsx(TimelineContext.Provider, { value: contexts.timelineContext, children: jsx(SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: jsx(SequenceContext.Provider, { value: contexts.sequenceContext, children: children }) }) }) }) }) }) }) }));
 };
 
-const Timeline = TimelinePosition;
-// Mark them as Internals so use don't assume this is public
-// API and are less likely to use it
-const Internals = {
-    useUnsafeVideoConfig,
-    Timeline,
-    CompositionManager,
-    RemotionRoot,
-    useVideo,
-    getRoot,
-    useMediaVolumeState,
-    useMediaMutedState,
-    useLazyComponent,
-    truthy,
-    SequenceContext,
-    useRemotionContexts,
-    RemotionContextProvider,
-    CSSUtils,
-    setupEnvVariables,
-    ENV_VARIABLES_ENV_NAME,
-    MediaVolumeContext,
-    SetMediaVolumeContext,
-    validateDurationInFrames,
-    validateFps,
-    validateDimension,
-    getRemotionEnvironment,
-    SharedAudioContext,
-    SharedAudioContextProvider,
-    invalidCompositionErrorMessage,
-    isCompositionIdValid,
-    getPreviewDomElement,
-    compositionsRef,
-    DELAY_RENDER_CALLSTACK_TOKEN,
-    portalNode,
-    waitForRoot,
-    validateOffthreadVideoImageFormat,
-    CanUseRemotionHooksProvider,
-    CanUseRemotionHooks,
-    PrefetchProvider,
-    DurationsContextProvider,
-    IsPlayerContextProvider,
-    useIsPlayer,
-    useRemotionEnvironment,
-    validateFrame,
-    EditorPropsProvider,
-    EditorPropsContext,
-};
-
 /**
  * Copied from:
  * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
@@ -3206,14 +3196,9 @@ const blue = (c) => {
 const rgbaColor = (r, g, b, alpha) => {
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
-function processColorInitially(color) {
-    let normalizedColor = normalizeColor(color);
-    normalizedColor = ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
-    return normalizedColor;
-}
 function processColor(color) {
-    const normalizedColor = processColorInitially(color);
-    return normalizedColor;
+    const normalizedColor = normalizeColor(color);
+    return ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
 }
 const interpolateColorsRGB = (value, inputRange, colors) => {
     const [r, g, b, a] = [red, green, blue, opacity].map((f) => {
@@ -3253,6 +3238,79 @@ const interpolateColors = (input, inputRange, outputRange) => {
     return interpolateColorsRGB(input, inputRange, processedOutputRange);
 };
 
+const REMOTION_COLOR_BRAND = '__remotion-color';
+const parseColor = (value) => {
+    const colored = processColor(value).toString(16).padStart(8, '0');
+    const opacity = parseInt(colored.slice(0, 2), 16);
+    const r = parseInt(colored.slice(2, 4), 16);
+    const g = parseInt(colored.slice(4, 6), 16);
+    const b = parseInt(colored.slice(6, 8), 16);
+    return { a: opacity, r, g, b };
+};
+const zColor = () => z
+    .string()
+    .refine((value) => {
+    try {
+        parseColor(value);
+        return true;
+    }
+    catch (err) {
+        return false;
+    }
+}, { message: 'Invalid color' })
+    .describe(REMOTION_COLOR_BRAND);
+
+const Timeline = TimelinePosition;
+// Mark them as Internals so use don't assume this is public
+// API and are less likely to use it
+const Internals = {
+    useUnsafeVideoConfig,
+    Timeline,
+    CompositionManager,
+    RemotionRoot,
+    useVideo,
+    getRoot,
+    useMediaVolumeState,
+    useMediaMutedState,
+    useLazyComponent,
+    truthy,
+    SequenceContext,
+    useRemotionContexts,
+    RemotionContextProvider,
+    CSSUtils,
+    setupEnvVariables,
+    ENV_VARIABLES_ENV_NAME,
+    MediaVolumeContext,
+    SetMediaVolumeContext,
+    validateDurationInFrames,
+    validateFps,
+    validateDimension,
+    getRemotionEnvironment,
+    SharedAudioContext,
+    SharedAudioContextProvider,
+    invalidCompositionErrorMessage,
+    isCompositionIdValid,
+    getPreviewDomElement,
+    compositionsRef,
+    DELAY_RENDER_CALLSTACK_TOKEN,
+    portalNode,
+    waitForRoot,
+    validateOffthreadVideoImageFormat,
+    CanUseRemotionHooksProvider,
+    CanUseRemotionHooks,
+    PrefetchProvider,
+    DurationsContextProvider,
+    IsPlayerContextProvider,
+    useIsPlayer,
+    useRemotionEnvironment,
+    validateFrame,
+    EditorPropsProvider,
+    EditorPropsContext,
+    usePreload,
+    REMOTION_COLOR_BRAND,
+    parseColor,
+};
+
 const flattenChildren = (children) => {
     const childrenArray = React.Children.toArray(children);
     return childrenArray.reduce((flatChildren, child) => {
@@ -3575,6 +3633,20 @@ const staticFile = (path) => {
     if (path.startsWith('..') || path.startsWith('./')) {
         throw new TypeError(`staticFile() does not support relative paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
     }
+    if (path.startsWith('/Users') ||
+        path.startsWith('/home') ||
+        path.startsWith('/tmp') ||
+        path.startsWith('/etc') ||
+        path.startsWith('/opt') ||
+        path.startsWith('/var') ||
+        path.startsWith('C:') ||
+        path.startsWith('D:') ||
+        path.startsWith('E:')) {
+        throw new TypeError(`staticFile() does not support absolute paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
+    if (path.startsWith('public/')) {
+        throw new TypeError(`Do not include the public/ prefix when using staticFile() - got "${path}". See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
     const preparsed = inner(path);
     if (!preparsed.startsWith('/')) {
         return `/${preparsed}`;
@@ -4101,5 +4173,29 @@ const Experimental = {
     Null,
     useIsPlayer,
 };
+const proxyObj = {};
+const Config = new Proxy(proxyObj, {
+    get(_, prop) {
+        if (prop === 'Bundling' ||
+            prop === 'Rendering' ||
+            prop === 'Log' ||
+            prop === 'Puppeteer' ||
+            prop === 'Output') {
+            return Config;
+        }
+        return () => {
+            console.warn('⚠️  The CLI configuration has been extracted from Remotion Core.');
+            console.warn('Update the import from the config file:');
+            console.warn();
+            console.warn('- Delete:');
+            console.warn('import {Config} from "remotion";');
+            console.warn('+ Replace:');
+            console.warn('import {Config} from "@remotion/cli/config";');
+            console.warn();
+            console.warn('For more information, see https://v4.remotion.dev/docs/4-0-migration.');
+            process.exit(1);
+        };
+    },
+});
 
-export { AbsoluteFill, Audio, ClipComposition, Composition, Easing, Experimental, Folder, FolderContext, Freeze, IFrame, Img, Internals, Loop, OffthreadVideo, Sequence, Series, Still, VERSION, Video, cancelRender, continueRender, delayRender, getInputProps, getStaticFiles, interpolate, interpolateColors, measureSpring, prefetch, random, registerRoot, spring, staticFile, useCurrentFrame, useVideoConfig };
+export { AbsoluteFill, Audio, ClipComposition, Composition, Config, Easing, Experimental, Folder, FolderContext, Freeze, IFrame, Img, Internals, Loop, OffthreadVideo, Sequence, Series, Still, VERSION, Video, cancelRender, continueRender, delayRender, getInputProps, getStaticFiles, interpolate, interpolateColors, measureSpring, prefetch, random, registerRoot, spring, staticFile, useCurrentFrame, useVideoConfig, zColor };

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.0-alpha.130+167d9bb7f';
+const VERSION = '4.0.0-alpha.185+1b8f0e746';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "remotion",
-	"version": "4.0.0-alpha.130+167d9bb7f",
+	"version": "4.0.0-alpha.185+1b8f0e746",
 	"description": "Render videos in React",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -80,5 +80,5 @@
 	"dependencies": {
 		"zod": "3.21.4"
 	},
-	"gitHead": "167d9bb7fc36e3cb939dec0e904be7a19a8eebb2"
+	"gitHead": "1b8f0e746ea4aa1153c4ecc7bc1063752c405f25"
 }