remotion 4.0.212 → 4.0.214

package/dist/cjs/IFrame.d.ts

@@ -4,6 +4,6 @@ import React from 'react';
  * @see [Documentation](https://www.remotion.dev/docs/iframe)
  */
 export declare const IFrame: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLIFrameElement> & React.IframeHTMLAttributes<HTMLIFrameElement> & {
-    readonly delayRenderRetries?: number | undefined;
-    readonly delayRenderTimeoutInMilliseconds?: number | undefined;
+    readonly delayRenderRetries?: number;
+    readonly delayRenderTimeoutInMilliseconds?: number;
 }, "ref"> & React.RefAttributes<HTMLIFrameElement>>;

package/dist/cjs/Img.js

@@ -70,6 +70,9 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
         (0, react_1.useLayoutEffect)(() => {
             var _a, _b;
             if (((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) === 'test') {
+                if (imageRef.current) {
+                    imageRef.current.src = actualSrc;
+                }
                 return;
             }
             const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + actualSrc, {
@@ -80,31 +83,45 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                 ? delayPlayback().unblock
                 : () => undefined;
             const { current } = imageRef;
+            let unmounted = false;
             const onComplete = () => {
                 var _a, _b, _c, _d;
+                // the decode() promise isn't cancelable -- it may still resolve after unmounting
+                if (unmounted) {
+                    return;
+                }
                 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];
                     // eslint-disable-next-line no-console
                     console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
                 }
                 if (current) {
+                    current.src = actualSrc;
                     onImageFrame === null || onImageFrame === void 0 ? void 0 : onImageFrame(current);
                 }
                 unblock();
                 (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 });
-            }
+            const newImg = new Image();
+            newImg.src = actualSrc;
+            newImg
+                .decode()
+                .then(onComplete)
+                .catch((err) => {
+                // fall back to onload event if decode() fails
+                // eslint-disable-next-line no-console
+                console.warn(err);
+                if (newImg.complete) {
+                    onComplete();
+                }
+                else {
+                    newImg.addEventListener('load', onComplete);
+                }
+            });
             // 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);
+                unmounted = true;
+                newImg.removeEventListener('load', onComplete);
                 unblock();
                 (0, delay_render_js_1.continueRender)(newHandle);
             };
@@ -118,7 +135,8 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             onImageFrame,
         ]);
     }
-    return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
+    // src gets set once we've loaded and decoded the image.
+    return (0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, onError: didGetError });
 };
 /**
  * @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.

package/dist/cjs/Null.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Null: React.FC;

package/dist/cjs/RenderAssetManager.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TRenderAsset } from './CompositionManager.js';
 export type RenderAssetManagerContext = {
     registerRenderAsset: (renderAsset: TRenderAsset) => void;

package/dist/cjs/ResolveCompositionConfig.js

@@ -34,19 +34,19 @@ const ResolveCompositionConfig = ({ children }) => {
         var _a;
         return typeof window === 'undefined' || (0, get_remotion_environment_js_1.getRemotionEnvironment)().isPlayer
             ? {}
-            : (_a = (0, input_props_js_1.getInputProps)()) !== null && _a !== void 0 ? _a : {};
+            : ((_a = (0, input_props_js_1.getInputProps)()) !== null && _a !== void 0 ? _a : {});
     }, []);
     const [resolvedConfigs, setResolvedConfigs] = (0, react_1.useState)({});
     const selectedEditorProps = (0, react_1.useMemo)(() => {
         var _a;
         return selectedComposition
-            ? (_a = allEditorProps[selectedComposition.id]) !== null && _a !== void 0 ? _a : {}
+            ? ((_a = allEditorProps[selectedComposition.id]) !== null && _a !== void 0 ? _a : {})
             : {};
     }, [allEditorProps, selectedComposition]);
     const renderModalProps = (0, react_1.useMemo)(() => {
         var _a;
         return renderModalComposition
-            ? (_a = allEditorProps[renderModalComposition.id]) !== null && _a !== void 0 ? _a : {}
+            ? ((_a = allEditorProps[renderModalComposition.id]) !== null && _a !== void 0 ? _a : {})
             : {};
     }, [allEditorProps, renderModalComposition]);
     const hasResolution = Boolean(currentCompositionMetadata);
@@ -300,7 +300,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
     const composition = compositions.find((c) => c.id === compositionId);
     const selectedEditorProps = (0, react_1.useMemo)(() => {
         var _a;
-        return composition ? (_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {} : {};
+        return composition ? ((_a = allEditorProps[composition.id]) !== null && _a !== void 0 ? _a : {}) : {};
     }, [allEditorProps, composition]);
     return (0, react_1.useMemo)(() => {
         var _a, _b, _c, _d;
@@ -342,7 +342,7 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
                         ...(typeof window === 'undefined' ||
                             (0, get_remotion_environment_js_1.getRemotionEnvironment)().isPlayer
                             ? {}
-                            : (_d = (0, input_props_js_1.getInputProps)()) !== null && _d !== void 0 ? _d : {}),
+                            : ((_d = (0, input_props_js_1.getInputProps)()) !== null && _d !== void 0 ? _d : {})),
                     },
                     defaultCodec: null,
                 },

package/dist/cjs/Sequence.js

@@ -159,7 +159,7 @@ const PremountedSequenceRefForwardingFunction = (props, ref) => {
             opacity: premountingActive ? 0 : 1,
             pointerEvents: premountingActive
                 ? 'none'
-                : (_a = passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.pointerEvents) !== null && _a !== void 0 ? _a : undefined,
+                : ((_a = passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.pointerEvents) !== null && _a !== void 0 ? _a : undefined),
         };
     }, [premountingActive, passedStyle]);
     return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: from, active: premountingActive, children: (0, jsx_runtime_1.jsx)(exports.Sequence, { ref: ref, from: from, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalIsPremounting: premountingActive, ...otherProps }) }));

package/dist/cjs/SequenceContext.d.ts

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

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

@@ -5,23 +5,23 @@ import type { RemotionMainAudioProps } from './props.js';
  * @see [Documentation](https://www.remotion.dev/docs/audio)
  */
 export declare const Audio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
