remotion 4.0.0-webhook.27 → 4.1.0-alpha1

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { VolumeProp } from '../volume-prop.js';
+export type RemotionMainAudioProps = {
+    startFrom?: number;
+    endAt?: number;
+};
+export type RemotionAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce' | 'onResize' | 'onResizeCapture'> & {
+    volume?: VolumeProp;
+    playbackRate?: number;
+    acceptableTimeShiftInSeconds?: number;
+    allowAmplificationDuringRender?: boolean;
+};

package/dist/{audio → cjs/audio}/shared-audio-tags.d.ts

@@ -1,5 +1,6 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
-import type { RemotionAudioProps } from './props';
+import type { RemotionAudioProps } from './props.js';
 /**
  * This functionality of Remotion will keep a certain amount
  * of <audio> tags pre-mounted and by default filled with an empty audio track.
@@ -11,16 +12,20 @@ import type { RemotionAudioProps } from './props';
  *
  * The behavior can be disabled by passing `0` as the number of shared audio tracks.
  */
-declare type AudioElem = {
+type AudioElem = {
     id: number;
     props: RemotionAudioProps;
     el: React.RefObject<HTMLAudioElement>;
     audioId: string;
 };
-declare type SharedContext = {
+type SharedContext = {
     registerAudio: (aud: RemotionAudioProps, audioId: string) => AudioElem;
     unregisterAudio: (id: number) => void;
-    updateAudio: (id: number, aud: RemotionAudioProps) => void;
+    updateAudio: (options: {
+        id: number;
+        aud: RemotionAudioProps;
+        audioId: string;
+    }) => void;
     playAllAudios: () => void;
     numberOfAudioTags: number;
 };
@@ -28,6 +33,7 @@ export declare const SharedAudioContext: React.Context<SharedContext | null>;
 export declare const SharedAudioContextProvider: React.FC<{
     numberOfAudioTags: number;
     children: React.ReactNode;
+    component: LazyExoticComponent<ComponentType<Record<string, unknown> | undefined>> | null;
 }>;
 export declare const useSharedAudio: (aud: RemotionAudioProps, audioId: string) => AudioElem;
 export {};

package/dist/{audio → cjs/audio}/shared-audio-tags.js

@@ -59,7 +59,7 @@ const didPropChange = (key, newProp, prevProp) => {
     return true;
 };
 exports.SharedAudioContext = (0, react_1.createContext)(null);
-const SharedAudioContextProvider = ({ children, numberOfAudioTags }) => {
+const SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) => {
     const audios = (0, react_1.useRef)([]);
     const [initialNumberOfAudioTags] = (0, react_1.useState)(numberOfAudioTags);
     if (numberOfAudioTags !== initialNumberOfAudioTags) {
@@ -133,7 +133,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags }) => {
         audios.current = (_a = audios.current) === null || _a === void 0 ? void 0 : _a.filter((a) => a.id !== id);
         rerenderAudios();
     }, [refs, rerenderAudios]);
-    const updateAudio = (0, react_1.useCallback)((id, aud) => {
+    const updateAudio = (0, react_1.useCallback)(({ aud, audioId, id, }) => {
         var _a;
         let changed = false;
         audios.current = (_a = audios.current) === null || _a === void 0 ? void 0 : _a.map((prevA) => {
@@ -146,6 +146,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags }) => {
                 return {
                     ...prevA,
                     props: aud,
+                    audioId,
                 };
             }
             return prevA;
@@ -175,12 +176,29 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags }) => {
         unregisterAudio,
         updateAudio,
     ]);
+    // Fixing a bug: In React, if a component is unmounted using useInsertionEffect, then
+    // the cleanup function does sometimes not work properly. That is why when we
+    // are changing the composition, we reset the audio state.
+    // TODO: Possibly this does not save the problem completely, since the
+    // if an audio tag that is inside a sequence will also not be removed
+    // from the shared audios.
+    const resetAudio = (0, react_1.useCallback)(() => {
+        takenAudios.current = new Array(numberOfAudioTags).fill(false);
+        audios.current = [];
+        rerenderAudios();
+    }, [numberOfAudioTags, rerenderAudios]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            resetAudio();
+        };
+    }, [component, resetAudio]);
     return ((0, jsx_runtime_1.jsxs)(exports.SharedAudioContext.Provider, { value: value, children: [refs.map(({ id, ref }) => {
                 return (0, jsx_runtime_1.jsx)("audio", { ref: ref, src: EMPTY_AUDIO }, id);
             }), children] }));
 };
 exports.SharedAudioContextProvider = SharedAudioContextProvider;
 const useSharedAudio = (aud, audioId) => {
+    var _a;
     const ctx = (0, react_1.useContext)(exports.SharedAudioContext);
     /**
      * We work around this in React 18 so an audio tag will only register itself once
@@ -200,20 +218,24 @@ const useSharedAudio = (aud, audioId) => {
      * Effects in React 18 fire twice, and we are looking for a way to only fire it once.
      * - useInsertionEffect only fires once. If it's available we are in React 18.
      * - useLayoutEffect only fires once in React 17.
+     *
+     * Need to import it from React to fix React 17 ESM support.
      */
-    const effectToUse = react_1.useInsertionEffect !== null && react_1.useInsertionEffect !== void 0 ? react_1.useInsertionEffect : react_1.useLayoutEffect;
-    effectToUse(() => {
-        if (ctx && ctx.numberOfAudioTags > 0) {
-            ctx.updateAudio(elem.id, aud);
-        }
-    }, [aud, ctx, elem.id]);
-    effectToUse(() => {
-        return () => {
+    const effectToUse = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_1.default.useLayoutEffect;
+    if (typeof document !== 'undefined') {
+        effectToUse(() => {
             if (ctx && ctx.numberOfAudioTags > 0) {
-                ctx.unregisterAudio(elem.id);
+                ctx.updateAudio({ id: elem.id, aud, audioId });
             }
-        };
-    }, [ctx, elem.id]);
+        }, [aud, ctx, elem.id, audioId]);
+        effectToUse(() => {
+            return () => {
+                if (ctx && ctx.numberOfAudioTags > 0) {
+                    ctx.unregisterAudio(elem.id);
+                }
+            };
+        }, [ctx, elem.id]);
+    }
     return elem;
 };
 exports.useSharedAudio = useSharedAudio;

