remotion 4.0.0-webhook.26 → 4.1.0-alpha1

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

@@ -7,11 +7,11 @@
   </a>
 </p>
 
-[![Discord Shield](https://discordapp.com/api/guilds/809501355504959528/widget.png?style=shield)](https://remotion.dev/discord)
-[![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_dev"><img src="https://img.shields.io/twitter/follow/remotion_dev?label=Twitter&style=social" alt="Twitter"></a>
+[![Discord Shield](https://img.shields.io/discord/809501355504959528?color=000000&label=Discord&logo=fdgssdf)](https://remotion.dev/discord)
+[![NPM Version](https://img.shields.io/npm/v/remotion.svg?style=flat&color=black)](https://www.npmjs.org/package/remotion)
+[![NPM Downloads](https://img.shields.io/npm/dm/remotion.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/remotion?minimal=true)
+[![Open Bounties](https://img.shields.io/endpoint?url=https%3A%2F%2Fconsole.algora.io%2Fapi%2Fshields%2Fremotion%2Fbounties%3Fstatus%3Dopen&style=flat&color=black&labelColor=grey&label=Open+Bounties)](https://github.com/remotion-dev/remotion/issues?q=is%3Aopen+label%3A%22%F0%9F%92%8E+Bounty%22+sort%3Aupdated-desc)
+<a href="https://twitter.com/remotion"><img src="https://img.shields.io/twitter/follow/remotion?label=Twitter&color=black" alt="Twitter"></a>
 
 Remotion is a framework for **creating videos programmatically using React.**
 
@@ -30,8 +30,8 @@ Remotion is a framework for **creating videos programmatically using React.**
 <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/github-unwrapped.gif" />
-<p>GitHub Unwrapped - Personalized year in Review <a href="https://githubunwrapped.com">Try</a> • <a href="https://github.com/remotion-dev/github-unwrapped">Source</a></p>
+<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>

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

@@ -1,6 +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
+ * @description An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @see [Documentation](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 → cjs/AbsoluteFill.js}

@@ -22,7 +22,7 @@ const AbsoluteFillRefForwarding = (props, ref) => {
     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
+ * @description An absolutely positioned <div> element with 100% width, height, and a column flex style
+ * @see [Documentation](https://www.remotion.dev/docs/absolute-fill)
  */
 exports.AbsoluteFill = (0, react_1.forwardRef)(AbsoluteFillRefForwarding);

package/dist/cjs/AssetManager.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { TAsset } from './CompositionManager.js';
+export type AssetManagerContext = {
+    registerAsset: (asset: TAsset) => void;
+    unregisterAsset: (id: string) => void;
+    assets: TAsset[];
+};
+export declare const AssetManager: import("react").Context<AssetManagerContext>;
+export declare const AssetManagerProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/cjs/AssetManager.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetManagerProvider = exports.AssetManager = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.AssetManager = (0, react_1.createContext)({
+    registerAsset: () => undefined,
+    unregisterAsset: () => undefined,
+    assets: [],
+});
+const AssetManagerProvider = ({ children }) => {
+    const [assets, setAssets] = (0, react_1.useState)([]);
+    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);
+        });
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (typeof window !== 'undefined') {
+            window.remotion_collectAssets = () => {
+                setAssets([]); // clear assets at next render
+                return assets;
+            };
+        }
+    }, [assets]);
+    const contextValue = (0, react_1.useMemo)(() => {
+        return {
+            registerAsset,
+            unregisterAsset,
+            assets,
+        };
+    }, [assets, registerAsset, unregisterAsset]);
+    return ((0, jsx_runtime_1.jsx)(exports.AssetManager.Provider, { value: contextValue, children: children }));
+};
+exports.AssetManagerProvider = AssetManagerProvider;

package/dist/cjs/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/cjs/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_js_1 = require("./NativeLayers.js");
+const Clipper = ({ height, width, x, y }) => {
+    const { setClipRegion } = (0, react_1.useContext)(NativeLayers_js_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/cjs/Composition.d.ts

@@ -0,0 +1,41 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { AnyZodObject } from 'zod';
+import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
+type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
+export type CompProps<Props> = {
+    lazyComponent: () => Promise<{
+        default: LooseComponentType<Props>;
+    }>;
+} | {
+    component: LooseComponentType<Props>;
+};
+export type CalcMetadataReturnType<T extends Record<string, unknown> | undefined> = {
+    durationInFrames?: number;
+    fps?: number;
+    width?: number;
+    height?: number;
+    props?: T;
+};
+export type CalculateMetadataFunction<T extends Record<string, unknown> | undefined> = (options: {
+    defaultProps: T;
+    props: T;
+    abortSignal: AbortSignal;
+}) => Promise<CalcMetadataReturnType<T>> | CalcMetadataReturnType<T>;
+export type StillProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = {
+    width: number;
+    height: number;
+    id: string;
+    calculateMetadata?: CalculateMetadataFunction<InferProps<Schema, Props>>;
+    schema?: Schema;
+} & CompProps<Props> & PropsIfHasProps<Schema, Props>;
+export type CompositionProps<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = StillProps<Schema, Props> & {
+    fps: number;
+    durationInFrames: number;
+};
+/**
+ * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
+ * @see [Documentation](https://www.remotion.dev/docs/composition)
+ */
+export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined>({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }: CompositionProps<Schema, Props>) => React.ReactPortal | null;
+export {};

package/dist/cjs/Composition.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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_js_1 = require("./AbsoluteFill.js");
+const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
+const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
+const delay_render_js_1 = require("./delay-render.js");
+const Folder_js_1 = require("./Folder.js");
+const get_environment_js_1 = require("./get-environment.js");
+const loading_indicator_js_1 = require("./loading-indicator.js");
+const NativeLayers_js_1 = require("./NativeLayers.js");
+const nonce_js_1 = require("./nonce.js");
+const portal_node_js_1 = require("./portal-node.js");
+const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
+const use_lazy_component_js_1 = require("./use-lazy-component.js");
+const use_video_js_1 = require("./use-video.js");
+const validate_composition_id_js_1 = require("./validation/validate-composition-id.js");
+const validate_default_props_js_1 = require("./validation/validate-default-props.js");
+const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
+const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");
+const validate_fps_js_1 = require("./validation/validate-fps.js");
+const Fallback = () => {
+    (0, react_1.useEffect)(() => {
+        const fallback = (0, delay_render_js_1.delayRender)('Waiting for Root component to unsuspend');
+        return () => (0, delay_render_js_1.continueRender)(fallback);
+    }, []);
+    return null;
+};
+/**
+ * @description This component is used to register a video to make it renderable and make it show in the sidebar, in dev mode.
+ * @see [Documentation](https://www.remotion.dev/docs/composition)
+ */
+const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, schema, ...compProps }) => {
+    var _a, _b;
+    const { registerComposition, unregisterComposition } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const video = (0, use_video_js_1.useVideo)();
+    const lazy = (0, use_lazy_component_js_1.useLazyComponent)(compProps);
+    const nonce = (0, nonce_js_1.useNonce)();
+    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
+    const canUseComposition = (0, react_1.useContext)(CanUseRemotionHooks_js_1.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_js_1.FolderContext);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // Ensure it's a URL safe id
+        if (!id) {
+            throw new Error('No id for composition passed.');
+        }
+        (0, validate_composition_id_js_1.validateCompositionId)(id);
+        (0, validate_dimensions_js_1.validateDimension)(width, 'width', 'of the <Composition/> component');
+        (0, validate_dimensions_js_1.validateDimension)(height, 'height', 'of the <Composition/> component');
+        (0, validate_duration_in_frames_js_1.validateDurationInFrames)({
+            durationInFrames,
+            component: 'of the <Composition/> component',
+            allowFloats: false,
+        });
+        (0, validate_fps_js_1.validateFps)(fps, 'as a prop of the <Composition/> component', false);
+        (0, validate_default_props_js_1.validateDefaultAndInputProps)(defaultProps, 'defaultProps', id);
+        registerComposition({
+            durationInFrames,
+            fps,
+            height,
+            width,
+            id,
+            folderName,
+            component: lazy,
+            defaultProps: defaultProps,
+            nonce,
+            parentFolderName: parentName,
+            schema: schema !== null && schema !== void 0 ? schema : null,
+            calculateMetadata: (_a = compProps.calculateMetadata) !== null && _a !== void 0 ? _a : null,
+        });
+        return () => {
+            unregisterComposition(id);
+        };
+    }, [
+        durationInFrames,
+        fps,
+        height,
+        lazy,
+        id,
+        folderName,
+        defaultProps,
+        registerComposition,
+        unregisterComposition,
+        width,
+        nonce,
+        parentName,
+        schema,
+        compProps.calculateMetadata,
+    ]);
+    const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(id);
+    if (environment === 'preview' && video && video.component === lazy) {
+        const Comp = lazy;
+        if (resolved === null || resolved.type !== 'success') {
+            return null;
+        }
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_a = resolved.result.defaultProps) !== null && _a !== void 0 ? _a : {}) }) }) }) }), (0, portal_node_js_1.portalNode)());
+    }
+    if (environment === 'rendering' && video && video.component === lazy) {
+        const Comp = lazy;
+        if (resolved === null || resolved.type !== 'success') {
+            return null;
+        }
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_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, { ...((_b = resolved.result.defaultProps) !== null && _b !== void 0 ? _b : {}) }) }) }), (0, portal_node_js_1.portalNode)());
+    }
+    return null;
+};
+exports.Composition = Composition;
+const ClipComposition = ({ children }) => {
+    const { clipRegion } = (0, react_1.useContext)(NativeLayers_js_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_js_1.AbsoluteFill, { style: style, children: children });
+};