-    name?: string | undefined;
-    volume?: import("../volume-prop.js").VolumeProp | undefined;
-    playbackRate?: number | undefined;
-    acceptableTimeShiftInSeconds?: number | undefined;
-    allowAmplificationDuringRender?: boolean | undefined;
-    _remotionInternalNeedsDurationCalculation?: boolean | undefined;
-    _remotionInternalNativeLoopPassed?: boolean | undefined;
-    _remotionDebugSeeking?: boolean | undefined;
-    toneFrequency?: number | undefined;
-    pauseWhenBuffering?: boolean | undefined;
-    showInTimeline?: boolean | undefined;
-    delayRenderTimeoutInMilliseconds?: number | undefined;
-    delayRenderRetries?: number | undefined;
-    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
+    name?: string;
+    volume?: import("../volume-prop.js").VolumeProp;
+    playbackRate?: number;
+    acceptableTimeShiftInSeconds?: number;
+    allowAmplificationDuringRender?: boolean;
+    _remotionInternalNeedsDurationCalculation?: boolean;
+    _remotionInternalNativeLoopPassed?: boolean;
+    _remotionDebugSeeking?: boolean;
+    toneFrequency?: number;
+    pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
+    delayRenderTimeoutInMilliseconds?: number;
+    delayRenderRetries?: number;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string | undefined;
+    readonly stack?: string;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;

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

@@ -1,20 +1,7 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
-import React from 'react';
-export declare const AudioForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
-    name?: string | undefined;
-    volume?: import("../volume-prop.js").VolumeProp | undefined;
-    playbackRate?: number | undefined;
-    acceptableTimeShiftInSeconds?: number | undefined;
-    allowAmplificationDuringRender?: boolean | undefined;
-    _remotionInternalNeedsDurationCalculation?: boolean | undefined;
-    _remotionInternalNativeLoopPassed?: boolean | undefined;
-    _remotionDebugSeeking?: boolean | undefined;
-    toneFrequency?: number | undefined;
-    pauseWhenBuffering?: boolean | undefined;
-    showInTimeline?: boolean | undefined;
-    delayRenderTimeoutInMilliseconds?: number | undefined;
-    delayRenderRetries?: number | undefined;
-    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
-} & {
+import type { RemotionAudioProps } from './props.js';
+type AudioForRenderingProps = RemotionAudioProps & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
-} & RefAttributes<HTMLAudioElement>>;
+};
+export declare const AudioForRendering: ForwardRefExoticComponent<AudioForRenderingProps & RefAttributes<HTMLAudioElement>>;
+export {};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { VolumeProp } from '../volume-prop.js';
 import type { LoopVolumeCurveBehavior } from './use-audio-frame.js';
 export type RemotionMainAudioProps = {

package/dist/cjs/bezier.js

@@ -1,7 +1,7 @@
 "use strict";
 // Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/bezier.js
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.bezier = void 0;
+exports.bezier = bezier;
 const NEWTON_ITERATIONS = 4;
 const NEWTON_MIN_SLOPE = 0.001;
 const SUBDIVISION_PRECISION = 0.0000001;
@@ -111,4 +111,3 @@ function bezier(mX1, mY1, mX2, mY2) {
         return calcBezier(getTForX(x), mY1, mY2);
     };
 }
