remotion 4.0.42 → 4.0.44

package/dist/cjs/CompositionManager.js

@@ -38,8 +38,8 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     // 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 [folders, setFolders] = (0, react_1.useState)([]);
+    const [canvasContent, setCanvasContent] = (0, react_1.useState)(null);
     const [currentCompositionMetadata, setCurrentCompositionMetadata] = (0, react_1.useState)(null);
     const updateCompositions = (0, react_1.useCallback)((
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -88,29 +88,32 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
             getCompositions: () => currentcompositionsRef.current,
         };
     }, []);
-    const composition = compositions.find((c) => c.id === currentComposition);
+    const composition = compositions.find((c) => (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+        ? c.id === canvasContent.compositionId
+        : null);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             compositions,
             registerComposition,
             unregisterComposition,
-            currentComposition,
-            setCurrentComposition,
             folders,
             registerFolder,
             unregisterFolder,
             currentCompositionMetadata,
             setCurrentCompositionMetadata,
+            canvasContent,
+            setCanvasContent,
         };
     }, [
         compositions,
         registerComposition,
         unregisterComposition,
-        currentComposition,
         folders,
         registerFolder,
         unregisterFolder,
         currentCompositionMetadata,
+        canvasContent,
+        setCanvasContent,
     ]);
     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)(RenderAssetManager_js_1.RenderAssetManagerProvider, { 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 }) }) }) }) }));
 };

package/dist/cjs/CompositionManagerContext.d.ts

@@ -4,16 +4,23 @@ import type { AnyComposition, TComposition } from './CompositionManager.js';
 import type { TFolder } from './Folder.js';
 import type { VideoConfig } from './video-config.js';
 export type BaseMetadata = Pick<VideoConfig, 'durationInFrames' | 'fps' | 'props' | 'height' | 'width'>;
+export type CanvasContent = {
+    type: 'composition';
+    compositionId: string;
+} | {
+    type: 'asset';
+    asset: string;
+};
 export type CompositionManagerContext = {
     compositions: AnyComposition[];
     registerComposition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(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[];
+    canvasContent: CanvasContent | null;
+    setCanvasContent: (canvasContent: CanvasContent | null) => void;
 };
 export declare const CompositionManager: import("react").Context<CompositionManagerContext>;

package/dist/cjs/CompositionManagerContext.js

@@ -8,9 +8,9 @@ exports.CompositionManager = (0, react_1.createContext)({
     unregisterComposition: () => undefined,
     registerFolder: () => undefined,
     unregisterFolder: () => undefined,
-    currentComposition: null,
-    setCurrentComposition: () => undefined,
     setCurrentCompositionMetadata: () => undefined,
     folders: [],
     currentCompositionMetadata: null,
+    canvasContent: null,
+    setCanvasContent: () => undefined,
 });

package/dist/cjs/Img.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+export type ImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> & {
+    maxRetries?: number;
+    src: string;
+};
 /**
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
  * @see [Documentation](https://www.remotion.dev/docs/img)
  */
-export declare const Img: React.ForwardRefExoticComponent<Pick<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src"> & {
-    maxRetries?: number | undefined;
-    src: string;
-}, "width" | "height" | "id" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "crossOrigin" | "src" | "loading" | "referrerPolicy" | "alt" | "decoding" | "sizes" | "srcSet" | "useMap" | "maxRetries"> & React.RefAttributes<HTMLImageElement>>;
+export declare const Img: React.ForwardRefExoticComponent<Pick<ImgProps, "width" | "height" | "id" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "crossOrigin" | "src" | "loading" | "referrerPolicy" | "alt" | "decoding" | "sizes" | "srcSet" | "useMap" | "maxRetries"> & React.RefAttributes<HTMLImageElement>>;

package/dist/cjs/RenderAssetManager.js

