remotion 3.3.44 → 3.3.51

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

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

package/dist/esm/play-and-handle-not-allowed-error.js

@@ -0,0 +1,40 @@
+export const playAndHandleNotAllowedError = (mediaRef, mediaType) => {
+    const { current } = mediaRef;
+    if (!current) {
+        return;
+    }
+    const prom = current.play();
+    if (prom.catch) {
+        prom.catch((err) => {
+            if (!current) {
+                return;
+            }
+            // Pause was called after play in Chrome
+            if (err.message.includes('request was interrupted by a call to pause')) {
+                return;
+            }
+            // Pause was called after play in Safari
+            if (err.message.includes('The operation was aborted.')) {
+                return;
+            }
+            // Pause was called after play in Firefox
+            if (err.message.includes('The fetching process for the media resource was aborted by the user agent')) {
+                return;
+            }
+            // Got replaced by a different audio source in Chromium
+            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);
+                current.muted = true;
+                current.play();
+            }
+        });
+    }
+};

package/dist/esm/portal-node.d.ts

@@ -0,0 +1 @@
+export declare const portalNode: () => HTMLElement;

package/dist/esm/portal-node.js

@@ -0,0 +1,19 @@
+let _portalNode = null;
+export const portalNode = () => {
+    if (!_portalNode) {
+        if (typeof document === 'undefined') {
+            throw new Error('Tried to call an API that only works in the browser from outside the browser');
+        }
+        _portalNode = document.createElement('div');
+        _portalNode.style.position = 'absolute';
+        _portalNode.style.top = '0px';
+        _portalNode.style.left = '0px';
+        _portalNode.style.right = '0px';
+        _portalNode.style.bottom = '0px';
+        _portalNode.style.width = '100%';
+        _portalNode.style.height = '100%';
+        _portalNode.style.display = 'flex';
+        _portalNode.style.flexDirection = 'column';
+    }
+    return _portalNode;
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+declare 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/esm/prefetch-state.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useState } from 'react';
+export const PreloadContext = createContext({});
+let preloads = {};
+let updaters = [];
+export const setPreloads = (updater) => {
+    preloads = updater(preloads);
+    updaters.forEach((u) => u());
+};
+export const PrefetchProvider = ({ children }) => {
+    const [_preloads, _setPreloads] = useState(() => preloads);
+    useEffect(() => {
+        const updaterFunction = () => {
+            _setPreloads(preloads);
+        };
+        updaters.push(updaterFunction);
+        return () => {
+            updaters = updaters.filter((u) => u !== updaterFunction);
+        };
+    }, []);
+    return (_jsx(PreloadContext.Provider, { value: _preloads, children: children }));
+};

package/dist/esm/prefetch.d.ts

@@ -0,0 +1,9 @@
+export declare const usePreload: (src: string) => string;
+declare type FetchAndPreload = {
+    free: () => void;
+    waitUntilDone: () => Promise<string>;
+};
+export declare const prefetch: (src: string, options?: {
+    method?: 'blob-url' | 'base64';
+}) => FetchAndPreload;
+export {};

package/dist/esm/prefetch.js

@@ -0,0 +1,103 @@
+import { useContext } from 'react';
+import { getRemotionEnvironment } from './get-environment.js';
+import { PreloadContext, setPreloads } from './prefetch-state.js';
+export const usePreload = (src) => {
+    var _a;
+    const preloads = useContext(PreloadContext);
+    return (_a = preloads[src]) !== null && _a !== void 0 ? _a : src;
+};
+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);
+    });
+};
+export 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 (getRemotionEnvironment() === 'rendering') {
+        return {
+            free: () => undefined,
+            waitUntilDone: () => Promise.resolve(src),
+        };
+    }
+    let canceled = false;
+    let objectUrl = null;
+    let resolve = () => undefined;
+    let reject = () => undefined;
+    const waitUntilDone = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    const controller = new AbortController();
+    let canBeAborted = true;
+    fetch(src, {
+        signal: controller.signal,
+    })
+        .then((res) => {
+        canBeAborted = false;
+        if (canceled) {
+            return null;
+        }
+        if (!res.ok) {
+            throw new Error(`HTTP error, status = ${res.status}`);
+        }
+        return res.blob();
+    })
+        .then((buf) => {
+        if (!buf) {
+            return;
+        }
+        if (method === 'base64') {
+            return blobToBase64(buf);
+        }
+        return URL.createObjectURL(buf);
+    })
+        .then((url) => {
+        if (canceled) {
+            return;
+        }
+        objectUrl = url;
+        setPreloads((p) => ({
+            ...p,
+            [src]: objectUrl,
+        }));
+        resolve(objectUrl);
+    })
+        .catch((err) => {
+        reject(err);
+    });
+    return {
+        free: () => {
+            if (objectUrl) {
+                if (method === 'blob-url') {
+                    URL.revokeObjectURL(objectUrl);
+                }
+                setPreloads((p) => {
+                    const copy = { ...p };
+                    delete copy[src];
+                    return copy;
+                });
+            }
+            else {
+                canceled = true;
+                if (canBeAborted) {
+                    try {
+                        controller.abort();
+                    }
+                    catch (e) { }
+                }
+            }
+        },
+        waitUntilDone: () => {
+            return waitUntilDone;
+        },
+    };
+};