-exports.bezier = bezier;

package/dist/cjs/buffer-until-first-frame.d.ts

@@ -1,6 +1,6 @@
 export declare const useBufferUntilFirstFrame: ({ mediaRef, mediaType, onVariableFpsVideoDetected, pauseWhenBuffering, }: {
     mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>;
-    mediaType: 'video' | 'audio';
+    mediaType: "video" | "audio";
     onVariableFpsVideoDetected: () => void;
     pauseWhenBuffering: boolean;
 }) => {

package/dist/cjs/cancel-render.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cancelRender = void 0;
+exports.cancelRender = cancelRender;
 const isErrorLike = (err) => {
     if (err instanceof Error) {
         return true;
@@ -50,4 +50,3 @@ function cancelRender(err) {
     window.remotion_cancelledError = error.stack;
     throw error;
 }
-exports.cancelRender = cancelRender;

package/dist/cjs/delay-render.js

@@ -33,7 +33,7 @@ const delayRender = (label, options) => {
     if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
         const timeoutToUse = ((_c = options === null || options === void 0 ? void 0 : options.timeoutInMilliseconds) !== null && _c !== void 0 ? _c : (typeof window === 'undefined'
             ? defaultTimeout
-            : (_d = window.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout)) - 2000;
+            : ((_d = window.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout))) - 2000;
         if (typeof window !== 'undefined') {
             const retriesLeft = ((_e = options === null || options === void 0 ? void 0 : options.retries) !== null && _e !== void 0 ? _e : 0) - (window.remotion_attempt - 1);
             window.remotion_delayRenderTimeouts[handle] = {

package/dist/cjs/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="bun-types" />
-/// <reference types="react" />
 import './_check-rsc.js';
 import './asset-types.js';
 import type { Codec } from './codec.js';

package/dist/cjs/internals.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type CompProps } from './Composition.js';
 import type { TCompMetadata, TComposition, TRenderAsset, TSequence } from './CompositionManager.js';
 import type { CompositionManagerContext } from './CompositionManagerContext.js';
@@ -26,7 +25,7 @@ export declare const Internals: {
     }) | null;
     readonly getRoot: () => import("react").FC<{}> | null;
     readonly useMediaVolumeState: () => readonly [number, (u: number) => void];
-    readonly useMediaMutedState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void];
+    readonly useMediaMutedState: () => readonly [boolean, (u: React.SetStateAction<boolean>) => void];
     readonly useLazyComponent: <Props>(compProps: CompProps<Props>) => import("react").ExoticComponent<(import("react").PropsWithoutRef<Props> & import("react").RefAttributes<import("react").Component<Props, any, any>>) | import("react").PropsWithRef<Props>> & {
         readonly _result: import("react").ComponentType<Props>;
     };
@@ -67,7 +66,7 @@ export declare const Internals: {
         getCompositions: () => import("./CompositionManager.js").AnyComposition[];
     }>;
     readonly portalNode: () => HTMLElement;
-    readonly waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
+    readonly waitForRoot: (fn: (comp: import("react").FC) => void) => (() => void);
     readonly CanUseRemotionHooksProvider: import("react").FC<{
         readonly children: import("react").ReactNode;
     }>;
@@ -79,7 +78,7 @@ export declare const Internals: {
         children: import("react").ReactNode;
     }>;
     readonly IsPlayerContextProvider: import("react").FC<{
-        children?: import("react").ReactNode;
+        children?: import("react").ReactNode | undefined;
     }>;
     readonly useIsPlayer: () => boolean;
     readonly EditorPropsProvider: import("react").FC<{
@@ -94,7 +93,7 @@ export declare const Internals: {
         compositionHeight: number | null;
         compositionFps: number | null;
         compositionDurationInFrames: number | null;
-        calculateMetadata: import("./Composition.js").CalculateMetadataFunction<Record<string, unknown>> | null;
+        calculateMetadata: import("./Composition.js").CalculateMetadataFunction<import("./props-if-has-props.js").InferProps<import("zod").AnyZodObject, Record<string, unknown>>> | null;
         signal: AbortSignal;
         defaultProps: Record<string, unknown>;
         originalProps: Record<string, unknown>;
@@ -116,19 +115,19 @@ export declare const Internals: {
         reloadCurrentlySelectedComposition: () => void;
     }>;
     readonly ResolveCompositionConfig: import("react").FC<import("react").PropsWithChildren<{
-        children: import("react").ReactNode;
+        children: React.ReactNode;
     }>>;
     readonly REMOTION_STUDIO_CONTAINER_ELEMENT: "__remotion-studio-container";
     readonly RenderAssetManager: import("react").Context<import("./RenderAssetManager.js").RenderAssetManagerContext>;
     readonly persistCurrentFrame: (time: {
         [x: string]: number;
     }) => void;
-    readonly useTimelineSetFrame: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
+    readonly useTimelineSetFrame: () => ((u: React.SetStateAction<Record<string, number>>) => void);
     readonly NativeLayersProvider: import("react").FC<{
-        children?: import("react").ReactNode;
+        children?: import("react").ReactNode | undefined;
     }>;
     readonly ClipComposition: import("react").FC<{
-        children?: import("react").ReactNode;
+        children?: import("react").ReactNode | undefined;
     }>;
     readonly isIosSafari: () => boolean;
     readonly WATCH_REMOTION_STATIC_FILES: "remotion_staticFilesChanged";
@@ -155,7 +154,7 @@ export declare const Internals: {
     readonly CurrentScaleContext: import("react").Context<import("./use-current-scale.js").CurrentScaleContextType | null>;
     readonly PreviewSizeContext: import("react").Context<import("./use-current-scale.js").PreviewSizeCtx>;
     readonly calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
-        previewSize: number | "auto";
+        previewSize: import("./use-current-scale.js").PreviewSize["size"];
         compositionWidth: number;
         compositionHeight: number;
         canvasSize: {

package/dist/cjs/interpolate-colors.js

@@ -4,7 +4,8 @@
  * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.interpolateColors = exports.processColor = exports.colorNames = void 0;
+exports.interpolateColors = exports.colorNames = void 0;
+exports.processColor = processColor;
 /* eslint no-bitwise: 0 */
 const interpolate_js_1 = require("./interpolate.js");
 // var INTEGER = '[-+]?\\d+';
@@ -358,7 +359,6 @@ function processColor(color) {
     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/interpolate.js

@@ -1,7 +1,7 @@
 "use strict";
 // Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/nodes/AnimatedInterpolation.js
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.interpolate = void 0;
+exports.interpolate = interpolate;
 function interpolateFunction(input, inputRange, outputRange, options) {
     const { extrapolateLeft, extrapolateRight, easing } = options;
     let result = input;
@@ -128,4 +128,3 @@ function interpolate(input, inputRange, outputRange, options) {
         extrapolateRight,
     });
 }
-exports.interpolate = interpolate;

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

@@ -1,7 +1,7 @@
 export type { ArtifactAsset, AudioOrVideoAsset, TRenderAsset, } from './CompositionManager';
+export { EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, } from './interpolate';
 export type { ClipRegion } from './NativeLayers';
-export { EasingFunction, ExtrapolateType, InterpolateOptions, interpolate, } from './interpolate';
-export { RandomSeed, random } from './random.js';
+export { random, RandomSeed } from './random.js';
 export type { VideoConfig } from './video-config';
 import { processColor } from './interpolate-colors';
 import { truthy } from './truthy';

package/dist/cjs/nonce.d.ts

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

package/dist/cjs/play-and-handle-not-allowed-error.d.ts

@@ -1,2 +1,2 @@
 import type { RefObject } from 'react';
-export declare const playAndHandleNotAllowedError: (mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, mediaType: 'audio' | 'video', onAutoPlayError: null | (() => void)) => void;
+export declare const playAndHandleNotAllowedError: (mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, mediaType: "audio" | "video", onAutoPlayError: null | (() => void)) => void;

package/dist/cjs/prefetch.d.ts

@@ -12,7 +12,7 @@ export type PrefetchOnProgress = (options: {
  * @see [Documentation](https://www.remotion.dev/docs/prefetch)
  */
 export declare const prefetch: (src: string, options?: {
-    method?: 'blob-url' | 'base64';
+    method?: "blob-url" | "base64";
     contentType?: string;
     onProgress?: PrefetchOnProgress;
 }) => FetchAndPreload;

package/dist/cjs/prefetch.js

@@ -148,7 +148,7 @@ const prefetch = (src, options) => {
                 canceled = true;
                 if (canBeAborted) {
                     try {
-                        controller.abort();
+                        controller.abort(new Error('free() called'));
                     }
                     catch (e) { }
                 }

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

@@ -15,10 +15,10 @@ type ResolveVideoConfigParams = {
 };
 export declare const resolveVideoConfig: ({ calculateMetadata, signal, defaultProps, originalProps, compositionId, compositionDurationInFrames, compositionFps, compositionHeight, compositionWidth, }: ResolveVideoConfigParams) => VideoConfig | Promise<VideoConfig>;
 export declare const resolveVideoConfigOrCatch: (params: ResolveVideoConfigParams) => {
-    type: 'success';
+    type: "success";
     result: VideoConfig | Promise<VideoConfig>;
 } | {
-    type: 'error';
+    type: "error";
     error: Error;
 };
 export {};

package/dist/cjs/series/flatten-children.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const flattenChildren: (children: React.ReactNode) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
+type ReactChildArray = ReturnType<typeof React.Children.toArray>;
+export declare const flattenChildren: (children: React.ReactNode) => ReactChildArray;
+export {};

package/dist/cjs/spring/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.measureSpring = exports.spring = void 0;
+exports.measureSpring = void 0;
+exports.spring = spring;
 const interpolate_js_1 = require("../interpolate.js");
 const validate_frame_js_1 = require("../validate-frame.js");
 const validate_fps_js_1 = require("../validation/validate-fps.js");
@@ -72,6 +73,5 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
     const interpolated = from === 0 && to === 1 ? inner : (0, interpolate_js_1.interpolate)(inner, [0, 1], [from, to]);
     return interpolated;
 }
-exports.spring = spring;
 var measure_spring_js_2 = require("./measure-spring.js");
 Object.defineProperty(exports, "measureSpring", { enumerable: true, get: function () { return measure_spring_js_2.measureSpring; } });

package/dist/cjs/spring/measure-spring.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.measureSpring = void 0;
+exports.measureSpring = measureSpring;
 const validate_fps_js_1 = require("../validation/validate-fps.js");
 const spring_utils_js_1 = require("./spring-utils.js");
 const cache = new Map();
@@ -74,4 +74,3 @@ function measureSpring({ fps, config = {}, threshold = 0.005, }) {
     cache.set(cacheKey, finishedFrame);
     return finishedFrame;
 }
-exports.measureSpring = measureSpring;

package/dist/cjs/spring/spring-utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.springCalculation = void 0;
+exports.springCalculation = springCalculation;
 const defaultSpringConfig = {
     damping: 10,
     mass: 1,
@@ -103,4 +103,3 @@ function springCalculation({ frame, fps, config = {}, }) {
     calculationCache[cacheKey] = animation;
     return animation;
 }
-exports.springCalculation = springCalculation;

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

@@ -23,7 +23,7 @@ export declare const persistCurrentFrame: (time: CurrentTimePerComposition) => v
 export declare const getInitialFrameState: () => CurrentTimePerComposition;
 export declare const getFrameForComposition: (composition: string) => number;
 export declare const useTimelinePosition: () => number;
-export declare const useTimelineSetFrame: () => (u: React.SetStateAction<Record<string, number>>) => void;
+export declare const useTimelineSetFrame: () => ((u: React.SetStateAction<Record<string, number>>) => void);
 type PlayingReturnType = readonly [
     boolean,
     (u: React.SetStateAction<boolean>) => void,

package/dist/cjs/timeline-position-state.js

@@ -59,7 +59,7 @@ const useTimelinePosition = () => {
     if (!videoConfig) {
         return typeof window === 'undefined'
             ? 0
-            : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0;
+            : ((_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0);
     }
     const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isPlayer
         ? 0

package/dist/cjs/truthy.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.truthy = void 0;
+exports.truthy = truthy;
 function truthy(value) {
     return Boolean(value);
 }
-exports.truthy = truthy;

package/dist/cjs/use-current-scale.d.ts

@@ -27,7 +27,7 @@ export type PreviewSizeCtx = {
 };
 export declare const PreviewSizeContext: React.Context<PreviewSizeCtx>;
 export declare const calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
-    previewSize: PreviewSize['size'];
+    previewSize: PreviewSize["size"];
     compositionWidth: number;
     compositionHeight: number;
     canvasSize: {

package/dist/cjs/use-media-in-timeline.d.ts

@@ -5,7 +5,7 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src,
     mediaVolume: number;
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement>;
     src: string | undefined;
-    mediaType: 'audio' | 'video';
+    mediaType: "audio" | "video";
     playbackRate: number;
     displayName: string | null;
     id: string;

package/dist/cjs/use-media-playback.d.ts

@@ -3,7 +3,7 @@ export declare const DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
 export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, debugSeeking, onAutoPlayError, }: {
     mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>;
     src: string | undefined;
-    mediaType: 'audio' | 'video';
+    mediaType: "audio" | "video";
     playbackRate: number;
     onlyWarnForMediaSeekingError: boolean;
     acceptableTimeshift: number;

package/dist/cjs/use-request-video-callback-time.d.ts

@@ -1,7 +1,7 @@
 import type { RefObject } from 'react';
 export declare const useRequestVideoCallbackTime: ({ mediaRef, mediaType, lastSeek, onVariableFpsVideoDetected, }: {
     mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>;
-    mediaType: 'video' | 'audio';
+    mediaType: "video" | "audio";
     lastSeek: React.MutableRefObject<number | null>;
     onVariableFpsVideoDetected: () => void;
 }) => import("react").MutableRefObject<number | null>;

package/dist/cjs/validate-media-props.d.ts

@@ -1,4 +1,4 @@
 import type { RemotionAudioProps } from './audio/index.js';
 import type { RemotionVideoProps } from './video/index.js';
 import type { OffthreadVideoProps } from './video/props.js';
-export declare const validateMediaProps: (props: RemotionVideoProps | RemotionAudioProps | OffthreadVideoProps, component: 'Video' | 'Audio') => void;
+export declare const validateMediaProps: (props: RemotionVideoProps | RemotionAudioProps | OffthreadVideoProps, component: "Video" | "Audio") => void;

package/dist/cjs/validation/validate-default-codec.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateDefaultCodec = void 0;
+exports.validateDefaultCodec = validateDefaultCodec;
 const codec_1 = require("../codec");
 function validateDefaultCodec(defaultCodec, location) {
     if (typeof defaultCodec === 'undefined') {
@@ -13,4 +13,3 @@ function validateDefaultCodec(defaultCodec, location) {
         throw new Error(`The "defaultCodec" prop ${location} must be one of ${codec_1.validCodecs.join(', ')}, but you passed ${defaultCodec}.`);
     }
 }
-exports.validateDefaultCodec = validateDefaultCodec;

package/dist/cjs/validation/validate-default-props.d.ts

@@ -1 +1 @@
-export declare const validateDefaultAndInputProps: (defaultProps: unknown, name: 'defaultProps' | 'inputProps', compositionId: string | null) => void;
+export declare const validateDefaultAndInputProps: (defaultProps: unknown, name: "defaultProps" | "inputProps", compositionId: string | null) => void;

package/dist/cjs/validation/validate-dimensions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateDimension = void 0;
+exports.validateDimension = validateDimension;
 function validateDimension(amount, nameOfProp, location) {
     if (typeof amount !== 'number') {
         throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
@@ -18,4 +18,3 @@ function validateDimension(amount, nameOfProp, location) {
         throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
     }
 }
-exports.validateDimension = validateDimension;

package/dist/cjs/validation/validate-duration-in-frames.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateDurationInFrames = void 0;
+exports.validateDurationInFrames = validateDurationInFrames;
 function validateDurationInFrames(durationInFrames, options) {
     const { allowFloats, component } = options;
     if (typeof durationInFrames === 'undefined') {
@@ -19,4 +19,3 @@ function validateDurationInFrames(durationInFrames, options) {
         throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
     }
 }
-exports.validateDurationInFrames = validateDurationInFrames;

package/dist/cjs/validation/validate-fps.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.validateFps = void 0;
+exports.validateFps = validateFps;
 function validateFps(fps, location, isGif) {
     if (typeof fps !== 'number') {
         throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
@@ -18,4 +18,3 @@ function validateFps(fps, location, isGif) {
         throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
     }
 }
-exports.validateFps = validateFps;

package/dist/cjs/version.d.ts

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

package/dist/cjs/version.js

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

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

@@ -5,22 +5,22 @@ import type { RemotionMainVideoProps } from './props';
  * @see [Documentation](https://www.remotion.dev/docs/video)
  */
 export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onError" | "onEnded" | "autoPlay" | "controls" | "disableRemotePlayback"> & {
-    name?: string | undefined;
-    volume?: import("../volume-prop.js").VolumeProp | undefined;
-    playbackRate?: number | undefined;
-    acceptableTimeShiftInSeconds?: number | undefined;
-    allowAmplificationDuringRender?: boolean | undefined;
-    toneFrequency?: number | undefined;
-    pauseWhenBuffering?: boolean | undefined;
-    showInTimeline?: boolean | undefined;
-    delayRenderTimeoutInMilliseconds?: number | undefined;
-    loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
-    delayRenderRetries?: number | undefined;
-    onError?: ((err: Error) => void) | undefined;
-    onAutoPlayError?: (() => void) | undefined;
+    name?: string;
+    volume?: import("../volume-prop.js").VolumeProp;
+    playbackRate?: number;
+    acceptableTimeShiftInSeconds?: number;
+    allowAmplificationDuringRender?: boolean;
+    toneFrequency?: number;
+    pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
+    delayRenderTimeoutInMilliseconds?: number;
+    loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior;
+    delayRenderRetries?: number;
+    onError?: (err: Error) => void;
+    onAutoPlayError?: () => void;
 } & RemotionMainVideoProps & {
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string | undefined;
+    readonly stack?: string;
 }, "ref"> & React.RefAttributes<HTMLVideoElement>>;

package/dist/cjs/video/VideoForPreview.js

@@ -155,7 +155,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         var _a;
         return {
             ...style,
-            opacity: isSequenceHidden ? 0 : (_a = style === null || style === void 0 ? void 0 : style.opacity) !== null && _a !== void 0 ? _a : 1,
+            opacity: isSequenceHidden ? 0 : ((_a = style === null || style === void 0 ? void 0 : style.opacity) !== null && _a !== void 0 ? _a : 1),
         };
     }, [isSequenceHidden, style]);
     const crossOriginValue = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : (onVideoFrame ? 'anonymous' : undefined);

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

@@ -1,21 +1,8 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
-import React from 'react';
-import type { OnVideoFrame } from './props';
-export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onError" | "onEnded" | "autoPlay" | "controls" | "disableRemotePlayback"> & {
-    name?: string | undefined;
-    volume?: import("../volume-prop.js").VolumeProp | undefined;
-    playbackRate?: number | undefined;
-    acceptableTimeShiftInSeconds?: number | undefined;
-    allowAmplificationDuringRender?: boolean | undefined;
-    toneFrequency?: number | undefined;
-    pauseWhenBuffering?: boolean | undefined;
-    showInTimeline?: boolean | undefined;
-    delayRenderTimeoutInMilliseconds?: number | undefined;
-    loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
-    delayRenderRetries?: number | undefined;
-    onError?: ((err: Error) => void) | undefined;
-    onAutoPlayError?: (() => void) | undefined;
-} & {
+import type { OnVideoFrame, RemotionVideoProps } from './props';
+type VideoForRenderingProps = RemotionVideoProps & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
     readonly onVideoFrame: null | OnVideoFrame;
-} & RefAttributes<HTMLVideoElement>>;
+};
+export declare const VideoForRendering: ForwardRefExoticComponent<VideoForRenderingProps & RefAttributes<HTMLVideoElement>>;
+export {};

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

@@ -1,3 +1,3 @@
 export { OffthreadVideo } from './OffthreadVideo.js';
-export { Video } from './Video.js';
 export type { RemotionMainVideoProps, OffthreadVideoProps as RemotionOffthreadVideoProps, RemotionVideoProps, } from './props';
+export { Video } from './Video.js';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type MediaVolumeContextValue = {
     mediaMuted: boolean;
     mediaVolume: number;

package/dist/cjs/warn-about-non-seekable-media.d.ts

@@ -1 +1 @@
-export declare const warnAboutNonSeekableMedia: (ref: HTMLMediaElement | null, type: 'console-warning' | 'console-error' | 'exception') => void;
+export declare const warnAboutNonSeekableMedia: (ref: HTMLMediaElement | null, type: "console-warning" | "console-error" | "exception") => void;

package/dist/cjs/wrap-remotion-context.js

@@ -23,7 +23,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemotionContextProvider = exports.useRemotionContexts = void 0;
+exports.RemotionContextProvider = void 0;
+exports.useRemotionContexts = useRemotionContexts;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // This is used for when other reconcilers are being used
 // such as in React Three Fiber. All the contexts need to be passed again
@@ -81,7 +82,6 @@ function useRemotionContexts() {
         bufferManagerContext,
     ]);
 }
-exports.useRemotionContexts = useRemotionContexts;
 const RemotionContextProvider = (props) => {
     const { children, contexts } = props;
     return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingContextReact.Provider, { value: contexts.bufferManagerContext, children: children }) }) }) }) }) }) }) }) }) }) }) }));