@@ -4,6 +4,7 @@ exports.RenderAssetManagerProvider = exports.RenderAssetManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.RenderAssetManager = (0, react_1.createContext)({
+    // Must be undefined, otherwise error in Player
     registerRenderAsset: () => undefined,
     unregisterRenderAsset: () => undefined,
     renderAssets: [],

package/dist/cjs/ResolveCompositionConfig.js

@@ -12,8 +12,10 @@ exports.ResolveCompositionContext = (0, react_1.createContext)(null);
 exports.resolveCompositionsRef = (0, react_1.createRef)();
 const ResolveCompositionConfig = ({ children }) => {
     const [currentRenderModalComposition, setCurrentRenderModalComposition] = (0, react_1.useState)(null);
-    const { compositions, currentComposition, currentCompositionMetadata } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
-    const selectedComposition = compositions.find((c) => c.id === currentComposition);
+    const { compositions, canvasContent, currentCompositionMetadata } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const selectedComposition = compositions.find((c) => canvasContent &&
+        canvasContent.type === 'composition' &&
+        canvasContent.compositionId === c.id);
     const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
     const { props: allEditorProps } = (0, react_1.useContext)(EditorProps_js_1.EditorPropsContext);
     const [resolvedConfigs, setResolvedConfigs] = (0, react_1.useState)({});
@@ -89,6 +91,7 @@ const ResolveCompositionConfig = ({ children }) => {
         }
         return controller;
     }, [currentCompositionMetadata]);
+    const currentComposition = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     (0, react_1.useImperativeHandle)(exports.resolveCompositionsRef, () => {
         return {
             setCurrentRenderModalComposition: (id) => {
@@ -153,7 +156,8 @@ exports.needsResolution = needsResolution;
 const useResolvedVideoConfig = (preferredCompositionId) => {
     const context = (0, react_1.useContext)(exports.ResolveCompositionContext);
     const { props: allEditorProps } = (0, react_1.useContext)(EditorProps_js_1.EditorPropsContext);
-    const { compositions, currentComposition, currentCompositionMetadata } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const { compositions, canvasContent, currentCompositionMetadata } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const currentComposition = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const compositionId = preferredCompositionId !== null && preferredCompositionId !== void 0 ? preferredCompositionId : currentComposition;
     const composition = compositions.find((c) => c.id === compositionId);
     const selectedEditorProps = (0, react_1.useMemo)(() => {

package/dist/cjs/Sequence.d.ts

@@ -23,6 +23,6 @@ export type SequenceProps = {
 } & LayoutAndStyle;
 /**
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
- * @see [Documentation](https://www.remotion.dev/docs/sequence]
+ * @see [Documentation](https://www.remotion.dev/docs/sequence)
  */
 export declare const Sequence: React.ForwardRefExoticComponent<SequenceProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/Sequence.js

@@ -120,6 +120,6 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
 };
 /**
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
- * @see [Documentation](https://www.remotion.dev/docs/sequence]
+ * @see [Documentation](https://www.remotion.dev/docs/sequence)
  */
 exports.Sequence = (0, react_1.forwardRef)(SequenceRefForwardingFunction);

package/dist/cjs/index.d.ts

@@ -67,6 +67,7 @@ export * from './audio/index.js';
 export { cancelRender } from './cancel-render.js';
 export { CalculateMetadataFunction, Composition, CompositionProps, CompProps, StillProps, } from './Composition.js';
 export { AnyCompMetadata, AnyComposition, SmallTCompMetadata, TCompMetadata, TRenderAsset, } from './CompositionManager.js';
+export type { CanvasContent } from './CompositionManagerContext.js';
 export { getInputProps } from './config/input-props.js';
 export { continueRender, delayRender } from './delay-render.js';
 export * from './easing.js';
@@ -75,10 +76,10 @@ export * from './freeze.js';
 export { getRemotionEnvironment } from './get-remotion-environment.js';
 export { getStaticFiles, StaticFile } from './get-static-files.js';
 export * from './IFrame.js';
-export * from './Img.js';
+export { Img, ImgProps } from './Img.js';
 export * from './internals.js';
 export { interpolateColors } from './interpolate-colors.js';
-export { ExtrapolateType, interpolate, InterpolateOptions, } from './interpolate.js';
+export { EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, } from './interpolate.js';
 export { Loop } from './loop/index.js';
 export { ClipRegion } from './NativeLayers.js';
 export { prefetch } from './prefetch.js';

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Config = exports.Experimental = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolate = exports.interpolateColors = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.cancelRender = void 0;
+exports.Config = exports.Experimental = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolate = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.cancelRender = void 0;
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
 const is_player_js_1 = require("./is-player.js");
@@ -40,7 +40,8 @@ Object.defineProperty(exports, "getRemotionEnvironment", { enumerable: true, get
 var get_static_files_js_1 = require("./get-static-files.js");
 Object.defineProperty(exports, "getStaticFiles", { enumerable: true, get: function () { return get_static_files_js_1.getStaticFiles; } });
 __exportStar(require("./IFrame.js"), exports);
-__exportStar(require("./Img.js"), exports);
+var Img_js_1 = require("./Img.js");
+Object.defineProperty(exports, "Img", { enumerable: true, get: function () { return Img_js_1.Img; } });
 __exportStar(require("./internals.js"), exports);
 var interpolate_colors_js_1 = require("./interpolate-colors.js");
 Object.defineProperty(exports, "interpolateColors", { enumerable: true, get: function () { return interpolate_colors_js_1.interpolateColors; } });

package/dist/cjs/interpolate.d.ts

@@ -3,8 +3,9 @@ export type ExtrapolateType = 'extend' | 'identity' | 'clamp';
  * @description This function allows you to map a range of values to another with a conside syntax
  * @see [Documentation](https://www.remotion.dev/docs/interpolate)
  */
+export type EasingFunction = (input: number) => number;
 export type InterpolateOptions = Partial<{
-    easing: (input: number) => number;
+    easing: EasingFunction;
     extrapolateLeft: ExtrapolateType;
     extrapolateRight: ExtrapolateType;
 }>;

package/dist/cjs/use-video.js

@@ -5,13 +5,15 @@ const react_1 = require("react");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const useVideo = () => {
-    const context = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
-    const selected = context.compositions.find((c) => {
-        return c.id === context.currentComposition;
+    var _a;
+    const { canvasContent, compositions, currentCompositionMetadata } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const selected = compositions.find((c) => {
+        return ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' &&
+            c.id === canvasContent.compositionId);
     });
-    const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(context.currentComposition);
+    const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)((_a = selected === null || selected === void 0 ? void 0 : selected.id) !== null && _a !== void 0 ? _a : null);
     return (0, react_1.useMemo)(() => {
-        var _a, _b;
+        var _a;
         if (!resolved) {
             return null;
         }
@@ -30,9 +32,9 @@ const useVideo = () => {
             id: selected.id,
             // We override the selected metadata with the metadata that was passed to renderMedia(),
             // and don't allow it to be changed during render anymore
-            ...((_b = context.currentCompositionMetadata) !== null && _b !== void 0 ? _b : {}),
+            ...(currentCompositionMetadata !== null && currentCompositionMetadata !== void 0 ? currentCompositionMetadata : {}),
             component: selected.component,
         };
-    }, [context.currentCompositionMetadata, resolved, selected]);
+    }, [currentCompositionMetadata, resolved, selected]);
 };
 exports.useVideo = useVideo;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.42";
+export declare const VERSION = "4.0.44";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '4.0.42';
+exports.VERSION = '4.0.44';

package/dist/cjs/video/Video.js

@@ -37,7 +37,7 @@ const VideoForwardingFunction = (props, ref) => {
                 mediaDuration,
                 playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
                 startFrom,
-            }), children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref }) }));
+            }), layout: "none", children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref }) }));
     }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
         (0, validate_start_from_props_js_1.validateStartFromProps)(startFrom, endAt);