package/dist/cjs/CompositionManager.d.ts

@@ -0,0 +1,75 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
+import React from 'react';
+import type { AnyZodObject } from 'zod';
+import type { CalculateMetadataFunction } from './Composition.js';
+import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
+export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = {
+    width: number;
+    height: number;
+    fps: number;
+    durationInFrames: number;
+    id: string;
+    folderName: string | null;
+    parentFolderName: string | null;
+    component: LazyExoticComponent<ComponentType<Props>>;
+    nonce: number;
+    schema: Schema | null;
+    calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>> | null;
+} & PropsIfHasProps<Schema, Props>;
+export type AnyComposition = TComposition<AnyZodObject, Record<string, unknown> | undefined>;
+export type TCompMetadataWithCalcFunction<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps' | 'calculateMetadata'>;
+export type TCompMetadata<Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<Schema, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames' | 'defaultProps'>;
+export type AnyCompMetadata = TCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
+export type SmallTCompMetadata<T extends AnyZodObject, Props extends Record<string, unknown> | undefined> = Pick<TComposition<T, Props>, 'id' | 'height' | 'width' | 'fps' | 'durationInFrames'> & Partial<Pick<TComposition<T, Props>, 'defaultProps'>>;
+export type AnySmallCompMetadata = SmallTCompMetadata<AnyZodObject, Record<string, unknown> | undefined>;
+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 type LoopDisplay = {
+    numberOfTimes: number;
+    startOffset: number;
+    durationInFrames: number;
+};
+export type TSequence = {
+    from: number;
+    duration: number;
+    id: string;
+    displayName: string;
+    parent: string | null;
+    rootId: string;
+    showInTimeline: boolean;
+    nonce: number;
+    loopDisplay: LoopDisplay | undefined;
+} & EnhancedTSequenceData;
+export type TAsset = {
+    type: 'audio' | 'video';
+    src: string;
+    id: string;
+    frame: number;
+    volume: number;
+    mediaFrame: number;
+    playbackRate: number;
+    allowAmplificationDuringRender: boolean;
+};
+export declare const compositionsRef: React.RefObject<{
+    getCompositions: () => TCompMetadataWithCalcFunction<AnyZodObject, Record<string, unknown> | undefined>[];
+}>;
+export declare const CompositionManagerProvider: React.FC<{
+    children: React.ReactNode;
+    numberOfAudioTags: number;
+}>;
+export {};

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

