remotion 3.3.45 → 3.3.51

package/dist/esm/AbsoluteFill.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+const AbsoluteFillRefForwarding = (props, ref) => {
+    const { style, ...other } = props;
+    const actualStyle = useMemo(() => {
+        return {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            ...style,
+        };
+    }, [style]);
+    return _jsx("div", { ref: ref, style: actualStyle, ...other });
+};
+/**
+ * An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @link https://www.remotion.dev/docs/absolute-fill
+ */
+export const AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);

package/dist/esm/CanUseRemotionHooks.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CanUseRemotionHooks: React.Context<boolean>;
+export declare const CanUseRemotionHooksProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/esm/CanUseRemotionHooks.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext } from 'react';
+export const CanUseRemotionHooks = createContext(false);
+export const CanUseRemotionHooksProvider = ({ children }) => {
+    return (_jsx(CanUseRemotionHooks.Provider, { value: true, children: children }));
+};

package/dist/esm/Clipper.d.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+export declare const Clipper: React.FC<{
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+}>;

package/dist/esm/Clipper.js

@@ -0,0 +1,20 @@
+import { useContext, useEffect } from 'react';
+import { NativeLayersContext } from './NativeLayers.js';
+export const Clipper = ({ height, width, x, y }) => {
+    const { setClipRegion } = useContext(NativeLayersContext);
+    useEffect(() => {
+        setClipRegion((c) => {
+            if (c === 'hide') {
+                throw new Error('Cannot render <Clipper>, because another <Null> is already rendered');
+            }
+            if (c === null) {
+                return { height, width, x, y };
+            }
+            throw new Error('Cannot render <Clipper>, because another component clipping the region was already rendered (most likely <Clipper>)');
+        });
+        return () => {
+            setClipRegion(null);
+        };
+    }, [height, setClipRegion, width, x, y]);
+    return null;
+};

package/dist/esm/Composition.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+import React from 'react';
+declare type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
+export declare type CompProps<T> = {
+    lazyComponent: () => Promise<{
+        default: LooseComponentType<T>;
+    }>;
+} | {
+    component: LooseComponentType<T>;
+};
+export declare type StillProps<T> = {
+    width: number;
+    height: number;
+    id: string;
+    defaultProps?: T;
+} & CompProps<T>;
+declare type CompositionProps<T> = StillProps<T> & {
+    fps: number;
+    durationInFrames: number;
+};
+export declare const Composition: <T>({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }: CompositionProps<T>) => React.ReactPortal | null;
+export declare const ClipComposition: React.FC<PropsWithChildren>;
+export {};

