remotion 4.0.43 → 4.0.45

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

@@ -1,19 +1,29 @@
-/// <reference types="react" />
+import type React from 'react';
 import type { AnyZodObject } from 'zod';
 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;
+} | {
+    type: 'output';
+    path: 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: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
 };
-export declare const CompositionManager: import("react").Context<CompositionManagerContext>;
+export declare const CompositionManager: 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/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.js

@@ -100,7 +100,9 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         nonce,
         loopDisplay,
     ]);
-    const endThreshold = cumulatedFrom + from + durationInFrames - 1;
+    // Ceil to support floats
+    // https://github.com/remotion-dev/remotion/issues/2958
+    const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
     const content = absoluteFrame < cumulatedFrom + from
         ? null
         : absoluteFrame > endThreshold

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';

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.43";
+export declare const VERSION = "4.0.45";

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.43';
+exports.VERSION = '4.0.45';

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.43';
+const VERSION = '4.0.45';
 
 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({
@@ -1082,7 +1088,9 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         nonce,
         loopDisplay,
     ]);
-    const endThreshold = cumulatedFrom + from + durationInFrames - 1;
+    // Ceil to support floats
+    // https://github.com/remotion-dev/remotion/issues/2958
+    const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
     const content = absoluteFrame < cumulatedFrom + from
         ? null
         : absoluteFrame > endThreshold
@@ -2397,6 +2405,7 @@ const continueRender = (handle) => {
 };
 
 const RenderAssetManager = createContext({
+    // Must be undefined, otherwise error in Player
     registerRenderAsset: () => undefined,
     unregisterRenderAsset: () => undefined,
     renderAssets: [],
@@ -3199,8 +3208,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 +3258,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 +4763,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.43';
+const VERSION = '4.0.45';
 
 export { VERSION };

package/package.json

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