package/dist/esm/index.mjs

@@ -59,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.42';
+const VERSION = '4.0.44';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -318,11 +318,11 @@ const CompositionManager = createContext({
     unregisterComposition: () => undefined,
     registerFolder: () => undefined,
     unregisterFolder: () => undefined,
-    currentComposition: null,
-    setCurrentComposition: () => undefined,
     setCurrentCompositionMetadata: () => undefined,
     folders: [],
     currentCompositionMetadata: null,
+    canvasContent: null,
+    setCanvasContent: () => undefined,
 });
 
 const problematicCharacters = {
@@ -648,8 +648,10 @@ const ResolveCompositionContext = createContext(null);
 const resolveCompositionsRef = createRef();
 const ResolveCompositionConfig = ({ children }) => {
     const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState(null);
-    const { compositions, currentComposition, currentCompositionMetadata } = useContext(CompositionManager);
-    const selectedComposition = compositions.find((c) => c.id === currentComposition);
+    const { compositions, canvasContent, currentCompositionMetadata } = useContext(CompositionManager);
+    const selectedComposition = compositions.find((c) => canvasContent &&
+        canvasContent.type === 'composition' &&
+        canvasContent.compositionId === c.id);
     const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
     const { props: allEditorProps } = useContext(EditorPropsContext);
     const [resolvedConfigs, setResolvedConfigs] = useState({});
@@ -725,6 +727,7 @@ const ResolveCompositionConfig = ({ children }) => {
         }
         return controller;
     }, [currentCompositionMetadata]);