package/dist/{audio → cjs/audio}/use-audio-frame.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFrameForVolumeProp = exports.useMediaStartsAt = void 0;
 const react_1 = require("react");
-const Sequence_1 = require("../Sequence");
-const use_current_frame_1 = require("../use-current-frame");
+const SequenceContext_js_1 = require("../SequenceContext.js");
+const use_current_frame_js_1 = require("../use-current-frame.js");
 const useMediaStartsAt = () => {
     var _a;
-    const parentSequence = (0, react_1.useContext)(Sequence_1.SequenceContext);
+    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const startsAt = Math.min(0, (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0);
     return startsAt;
 };
@@ -16,7 +16,7 @@ exports.useMediaStartsAt = useMediaStartsAt;
  * we calculate the way more intuitive value for currentFrame
  */
 const useFrameForVolumeProp = () => {
-    const frame = (0, use_current_frame_1.useCurrentFrame)();
+    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const startsAt = (0, exports.useMediaStartsAt)();
     return frame + startsAt;
 };

package/dist/cjs/cancel-render.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description When you invoke this function, Remotion will stop rendering all the frames without any retries
+ * @see [Documentation](https://www.remotion.dev/docs/cancel-render)
+ */
+export declare function cancelRender(err: unknown): never;

package/dist/cjs/cancel-render.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cancelRender = void 0;
+const isErrorLike = (err) => {
+    if (err === null) {
+        return false;
+    }
+    if (typeof err !== 'object') {
+        return false;
+    }
+    if (!('stack' in err)) {
+        return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+    // @ts-ignore we just asserted
+    if (typeof err.stack !== 'string') {
+        return false;
+    }
+    if (!('message' in err)) {
+        return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+    // @ts-ignore we just asserted
+    if (typeof err.message !== 'string') {
+        return false;
+    }
+    return true;
+};
+/**
+ * @description When you invoke this function, Remotion will stop rendering all the frames without any retries
+ * @see [Documentation](https://www.remotion.dev/docs/cancel-render)
+ */
+function cancelRender(err) {
+    let error;
+    if (isErrorLike(err)) {
+        error = err;
+    }
+    else if (typeof err === 'string') {
+        error = Error(err);
+    }
+    else {
+        error = Error('Rendering was cancelled');
+    }
+    window.remotion_cancelledError = error.stack;
+    throw error;
+}
+exports.cancelRender = cancelRender;

package/dist/{config → cjs/config}/input-props.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getInputProps = void 0;
-const get_environment_1 = require("../get-environment");
+const get_environment_js_1 = require("../get-environment.js");
 let didWarnSSRImport = false;
 const warnOnceSSRImport = () => {
     if (didWarnSSRImport) {
@@ -17,8 +17,8 @@ const getInputProps = () => {
         warnOnceSSRImport();
         return {};
     }
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'player-development' ||
-        (0, get_environment_1.getRemotionEnvironment)() === 'player-production') {
+    if ((0, get_environment_js_1.getRemotionEnvironment)() === 'player-development' ||
+        (0, get_environment_js_1.getRemotionEnvironment)() === 'player-production') {
         throw new Error('You cannot call `getInputProps()` from a <Player>. Instead, the props are available as React props from component that you passed as `component` prop.');
     }
     const param = window.remotion_inputProps;

package/dist/{delay-render.d.ts → cjs/delay-render.d.ts}

@@ -1,14 +1,14 @@
 export declare const DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 /**
- * Call this function to tell Remotion to wait before capturing this frame until data has loaded. Use continueRender() to unblock the render.
+ * @description Call this function to tell Remotion to wait before capturing this frame until data has loaded. Use continueRender() to unblock the render.
  * @param label _optional_ A label to identify the call in case it does time out.
  * @returns {number} An identifier to be passed to continueRender().
- * @link https://www.remotion.dev/docs/delay-render
+ * @see [Documentation](https://www.remotion.dev/docs/delay-render)
  */
 export declare const delayRender: (label?: string) => number;
 /**
- * Unblock a render that has been blocked by delayRender()
+ * @description Unblock a render that has been blocked by delayRender()
  * @param handle The return value of delayRender().
- * @link https://www.remotion.dev/docs/continue-render
+ * @see [Documentation](https://www.remotion.dev/docs/continue-render)
  */
 export declare const continueRender: (handle: number) => void;

package/dist/{delay-render.js → cjs/delay-render.js}

@@ -1,20 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.continueRender = exports.delayRender = exports.DELAY_RENDER_CALLSTACK_TOKEN = void 0;
-const get_environment_1 = require("./get-environment");
-const truthy_1 = require("./truthy");
+const get_environment_js_1 = require("./get-environment.js");
+const truthy_js_1 = require("./truthy.js");
 if (typeof window !== 'undefined') {
-    window.ready = false;
+    window.remotion_renderReady = false;
 }
 let handles = [];
 const timeouts = {};
 exports.DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
 const defaultTimeout = 30000;
 /**
- * Call this function to tell Remotion to wait before capturing this frame until data has loaded. Use continueRender() to unblock the render.
+ * @description Call this function to tell Remotion to wait before capturing this frame until data has loaded. Use continueRender() to unblock the render.
  * @param label _optional_ A label to identify the call in case it does time out.
  * @returns {number} An identifier to be passed to continueRender().
- * @link https://www.remotion.dev/docs/delay-render
+ * @see [Documentation](https://www.remotion.dev/docs/delay-render)
  */
 const delayRender = (label) => {
     var _a, _b, _c;
@@ -25,7 +25,7 @@ const delayRender = (label) => {
     const handle = Math.random();
     handles.push(handle);
     const called = (_b = (_a = Error().stack) === null || _a === void 0 ? void 0 : _a.replace(/^Error/g, '')) !== null && _b !== void 0 ? _b : '';
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if ((0, get_environment_js_1.getRemotionEnvironment)() === 'rendering') {
         const timeoutToUse = typeof window === 'undefined'
             ? defaultTimeout
             : ((_c = window.remotion_puppeteerTimeout) !== null && _c !== void 0 ? _c : defaultTimeout) - 2000;
@@ -37,21 +37,21 @@ const delayRender = (label) => {
                 exports.DELAY_RENDER_CALLSTACK_TOKEN,
                 called,
             ]
-                .filter(truthy_1.truthy)
+                .filter(truthy_js_1.truthy)
                 .join(' ');
             throw new Error(message);
         }, timeoutToUse);
     }
     if (typeof window !== 'undefined') {
-        window.ready = false;
+        window.remotion_renderReady = false;
     }
     return handle;
 };
 exports.delayRender = delayRender;
 /**
- * Unblock a render that has been blocked by delayRender()
+ * @description Unblock a render that has been blocked by delayRender()
  * @param handle The return value of delayRender().
- * @link https://www.remotion.dev/docs/continue-render
+ * @see [Documentation](https://www.remotion.dev/docs/continue-render)
  */
 const continueRender = (handle) => {
     if (typeof handle === 'undefined') {
@@ -63,7 +63,7 @@ const continueRender = (handle) => {
     }
     handles = handles.filter((h) => {
         if (h === handle) {
-            if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+            if ((0, get_environment_js_1.getRemotionEnvironment)() === 'rendering') {
                 clearTimeout(timeouts[handle]);
             }
             return false;
@@ -71,7 +71,7 @@ const continueRender = (handle) => {
         return true;
     });
     if (handles.length === 0 && typeof window !== 'undefined') {
-        window.ready = true;
+        window.remotion_renderReady = true;
     }
 };
 exports.continueRender = continueRender;

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

@@ -1,3 +1,7 @@
+/**
+ * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
+ * @see [Documentation](https://www.remotion.dev/docs/easing)
+ */
 export declare class Easing {
     static step0(n: number): number;
     static step1(n: number): number;

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

@@ -2,7 +2,11 @@
 // Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/Easing.js
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Easing = void 0;
-const bezier_1 = require("./bezier");
+const bezier_js_1 = require("./bezier.js");
+/**
+ * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
+ * @see [Documentation](https://www.remotion.dev/docs/easing)
+ */
 class Easing {
     static step0(n) {
         return n > 0 ? 1 : 0;
@@ -57,7 +61,7 @@ class Easing {
         return 7.5625 * t2 * t2 + 0.984375;
     }
     static bezier(x1, y1, x2, y2) {
-        return (0, bezier_1.bezier)(x1, y1, x2, y2);
+        return (0, bezier_js_1.bezier)(x1, y1, x2, y2);
     }
     static in(easing) {
         return easing;

package/dist/cjs/freeze.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type FreezeProps = {
+    frame: number;
+    children: React.ReactNode;
+};
+/**
+ * @description This method freezes all of its children to the frame that you specify as a prop
+ * @see [Documentation](https://www.remotion.dev/docs/freeze)
+ */
+export declare const Freeze: React.FC<FreezeProps>;
+export {};

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

@@ -3,8 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Freeze = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Sequence_1 = require("./Sequence");
-const timeline_position_state_1 = require("./timeline-position-state");
+const SequenceContext_js_1 = require("./SequenceContext.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
+/**
+ * @description This method freezes all of its children to the frame that you specify as a prop
+ * @see [Documentation](https://www.remotion.dev/docs/freeze)
+ */
 const Freeze = ({ frame, children }) => {
     if (typeof frame === 'undefined') {
         throw new Error(`The <Freeze /> component requires a 'frame' prop, but none was passed.`);
@@ -18,7 +22,7 @@ const Freeze = ({ frame, children }) => {
     if (!Number.isFinite(frame)) {
         throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frame}.`);
     }
-    const context = (0, react_1.useContext)(timeline_position_state_1.TimelineContext);
+    const context = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const value = (0, react_1.useMemo)(() => {
         return {
             ...context,
@@ -29,6 +33,6 @@ const Freeze = ({ frame, children }) => {
             frame,
         };
     }, [context, frame]);
-    return ((0, jsx_runtime_1.jsx)(timeline_position_state_1.TimelineContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(Sequence_1.SequenceContext.Provider, { value: null, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: null, children: children }) }));
 };
 exports.Freeze = Freeze;

package/dist/cjs/get-environment.d.ts

@@ -0,0 +1,3 @@
+export type RemotionEnvironment = 'preview' | 'rendering' | 'player-development' | 'player-production';
+export declare const getRemotionEnvironment: () => RemotionEnvironment;
+export declare const useRemotionEnvironment: () => RemotionEnvironment;

package/dist/{get-environment.js → cjs/get-environment.js}

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRemotionEnvironment = void 0;
+exports.useRemotionEnvironment = exports.getRemotionEnvironment = void 0;
+const is_player_js_1 = require("./is-player.js");
 const getRemotionEnvironment = () => {
     if (process.env.NODE_ENV === 'production') {
         if (typeof window !== 'undefined' && window.remotion_isPlayer) {
@@ -8,7 +9,7 @@ const getRemotionEnvironment = () => {
         }
         return 'rendering';
     }
-    // The Jest framework sets NODE_ENV as test.
+    // The Vitest framework sets NODE_ENV as test.
     // Right now we don't need to treat it in a special
     // way which is good - defaulting to `rendering`.
     if (process.env.NODE_ENV === 'test') {
@@ -20,3 +21,14 @@ const getRemotionEnvironment = () => {
     return 'preview';
 };
 exports.getRemotionEnvironment = getRemotionEnvironment;
+const useRemotionEnvironment = () => {
+    const isPlayer = (0, is_player_js_1.useIsPlayer)();
+    if (isPlayer) {
+        if (process.env.NODE_ENV === 'production') {
+            return 'player-production';
+        }
+        return 'player-development';
+    }
+    return (0, exports.getRemotionEnvironment)();
+};
+exports.useRemotionEnvironment = useRemotionEnvironment;

package/dist/cjs/get-preview-dom-element.d.ts

@@ -0,0 +1,2 @@
+export declare const REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
+export declare const getPreviewDomElement: () => HTMLElement | null;

package/dist/cjs/get-preview-dom-element.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPreviewDomElement = exports.REMOTION_STUDIO_CONTAINER_ELEMENT = void 0;
+exports.REMOTION_STUDIO_CONTAINER_ELEMENT = '__remotion-studio-container';
+const getPreviewDomElement = () => {
+    return document.getElementById(exports.REMOTION_STUDIO_CONTAINER_ELEMENT);
+};
+exports.getPreviewDomElement = getPreviewDomElement;

package/dist/cjs/get-static-files.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @description The function array containing all files in the public/ folder. You can reference them by using staticFile().
+ * @see [Documentation](https://www.remotion.dev/docs/getstaticfiles)
+ */
+export declare const getStaticFiles: () => StaticFile[];
+export type StaticFile = {
+    /**
+     * A string that you can pass to the `src` attribute of an `<Audio>`, `<Img>` and `<Video>` element.
+     */
+    src: string;
+    /**
+     * The filepath of the file, relative to the public folder.
+     * Example: `subfolder/image.png`
+     */
+    name: string;
+    sizeInBytes: number;
+    /**
+     * UNIX timestamp in milliseconds
+     */
+    lastModified: number;
+};

package/dist/cjs/get-static-files.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStaticFiles = void 0;
+let warnedServer = false;
+let warnedPlayer = false;
+const warnServerOnce = () => {
+    if (warnedServer) {
+        return;
+    }
+    warnedServer = true;
+    console.warn('Called getStaticFiles() on the server. The API is only available in the browser. An empty array was returned.');
+};
+const warnPlayerOnce = () => {
+    if (warnedPlayer) {
+        return;
+    }
+    warnedPlayer = true;
+    console.warn('Called getStaticFiles() while using the Remotion Player. The API is only available while using the Remotion Studio. An empty array was returned.');
+};
+/**
+ * @description The function array containing all files in the public/ folder. You can reference them by using staticFile().
+ * @see [Documentation](https://www.remotion.dev/docs/getstaticfiles)
+ */
+const getStaticFiles = () => {
+    if (typeof document === 'undefined') {
+        warnServerOnce();
+        return [];
+    }
+    if (window.remotion_isPlayer) {
+        warnPlayerOnce();
+        return [];
+    }
+    return window.remotion_staticFiles;
+};
+exports.getStaticFiles = getStaticFiles;