package/dist/esm/Composition.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, useContext, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { AbsoluteFill } from './AbsoluteFill.js';
+import { CanUseRemotionHooksProvider } from './CanUseRemotionHooks.js';
+import { CompositionManager } from './CompositionManager.js';
+import { getInputProps } from './config/input-props.js';
+import { continueRender, delayRender } from './delay-render.js';
+import { FolderContext } from './Folder.js';
+import { useRemotionEnvironment } from './get-environment.js';
+import { Internals } from './internals.js';
+import { Loading } from './loading-indicator.js';
+import { NativeLayersContext } from './NativeLayers.js';
+import { useNonce } from './nonce.js';
+import { portalNode } from './portal-node.js';
+import { useLazyComponent } from './use-lazy-component.js';
+import { useVideo } from './use-video.js';
+import { validateCompositionId } from './validation/validate-composition-id.js';
+import { validateDimension } from './validation/validate-dimensions.js';
+import { validateDurationInFrames } from './validation/validate-duration-in-frames.js';
+import { validateFps } from './validation/validate-fps.js';
+const Fallback = () => {
+    useEffect(() => {
+        const fallback = delayRender('Waiting for Root component to unsuspend');
+        return () => continueRender(fallback);
+    }, []);
+    return null;
+};
+export const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }) => {
+    const { registerComposition, unregisterComposition } = useContext(CompositionManager);
+    const video = useVideo();
+    const lazy = useLazyComponent(compProps);
+    const nonce = useNonce();
+    const environment = useRemotionEnvironment();
+    const canUseComposition = useContext(Internals.CanUseRemotionHooks);
+    if (canUseComposition) {
+        if (environment === 'player-development' ||
+            environment === 'player-production') {
+            throw new Error('<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.');
+        }
+        throw new Error('<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.');
+    }
+    const { folderName, parentName } = useContext(FolderContext);
+    useEffect(() => {
+        // Ensure it's a URL safe id
+        if (!id) {
+            throw new Error('No id for composition passed.');
+        }
+        validateCompositionId(id);
+        validateDimension(width, 'width', 'of the <Composition/> component');
+        validateDimension(height, 'height', 'of the <Composition/> component');
+        validateDurationInFrames(durationInFrames, 'of the <Composition/> component');
+        validateFps(fps, 'as a prop of the <Composition/> component', false);
+        registerComposition({
+            durationInFrames,
+            fps,
+            height,
+            width,
+            id,
+            folderName,
+            component: lazy,
+            defaultProps,
+            nonce,
+            parentFolderName: parentName,
+        });
+        return () => {
+            unregisterComposition(id);
+        };
+    }, [
+        durationInFrames,
+        fps,
+        height,
+        lazy,
+        id,
+        folderName,
+        defaultProps,
+        registerComposition,
+        unregisterComposition,
+        width,
+        nonce,
+        parentName,
+    ]);
+    if (environment === 'preview' && video && video.component === lazy) {
+        const Comp = lazy;
+        const inputProps = getInputProps();
+        return createPortal(_jsx(ClipComposition, { children: _jsx(CanUseRemotionHooksProvider, { children: _jsx(Suspense, { fallback: _jsx(Loading, {}), children: _jsx(Comp, { ...defaultProps, ...inputProps }) }) }) }), portalNode());
+    }
+    if (environment === 'rendering' && video && video.component === lazy) {
+        const Comp = lazy;
+        const inputProps = getInputProps();
+        return createPortal(_jsx(CanUseRemotionHooksProvider, { children: _jsx(Suspense, { fallback: _jsx(Fallback, {}), children: _jsx(Comp, { ...defaultProps, ...inputProps }) }) }), portalNode());
+    }
+    return null;
+};
+export const ClipComposition = ({ children }) => {
+    const { clipRegion } = useContext(NativeLayersContext);
+    const style = useMemo(() => {
+        return {
+            display: 'flex',
+            flexDirection: 'row',
+            opacity: clipRegion === 'hide' ? 0 : 1,
+            clipPath: clipRegion && clipRegion !== 'hide'
+                ? `polygon(${clipRegion.x}px ${clipRegion.y}px, ${clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.y}px)`
+                : undefined,
+        };
+    }, [clipRegion]);
+    return _jsx(AbsoluteFill, { style: style, children: children });
+};

package/dist/esm/CompositionManager.d.ts