package/dist/esm/index.mjs

@@ -155,7 +155,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.212";
+var VERSION = "4.0.214";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1961,7 +1961,7 @@ var prefetch = (src, options) => {
         canceled = true;
         if (canBeAborted) {
           try {
-            controller.abort();
+            controller.abort(new Error("free() called"));
           } catch (e) {
           }
         }
@@ -4557,6 +4557,9 @@ var ImgRefForwarding = ({
     const isPremounting = Boolean(sequenceContext?.premounting);
     useLayoutEffect4(() => {
       if (window.process?.env?.NODE_ENV === "test") {
+        if (imageRef.current) {
+          imageRef.current.src = actualSrc;
+        }
         return;
       }
       const newHandle = delayRender("Loading <Img> with src=" + actualSrc, {
@@ -4567,27 +4570,35 @@ var ImgRefForwarding = ({
         return;
       };
       const { current } = imageRef;
+      let unmounted = false;
       const onComplete = () => {
+        if (unmounted) {
+          return;
+        }
         if ((errors.current[imageRef.current?.src] ?? 0) > 0) {
           delete errors.current[imageRef.current?.src];
           console.info(`Retry successful - ${imageRef.current?.src} is now loaded`);
         }
         if (current) {
+          current.src = actualSrc;
           onImageFrame?.(current);
         }
         unblock();
         continueRender(newHandle);
       };
-      const didLoad = () => {
-        onComplete();
-      };
-      if (current?.complete) {
-        onComplete();
-      } else {
-        current?.addEventListener("load", didLoad, { once: true });
-      }
+      const newImg = new Image;
+      newImg.src = actualSrc;
+      newImg.decode().then(onComplete).catch((err) => {
+        console.warn(err);
+        if (newImg.complete) {
+          onComplete();
+        } else {
+          newImg.addEventListener("load", onComplete);
+        }
+      });
       return () => {
-        current?.removeEventListener("load", didLoad);
+        unmounted = true;
+        newImg.removeEventListener("load", onComplete);
         unblock();
         continueRender(newHandle);
       };
@@ -4604,7 +4615,6 @@ var ImgRefForwarding = ({
   return /* @__PURE__ */ jsx24("img", {
     ...props2,
     ref: imageRef,
-    src: actualSrc,
     onError: didGetError
   });
 };

package/dist/esm/version.mjs

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

package/ensure-correct-version.ts

@@ -18,7 +18,7 @@ export const VERSION = '${version}';
 
 fs.writeFileSync(path.resolve(process.cwd(), 'src/version.ts'), src);
 
-cp.execSync('pnpm build');
+cp.execSync('pnpm run make');
 cp.execSync('bun x tsc -d');
 
 const distFile = fs.readFileSync('dist/esm/version.mjs', 'utf-8');

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.212",
+  "version": "4.0.214",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -74,6 +74,6 @@
     "formatting": "prettier src --check",
     "lint": "eslint src --ext ts,tsx",
     "test": "vitest --run",
-    "build": "bun --env-file=../.env.bundle bundle.ts"
+    "make": "bun --env-file=../.env.bundle bundle.ts"
   }
 }