remotion 4.0.145 → 4.0.147

package/dist/cjs/CompositionManager.d.ts

@@ -69,7 +69,7 @@ export type TRenderAsset = {
     audioStartFrame: number;
 };
 export declare const compositionsRef: React.RefObject<{
-    getCompositions: () => TCompMetadataWithCalcFunction<AnyZodObject, Record<string, unknown>>[];
+    getCompositions: () => AnyComposition[];
 }>;
 export declare const CompositionManagerProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/cjs/EditorProps.d.ts

@@ -9,7 +9,10 @@ export type EditorPropsContextType = {
     }) => void;
 };
 export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
+export declare const editorPropsProviderRef: React.RefObject<{
+    getProps: () => Props;
+}>;
 export declare const EditorPropsProvider: React.FC<{
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }>;
 export {};

package/dist/cjs/EditorProps.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditorPropsProvider = exports.EditorPropsContext = void 0;
+exports.EditorPropsProvider = exports.editorPropsProviderRef = exports.EditorPropsContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 exports.EditorPropsContext = (0, react_1.createContext)({
@@ -32,6 +32,7 @@ exports.EditorPropsContext = (0, react_1.createContext)({
         throw new Error('Not implemented');
     },
 });
+exports.editorPropsProviderRef = react_1.default.createRef();
 const EditorPropsProvider = ({ children }) => {
     const [props, setProps] = react_1.default.useState({});
     const updateProps = (0, react_1.useCallback)(({ defaultProps, id, newProps, }) => {
@@ -45,6 +46,11 @@ const EditorPropsProvider = ({ children }) => {
             };
         });
     }, []);
+    (0, react_1.useImperativeHandle)(exports.editorPropsProviderRef, () => {
+        return {
+            getProps: () => props,
+        };
+    }, [props]);
     const ctx = (0, react_1.useMemo)(() => {
         return { props, updateProps };
     }, [props, updateProps]);

package/dist/cjs/RemotionRoot.js

@@ -27,11 +27,27 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
             window.remotion_setFrame = (f, composition, attempt) => {
                 window.remotion_attempt = attempt;
                 const id = (0, delay_render_js_1.delayRender)(`Setting the current frame to ${f}`);
-                setFrame((s) => ({
-                    ...s,
-                    [composition]: f,
-                }));
-                requestAnimationFrame(() => (0, delay_render_js_1.continueRender)(id));
+                let asyncUpdate = true;
+                setFrame((s) => {
+                    var _a;
+                    const currentFrame = (_a = s[composition]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame;
+                    // Avoid cloning the object
+                    if (currentFrame === f) {
+                        asyncUpdate = false;
+                        return s;
+                    }
+                    return {
+                        ...s,
+                        [composition]: f,
+                    };
+                });
+                // After setting the state, need to wait until it is applied in the next cycle
+                if (asyncUpdate) {
+                    requestAnimationFrame(() => (0, delay_render_js_1.continueRender)(id));
+                }
+                else {
+                    (0, delay_render_js_1.continueRender)(id);
+                }
             };
             window.remotion_isPlayer = false;
         }, []);

package/dist/cjs/audio/AudioForRendering.js

@@ -64,7 +64,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
-            audioStartFrame: -((_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _b !== void 0 ? _b : 0),
+            audioStartFrame: Math.max(0, -((_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _b !== void 0 ? _b : 0)),
         });
         return () => unregisterRenderAsset(id);
     }, [

package/dist/cjs/internals.d.ts

@@ -64,7 +64,7 @@ export declare const Internals: {
     readonly isCompositionIdValid: (id: string) => RegExpMatchArray | null;
     readonly getPreviewDomElement: () => HTMLElement | null;
     readonly compositionsRef: import("react").RefObject<{
-        getCompositions: () => import("./CompositionManager.js").TCompMetadataWithCalcFunction<import("zod").AnyZodObject, Record<string, unknown>>[];
+        getCompositions: () => import("./CompositionManager.js").AnyComposition[];
     }>;
     readonly portalNode: () => HTMLElement;
     readonly waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
@@ -83,7 +83,7 @@ export declare const Internals: {
     }>;
     readonly useIsPlayer: () => boolean;
     readonly EditorPropsProvider: import("react").FC<{
-        children: import("react").ReactNode;
+        readonly children: import("react").ReactNode;
     }>;
     readonly EditorPropsContext: import("react").Context<import("./EditorProps.js").EditorPropsContextType>;
     readonly usePreload: (src: string) => string;
@@ -155,5 +155,10 @@ export declare const Internals: {
             height: number;
         };
     }) => number;