@@ -0,0 +1,82 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
+import React from 'react';
+import type { TFolder } from './Folder.js';
+export declare type TComposition<T = unknown> = {
+    width: number;
+    height: number;
+    fps: number;
+    durationInFrames: number;
+    id: string;
+    folderName: string | null;
+    parentFolderName: string | null;
+    component: LazyExoticComponent<ComponentType<T>>;
+    defaultProps: T | undefined;
+    nonce: number;
+};
+export declare type TCompMetadata = Pick<TComposition, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
+export declare type SmallTCompMetadata = Pick<TComposition, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition, 'defaultProps'>>;
+declare type EnhancedTSequenceData = {
+    type: 'sequence';
+} | {
+    type: 'audio';
+    src: string;
+    volume: string | number;
+    doesVolumeChange: boolean;
+    startMediaFrom: number;
+    playbackRate: number;
+} | {
+    type: 'video';
+    src: string;
+    volume: string | number;
+    doesVolumeChange: boolean;
+    startMediaFrom: number;
+    playbackRate: number;
+};
+export declare type TSequence = {
+    from: number;
+    duration: number;
+    id: string;
+    displayName: string;
+    parent: string | null;
+    rootId: string;
+    showInTimeline: boolean;
+    nonce: number;
+    showLoopTimesInTimeline: number | undefined;
+} & EnhancedTSequenceData;
+export declare type TAsset = {
+    type: 'audio' | 'video';
+    src: string;
+    id: string;
+    frame: number;
+    volume: number;
+    mediaFrame: number;
+    playbackRate: number;
+    allowAmplificationDuringRender: boolean;
+};
+declare type BaseMetadata = Pick<TCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
+export declare type CompositionManagerContext = {
+    compositions: TComposition[];
+    registerComposition: <T>(comp: TComposition<T>) => void;
+    unregisterComposition: (name: string) => void;
+    registerFolder: (name: string, parent: string | null) => void;
+    unregisterFolder: (name: string, parent: string | null) => void;
+    currentComposition: string | null;
+    setCurrentComposition: (curr: string) => void;
+    setCurrentCompositionMetadata: (metadata: BaseMetadata) => void;
+    currentCompositionMetadata: BaseMetadata | null;
+    registerSequence: (seq: TSequence) => void;
+    unregisterSequence: (id: string) => void;
+    registerAsset: (asset: TAsset) => void;
+    unregisterAsset: (id: string) => void;
+    sequences: TSequence[];
+    assets: TAsset[];
+    folders: TFolder[];
+};
+export declare const CompositionManager: React.Context<CompositionManagerContext>;
+export declare const compositionsRef: React.RefObject<{
+    getCompositions: () => TCompMetadata[];
+}>;
+export declare const CompositionManagerProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/esm/CompositionManager.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+export const CompositionManager = createContext({
+    compositions: [],
+    registerComposition: () => undefined,
+    unregisterComposition: () => undefined,
+    registerFolder: () => undefined,
+    unregisterFolder: () => undefined,
+    currentComposition: null,
+    setCurrentComposition: () => undefined,
+    setCurrentCompositionMetadata: () => undefined,
+    registerSequence: () => undefined,
+    unregisterSequence: () => undefined,
+    registerAsset: () => undefined,
+    unregisterAsset: () => undefined,
+    sequences: [],
+    assets: [],
+    folders: [],
+    currentCompositionMetadata: null,
+});
+export const compositionsRef = React.createRef();
+export const CompositionManagerProvider = ({ children }) => {
+    // Wontfix, expected to have
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [compositions, setCompositions] = useState([]);
+    const currentcompositionsRef = useRef(compositions);
+    const [currentComposition, setCurrentComposition] = useState(null);
+    const [assets, setAssets] = useState([]);
+    const [folders, setFolders] = useState([]);
+    const [sequences, setSequences] = useState([]);
+    const [currentCompositionMetadata, setCurrentCompositionMetadata] = useState(null);
+    const updateCompositions = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (updateComps) => {
+        setCompositions((comps) => {
+            const updated = updateComps(comps);
+            currentcompositionsRef.current = updated;
+            return updated;
+        });
+    }, []);
+    const registerComposition = useCallback((comp) => {
+        updateCompositions((comps) => {
+            if (comps.find((c) => c.id === comp.id)) {
+                throw new Error(`Multiple composition with id ${comp.id} are registered.`);
+            }
+            return [...comps, comp].slice().sort((a, b) => a.nonce - b.nonce);
+        });
+    }, [updateCompositions]);
+    const registerSequence = useCallback((seq) => {
+        setSequences((seqs) => {
+            return [...seqs, seq];
+        });
+    }, []);
+    const unregisterComposition = useCallback((id) => {
+        setCompositions((comps) => {
+            return comps.filter((c) => c.id !== id);
+        });
+    }, []);
+    const unregisterSequence = useCallback((seq) => {
+        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
+    }, []);
+    const registerAsset = useCallback((asset) => {
+        setAssets((assts) => {
+            return [...assts, asset];
+        });
+    }, []);
+    const unregisterAsset = useCallback((id) => {
+        setAssets((assts) => {
+            return assts.filter((a) => a.id !== id);
+        });
+    }, []);
+    const registerFolder = useCallback((name, parent) => {
+        setFolders((prevFolders) => {
+            return [
+                ...prevFolders,
+                {
+                    name,
+                    parent,
+                },
+            ];
+        });
+    }, []);
+    const unregisterFolder = useCallback((name, parent) => {
+        setFolders((prevFolders) => {
+            return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
+        });
+    }, []);
+    useLayoutEffect(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_collectAssets = () => {
+                setAssets([]); // clear assets at next render
+                return assets;
+            };
+        }
+    }, [assets]);
+    useImperativeHandle(compositionsRef, () => {
+        return {
+            getCompositions: () => currentcompositionsRef.current,
+        };
+    }, []);
+    const contextValue = useMemo(() => {
+        return {
+            compositions,
+            registerComposition,
+            unregisterComposition,
+            currentComposition,
+            setCurrentComposition,
+            registerSequence,
+            unregisterSequence,
+            registerAsset,
+            unregisterAsset,
+            sequences,
+            assets,
+            folders,
+            registerFolder,
+            unregisterFolder,
+            currentCompositionMetadata,
+            setCurrentCompositionMetadata,
+        };
+    }, [
+        compositions,
+        registerComposition,
+        unregisterComposition,
+        currentComposition,
+        registerSequence,
+        unregisterSequence,
+        registerAsset,
+        unregisterAsset,
+        sequences,
+        assets,
+        folders,
+        registerFolder,
+        unregisterFolder,
+        currentCompositionMetadata,
+    ]);
+    return (_jsx(CompositionManager.Provider, { value: contextValue, children: children }));
+};

