remotion 4.0.0-webhook.26 → 4.0.0

package/dist/{interpolate-colors.js → cjs/interpolate-colors.js}

@@ -4,9 +4,9 @@
  * 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_1 = require("./interpolate");
+const interpolate_js_1 = require("./interpolate.js");
 // var INTEGER = '[-+]?\\d+';
 const NUMBER = '[-+]?\\d*\\.?\\d+';
 const PERCENTAGE = NUMBER + '%';
@@ -356,18 +356,14 @@ 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_1.interpolate)(value, inputRange, colors.map((c) => f(c)), {
+        const unrounded = (0, interpolate_js_1.interpolate)(value, inputRange, colors.map((c) => f(c)), {
             extrapolateLeft: 'clamp',
             extrapolateRight: 'clamp',
         });
@@ -378,6 +374,10 @@ const interpolateColorsRGB = (value, inputRange, colors) => {
     });
     return rgbaColor(r, g, b, a);
 };
+/**
+ * @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)
+ */
 const interpolateColors = (input, inputRange, outputRange) => {
     if (typeof input === 'undefined') {
         throw new TypeError('input can not be undefined');

package/dist/{interpolate.d.ts → cjs/interpolate.d.ts}

@@ -1,4 +1,13 @@
-declare type ExtrapolateType = 'extend' | 'identity' | 'clamp';
+export type ExtrapolateType = 'extend' | 'identity' | 'clamp';
+/**
+ * @description This function allows you to map a range of values to another with a conside syntax
+ * @see [Documentation](https://www.remotion.dev/docs/interpolate)
+ */
+export type InterpolateOptions = Partial<{
+    easing: (input: number) => number;
+    extrapolateLeft: ExtrapolateType;
+    extrapolateRight: ExtrapolateType;
+}>;
 /**
  * Map a value from an input range to an output range.
  * @link https://www.remotion.dev/docs/interpolate
@@ -10,9 +19,4 @@ declare type ExtrapolateType = 'extend' | 'identity' | 'clamp';
  * @param {string=} [options.extrapolateLeft="extend"] What should happen if the input value is outside left the input range, default: "extend" {@link https://www.remotion.dev/docs/interpolate#extrapolateleft}
  * @param {string=} [options.extrapolateRight="extend"] Same as extrapolateLeft, except for values outside right the input range {@link https://www.remotion.dev/docs/interpolate#extrapolateright}
  */
-export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: {
-    easing?: (input: number) => number;
-    extrapolateLeft?: ExtrapolateType;
-    extrapolateRight?: ExtrapolateType;
-}): number;
-export {};
+export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number;

package/dist/cjs/is-player.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+export declare const IsPlayerContextProvider: React.FC<PropsWithChildren>;
+export declare const useIsPlayer: () => boolean;

package/dist/cjs/is-player.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsPlayer = exports.IsPlayerContextProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const IsPlayerContext = (0, react_1.createContext)(false);
+const IsPlayerContextProvider = ({ children, }) => {
+    return (0, jsx_runtime_1.jsx)(IsPlayerContext.Provider, { value: true, children: children });
+};
+exports.IsPlayerContextProvider = IsPlayerContextProvider;
+const useIsPlayer = () => {
+    return (0, react_1.useContext)(IsPlayerContext);
+};
+exports.useIsPlayer = useIsPlayer;

package/dist/{loading-indicator.js → cjs/loading-indicator.js}

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loading = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const AbsoluteFill_1 = require("./AbsoluteFill");
+const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const rotate = {
     transform: `rotate(90deg)`,
 };
 const ICON_SIZE = 40;
 const label = {
-    color: '#555',
+    color: 'white',
     fontSize: 14,
     fontFamily: 'sans-serif',
 };
@@ -17,7 +17,7 @@ const container = {
     alignItems: 'center',
 };
 const Loading = () => {
-    return ((0, jsx_runtime_1.jsxs)(AbsoluteFill_1.AbsoluteFill, { style: container, id: "remotion-comp-loading", children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `
+    return ((0, jsx_runtime_1.jsxs)(AbsoluteFill_js_1.AbsoluteFill, { style: container, id: "remotion-comp-loading", children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `
 				@keyframes anim {
 					from {
 						opacity: 0
@@ -30,6 +30,6 @@ const Loading = () => {
 					animation: anim 2s;
 					animation-fill-mode: forwards;
 				}
-			` }), (0, jsx_runtime_1.jsx)("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), (0, jsx_runtime_1.jsx)("p", { style: label, children: "Loading..." })] }));
+			` }), (0, jsx_runtime_1.jsx)("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), (0, jsx_runtime_1.jsxs)("p", { style: label, children: ["Resolving ", '<Suspense>', "..."] })] }));
 };
 exports.Loading = Loading;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { LayoutAndStyle } from '../Sequence.js';
+export type LoopProps = {
+    durationInFrames: number;
+    times?: number;
+    name?: string;
+    children: React.ReactNode;
+} & LayoutAndStyle;
+/**
+ * @description This component allows you to quickly lay out an animation so it repeats itself.
+ * @see [Documentation](https://www.remotion.dev/docs/loop)
+ */
+export declare const Loop: React.FC<LoopProps>;

package/dist/cjs/loop/index.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loop = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Sequence_js_1 = require("../Sequence.js");
+const use_current_frame_js_1 = require("../use-current-frame.js");
+const use_video_config_js_1 = require("../use-video-config.js");
+const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
+/**
+ * @description This component allows you to quickly lay out an animation so it repeats itself.
+ * @see [Documentation](https://www.remotion.dev/docs/loop)
+ */
+const Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
+    const currentFrame = (0, use_current_frame_js_1.useCurrentFrame)();
+    const { durationInFrames: compDuration } = (0, use_video_config_js_1.useVideoConfig)();
+    (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, {
+        component: 'of the <Loop /> component',
+        allowFloats: true,
+    });
+    if (typeof times !== 'number') {
+        throw new TypeError(`You passed to "times" an argument of type ${typeof times}, but it must be a number.`);
+    }
+    if (times !== Infinity && times % 1 !== 0) {
+        throw new TypeError(`The "times" prop of a loop must be an integer, but got ${times}.`);
+    }
+    if (times < 0) {
+        throw new TypeError(`The "times" prop of a loop must be at least 0, but got ${times}`);
+    }
+    const maxTimes = Math.ceil(compDuration / durationInFrames);
+    const actualTimes = Math.min(maxTimes, times);
+    const style = props.layout === 'none' ? undefined : props.style;
+    const maxFrame = durationInFrames * (actualTimes - 1);
+    const start = Math.floor(currentFrame / durationInFrames) * durationInFrames;
+    const from = Math.min(start, maxFrame);
+    const loopDisplay = (0, react_1.useMemo)(() => {
+        return {
+            numberOfTimes: actualTimes,
+            startOffset: -from,
+            durationInFrames,
+        };
+    }, [actualTimes, durationInFrames, from]);
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name, loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
+};
+exports.Loop = Loop;

package/dist/{multiple-versions-warning.js → cjs/multiple-versions-warning.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkMultipleRemotionVersions = void 0;
-const truthy_1 = require("./truthy");
-const version_1 = require("./version");
+const truthy_js_1 = require("./truthy.js");
+const version_js_1 = require("./version.js");
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
         return;
@@ -10,18 +10,23 @@ const checkMultipleRemotionVersions = () => {
     const alreadyImported = globalThis.remotion_imported ||
         (typeof window !== 'undefined' && window.remotion_imported);
     if (alreadyImported) {
+        if (alreadyImported === version_js_1.VERSION) {
+            // Next.JS will reload the package and cause a server-side warning.
+            // It's okay if this happens during SSR in developement
+            return;
+        }
         throw new TypeError(`🚨 Multiple versions of Remotion detected: ${[
-            version_1.VERSION,
+            version_js_1.VERSION,
             typeof alreadyImported === 'string'
                 ? alreadyImported
                 : 'an older version',
         ]
-            .filter(truthy_1.truthy)
+            .filter(truthy_js_1.truthy)
             .join(' and ')}. This will cause things to break in an unexpected way.\nCheck that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
     }
-    globalThis.remotion_imported = true;
+    globalThis.remotion_imported = version_js_1.VERSION;
     if (typeof window !== 'undefined') {
-        window.remotion_imported = version_1.VERSION;
+        window.remotion_imported = version_js_1.VERSION;
     }
 };
 exports.checkMultipleRemotionVersions = checkMultipleRemotionVersions;

package/dist/{nonce.d.ts → cjs/nonce.d.ts}

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

package/dist/{nonce.js → cjs/nonce.js}

@@ -9,7 +9,13 @@ exports.NonceContext = (0, react_1.createContext)({
 const useNonce = () => {
     const context = (0, react_1.useContext)(exports.NonceContext);
     const [nonce, setNonce] = (0, react_1.useState)(() => context.getNonce());
+    const lastContext = (0, react_1.useRef)(context);
+    // Only if context changes, but not initially
     (0, react_1.useEffect)(() => {
+        if (lastContext.current === context) {
+            return;
+        }
+        lastContext.current = context;
         setNonce(context.getNonce);
     }, [context]);
     return nonce;

package/dist/{play-and-handle-not-allowed-error.js → cjs/play-and-handle-not-allowed-error.js}

@@ -28,6 +28,10 @@ const playAndHandleNotAllowedError = (mediaRef, mediaType) => {
             if (err.message.includes('request was interrupted by a new load request')) {
                 return;
             }
+            // Audio tag got unmounted
+            if (err.message.includes('because the media was removed from the document')) {
+                return;
+            }
             console.log(`Could not play ${mediaType} due to following error: `, err);
             if (!current.muted) {
                 console.log(`The video will be muted and we'll retry playing it.`, err);

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

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

package/dist/cjs/prefetch-state.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrefetchProvider = exports.setPreloads = exports.PreloadContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.PreloadContext = (0, react_1.createContext)({});
+let preloads = {};
+let updaters = [];
+const setPreloads = (updater) => {
+    preloads = updater(preloads);
+    updaters.forEach((u) => u());
+};
+exports.setPreloads = setPreloads;
+const PrefetchProvider = ({ children }) => {
+    const [_preloads, _setPreloads] = (0, react_1.useState)(() => preloads);
+    (0, react_1.useEffect)(() => {
+        const updaterFunction = () => {
+            _setPreloads(preloads);
+        };
+        updaters.push(updaterFunction);
+        return () => {
+            updaters = updaters.filter((u) => u !== updaterFunction);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.PreloadContext.Provider, { value: _preloads, children: children }));
+};
+exports.PrefetchProvider = PrefetchProvider;

package/dist/cjs/prefetch.d.ts

@@ -0,0 +1,13 @@
+export declare const usePreload: (src: string) => string;
+type FetchAndPreload = {
+    free: () => void;
+    waitUntilDone: () => Promise<string>;
+};
+/**
+ * @description When you call the preFetch() function, an asset will be fetched and kept in memory so it is ready when you want to play it in a <Player>.
+ * @see [Documentation](https://www.remotion.dev/docs/prefetch)
+ */
+export declare const prefetch: (src: string, options?: {
+    method?: 'blob-url' | 'base64';
+}) => FetchAndPreload;
+export {};

package/dist/{prefetch.js → cjs/prefetch.js}

@@ -2,16 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.prefetch = exports.usePreload = void 0;
 const react_1 = require("react");
-const get_environment_1 = require("./get-environment");
-const prefetch_state_1 = require("./prefetch-state");
+const get_environment_js_1 = require("./get-environment.js");
+const prefetch_state_js_1 = require("./prefetch-state.js");
 const usePreload = (src) => {
     var _a;
-    const { preloads } = (0, react_1.useContext)(prefetch_state_1.PreloadContext);
+    const preloads = (0, react_1.useContext)(prefetch_state_js_1.PreloadContext);
     return (_a = preloads[src]) !== null && _a !== void 0 ? _a : src;
 };
 exports.usePreload = usePreload;
-const prefetch = (src) => {
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+const blobToBase64 = function (blob) {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onload = function () {
+            const dataUrl = reader.result;
+            resolve(dataUrl);
+        };
+        reader.onerror = (err) => {
+            return reject(err);
+        };
+        reader.readAsDataURL(blob);
+    });
+};
+/**
+ * @description When you call the preFetch() function, an asset will be fetched and kept in memory so it is ready when you want to play it in a <Player>.
+ * @see [Documentation](https://www.remotion.dev/docs/prefetch)
+ */
+const prefetch = (src, options) => {
+    var _a;
+    const method = (_a = options === null || options === void 0 ? void 0 : options.method) !== null && _a !== void 0 ? _a : 'blob-url';
+    if ((0, get_environment_js_1.getRemotionEnvironment)() === 'rendering') {
         return {
             free: () => undefined,
             waitUntilDone: () => Promise.resolve(src),
@@ -41,28 +60,35 @@ const prefetch = (src) => {
         return res.blob();
     })
         .then((buf) => {
-        var _a;
-        if (canceled) {
+        if (!buf) {
             return;
         }
-        if (buf) {
-            objectUrl = URL.createObjectURL(buf);
-            (_a = prefetch_state_1.preloadRef.current) === null || _a === void 0 ? void 0 : _a.setPreloads((p) => ({
-                ...p,
-                [src]: objectUrl,
-            }));
-            resolve(objectUrl);
+        if (method === 'base64') {
+            return blobToBase64(buf);
         }
+        return URL.createObjectURL(buf);
+    })
+        .then((url) => {
+        if (canceled) {
+            return;
+        }
+        objectUrl = url;
+        (0, prefetch_state_js_1.setPreloads)((p) => ({
+            ...p,
+            [src]: objectUrl,
+        }));
+        resolve(objectUrl);
     })
         .catch((err) => {
         reject(err);
     });
     return {
         free: () => {
-            var _a;
             if (objectUrl) {
-                URL.revokeObjectURL(objectUrl);
-                (_a = prefetch_state_1.preloadRef.current) === null || _a === void 0 ? void 0 : _a.setPreloads((p) => {
+                if (method === 'blob-url') {
+                    URL.revokeObjectURL(objectUrl);
+                }
+                (0, prefetch_state_js_1.setPreloads)((p) => {
                     const copy = { ...p };
                     delete copy[src];
                     return copy;

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

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

package/dist/cjs/random.d.ts

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

package/dist/{random.js → cjs/random.js}

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.random = void 0;
+/* eslint-disable no-bitwise */
 function mulberry32(a) {
     let t = a + 0x6d2b79f5;
     t = Math.imul(t ^ (t >>> 15), t | 1);
@@ -19,9 +20,8 @@ function hashCode(str) {
     return hash;
 }
 /**
- * A deterministic pseudo-random number generator.
- * Pass in the same seed and get the same pseudorandom number.
- * See: https://remotion.dev/docs/random
+ * @description A deterministic pseudo-random number generator. Pass in the same seed and get the same pseudorandom number.
+ * @see [Documentation](https://remotion.dev/docs/random)
  */
 const random = (seed, dummy) => {
     if (dummy !== undefined) {

package/dist/{register-root.d.ts → cjs/register-root.d.ts}

@@ -1,4 +1,8 @@
 import type React from 'react';
+/**
+ * @description This function registers the root component of the Remotion project
+ * @see [Documentation](https://www.remotion.dev/docs/register-root)
+ */
 export declare const registerRoot: (comp: React.FC) => void;
 export declare const getRoot: () => React.FC<{}> | null;
 export declare const waitForRoot: (fn: (comp: React.FC) => void) => (() => void);

package/dist/{register-root.js → cjs/register-root.js}

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitForRoot = exports.getRoot = exports.registerRoot = void 0;
 let Root = null;
 let listeners = [];
+/**
+ * @description This function registers the root component of the Remotion project
+ * @see [Documentation](https://www.remotion.dev/docs/register-root)
+ */
 const registerRoot = (comp) => {
     if (!comp) {
         throw new Error(`You must pass a React component to registerRoot(), but ${JSON.stringify(comp)} was passed.`);

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

@@ -0,0 +1,8 @@
+import type { AnyZodObject } from 'zod';
+import type { TCompMetadataWithCalcFunction } from './CompositionManager.js';
+import type { VideoConfig } from './video-config.js';
+export declare const resolveVideoConfig: ({ composition, editorProps: editorPropsOrUndefined, signal, }: {
+    composition: TCompMetadataWithCalcFunction<AnyZodObject, Record<string, unknown>>;
+    editorProps: object;
+    signal: AbortSignal;
+}) => VideoConfig | Promise<VideoConfig>;

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

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveVideoConfig = void 0;
+const input_props_js_1 = require("./config/input-props.js");
+const get_environment_js_1 = require("./get-environment.js");
+const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
+const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
+const validate_fps_js_1 = require("./validation/validate-fps.js");
+const resolveVideoConfig = ({ composition, editorProps: editorPropsOrUndefined, signal, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const calculatedProm = composition.calculateMetadata
+        ? composition.calculateMetadata({
+            defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
+            props: {
+                ...((_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {}),
+                ...(editorPropsOrUndefined !== null && editorPropsOrUndefined !== void 0 ? editorPropsOrUndefined : {}),
+                ...(typeof window === 'undefined' ||
+                    (0, get_environment_js_1.getRemotionEnvironment)() === 'player-development' ||
+                    (0, get_environment_js_1.getRemotionEnvironment)() === 'player-production'
+                    ? {}
+                    : (_c = (0, input_props_js_1.getInputProps)()) !== null && _c !== void 0 ? _c : {}),
+            },
+            abortSignal: signal,
+        })
+        : null;
+    if (calculatedProm !== null &&
+        typeof calculatedProm === 'object' &&
+        'then' in calculatedProm) {
+        return calculatedProm.then((c) => {
+            var _a, _b, _c;
+            const { height, width, durationInFrames, fps } = validateCalculated({
+                calculated: c,
+                composition,
+            });
+            return {
+                width,
+                height,
+                fps,
+                durationInFrames,
+                id: composition.id,
+                defaultProps: (_a = composition.defaultProps) !== null && _a !== void 0 ? _a : {},
+                props: (_c = (_b = c.props) !== null && _b !== void 0 ? _b : composition.defaultProps) !== null && _c !== void 0 ? _c : {},
+            };
+        });
+    }
+    const data = validateCalculated({
+        calculated: calculatedProm,
+        composition,
+    });
+    if (calculatedProm === null) {
+        return {
+            ...data,
+            id: composition.id,
+            defaultProps: (_d = composition.defaultProps) !== null && _d !== void 0 ? _d : {},
+            props: (_e = composition.defaultProps) !== null && _e !== void 0 ? _e : {},
+        };
+    }
+    return {
+        ...data,
+        id: composition.id,
+        defaultProps: (_f = composition.defaultProps) !== null && _f !== void 0 ? _f : {},
+        props: (_h = (_g = calculatedProm.props) !== null && _g !== void 0 ? _g : composition.defaultProps) !== null && _h !== void 0 ? _h : {},
+    };
+};
+exports.resolveVideoConfig = resolveVideoConfig;
+const validateCalculated = ({ composition, calculated, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const calculateMetadataErrorLocation = `calculated by calculateMetadata() for the composition "${composition.id}"`;
+    const defaultErrorLocation = `of the "<Composition />" component with the id "${composition.id}"`;
+    const width = (_b = (_a = calculated === null || calculated === void 0 ? void 0 : calculated.width) !== null && _a !== void 0 ? _a : composition.width) !== null && _b !== void 0 ? _b : undefined;
+    (0, validate_dimensions_js_1.validateDimension)(width, 'width', (calculated === null || calculated === void 0 ? void 0 : calculated.width) ? calculateMetadataErrorLocation : defaultErrorLocation);
+    const height = (_d = (_c = calculated === null || calculated === void 0 ? void 0 : calculated.height) !== null && _c !== void 0 ? _c : composition.height) !== null && _d !== void 0 ? _d : undefined;
+    (0, validate_dimensions_js_1.validateDimension)(height, 'height', (calculated === null || calculated === void 0 ? void 0 : calculated.height) ? calculateMetadataErrorLocation : defaultErrorLocation);
+    const fps = (_f = (_e = calculated === null || calculated === void 0 ? void 0 : calculated.fps) !== null && _e !== void 0 ? _e : composition.fps) !== null && _f !== void 0 ? _f : null;
+    (0, validate_fps_js_1.validateFps)(fps, (calculated === null || calculated === void 0 ? void 0 : calculated.fps) ? calculateMetadataErrorLocation : defaultErrorLocation, false);
+    const durationInFrames = (_h = (_g = calculated === null || calculated === void 0 ? void 0 : calculated.durationInFrames) !== null && _g !== void 0 ? _g : composition.durationInFrames) !== null && _h !== void 0 ? _h : null;
+    (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, {
+        allowFloats: false,
+        component: `of the "<Composition />" component with the id "${composition.id}"`,
+    });
+    return { width, height, fps, durationInFrames };
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const flattenChildren: (children: React.ReactNode) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];

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

@@ -0,0 +1,17 @@
+import type { FC, PropsWithChildren } from 'react';
+import type { LayoutAndStyle, SequenceProps } from '../Sequence.js';
+type SeriesSequenceProps = PropsWithChildren<{
+    durationInFrames: number;
+    offset?: number;
+} & Pick<SequenceProps, 'layout' | 'name'> & LayoutAndStyle>;
+declare const SeriesSequence: import("react").ForwardRefExoticComponent<SeriesSequenceProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @description with this component, you can easily stitch together scenes that should play sequentially after another.
+ * @see [Documentation](https://www.remotion.dev/docs/series)
+ */
+declare const Series: FC<{
+    children: React.ReactNode;
+}> & {
+    Sequence: typeof SeriesSequence;
+};
+export { Series };