remotion 3.3.97 → 3.3.99

package/dist/cjs/Img.js

@@ -55,35 +55,38 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
         }
         console.error('Error loading image with src:', (_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src, e, 'Handle the event using the onError() prop to make this message disappear.');
     }, [maxRetries, onError, retryIn]);
-    (0, react_1.useLayoutEffect)(() => {
-        if (process.env.NODE_ENV === 'test') {
-            return;
-        }
-        const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + src);
-        const { current } = imageRef;
-        const onComplete = () => {
-            var _a, _b, _c, _d;
-            if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
-                delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
-                console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
+            if (process.env.NODE_ENV === 'test') {
+                return;
             }
-            (0, delay_render_js_1.continueRender)(newHandle);
-        };
-        const didLoad = () => {
-            onComplete();
-        };
-        if (current === null || current === void 0 ? void 0 : current.complete) {
-            onComplete();
-        }
-        else {
-            current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
-        }
-        // If tag gets unmounted, clear pending handles because image is not going to load
-        return () => {
-            current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
-            (0, delay_render_js_1.continueRender)(newHandle);
-        };
-    }, [src]);
+            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + src);
+            const { current } = imageRef;
+            const onComplete = () => {
+                var _a, _b, _c, _d;
+                if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
+                    delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
+                    console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
+                }
+                (0, delay_render_js_1.continueRender)(newHandle);
+            };
+            const didLoad = () => {
+                onComplete();
+            };
+            if (current === null || current === void 0 ? void 0 : current.complete) {
+                onComplete();
+            }
+            else {
+                current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
+            }
+            // If tag gets unmounted, clear pending handles because image is not going to load
+            return () => {
+                current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
+                (0, delay_render_js_1.continueRender)(newHandle);
+            };
+        }, [src]);
+    }
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };
 /**

package/dist/cjs/audio/Audio.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Audio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const absolute_src_js_1 = require("../absolute-src.js");
 const get_environment_js_1 = require("../get-environment.js");
 const index_js_1 = require("../loop/index.js");
 const Sequence_js_1 = require("../Sequence.js");
@@ -31,8 +32,8 @@ const AudioRefForwardingFunction = (props, ref) => {
     const onDuration = (0, react_1.useCallback)((src, durationInSeconds) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
-    if (loop && props.src && durations[props.src] !== undefined) {
-        const duration = Math.floor(durations[props.src] * fps);
+    if (loop && props.src && durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)] !== undefined) {
+        const duration = Math.floor(durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)] * fps);
         const playbackRate = (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1;
         const actualDuration = duration / playbackRate;
         return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { layout: "none", durationInFrames: Math.floor(actualDuration), children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref }) }));

package/dist/cjs/audio/AudioForRendering.js

@@ -88,12 +88,12 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             const { current } = audioRef;
             const didLoad = () => {
                 if (current === null || current === void 0 ? void 0 : current.duration) {
-                    onDuration(src, current.duration);
+                    onDuration(current.src, current.duration);
                 }
                 (0, delay_render_js_1.continueRender)(newHandle);
             };
             if (current === null || current === void 0 ? void 0 : current.duration) {
-                onDuration(src, current.duration);
+                onDuration(current.src, current.duration);
                 (0, delay_render_js_1.continueRender)(newHandle);
             }
             else {

package/dist/cjs/internals.d.ts

@@ -41,7 +41,6 @@ export declare const Internals: {
     RemotionContextProvider: (props: import("./wrap-remotion-context.js").RemotionContextProviderProps) => JSX.Element;
     CSSUtils: typeof CSSUtils;
     setupEnvVariables: () => void;
-    ENV_VARIABLES_ENV_NAME: "ENV_VARIABLES";
     MediaVolumeContext: import("react").Context<MediaVolumeContextValue>;
     SetMediaVolumeContext: import("react").Context<SetMediaVolumeContextValue>;
     validateDurationInFrames: ({ allowFloats, component, durationInFrames, }: {

package/dist/cjs/internals.js

@@ -73,7 +73,6 @@ exports.Internals = {
     RemotionContextProvider: wrap_remotion_context_js_1.RemotionContextProvider,
     CSSUtils,
     setupEnvVariables: setup_env_variables_js_1.setupEnvVariables,
-    ENV_VARIABLES_ENV_NAME: setup_env_variables_js_1.ENV_VARIABLES_ENV_NAME,
     MediaVolumeContext: volume_position_state_js_1.MediaVolumeContext,
     SetMediaVolumeContext: volume_position_state_js_1.SetMediaVolumeContext,
     validateDurationInFrames: validate_duration_in_frames_js_1.validateDurationInFrames,

package/dist/cjs/nonce.js

@@ -9,7 +9,13 @@ exports.NonceContext = (0, react_1.createContext)({
 const useNonce = () => {
     const context = (0, react_1.useContext)(exports.NonceContext);
     const [nonce, setNonce] = (0, react_1.useState)(() => context.getNonce());
+    const lastContext = (0, react_1.useRef)(context);
+    // Only if context changes, but not initially
     (0, react_1.useEffect)(() => {
+        if (lastContext.current === context) {
+            return;
+        }
+        lastContext.current = context;
         setNonce(context.getNonce);
     }, [context]);
     return nonce;

package/dist/cjs/setup-env-variables.d.ts

@@ -1,2 +1 @@
-export declare const ENV_VARIABLES_ENV_NAME: "ENV_VARIABLES";
 export declare const setupEnvVariables: () => void;

package/dist/cjs/setup-env-variables.js

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setupEnvVariables = exports.ENV_VARIABLES_ENV_NAME = void 0;
+exports.setupEnvVariables = void 0;
 const get_environment_js_1 = require("./get-environment.js");
-exports.ENV_VARIABLES_ENV_NAME = 'ENV_VARIABLES';
 const getEnvVariables = () => {
     if ((0, get_environment_js_1.getRemotionEnvironment)() === 'rendering') {
         const param = window.remotion_envVariables;
@@ -12,11 +11,10 @@ const getEnvVariables = () => {
         return { ...JSON.parse(param), NODE_ENV: process.env.NODE_ENV };
     }
     if ((0, get_environment_js_1.getRemotionEnvironment)() === 'preview') {
-        // Webpack will convert this to an object at compile time.
-        // Don't convert this syntax to a computed property.
+        // For the Preview, we already set the environment variables in index-html.ts.
+        // We just add NODE_ENV here.
         return {
-            ...process.env.ENV_VARIABLES,
-            NODE_ENV: process.env.NODE_ENV,
+            NODE_ENV: 'development',
         };
     }
     throw new Error('Can only call getEnvVariables() if environment is `rendering` or `preview`');

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.97";
+export declare const VERSION = "3.3.99";

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 = '3.3.97';
+exports.VERSION = '3.3.99';

package/dist/cjs/video/Video.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Video = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const absolute_src_js_1 = require("../absolute-src.js");
 const get_environment_js_1 = require("../get-environment.js");
 const index_js_1 = require("../loop/index.js");
 const Sequence_js_1 = require("../Sequence.js");
@@ -28,8 +29,8 @@ const VideoForwardingFunction = (props, ref) => {
     const onDuration = (0, react_1.useCallback)((src, durationInSeconds) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
-    if (loop && props.src && durations[props.src] !== undefined) {
-        const naturalDuration = durations[props.src] * fps;
+    if (loop && props.src && durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)] !== undefined) {
+        const naturalDuration = durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)] * fps;
         const playbackRate = (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1;
         const durationInFrames = Math.floor(naturalDuration / playbackRate);
         return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { durationInFrames: durationInFrames, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref }) }));

package/dist/cjs/video/duration-state.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DurationsContextProvider = exports.DurationsContext = exports.durationReducer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const absolute_src_js_1 = require("../absolute-src.js");
 const durationReducer = (state, action) => {
     switch (action.type) {
         case 'got-duration':
             return {
                 ...state,
-                [action.src]: action.durationInSeconds,
+                [(0, absolute_src_js_1.getAbsoluteSrc)(action.src)]: action.durationInSeconds,
             };
         default:
             return state;

package/dist/esm/index.mjs

@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '3.3.97';
+const VERSION = '3.3.99';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -131,6 +131,10 @@ const AbsoluteFillRefForwarding = (props, ref) => {
  */
 const AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
 
