remotion 4.0.145 → 4.0.146

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/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.146";

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

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

@@ -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.146';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -857,12 +857,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 +877,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 +967,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 +2840,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 +3761,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;
         }, []);
@@ -4874,7 +4894,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 +5253,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.146';
 
 export { VERSION };

package/package.json

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