package/dist/esm/Folder.d.ts

@@ -0,0 +1,15 @@
+import type { FC } from 'react';
+export declare type TFolder = {
+    name: string;
+    parent: string | null;
+};
+declare type FolderContextType = {
+    folderName: string | null;
+    parentName: string | null;
+};
+export declare const FolderContext: import("react").Context<FolderContextType>;
+export declare const Folder: FC<{
+    name: string;
+    children: React.ReactNode;
+}>;
+export {};

package/dist/esm/Folder.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo } from 'react';
+import { CompositionManager } from './CompositionManager.js';
+import { truthy } from './truthy.js';
+import { validateFolderName } from './validation/validate-folder-name.js';
+export const FolderContext = createContext({
+    folderName: null,
+    parentName: null,
+});
+export const Folder = ({ name, children, }) => {
+    const parent = useContext(FolderContext);
+    const { registerFolder, unregisterFolder } = useContext(CompositionManager);
+    validateFolderName(name);
+    const parentNameArr = [parent.parentName, parent.folderName].filter(truthy);
+    const parentName = parentNameArr.length === 0 ? null : parentNameArr.join('/');
+    const value = useMemo(() => {
+        return {
+            folderName: name,
+            parentName,
+        };
+    }, [name, parentName]);
+    useEffect(() => {
+        registerFolder(name, parentName);
+        return () => {
+            unregisterFolder(name, parentName);
+        };
+    }, [name, parent.folderName, parentName, registerFolder, unregisterFolder]);
+    return (_jsx(FolderContext.Provider, { value: value, children: children }));
+};

package/dist/esm/IFrame.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const IFrame: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "key" | keyof React.IframeHTMLAttributes<HTMLIFrameElement>> & React.RefAttributes<HTMLIFrameElement>>;

package/dist/esm/IFrame.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState } from 'react';
+import { continueRender, delayRender } from './delay-render.js';
+const IFrameRefForwarding = ({ onLoad, onError, ...props }, ref) => {
+    const [handle] = useState(() => delayRender(`Loading <IFrame> with source ${props.src}`));
+    const didLoad = useCallback((e) => {
+        continueRender(handle);
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+    }, [handle, onLoad]);
+    const didGetError = useCallback((e) => {
+        continueRender(handle);
+        if (onError) {
+            onError(e);
+        }
+        else {
+            console.error('Error loading iframe:', e, 'Handle the event using the onError() prop to make this message disappear.');
+        }
+    }, [handle, onError]);
+    return _jsx("iframe", { ...props, ref: ref, onError: didGetError, onLoad: didLoad });
+};
+export const IFrame = forwardRef(IFrameRefForwarding);