@@ -23,68 +23,50 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionManagerProvider = exports.compositionsRef = exports.CompositionManager = void 0;
+exports.CompositionManagerProvider = exports.compositionsRef = 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,
-});
+const AssetManager_js_1 = require("./AssetManager.js");
+const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
+const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
+const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
+const SequenceManager_js_1 = require("./SequenceManager.js");
 exports.compositionsRef = react_1.default.createRef();
-const CompositionManagerProvider = ({ children }) => {
+const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
+    var _a;
     // 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 registerComposition = (0, react_1.useCallback)((comp) => {
+    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);
-        });
-    }, []);
-    const registerSequence = (0, react_1.useCallback)((seq) => {
-        setSequences((seqs) => {
-            return [...seqs, seq];
+            const value = [...comps, comp]
+                .slice()
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                .sort((a, b) => a.nonce - b.nonce);
+            return value;
         });
-    }, []);
+    }, [updateCompositions]);
     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 [
@@ -101,19 +83,12 @@ const CompositionManagerProvider = ({ children }) => {
             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: () => compositions,
+            getCompositions: () => currentcompositionsRef.current,
         };
-    }, [compositions]);
+    }, []);
+    const composition = compositions.find((c) => c.id === currentComposition);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             compositions,
@@ -121,12 +96,6 @@ const CompositionManagerProvider = ({ children }) => {
             unregisterComposition,
             currentComposition,
             setCurrentComposition,
-            registerSequence,
-            unregisterSequence,
-            registerAsset,
-            unregisterAsset,
-            sequences,
-            assets,
             folders,
             registerFolder,
             unregisterFolder,
@@ -138,17 +107,11 @@ const CompositionManagerProvider = ({ children }) => {
         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 }));