+const getAbsoluteSrc = (relativeSrc) => {
+    return new URL(relativeSrc, window.location.origin).href;
+};
+
 const getRemotionEnvironment = () => {
     if (process.env.NODE_ENV === 'production') {
         if (typeof window !== 'undefined' && window.remotion_isPlayer) {
@@ -538,7 +542,13 @@ const NonceContext = createContext({
 const useNonce = () => {
     const context = useContext(NonceContext);
     const [nonce, setNonce] = useState(() => context.getNonce());
+    const lastContext = useRef(context);
+    // Only if context changes, but not initially
     useEffect(() => {
+        if (lastContext.current === context) {
+            return;
+        }
+        lastContext.current = context;
         setNonce(context.getNonce);
     }, [context]);
     return nonce;
@@ -907,7 +917,7 @@ const durationReducer = (state, action) => {
         case 'got-duration':
             return {
                 ...state,
-                [action.src]: action.durationInSeconds,
+                [getAbsoluteSrc(action.src)]: action.durationInSeconds,
             };
         default:
             return state;
@@ -1706,10 +1716,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
 };
 const AudioForDevelopment = forwardRef(AudioForDevelopmentForwardRefFunction);
 
-const getAbsoluteSrc = (relativeSrc) => {
-    return new URL(relativeSrc, window.location.origin).href;
-};
-
 if (typeof window !== 'undefined') {
     window.ready = false;
 }
@@ -1856,12 +1862,12 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             const { current } = audioRef;
             const didLoad = () => {
                 if (current === null || current === void 0 ? void 0 : current.duration) {
-                    onDuration(src, current.duration);
+                    onDuration(current.src, current.duration);
                 }
                 continueRender(newHandle);
             };
             if (current === null || current === void 0 ? void 0 : current.duration) {
-                onDuration(src, current.duration);
+                onDuration(current.src, current.duration);
                 continueRender(newHandle);
             }
             else {
@@ -1896,8 +1902,8 @@ const AudioRefForwardingFunction = (props, ref) => {
     const onDuration = useCallback((src, durationInSeconds) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
-    if (loop && props.src && durations[props.src] !== undefined) {
-        const duration = Math.floor(durations[props.src] * fps);
+    if (loop && props.src && durations[getAbsoluteSrc(props.src)] !== undefined) {
+        const duration = Math.floor(durations[getAbsoluteSrc(props.src)] * fps);
         const playbackRate = (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1;
         const actualDuration = duration / playbackRate;
         return (jsx(Loop, { layout: "none", durationInFrames: Math.floor(actualDuration), children: jsx(Audio, { ...propsOtherThanLoop, ref: ref }) }));
@@ -2218,7 +2224,6 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
     return (jsx(NonceContext.Provider, { value: nonceContext, children: jsx(TimelineContext.Provider, { value: timelineContextValue, children: jsx(SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx(PrefetchProvider, { children: jsx(NativeLayersProvider, { children: jsx(CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: jsx(DurationsContextProvider, { children: children }) }) }) }) }) }) }));
 };
 
-const ENV_VARIABLES_ENV_NAME = 'ENV_VARIABLES';
 const getEnvVariables = () => {
     if (getRemotionEnvironment() === 'rendering') {
         const param = window.remotion_envVariables;
@@ -2228,11 +2233,10 @@ const getEnvVariables = () => {
         return { ...JSON.parse(param), NODE_ENV: process.env.NODE_ENV };
     }
     if (getRemotionEnvironment() === 'preview') {
-        // Webpack will convert this to an object at compile time.
-        // Don't convert this syntax to a computed property.
+        // For the Preview, we already set the environment variables in index-html.ts.
+        // We just add NODE_ENV here.
         return {
-            ...process.env.ENV_VARIABLES,
-            NODE_ENV: process.env.NODE_ENV,
+            NODE_ENV: 'development',
         };
     }
     throw new Error('Can only call getEnvVariables() if environment is `rendering` or `preview`');
@@ -2403,7 +2407,6 @@ const Internals = {
     RemotionContextProvider,
     CSSUtils,
     setupEnvVariables,
-    ENV_VARIABLES_ENV_NAME,
     MediaVolumeContext,
     SetMediaVolumeContext,
     validateDurationInFrames,
@@ -2882,35 +2885,38 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
         }
         console.error('Error loading image with src:', (_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src, e, 'Handle the event using the onError() prop to make this message disappear.');
     }, [maxRetries, onError, retryIn]);
-    useLayoutEffect(() => {
-        if (process.env.NODE_ENV === 'test') {
-            return;
-        }
-        const newHandle = delayRender('Loading <Img> with src=' + src);
-        const { current } = imageRef;
-        const onComplete = () => {
-            var _a, _b, _c, _d;
-            if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
-                delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
-                console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useLayoutEffect(() => {
+            if (process.env.NODE_ENV === 'test') {
+                return;
             }
-            continueRender(newHandle);
-        };
-        const didLoad = () => {
-            onComplete();
-        };
-        if (current === null || current === void 0 ? void 0 : current.complete) {
-            onComplete();
-        }
-        else {
-            current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
-        }
-        // If tag gets unmounted, clear pending handles because image is not going to load
-        return () => {
-            current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
-            continueRender(newHandle);
-        };
-    }, [src]);
+            const newHandle = delayRender('Loading <Img> with src=' + src);
+            const { current } = imageRef;
+            const onComplete = () => {
+                var _a, _b, _c, _d;
+                if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
+                    delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
+                    console.info(`Retry successful - ${(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src} is now loaded`);
+                }
+                continueRender(newHandle);
+            };
+            const didLoad = () => {
+                onComplete();
+            };
+            if (current === null || current === void 0 ? void 0 : current.complete) {
+                onComplete();
+            }
+            else {
+                current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
+            }
+            // If tag gets unmounted, clear pending handles because image is not going to load
+            return () => {
+                current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
+                continueRender(newHandle);
+            };
+        }, [src]);
+    }
     return (jsx("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };
 /**
@@ -4165,8 +4171,8 @@ const VideoForwardingFunction = (props, ref) => {
     const onDuration = useCallback((src, durationInSeconds) => {
         setDurations({ type: 'got-duration', durationInSeconds, src });
     }, [setDurations]);
-    if (loop && props.src && durations[props.src] !== undefined) {
-        const naturalDuration = durations[props.src] * fps;
+    if (loop && props.src && durations[getAbsoluteSrc(props.src)] !== undefined) {
+        const naturalDuration = durations[getAbsoluteSrc(props.src)] * fps;
         const playbackRate = (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1;
         const durationInFrames = Math.floor(naturalDuration / playbackRate);
         return (jsx(Loop, { durationInFrames: durationInFrames, children: jsx(Video, { ...propsOtherThanLoop, ref: ref }) }));

package/dist/esm/version.mjs

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

package/package.json

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