+    readonly editorPropsProviderRef: import("react").RefObject<{
+        getProps: () => {
+            [x: string]: Record<string, unknown>;
+        };
+    }>;
 };
 export type { CompositionManagerContext, CompProps, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TRenderAsset as TAsset, TCompMetadata, TComposition, TimelinePosition as Timeline, TimelineContextValue, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -124,4 +124,5 @@ exports.Internals = {
     CurrentScaleContext: use_current_scale_js_1.CurrentScaleContext,
     PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,
     calculateScale: use_current_scale_js_1.calculateScale,
+    editorPropsProviderRef: EditorProps_js_1.editorPropsProviderRef,
 };

package/dist/cjs/timeline-position-state.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = exports.SetTimelineContext = exports.TimelineContext = void 0;
 const react_1 = require("react");
+const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const use_video_js_1 = require("./use-video.js");
 exports.TimelineContext = (0, react_1.createContext)({
     frame: {},
@@ -39,12 +40,16 @@ const getInitialFrameState = () => {
 };
 exports.getInitialFrameState = getInitialFrameState;
 const getFrameForComposition = (composition) => {
-    var _a, _b, _c;
+    var _a, _b;
     const item = (_a = localStorage.getItem(makeKey())) !== null && _a !== void 0 ? _a : '{}';
     const obj = JSON.parse(item);
-    return obj[composition]
-        ? Number(obj[composition])
-        : (_c = (typeof window === 'undefined' ? 0 : (_b = window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0)) !== null && _c !== void 0 ? _c : 0;
+    if (obj[composition] !== undefined) {
+        return Number(obj[composition]);
+    }
+    if (typeof window === 'undefined') {
+        return 0;
+    }
+    return (_b = window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
 };
 exports.getFrameForComposition = getFrameForComposition;
 const useTimelinePosition = () => {
@@ -56,7 +61,7 @@ const useTimelinePosition = () => {
             ? 0
             : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0;
     }
-    const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : (typeof window !== 'undefined' && window.remotion_isPlayer
+    const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isPlayer
         ? 0
         : (0, exports.getFrameForComposition)(videoConfig.id));
     return Math.min(videoConfig.durationInFrames - 1, unclamped);

package/dist/cjs/use-current-frame.js

@@ -4,6 +4,7 @@ exports.useCurrentFrame = void 0;
 const react_1 = require("react");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
+const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 /**
  * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
@@ -12,7 +13,7 @@ const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const useCurrentFrame = () => {
     const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
     if (!canUseRemotionHooks) {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+        if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isPlayer) {
             throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
         }
         throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.145";
+export declare const VERSION = "4.0.147";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.145';
+exports.VERSION = '4.0.147';

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -70,7 +70,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
-            audioStartFrame: -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0),
+            audioStartFrame: Math.max(0, -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0)),
         });
         return () => unregisterRenderAsset(id);
     }, [

package/dist/cjs/video/VideoForRendering.js

@@ -71,7 +71,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
-            audioStartFrame: -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0),
+            audioStartFrame: Math.max(0, -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0)),
         });
         return () => unregisterRenderAsset(id);
     }, [

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useMemo, useLayoutEffect, useContext, useEffect, forwardRef, useCallback, useRef, createRef, useImperativeHandle, useReducer, Suspense, Children } from 'react';
+import React, { createContext, useState, useMemo, useLayoutEffect, useContext, useEffect, forwardRef, useCallback, useRef, useImperativeHandle, createRef, useReducer, Suspense, Children } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -110,7 +110,7 @@ function truthy(value) {
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-const VERSION = '4.0.145';
+const VERSION = '4.0.147';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -265,6 +265,7 @@ const EditorPropsContext = createContext({
         throw new Error('Not implemented');
     },
 });
+const editorPropsProviderRef = React.createRef();
 const EditorPropsProvider = ({ children }) => {
     const [props, setProps] = React.useState({});
     const updateProps = useCallback(({ defaultProps, id, newProps, }) => {
@@ -278,6 +279,11 @@ const EditorPropsProvider = ({ children }) => {
             };
         });
     }, []);
+    useImperativeHandle(editorPropsProviderRef, () => {
+        return {
+            getProps: () => props,
+        };
+    }, [props]);
     const ctx = useMemo(() => {
         return { props, updateProps };
     }, [props, updateProps]);
@@ -857,12 +863,16 @@ const getInitialFrameState = () => {
     return obj;
 };
 const getFrameForComposition = (composition) => {
-    var _a, _b, _c;
+    var _a, _b;
     const item = (_a = localStorage.getItem(makeKey())) !== null && _a !== void 0 ? _a : '{}';
     const obj = JSON.parse(item);
-    return obj[composition]
-        ? Number(obj[composition])
-        : (_c = (typeof window === 'undefined' ? 0 : (_b = window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0)) !== null && _c !== void 0 ? _c : 0;
+    if (obj[composition] !== undefined) {
+        return Number(obj[composition]);
+    }
+    if (typeof window === 'undefined') {
+        return 0;
+    }
+    return (_b = window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
 };
 const useTimelinePosition = () => {
     var _a, _b;
@@ -873,7 +883,7 @@ const useTimelinePosition = () => {
             ? 0
             : (_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0;
     }
-    const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : (typeof window !== 'undefined' && window.remotion_isPlayer
+    const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : (getRemotionEnvironment().isPlayer
         ? 0
         : getFrameForComposition(videoConfig.id));
     return Math.min(videoConfig.durationInFrames - 1, unclamped);
@@ -963,7 +973,7 @@ const useVideoConfig = () => {
 const useCurrentFrame = () => {
     const canUseRemotionHooks = useContext(CanUseRemotionHooks);
     if (!canUseRemotionHooks) {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+        if (getRemotionEnvironment().isPlayer) {
             throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
         }
         throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
@@ -2836,7 +2846,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
-            audioStartFrame: -((_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _b !== void 0 ? _b : 0),
+            audioStartFrame: Math.max(0, -((_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _b !== void 0 ? _b : 0)),
         });
         return () => unregisterRenderAsset(id);
     }, [
@@ -3757,11 +3767,27 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
             window.remotion_setFrame = (f, composition, attempt) => {
                 window.remotion_attempt = attempt;
                 const id = delayRender(`Setting the current frame to ${f}`);
-                setFrame((s) => ({
-                    ...s,
-                    [composition]: f,
-                }));
-                requestAnimationFrame(() => continueRender(id));
+                let asyncUpdate = true;
+                setFrame((s) => {
+                    var _a;
+                    const currentFrame = (_a = s[composition]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame;
+                    // Avoid cloning the object
+                    if (currentFrame === f) {
+                        asyncUpdate = false;
+                        return s;
+                    }
+                    return {
+                        ...s,
+                        [composition]: f,
+                    };
+                });
+                // After setting the state, need to wait until it is applied in the next cycle
+                if (asyncUpdate) {
+                    requestAnimationFrame(() => continueRender(id));
+                }
+                else {
+                    continueRender(id);
+                }
             };
             window.remotion_isPlayer = false;
         }, []);
@@ -4039,6 +4065,7 @@ const Internals = {
     CurrentScaleContext,
     PreviewSizeContext,
     calculateScale,
+    editorPropsProviderRef,
 };
 
 /**
@@ -4874,7 +4901,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
-            audioStartFrame: -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0),
+            audioStartFrame: Math.max(0, -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0)),
         });
         return () => unregisterRenderAsset(id);
     }, [
@@ -5233,7 +5260,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
             allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : false,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : null,
-            audioStartFrame: -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0),
+            audioStartFrame: Math.max(0, -((_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _a !== void 0 ? _a : 0)),
         });
         return () => unregisterRenderAsset(id);
     }, [

package/dist/esm/version.mjs

@@ -4,6 +4,6 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-const VERSION = '4.0.145';
+const VERSION = '4.0.147';
 
 export { VERSION };

package/package.json

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