remotion 3.3.80 → 3.3.82

package/dist/cjs/Img.d.ts

@@ -3,4 +3,6 @@ import React from 'react';
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
  * @see [Documentation](https://www.remotion.dev/docs/img)
  */
-export declare const Img: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & React.RefAttributes<HTMLImageElement>>;
+export declare const Img: React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & {
+    maxRetries?: number | undefined;
+}, "key" | "maxRetries" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & React.RefAttributes<HTMLImageElement>>;

package/dist/cjs/Img.js

@@ -4,49 +4,86 @@ exports.Img = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const delay_render_js_1 = require("./delay-render.js");
-const get_environment_js_1 = require("./get-environment.js");
 const prefetch_js_1 = require("./prefetch.js");
-const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
+function exponentialBackoff(errorCount) {
+    return 1000 * 2 ** (errorCount - 1);
+}
+const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
     const imageRef = (0, react_1.useRef)(null);
-    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
+    const errors = (0, react_1.useRef)({});
     (0, react_1.useImperativeHandle)(ref, () => {
         return imageRef.current;
     }, []);
     const actualSrc = (0, prefetch_js_1.usePreload)(src);
-    const didGetError = (0, react_1.useCallback)((e) => {
-        var _a;
-        if (onError) {
-            onError(e);
-        }
-        else {
-            console.error('Error loading image with src:', (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src, e, 'Handle the event using the onError() prop to make this message disappear.');
+    const retryIn = (0, react_1.useCallback)((timeout) => {
+        if (!imageRef.current) {
+            return;
         }
-    }, [onError]);
-    // If image source switches, make new handle
-    if (environment === 'rendering') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        (0, react_1.useLayoutEffect)(() => {
-            if (process.env.NODE_ENV === 'test') {
+        const currentSrc = imageRef.current.src;
+        setTimeout(() => {
+            var _a;
+            if (!imageRef.current) {
+                // Component has been unmounted, do not retry
                 return;
             }
-            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + src);
-            const { current } = imageRef;
-            const didLoad = () => {
-                (0, delay_render_js_1.continueRender)(newHandle);
-            };
-            if (current === null || current === void 0 ? void 0 : current.complete) {
-                (0, delay_render_js_1.continueRender)(newHandle);
+            const newSrc = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src;
+            if (newSrc !== currentSrc) {
+                // src has changed, do not retry
+                return;
             }
-            else {
-                current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
+            imageRef.current.removeAttribute('src');
+            imageRef.current.setAttribute('src', newSrc);
+        }, timeout);
+    }, []);
+    const didGetError = (0, react_1.useCallback)((e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (!errors.current) {
+            return;
+        }
+        errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src] =
+            ((_c = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _c !== void 0 ? _c : 0) + 1;
+        if (onError &&
+            ((_e = errors.current[(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src]) !== null && _e !== void 0 ? _e : 0) > maxRetries) {
+            onError(e);
+            return;
+        }
+        if (((_g = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _g !== void 0 ? _g : 0) <= maxRetries) {
+            const backoff = exponentialBackoff((_j = errors.current[(_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src]) !== null && _j !== void 0 ? _j : 0);
+            console.warn(`Could not load image with source ${(_k = imageRef.current) === null || _k === void 0 ? void 0 : _k.src}, retrying again in ${backoff}ms`);
+            retryIn(backoff);
+            return;
+        }
+        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 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]);
-    }
+            (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/internals.d.ts

@@ -103,5 +103,6 @@ export declare const Internals: {
         durationInFrames: number;
         allowFloats: boolean;
     }) => void;
+    usePreload: (src: string) => string;
 };
 export type { TComposition, Timeline, TCompMetadata, TSequence, TAsset, TimelineContextValue, SetTimelineContextValue, CompProps, CompositionManagerContext, MediaVolumeContextValue, SetMediaVolumeContextValue, RemotionEnvironment, };

package/dist/cjs/internals.js

@@ -35,6 +35,7 @@ const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
 const is_player_js_1 = require("./is-player.js");
 const portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
+const prefetch_js_1 = require("./prefetch.js");
 const register_root_js_1 = require("./register-root.js");
 const RemotionRoot_js_1 = require("./RemotionRoot.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
@@ -98,4 +99,5 @@ exports.Internals = {
     useIsPlayer: is_player_js_1.useIsPlayer,
     useRemotionEnvironment: get_environment_js_1.useRemotionEnvironment,
     validateFrame: validate_frame_js_1.validateFrame,
+    usePreload: prefetch_js_1.usePreload,
 };

package/dist/cjs/static-file.js

@@ -24,6 +24,20 @@ const staticFile = (path) => {
     if (path.startsWith('..') || path.startsWith('./')) {
         throw new TypeError(`staticFile() does not support relative paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
     }
+    if (path.startsWith('/Users') ||
+        path.startsWith('/home') ||
+        path.startsWith('/tmp') ||
+        path.startsWith('/etc') ||
+        path.startsWith('/opt') ||
+        path.startsWith('/var') ||
+        path.startsWith('C:') ||
+        path.startsWith('D:') ||
+        path.startsWith('E:')) {
+        throw new TypeError(`staticFile() does not support absolute paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
+    if (path.startsWith('public/')) {
+        throw new TypeError(`Do not include the public/ prefix when using staticFile() - got "${path}". See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
     const preparsed = inner(path);
     if (!preparsed.startsWith('/')) {
         return `/${preparsed}`;

package/dist/cjs/use-media-in-timeline.js

@@ -42,7 +42,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         if (typeof volume === 'number') {
             return volume;
         }
-        return new Array(Math.max(0, duration + startsAt))
+        return new Array(Math.floor(Math.max(0, duration + startsAt)))
             .fill(true)
             .map((_, i) => {
             return (0, volume_prop_js_1.evaluateVolume)({

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.80";
+export declare const VERSION = "3.3.82";

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.80';
+exports.VERSION = '3.3.82';

package/dist/esm/index.mjs

@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '3.3.80';
+const VERSION = '3.3.82';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -988,7 +988,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         if (typeof volume === 'number') {
             return volume;
         }
-        return new Array(Math.max(0, duration + startsAt))
+        return new Array(Math.floor(Math.max(0, duration + startsAt)))
             .fill(true)
             .map((_, i) => {
             return evaluateVolume({
@@ -2387,6 +2387,7 @@ const Internals = {
     useIsPlayer,
     useRemotionEnvironment,
     validateFrame,
+    usePreload,
 };
 
 const rotate = {
@@ -2789,47 +2790,85 @@ const IFrameRefForwarding = ({ onLoad, onError, ...props }, ref) => {
  */
 const IFrame = forwardRef(IFrameRefForwarding);
 
-const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
+function exponentialBackoff(errorCount) {
+    return 1000 * 2 ** (errorCount - 1);
+}
+const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
     const imageRef = useRef(null);
-    const environment = useRemotionEnvironment();
+    const errors = useRef({});
     useImperativeHandle(ref, () => {
         return imageRef.current;
     }, []);
     const actualSrc = usePreload(src);
-    const didGetError = useCallback((e) => {
-        var _a;
-        if (onError) {
-            onError(e);
-        }
-        else {
-            console.error('Error loading image with src:', (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src, e, 'Handle the event using the onError() prop to make this message disappear.');
+    const retryIn = useCallback((timeout) => {
+        if (!imageRef.current) {
+            return;
         }
-    }, [onError]);
-    // If image source switches, make new handle
-    if (environment === 'rendering') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useLayoutEffect(() => {
-            if (process.env.NODE_ENV === 'test') {
+        const currentSrc = imageRef.current.src;
+        setTimeout(() => {
+            var _a;
+            if (!imageRef.current) {
+                // Component has been unmounted, do not retry
                 return;
             }
-            const newHandle = delayRender('Loading <Img> with src=' + src);
-            const { current } = imageRef;
-            const didLoad = () => {
-                continueRender(newHandle);
-            };
-            if (current === null || current === void 0 ? void 0 : current.complete) {
-                continueRender(newHandle);
+            const newSrc = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src;
+            if (newSrc !== currentSrc) {
+                // src has changed, do not retry
+                return;
             }
-            else {
-                current === null || current === void 0 ? void 0 : current.addEventListener('load', didLoad, { once: true });
+            imageRef.current.removeAttribute('src');
+            imageRef.current.setAttribute('src', newSrc);
+        }, timeout);
+    }, []);
+    const didGetError = useCallback((e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (!errors.current) {
+            return;
+        }
+        errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src] =
+            ((_c = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _c !== void 0 ? _c : 0) + 1;
+        if (onError &&
+            ((_e = errors.current[(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src]) !== null && _e !== void 0 ? _e : 0) > maxRetries) {
+            onError(e);
+            return;
+        }
+        if (((_g = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _g !== void 0 ? _g : 0) <= maxRetries) {
+            const backoff = exponentialBackoff((_j = errors.current[(_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src]) !== null && _j !== void 0 ? _j : 0);
+            console.warn(`Could not load image with source ${(_k = imageRef.current) === null || _k === void 0 ? void 0 : _k.src}, retrying again in ${backoff}ms`);
+            retryIn(backoff);
+            return;
+        }
+        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 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]);
-    }
+            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 }));
 };
 /**
@@ -3560,6 +3599,20 @@ const staticFile = (path) => {
     if (path.startsWith('..') || path.startsWith('./')) {
         throw new TypeError(`staticFile() does not support relative paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
     }
+    if (path.startsWith('/Users') ||
+        path.startsWith('/home') ||
+        path.startsWith('/tmp') ||
+        path.startsWith('/etc') ||
+        path.startsWith('/opt') ||
+        path.startsWith('/var') ||
+        path.startsWith('C:') ||
+        path.startsWith('D:') ||
+        path.startsWith('E:')) {
+        throw new TypeError(`staticFile() does not support absolute paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
+    if (path.startsWith('public/')) {
+        throw new TypeError(`Do not include the public/ prefix when using staticFile() - got "${path}". See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
     const preparsed = inner(path);
     if (!preparsed.startsWith('/')) {
         return `/${preparsed}`;

package/dist/esm/version.mjs

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

package/package.json

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