remotion 3.3.96 → 3.3.98

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/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.96";
+export declare const VERSION = "3.3.98";

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.96';
+exports.VERSION = '3.3.98';

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.96';
+const VERSION = '3.3.98';
 
 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) {
@@ -907,7 +911,7 @@ const durationReducer = (state, action) => {
         case 'got-duration':
             return {
                 ...state,
-                [action.src]: action.durationInSeconds,
+                [getAbsoluteSrc(action.src)]: action.durationInSeconds,
             };
         default:
             return state;
@@ -1706,10 +1710,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 +1856,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 +1896,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 }) }));
@@ -2882,35 +2882,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 +4168,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.96';
+const VERSION = '3.3.98';
 
 export { VERSION };

package/package.json

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