+    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(AssetManager_js_1.AssetManagerProvider, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/CompositionManagerContext.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { AnyZodObject } from 'zod';
+import type { AnyCompMetadata, AnyComposition, TComposition } from './CompositionManager.js';
+import type { TFolder } from './Folder.js';
+export type BaseMetadata = Pick<AnyCompMetadata, 'durationInFrames' | 'fps' | 'defaultProps' | 'height' | 'width'>;
+export type CompositionManagerContext = {
+    compositions: AnyComposition[];
+    registerComposition: <Schema extends AnyZodObject, Props extends Record<string, unknown> | undefined>(comp: TComposition<Schema, Props>) => 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;
+    folders: TFolder[];
+};
+export declare const CompositionManager: import("react").Context<CompositionManagerContext>;

package/dist/cjs/CompositionManagerContext.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionManager = void 0;
+const react_1 = require("react");
+exports.CompositionManager = (0, react_1.createContext)({
+    compositions: [],
+    registerComposition: () => undefined,
+    unregisterComposition: () => undefined,
+    registerFolder: () => undefined,
+    unregisterFolder: () => undefined,
+    currentComposition: null,
+    setCurrentComposition: () => undefined,
+    setCurrentCompositionMetadata: () => undefined,
+    folders: [],
+    currentCompositionMetadata: null,
+});

package/dist/cjs/EditorProps.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type Props = Record<string, Record<string, unknown>>;
+export type EditorPropsContextType = {
+    props: Props;
+    updateProps: (options: {
+        id: string;
+        defaultProps: Record<string, unknown>;
+        newProps: Record<string, unknown> | ((oldProps: Record<string, unknown>) => Record<string, unknown>);
+    }) => void;
+};
+export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
+export declare const EditorPropsProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};