package/dist/esm/Img.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & React.RefAttributes<HTMLImageElement>>;

package/dist/esm/Img.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useRef, } from 'react';
+import { continueRender, delayRender } from './delay-render.js';
+import { useRemotionEnvironment } from './get-environment.js';
+import { usePreload } from './prefetch.js';
+const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
+    const imageRef = useRef(null);
+    const environment = useRemotionEnvironment();
+    useImperativeHandle(ref, () => {
+        return imageRef.current;
+    }, []);
+    const actualSrc = usePreload(src);
+    const didGetError = useCallback((e) => {
+        var _a;
+        if (onError) {
+            onError(e);
+        }
+        else {
+            console.error('Error loading image with src:', (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src, e, 'Handle the event using the onError() prop to make this message disappear.');
+        }
+    }, [onError]);
+    // If image source switches, make new handle
+    if (environment === 'rendering') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useLayoutEffect(() => {
+            if (process.env.NODE_ENV === 'test') {
+                return;
+            }
+            const newHandle = delayRender('Loading <Img> with src=' + src);
+            const { current } = imageRef;
+            const didLoad = () => {
+                continueRender(newHandle);
+            };
+            if (current === null || current === void 0 ? void 0 : current.complete) {
+                continueRender(newHandle);
+            }
+            else {
+                current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
+            }
+            // If tag gets unmounted, clear pending handles because image is not going to load
+            return () => {
+                current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
+                continueRender(newHandle);
+            };
+        }, [src]);
+    }
+    return (_jsx("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
+};
+export const Img = forwardRef(ImgRefForwarding);

package/dist/esm/NativeLayers.d.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from 'react';
+export declare type ClipRegion = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+} | 'hide';
+export declare type TNativeLayersContext = {
+    clipRegion: ClipRegion | null;
+    setClipRegion: React.Dispatch<React.SetStateAction<ClipRegion | null>>;
+};
+export declare const NativeLayersContext: import("react").Context<TNativeLayersContext>;
+export declare const NativeLayersProvider: React.FC<PropsWithChildren>;

package/dist/esm/NativeLayers.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useLayoutEffect, useMemo, useState } from 'react';
+export const NativeLayersContext = createContext({
+    setClipRegion: () => {
+        throw new Error('NativeLayers not set');
+    },
+    clipRegion: null,
+});
+export const NativeLayersProvider = ({ children, }) => {
+    const [clipRegion, setClipRegion] = useState(null);
+    const context = useMemo(() => {
+        return {
+            setClipRegion,
+            clipRegion,
+        };
+    }, [clipRegion, setClipRegion]);
+    useLayoutEffect(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_getClipRegion = () => {
+                return clipRegion;
+            };
+        }
+    }, [clipRegion, setClipRegion]);
+    return (_jsx(NativeLayersContext.Provider, { value: context, children: children }));
+};

package/dist/esm/Null.d.ts

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

package/dist/esm/Null.js

@@ -0,0 +1,21 @@
+import { useContext, useEffect } from 'react';
+import { NativeLayersContext } from './NativeLayers.js';
+export const Null = () => {
+    const { setClipRegion } = useContext(NativeLayersContext);
+    useEffect(() => {
+        setClipRegion((c) => {
+            if (c === null) {
+                return 'hide';
+            }
+            // Rendering multiple <Null> is fine, because they are all hidden
+            if (c === 'hide') {
+                return 'hide';
+            }
+            throw new Error('Cannot render <Null>, because another component clipping the region was already rendered (most likely <Clipper>)');
+        });
+        return () => {
+            setClipRegion(null);
+        };
+    }, [setClipRegion]);
+    return null;
+};

package/dist/esm/RemotionRoot.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const RemotionRoot: React.FC<{
+    children: React.ReactNode;
+    numberOfAudioTags: number;
+}>;