+    const currentComposition = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     useImperativeHandle(resolveCompositionsRef, () => {
         return {
             setCurrentRenderModalComposition: (id) => {
@@ -787,7 +790,8 @@ const needsResolution = (composition) => {
 const useResolvedVideoConfig = (preferredCompositionId) => {
     const context = useContext(ResolveCompositionContext);
     const { props: allEditorProps } = useContext(EditorPropsContext);
-    const { compositions, currentComposition, currentCompositionMetadata } = useContext(CompositionManager);
+    const { compositions, canvasContent, currentCompositionMetadata } = useContext(CompositionManager);
+    const currentComposition = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const compositionId = preferredCompositionId !== null && preferredCompositionId !== void 0 ? preferredCompositionId : currentComposition;
     const composition = compositions.find((c) => c.id === compositionId);
     const selectedEditorProps = useMemo(() => {
@@ -839,13 +843,15 @@ const useResolvedVideoConfig = (preferredCompositionId) => {
 };
 
 const useVideo = () => {
-    const context = useContext(CompositionManager);
-    const selected = context.compositions.find((c) => {
-        return c.id === context.currentComposition;
+    var _a;
+    const { canvasContent, compositions, currentCompositionMetadata } = useContext(CompositionManager);
+    const selected = compositions.find((c) => {
+        return ((canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' &&
+            c.id === canvasContent.compositionId);
     });
-    const resolved = useResolvedVideoConfig(context.currentComposition);
+    const resolved = useResolvedVideoConfig((_a = selected === null || selected === void 0 ? void 0 : selected.id) !== null && _a !== void 0 ? _a : null);
     return useMemo(() => {
-        var _a, _b;
+        var _a;
         if (!resolved) {
             return null;
         }
@@ -864,10 +870,10 @@ const useVideo = () => {
             id: selected.id,
             // We override the selected metadata with the metadata that was passed to renderMedia(),
             // and don't allow it to be changed during render anymore
-            ...((_b = context.currentCompositionMetadata) !== null && _b !== void 0 ? _b : {}),
+            ...(currentCompositionMetadata !== null && currentCompositionMetadata !== void 0 ? currentCompositionMetadata : {}),
             component: selected.component,
         };
-    }, [context.currentCompositionMetadata, resolved, selected]);
+    }, [currentCompositionMetadata, resolved, selected]);
 };
 
 const TimelineContext = createContext({
@@ -1102,7 +1108,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
 };
 /**
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
- * @see [Documentation](https://www.remotion.dev/docs/sequence]
+ * @see [Documentation](https://www.remotion.dev/docs/sequence)
  */
 const Sequence = forwardRef(SequenceRefForwardingFunction);
 
@@ -2397,6 +2403,7 @@ const continueRender = (handle) => {
 };
 
 const RenderAssetManager = createContext({
+    // Must be undefined, otherwise error in Player
     registerRenderAsset: () => undefined,
     unregisterRenderAsset: () => undefined,
     renderAssets: [],
@@ -3199,8 +3206,8 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [compositions, setCompositions] = useState([]);
     const currentcompositionsRef = useRef(compositions);
-    const [currentComposition, setCurrentComposition] = useState(null);
     const [folders, setFolders] = useState([]);
+    const [canvasContent, setCanvasContent] = useState(null);
     const [currentCompositionMetadata, setCurrentCompositionMetadata] = useState(null);
     const updateCompositions = useCallback((
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3249,29 +3256,32 @@ const CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
             getCompositions: () => currentcompositionsRef.current,
         };
     }, []);
-    const composition = compositions.find((c) => c.id === currentComposition);
+    const composition = compositions.find((c) => (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
+        ? c.id === canvasContent.compositionId
+        : null);
     const contextValue = useMemo(() => {
         return {
             compositions,
             registerComposition,
             unregisterComposition,
-            currentComposition,
-            setCurrentComposition,
             folders,
             registerFolder,
             unregisterFolder,
             currentCompositionMetadata,
             setCurrentCompositionMetadata,
+            canvasContent,
+            setCanvasContent,
         };
     }, [
         compositions,
         registerComposition,
         unregisterComposition,
-        currentComposition,
         folders,
         registerFolder,
         unregisterFolder,
         currentCompositionMetadata,
+        canvasContent,
+        setCanvasContent,
     ]);
     return (jsx(CompositionManager.Provider, { value: contextValue, children: jsx(SequenceManagerProvider, { children: jsx(RenderAssetManagerProvider, { children: jsx(ResolveCompositionConfig, { children: jsx(SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, children: children }) }) }) }) }));
 };
@@ -4751,7 +4761,7 @@ const VideoForwardingFunction = (props, ref) => {
                 mediaDuration,
                 playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
                 startFrom,
-            }), children: jsx(Video, { ...propsOtherThanLoop, ref: ref }) }));
+            }), layout: "none", children: jsx(Video, { ...propsOtherThanLoop, ref: ref }) }));
     }
     if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
         validateStartFromProps(startFrom, endAt);

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.42';
+const VERSION = '4.0.44';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.42",
+  "version": "4.0.44",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",