remotion 4.0.0-reorg.8 → 4.0.0-resetpath.13

package/LICENSE.md

@@ -1,34 +1,34 @@
 # Remotion License
 
-Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion create videos for free (even commercial), while a company license is required for for-profit organisations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
+Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
 - [Free license](#free-license)
 - [Company license](#company-license)
 
 ## Free license
 
-Copyright © 2022 [Jonny Burger](https://jonny.io)
+Copyright © 2023 [Remotion](https://www.remotion.dev/)
 
 ### Eligibility
 
 You are eligible to use Remotion for free if you are:
 
 - an individual
-- a for-profit organisation with up to 3 employees
-- a non-profit or not-for-profit organisation
+- a for-profit organization with up to 3 employees
+- a non-profit or not-for-profit organization
 - evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
 
 ### Allowed use cases
 
-Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify and the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
 
 ### Disallowed use cases
 
-It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, sublicensing your own derivate of Remotion.
+It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of Remotion.
 
 ### Warranty notice
 
-The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
 
 ### Support
 
@@ -36,6 +36,6 @@ Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
 
 ## Company license
 
-You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support.
+You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support (read the [Support Policy](/docs/support)).
 
 Visit [companies.remotion.dev](https://companies.remotion.dev) for pricing and to buy a license.

package/README.md

@@ -1,15 +1,19 @@
 <p align="center">
   <a href="https://github.com/remotion-dev/logo">
-    <img src="https://github.com/remotion-dev/logo/raw/main/withtitle/element-0.png">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://github.com/remotion-dev/logo/raw/main/animated-logo-banner-dark.gif">
+      <img alt="Animated Remotion Logo" src="https://github.com/remotion-dev/logo/raw/main/animated-logo-banner-light.gif">
+    </picture>
   </a>
 </p>
 
 [![Discord Shield](https://discordapp.com/api/guilds/809501355504959528/widget.png?style=shield)](https://remotion.dev/discord)
-[![NPM Version](http://img.shields.io/npm/v/remotion.svg?style=flat)](https://www.npmjs.org/package/remotion)
+[![NPM Version](https://img.shields.io/npm/v/remotion.svg?style=flat)](https://www.npmjs.org/package/remotion)
 [![NPM Downloads](https://img.shields.io/npm/dm/remotion.svg?style=flat)](https://npmcharts.com/compare/remotion?minimal=true)
 [![Install Size](https://packagephobia.now.sh/badge?p=remotion)](https://packagephobia.now.sh/result?p=remotion)
+<a href="https://twitter.com/remotion"><img src="https://img.shields.io/twitter/follow/remotion?label=Twitter&style=social" alt="Twitter"></a>
 
-Remotion is a suite of libraries building a foundation for **creating videos programmatically using React.**
+Remotion is a framework for **creating videos programmatically using React.**
 
 ## Why create videos in React?
 
@@ -17,35 +21,42 @@ Remotion is a suite of libraries building a foundation for **creating videos pro
 - **Leverage programming**: Use variables, functions, APIs, math and algorithms to create new effects
 - **Leverage React**: Reusable components, Powerful composition, Fast Refresh, Package ecosystem
 
-## Example videos
-
-- **Remotion Trailer** [Watch](https://www.youtube.com/watch?v=gwlDorikqgY) • [Source code](https://github.com/remotion-dev/trailer) • The announcement video for Remotion was written in Remotion itself!
-- **AnySticker Welcome Video** [Watch](https://www.youtube.com/watch?v=Y0SNPeTz09w) • [Source code](https://github.com/JonnyBurger/anysticker-tutorials) • An in-app explainer video for my app AnySticker.
-- **Spotify Wrapped Recreated** [Watch](https://twitter.com/JNYBGR/status/1360269270526136320) • [Tutorial](https://www.youtube.com/watch?v=I-y_5H9-3gk) • [Source code](https://github.com/JonnyBurger/remotion-wrapped) • A recreation of Spotify Wrapped where you can override all text and images via command line.
-- **"Game changer or no game changer" intro** [Watch](https://youtu.be/ga_xAZo9m7k?t=61) • [Source code](https://github.com/JonnyBurger/gamechanger-or-no-gamechanger-intro) • An intro for a quiz show I did with William Candillon.
-- **"The X in MDX" talk** [Watch](https://twitter.com/pomber/status/1359556846688886789) • [Source code](https://github.com/pomber/record-talk-with-remotion) • A re-recording of [this talk](https://www.youtube.com/watch?v=xEu3t-KJVVg) using Remotion.
-- **Redesigning the Scatterplot** [Watch](https://twitter.com/BrooksLybrand/status/1371547875109445635) • [Source code](https://github.com/brookslybrand/redesigning-scatterplots) • An animated section of Edward R. Tufte's book [The Visual Display of Quantitative Information](https://www.amazon.com/Visual-Display-Quantitative-Information/dp/0961392142/ref=sr_1_1?crid=3HQZSBUUROV09&dchild=1&keywords=the+visual+display+of+quantitative+information&qid=1615907320&sprefix=the+visual+disp%2Caps%2C190&sr=8-1).
-- **News Podcast Maker** [Watch](https://www.youtube.com/watch?v=Mwo5iNlWryg) • [Source code](https://github.com/FelippeChemello/podcast-maker/) • A fully automated News Podcast Maker.
-
-Feel free to pull request your creations!
+## Created with Remotion
+
+<table>
+<tr>
+<td align="center">
+<img style="width: 290px" src="packages/docs/static/img/fireship-quick.gif" />
+<p>"This video was made with code" <em>- Fireship</em> <a href="https://youtu.be/deg8bOoziaE">Watch</a> • <a href="https://github.com/wcandillon/remotion-fireship">Source</a></p>
+</td>
+<td align="center">
+<img style="width: 240px" src="packages/docs/static/img/unwrapped-2022.gif" />
+<p>GitHub Unwrapped - Personalized Year in Review <a href="https://www.githubunwrapped.com">Try</a> • <a href="https://github.com/remotion-dev/github-unwrapped-2022">Source</a></p>
+</td>
+<td align="center">
+<em>View more in the <a href="https://remotion.dev/showcase">Remotion Showcase</a>!</em>
+</td>
+</tr>
+</table>
 
 ## Get started
 
-If you already have Yarn and FFMPEG installed, type
+If you already have Node.JS installed, type
 
 ```console
-yarn create video
+npm init video
 ```
 
 to get started. Otherwise, read the [installation page](https://www.remotion.dev/docs/) in the documentation.
 
 ## Documentation
 
-Head to [**remotion.dev**](https://www.remotion.dev) to learn the in and outs of Remotion!
+Documentation: [**remotion.dev/docs**](https://www.remotion.dev/docs)  
+API Reference: [**remotion.dev/api**](https://www.remotion.dev/api)
 
 ## License
 
-Be aware of that Remotion has a special license and requires obtaining a company license in some cases. Read the [LICENSE](LICENSE.md) documentation for more information.
+Be aware of that Remotion has a special license and requires obtaining a company license in some cases. Read the [LICENSE](LICENSE.md) page for more information.
 
 ## Contributing
 

package/dist/AbsoluteFill.d.ts

@@ -1,7 +1,6 @@
-import type { HTMLAttributes } from 'react';
 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.FC<HTMLAttributes<HTMLDivElement>>;
+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

@@ -3,11 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbsoluteFill = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-/**
- * An absolutely positioned <div> element with 100% width, height, and a column flex style
- * @link https://www.remotion.dev/docs/absolute-fill
- */
-const AbsoluteFill = (props) => {
+const AbsoluteFillRefForwarding = (props, ref) => {
     const { style, ...other } = props;
     const actualStyle = (0, react_1.useMemo)(() => {
         return {
@@ -23,6 +19,10 @@ const AbsoluteFill = (props) => {
             ...style,
         };
     }, [style]);
-    return (0, jsx_runtime_1.jsx)("div", { style: actualStyle, ...other });
+    return (0, jsx_runtime_1.jsx)("div", { ref: ref, style: actualStyle, ...other });
 };
-exports.AbsoluteFill = AbsoluteFill;
+/**
+ * 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/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

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react';
+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> = {
@@ -19,4 +19,5 @@ declare type CompositionProps<T> = StillProps<T> & {
     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

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Composition = void 0;
+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");
@@ -12,6 +13,7 @@ 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");
@@ -32,9 +34,11 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
     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 (typeof window !== 'undefined' && window.remotion_isPlayer) {
+        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.');
@@ -79,16 +83,12 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
         nonce,
         parentName,
     ]);
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'preview' &&
-        video &&
-        video.component === lazy) {
+    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)(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)());
+        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 ((0, get_environment_1.getRemotionEnvironment)() === 'rendering' &&
-        video &&
-        video.component === lazy) {
+    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)());
@@ -96,3 +96,18 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
     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

@@ -23,12 +23,14 @@ declare type EnhancedTSequenceData = {
     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;
@@ -49,13 +51,9 @@ export declare type TAsset = {
     volume: number;
     mediaFrame: number;
     playbackRate: number;
+    allowAmplificationDuringRender: boolean;
 };
-export declare type RenderAssetInfo = {
-    assets: TAsset[][];
-    imageSequenceName: string;
-    downloadDir: string;
-    firstFrameIndex: number;
-};
+declare type BaseMetadata = Pick<TCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
 export declare type CompositionManagerContext = {
     compositions: TComposition[];
     registerComposition: <T>(comp: TComposition<T>) => void;
@@ -64,6 +62,8 @@ export declare type CompositionManagerContext = {
     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;

package/dist/CompositionManager.js

@@ -34,6 +34,7 @@ exports.CompositionManager = (0, react_1.createContext)({
     unregisterFolder: () => undefined,
     currentComposition: null,
     setCurrentComposition: () => undefined,
+    setCurrentCompositionMetadata: () => undefined,
     registerSequence: () => undefined,
     unregisterSequence: () => undefined,
     registerAsset: () => undefined,
@@ -41,6 +42,7 @@ exports.CompositionManager = (0, react_1.createContext)({
     sequences: [],
     assets: [],
     folders: [],
+    currentCompositionMetadata: null,
 });
 exports.compositionsRef = react_1.default.createRef();
 const CompositionManagerProvider = ({ children }) => {
@@ -51,6 +53,7 @@ const CompositionManagerProvider = ({ children }) => {
     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 registerComposition = (0, react_1.useCallback)((comp) => {
         setCompositions((comps) => {
             if (comps.find((c) => c.id === comp.id)) {
@@ -127,21 +130,24 @@ const CompositionManagerProvider = ({ children }) => {
             folders,
             registerFolder,
             unregisterFolder,
+            currentCompositionMetadata,
+            setCurrentCompositionMetadata,
         };
     }, [
         compositions,
-        currentComposition,
         registerComposition,
-        registerSequence,
         unregisterComposition,
+        currentComposition,
+        registerSequence,
         unregisterSequence,
         registerAsset,
         unregisterAsset,
         sequences,
         assets,
+        folders,
         registerFolder,
         unregisterFolder,
-        folders,
+        currentCompositionMetadata,
     ]);
     return ((0, jsx_runtime_1.jsx)(exports.CompositionManager.Provider, { value: contextValue, children: children }));
 };

package/dist/Img.js

@@ -4,11 +4,15 @@ 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 ImgRefForwarding = ({ onError, ...props }, ref) => {
+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) {
@@ -19,27 +23,30 @@ const ImgRefForwarding = ({ onError, ...props }, ref) => {
         }
     }, [onError]);
     // If image source switches, make new handle
-    (0, react_1.useLayoutEffect)(() => {
-        if (process.env.NODE_ENV === 'test') {
-            return;
-        }
-        const newHandle = (0, delay_render_1.delayRender)('Loading <Img> with src=' + props.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);
-        };
-    }, [props.src]);
-    return (0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, onError: didGetError });
+    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/LayerMaster.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Layer } from './layers';
+export declare const LayerMaster: <T extends object>({ layers, defaultProps, inputProps, fallbackComponent: FallbackComponent, }: {
+    layers: Layer<T>[];
+    defaultProps: T | undefined;
+    inputProps: any;
+    fallbackComponent: React.FC | null;
+}) => JSX.Element;

package/dist/LayerMaster.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayerMaster = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AbsoluteFill_1 = require("./AbsoluteFill");
+const get_environment_1 = require("./get-environment");
+const LayerMaster = ({ layers, defaultProps, inputProps, fallbackComponent: FallbackComponent, }) => {
+    return (
+    // TODO: Same styles as normal
+    (0, jsx_runtime_1.jsx)(AbsoluteFill_1.AbsoluteFill, { children: layers.map((layer, i) => {
+            const Comp = layer.component;
+            if (layer.type === 'web') {
+                if (FallbackComponent === null) {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }, String(i));
+                }
+                return (
+                // eslint-disable-next-line react/no-array-index-key
+                (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(FallbackComponent, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }, String(i)));
+            }
+            // SVG should not support suspense
+            if (layer.type === 'svg') {
+                if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+                    return null;
+                }
+                return ((0, jsx_runtime_1.jsx)(AbsoluteFill_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }, String(i)) }));
+            }
+            if (layer.type === 'video') {
+                if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+                    return null;
+                }
+                // TODO: AbsoluteFill is different flex direction
+                return ((0, jsx_runtime_1.jsx)(AbsoluteFill_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }, String(i)) }));
+            }
+            throw new Error('Unknown layer type');
+        }) }));
+};
+exports.LayerMaster = LayerMaster;

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;

package/dist/Null.js

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

package/dist/RemotionRoot.d.ts

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