package/dist/esm/random.d.ts

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

package/dist/esm/random.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-bitwise */
+function mulberry32(a) {
+    let t = a + 0x6d2b79f5;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+}
+function hashCode(str) {
+    let i = 0;
+    let chr = 0;
+    let hash = 0;
+    for (i = 0; i < str.length; i++) {
+        chr = str.charCodeAt(i);
+        hash = (hash << 5) - hash + chr;
+        hash |= 0; // Convert to 32bit integer
+    }
+    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
+ */
+export const random = (seed, dummy) => {
+    if (dummy !== undefined) {
+        throw new TypeError('random() takes only one argument');
+    }
+    if (seed === null) {
+        return Math.random();
+    }
+    if (typeof seed === 'string') {
+        return mulberry32(hashCode(seed));
+    }
+    if (typeof seed === 'number') {
+        return mulberry32(seed * 10000000000);
+    }
+    throw new Error('random() argument must be a number or a string');
+};

package/dist/esm/register-root.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+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/esm/register-root.js

@@ -0,0 +1,27 @@
+let Root = null;
+let listeners = [];
+export const registerRoot = (comp) => {
+    if (!comp) {
+        throw new Error(`You must pass a React component to registerRoot(), but ${JSON.stringify(comp)} was passed.`);
+    }
+    if (Root) {
+        throw new Error('registerRoot() was called more than once.');
+    }
+    Root = comp;
+    listeners.forEach((l) => {
+        l(comp);
+    });
+};
+export const getRoot = () => {
+    return Root;
+};
+export const waitForRoot = (fn) => {
+    if (Root) {
+        fn(Root);
+        return () => undefined;
+    }
+    listeners.push(fn);
+    return () => {
+        listeners = listeners.filter((l) => l !== fn);
+    };
+};

package/dist/esm/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/esm/series/flatten-children.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export const flattenChildren = (children) => {
+    const childrenArray = React.Children.toArray(children);
+    return childrenArray.reduce((flatChildren, child) => {
+        if (child.type === React.Fragment) {
+            return flatChildren.concat(flattenChildren(child.props
+                .children));
+        }
+        flatChildren.push(child);
+        return flatChildren;
+    }, []);
+};

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

@@ -0,0 +1,13 @@
+import type { FC, PropsWithChildren } from 'react';
+import type { LayoutAndStyle, SequenceProps } from '../Sequence.js';
+declare type SeriesSequenceProps = PropsWithChildren<{
+    durationInFrames: number;
+    offset?: number;
+} & Pick<SequenceProps, 'layout' | 'name'> & LayoutAndStyle>;
+declare const SeriesSequence: import("react").ForwardRefExoticComponent<SeriesSequenceProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Series: FC<{
+    children: React.ReactNode;
+}> & {
+    Sequence: typeof SeriesSequence;
+};
+export { Series };

package/dist/esm/series/index.js

@@ -0,0 +1,54 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Children, forwardRef, useMemo } from 'react';
+import { Sequence } from '../Sequence.js';
+import { validateDurationInFrames } from '../validation/validate-duration-in-frames.js';
+import { flattenChildren } from './flatten-children.js';
+const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
+    // Discard ref
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return _jsx(_Fragment, { children: children });
+};
+const SeriesSequence = forwardRef(SeriesSequenceRefForwardingFunction);
+const Series = ({ children }) => {
+    const childrenValue = useMemo(() => {
+        let startFrame = 0;
+        return Children.map(flattenChildren(children), (child, i) => {
+            var _a;
+            const castedChild = child;
+            if (typeof castedChild === 'string') {
+                // Don't throw if it's just some accidential whitespace
+                if (castedChild.trim() === '') {
+                    return null;
+                }
+                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as it's children, but you passed a string "${castedChild}"`);
+            }
+            if (castedChild.type !== SeriesSequence) {
+                throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as it's children, but got ${castedChild} instead`);
+            }
+            const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
+            if (!castedChild || !castedChild.props.children) {
+                throw new TypeError(`A <Series.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
+            }
+            const durationInFramesProp = castedChild.props.durationInFrames;
+            const { durationInFrames, children: _children, ...passedProps } = castedChild.props;
+            validateDurationInFrames(durationInFramesProp, `of a <Series.Sequence /> component`);
+            const offset = (_a = castedChild.props.offset) !== null && _a !== void 0 ? _a : 0;
+            if (Number.isNaN(offset)) {
+                throw new TypeError(`The "offset" property of a <Series.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
+            }
+            if (!Number.isFinite(offset)) {
+                throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+            }
+            if (offset % 1 !== 0) {
+                throw new TypeError(`The "offset" property of a <Series.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+            }
+            const currentStartFrame = startFrame + offset;
+            startFrame += durationInFramesProp + offset;
+            return (_jsx(Sequence, { from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
+        });
+    }, [children]);
+    /* eslint-disable react/jsx-no-useless-fragment */
+    return _jsx(_Fragment, { children: childrenValue });
+};
+Series.Sequence = SeriesSequence;
+export { Series };

package/dist/esm/setup-env-variables.d.ts

@@ -0,0 +1,2 @@
+export declare const ENV_VARIABLES_ENV_NAME: "ENV_VARIABLES";
+export declare const setupEnvVariables: () => void;

package/dist/esm/setup-env-variables.js

@@ -0,0 +1,32 @@
+import { getRemotionEnvironment } from './get-environment.js';
+export const ENV_VARIABLES_ENV_NAME = 'ENV_VARIABLES';
+const getEnvVariables = () => {
+    if (getRemotionEnvironment() === 'rendering') {
+        const param = window.remotion_envVariables;
+        if (!param) {
+            return {};
+        }
+        return { ...JSON.parse(param), NODE_ENV: process.env.NODE_ENV };
+    }
+    if (getRemotionEnvironment() === 'preview') {
+        // Webpack will convert this to an object at compile time.
+        // Don't convert this syntax to a computed property.
+        return {
+            ...process.env.ENV_VARIABLES,
+            NODE_ENV: process.env.NODE_ENV,
+        };
+    }
+    throw new Error('Can only call getEnvVariables() if environment is `rendering` or `preview`');
+};
+export const setupEnvVariables = () => {
+    const env = getEnvVariables();
+    if (!window.process) {
+        window.process = {};
+    }
+    if (!window.process.env) {
+        window.process.env = {};
+    }
+    Object.keys(env).forEach((key) => {
+        window.process.env[key] = env[key];
+    });
+};

package/dist/esm/spring/index.d.ts

@@ -0,0 +1,27 @@
+import type { SpringConfig } from './spring-utils.js';
+/**
+ * Calculates a position based on physical parameters, start and end value, and time.
+ * @link https://www.remotion.dev/docs/spring
+ * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
+ * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
+ * @param {?Object} config optional object that allows you to customize the physical properties of the animation.
+ * @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
+ * @param {number} [config.damping=10] How hard the animation decelerates.
+ * @param {number} [config.stiffness=100] Affects bounciness of the animation.
+ * @param {boolean} [config.overshootClamping=false] Whether to prevent the animation going beyond the target value.
+ * @param {?number} [config.from] The initial value of the animation. Default `0`
+ * @param {?number} [config.to] The end value of the animation. Default `1`
+ * @param {?number} [config.durationInFrames] Stretch the duration of an animation to  a set value.. Default `undefined`
+ * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
+ */
+export declare function spring({ frame, fps, config, from, to, durationInFrames, durationRestThreshold, }: {
+    frame: number;
+    fps: number;
+    config?: Partial<SpringConfig>;
+    from?: number;
+    to?: number;
+    durationInFrames?: number;
+    durationRestThreshold?: number;
+}): number;
+export { measureSpring } from './measure-spring.js';
+export { SpringConfig } from './spring-utils.js';

package/dist/esm/spring/index.js

@@ -0,0 +1,50 @@
+import { validateFrame } from '../validate-frame.js';
+import { validateFps } from '../validation/validate-fps.js';
+import { validateSpringDuration } from '../validation/validation-spring-duration.js';
+import { measureSpring } from './measure-spring.js';
+import { springCalculation } from './spring-utils.js';
+/**
+ * Calculates a position based on physical parameters, start and end value, and time.
+ * @link https://www.remotion.dev/docs/spring
+ * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
+ * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
+ * @param {?Object} config optional object that allows you to customize the physical properties of the animation.
+ * @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
+ * @param {number} [config.damping=10] How hard the animation decelerates.
+ * @param {number} [config.stiffness=100] Affects bounciness of the animation.
+ * @param {boolean} [config.overshootClamping=false] Whether to prevent the animation going beyond the target value.
+ * @param {?number} [config.from] The initial value of the animation. Default `0`
+ * @param {?number} [config.to] The end value of the animation. Default `1`
+ * @param {?number} [config.durationInFrames] Stretch the duration of an animation to  a set value.. Default `undefined`
+ * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
+ */
+export function spring({ frame, fps, config = {}, from = 0, to = 1, durationInFrames, durationRestThreshold, }) {
+    validateSpringDuration(durationInFrames);
+    validateFrame(frame, Infinity);
+    validateFps(fps, 'to spring()', false);
+    const durationRatio = durationInFrames === undefined
+        ? 1
+        : durationInFrames /
+            measureSpring({
+                fps,
+                config,
+                from,
+                to,
+                threshold: durationRestThreshold,
+            });
+    const spr = springCalculation({
+        fps,
+        frame: frame / durationRatio,
+        config,
+        from,
+        to,
+    });
+    if (!config.overshootClamping) {
+        return spr.current;
+    }
+    if (to >= from) {
+        return Math.min(spr.current, to);
+    }
+    return Math.max(spr.current, to);
+}
+export { measureSpring } from './measure-spring.js';

package/dist/esm/spring/measure-spring.d.ts

@@ -0,0 +1,8 @@
+import type { SpringConfig } from './spring-utils.js';
+export declare function measureSpring({ fps, config, threshold, from, to, }: {
+    fps: number;
+    config?: Partial<SpringConfig>;
+    threshold?: number;
+    from?: number;
+    to?: number;
+}): number;

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

@@ -0,0 +1,60 @@
+import { validateFps } from '../validation/validate-fps.js';
+import { springCalculation } from './spring-utils.js';
+export function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1, }) {
+    if (typeof threshold !== 'number') {
+        throw new TypeError(`threshold must be a number, got ${threshold} of type ${typeof threshold}`);
+    }
+    if (threshold === 0) {
+        return Infinity;
+    }
+    if (threshold === 1) {
+        return 0;
+    }
+    if (isNaN(threshold)) {
+        throw new TypeError('Threshold is NaN');
+    }
+    if (!Number.isFinite(threshold)) {
+        throw new TypeError('Threshold is not finite');
+    }
+    if (threshold < 0) {
+        throw new TypeError('Threshold is below 0');
+    }
+    validateFps(fps, 'to the measureSpring() function', false);
+    const range = Math.abs(from - to);
+    let frame = 0;
+    let finishedFrame = 0;
+    const calc = () => {
+        return springCalculation({
+            fps,
+            frame,
+            config,
+            from,
+            to,
+        });
+    };
+    let animation = calc();
+    const calcDifference = () => {
+        return (Math.abs(animation.current - animation.toValue) /
+            (range === 0 ? 1 : range));
+    };
+    let difference = calcDifference();
+    while (difference >= threshold) {
+        frame++;
+        animation = calc();
+        difference = calcDifference();
+    }
+    // Since spring is bouncy, just because it's under the threshold we
+    // cannot be sure it's done. We need to animate further until it stays in the
+    // threshold for, say, 20 frames.
+    finishedFrame = frame;
+    for (let i = 0; i < 20; i++) {
+        frame++;
+        animation = calc();
+        difference = calcDifference();
+        if (difference >= threshold) {
+            i = 0;
+            finishedFrame = frame + 1;
+        }
+    }
+    return finishedFrame;
+}

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

@@ -0,0 +1,21 @@
+declare type AnimationNode = {
+    lastTimestamp: number;
+    toValue: number;
+    current: number;
+    velocity: number;
+    prevPosition?: number;
+};
+export declare type SpringConfig = {
+    damping: number;
+    mass: number;
+    stiffness: number;
+    overshootClamping: boolean;
+};
+export declare function springCalculation({ from, to, frame, fps, config, }: {
+    from?: number;
+    to?: number;
+    frame: number;
+    fps: number;
+    config?: Partial<SpringConfig>;
+}): AnimationNode;
+export {};