remotion 3.3.51 → 3.3.52

package/dist/AbsoluteFill.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @link https://www.remotion.dev/docs/absolute-fill
+ */
+export declare const AbsoluteFill: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;

package/dist/AbsoluteFill.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AbsoluteFill = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AbsoluteFillRefForwarding = (props, ref) => {
+    const { style, ...other } = props;
+    const actualStyle = (0, react_1.useMemo)(() => {
+        return {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            ...style,
+        };
+    }, [style]);
+    return (0, jsx_runtime_1.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
+ */
+exports.AbsoluteFill = (0, react_1.forwardRef)(AbsoluteFillRefForwarding);

package/dist/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/CanUseRemotionHooks.js

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

package/dist/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/Clipper.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Clipper = void 0;
+const react_1 = require("react");
+const NativeLayers_1 = require("./NativeLayers");
+const Clipper = ({ height, width, x, y }) => {
+    const { setClipRegion } = (0, react_1.useContext)(NativeLayers_1.NativeLayersContext);
+    (0, react_1.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;
+};
+exports.Clipper = Clipper;

package/dist/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/Composition.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClipComposition = exports.Composition = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const AbsoluteFill_1 = require("./AbsoluteFill");
+const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
+const CompositionManager_1 = require("./CompositionManager");
+const input_props_1 = require("./config/input-props");
+const delay_render_1 = require("./delay-render");
+const Folder_1 = require("./Folder");
+const get_environment_1 = require("./get-environment");
+const internals_1 = require("./internals");
+const loading_indicator_1 = require("./loading-indicator");
+const NativeLayers_1 = require("./NativeLayers");
+const nonce_1 = require("./nonce");
+const portal_node_1 = require("./portal-node");
+const use_lazy_component_1 = require("./use-lazy-component");
+const use_video_1 = require("./use-video");
+const validate_composition_id_1 = require("./validation/validate-composition-id");
+const validate_dimensions_1 = require("./validation/validate-dimensions");
+const validate_duration_in_frames_1 = require("./validation/validate-duration-in-frames");
+const validate_fps_1 = require("./validation/validate-fps");
+const Fallback = () => {
+    (0, react_1.useEffect)(() => {
+        const fallback = (0, delay_render_1.delayRender)('Waiting for Root component to unsuspend');
+        return () => (0, delay_render_1.continueRender)(fallback);
+    }, []);
+    return null;
+};
+const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, ...compProps }) => {
+    const { registerComposition, unregisterComposition } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
+    const video = (0, use_video_1.useVideo)();
+    const lazy = (0, use_lazy_component_1.useLazyComponent)(compProps);
+    const nonce = (0, nonce_1.useNonce)();
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
+    const canUseComposition = (0, react_1.useContext)(internals_1.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 } = (0, react_1.useContext)(Folder_1.FolderContext);
+    (0, react_1.useEffect)(() => {
+        // Ensure it's a URL safe id
+        if (!id) {
+            throw new Error('No id for composition passed.');
+        }
+        (0, validate_composition_id_1.validateCompositionId)(id);
+        (0, validate_dimensions_1.validateDimension)(width, 'width', 'of the <Composition/> component');
+        (0, validate_dimensions_1.validateDimension)(height, 'height', 'of the <Composition/> component');
+        (0, validate_duration_in_frames_1.validateDurationInFrames)(durationInFrames, 'of the <Composition/> component');
+        (0, validate_fps_1.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 = (0, input_props_1.getInputProps)();
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }) }), (0, portal_node_1.portalNode)());
+    }
+    if (environment === 'rendering' && video && video.component === lazy) {
+        const Comp = lazy;
+        const inputProps = (0, input_props_1.getInputProps)();
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }), (0, portal_node_1.portalNode)());
+    }
+    return null;
+};
+exports.Composition = Composition;
+const ClipComposition = ({ children }) => {
+    const { clipRegion } = (0, react_1.useContext)(NativeLayers_1.NativeLayersContext);
+    const style = (0, react_1.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 (0, jsx_runtime_1.jsx)(AbsoluteFill_1.AbsoluteFill, { style: style, children: children });
+};
+exports.ClipComposition = ClipComposition;

package/dist/CompositionManager.d.ts

@@ -0,0 +1,82 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
+import React from 'react';
+import type { TFolder } from './Folder';
+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/CompositionManager.js

@@ -0,0 +1,164 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionManagerProvider = exports.compositionsRef = exports.CompositionManager = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.CompositionManager = (0, react_1.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,
+});
+exports.compositionsRef = react_1.default.createRef();
+const CompositionManagerProvider = ({ children }) => {
+    // Wontfix, expected to have
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [compositions, setCompositions] = (0, react_1.useState)([]);
+    const currentcompositionsRef = (0, react_1.useRef)(compositions);
+    const [currentComposition, setCurrentComposition] = (0, react_1.useState)(null);
+    const [assets, setAssets] = (0, react_1.useState)([]);
+    const [folders, setFolders] = (0, react_1.useState)([]);
+    const [sequences, setSequences] = (0, react_1.useState)([]);
+    const [currentCompositionMetadata, setCurrentCompositionMetadata] = (0, react_1.useState)(null);
+    const updateCompositions = (0, react_1.useCallback)(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (updateComps) => {
+        setCompositions((comps) => {
+            const updated = updateComps(comps);
+            currentcompositionsRef.current = updated;
+            return updated;
+        });
+    }, []);
+    const registerComposition = (0, react_1.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 = (0, react_1.useCallback)((seq) => {
+        setSequences((seqs) => {
+            return [...seqs, seq];
+        });
+    }, []);
+    const unregisterComposition = (0, react_1.useCallback)((id) => {
+        setCompositions((comps) => {
+            return comps.filter((c) => c.id !== id);
+        });
+    }, []);
+    const unregisterSequence = (0, react_1.useCallback)((seq) => {
+        setSequences((seqs) => seqs.filter((s) => s.id !== seq));
+    }, []);
+    const registerAsset = (0, react_1.useCallback)((asset) => {
+        setAssets((assts) => {
+            return [...assts, asset];
+        });
+    }, []);
+    const unregisterAsset = (0, react_1.useCallback)((id) => {
+        setAssets((assts) => {
+            return assts.filter((a) => a.id !== id);
+        });
+    }, []);
+    const registerFolder = (0, react_1.useCallback)((name, parent) => {
+        setFolders((prevFolders) => {
+            return [
+                ...prevFolders,
+                {
+                    name,
+                    parent,
+                },
+            ];
+        });
+    }, []);
+    const unregisterFolder = (0, react_1.useCallback)((name, parent) => {
+        setFolders((prevFolders) => {
+            return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
+        });
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_collectAssets = () => {
+                setAssets([]); // clear assets at next render
+                return assets;
+            };
+        }
+    }, [assets]);
+    (0, react_1.useImperativeHandle)(exports.compositionsRef, () => {
+        return {
+            getCompositions: () => currentcompositionsRef.current,
+        };
+    }, []);
+    const contextValue = (0, react_1.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 ((0, jsx_runtime_1.jsx)(exports.CompositionManager.Provider, { value: contextValue, children: children }));
+};
+exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/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/Folder.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Folder = exports.FolderContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CompositionManager_1 = require("./CompositionManager");
+const truthy_1 = require("./truthy");
+const validate_folder_name_1 = require("./validation/validate-folder-name");
+exports.FolderContext = (0, react_1.createContext)({
+    folderName: null,
+    parentName: null,
+});
+const Folder = ({ name, children, }) => {
+    const parent = (0, react_1.useContext)(exports.FolderContext);
+    const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
+    (0, validate_folder_name_1.validateFolderName)(name);
+    const parentNameArr = [parent.parentName, parent.folderName].filter(truthy_1.truthy);
+    const parentName = parentNameArr.length === 0 ? null : parentNameArr.join('/');
+    const value = (0, react_1.useMemo)(() => {
+        return {
+            folderName: name,
+            parentName,
+        };
+    }, [name, parentName]);
+    (0, react_1.useEffect)(() => {
+        registerFolder(name, parentName);
+        return () => {
+            unregisterFolder(name, parentName);
+        };
+    }, [name, parent.folderName, parentName, registerFolder, unregisterFolder]);
+    return ((0, jsx_runtime_1.jsx)(exports.FolderContext.Provider, { value: value, children: children }));
+};
+exports.Folder = Folder;

package/dist/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/IFrame.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const delay_render_1 = require("./delay-render");
+const IFrameRefForwarding = ({ onLoad, onError, ...props }, ref) => {
+    const [handle] = (0, react_1.useState)(() => (0, delay_render_1.delayRender)(`Loading <IFrame> with source ${props.src}`));
+    const didLoad = (0, react_1.useCallback)((e) => {
+        (0, delay_render_1.continueRender)(handle);
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+    }, [handle, onLoad]);
+    const didGetError = (0, react_1.useCallback)((e) => {
+        (0, delay_render_1.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 (0, jsx_runtime_1.jsx)("iframe", { ...props, ref: ref, onError: didGetError, onLoad: didLoad });
+};
+exports.IFrame = (0, react_1.forwardRef)(IFrameRefForwarding);

package/dist/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/Img.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Img = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const delay_render_1 = require("./delay-render");
+const get_environment_1 = require("./get-environment");
+const prefetch_1 = require("./prefetch");
+const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
+    const imageRef = (0, react_1.useRef)(null);
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return imageRef.current;
+    }, []);
+    const actualSrc = (0, prefetch_1.usePreload)(src);
+    const didGetError = (0, react_1.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
+        (0, react_1.useLayoutEffect)(() => {
+            if (process.env.NODE_ENV === 'test') {
+                return;
+            }
+            const newHandle = (0, delay_render_1.delayRender)('Loading <Img> with src=' + src);
+            const { current } = imageRef;
+            const didLoad = () => {
+                (0, delay_render_1.continueRender)(newHandle);
+            };
+            if (current === null || current === void 0 ? void 0 : current.complete) {
+                (0, delay_render_1.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);
+                (0, delay_render_1.continueRender)(newHandle);
+            };
+        }, [src]);
+    }
+    return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
+};
+exports.Img = (0, react_1.forwardRef)(ImgRefForwarding);

package/dist/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/NativeLayers.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeLayersProvider = exports.NativeLayersContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.NativeLayersContext = (0, react_1.createContext)({
+    setClipRegion: () => {
+        throw new Error('NativeLayers not set');
+    },
+    clipRegion: null,
+});
+const NativeLayersProvider = ({ children, }) => {
+    const [clipRegion, setClipRegion] = (0, react_1.useState)(null);
+    const context = (0, react_1.useMemo)(() => {
+        return {
+            setClipRegion,
+            clipRegion,
+        };
+    }, [clipRegion, setClipRegion]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_getClipRegion = () => {
+                return clipRegion;
+            };
+        }
+    }, [clipRegion, setClipRegion]);
+    return ((0, jsx_runtime_1.jsx)(exports.NativeLayersContext.Provider, { value: context, children: children }));
+};
+exports.NativeLayersProvider = NativeLayersProvider;

package/dist/Null.d.ts

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