remotion 3.3.81 → 3.3.83

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

@@ -139,6 +139,11 @@ declare global {
              * Default: 'swangle' in Lambda, null elsewhere.
              */
             readonly setChromiumOpenGlRenderer: (renderer: 'swangle' | 'angle' | 'egl' | 'swiftshader') => void;
+            /**
+             * Set the user agent for Chrome. Only works during rendering.
+             * Default:
+             */
+            readonly setChromiumUserAgent: (userAgent: string | null) => void;
         };
         /**
          * @deprecated New flat config format: You can now replace `Config.Rendering.` with `Config.`

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.81";
+export declare const VERSION = "3.3.83";

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.81';
+exports.VERSION = '3.3.83';

package/dist/cjs/video/get-current-time.js

@@ -13,19 +13,20 @@ const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, mediaType, })
         playbackRate,
         startFrom,
     });
-    if (src.endsWith('webm')) {
-        // For WebM videos, we need to add a little bit of shift to get the right frame.
-        const msPerFrame = 1000 / fps;
-        const msShift = msPerFrame / 2;
-        return (expectedFrame * msPerFrame + msShift) / 1000;
-    }
-    if (mediaType === 'video') {
+    const isChrome = typeof window !== 'undefined' &&
+        window.navigator.userAgent.match(/Chrome\/([0-9]+)/);
+    if (isChrome &&
+        Number(isChrome[1]) < 112 &&
+        mediaType === 'video' &&
+        src.endsWith('.mp4')) {
         // In Chrome, for MP4s, if 30fps, the first frame is still displayed at 0.033333
         // even though after that it increases by 0.033333333 each.
         // So frame = 0 in Remotion is like frame = 1 for the browser
         return (expectedFrame + 1) / fps;
     }
-    // For audio, we don't do any shift correction
-    return expectedFrame / fps;
+    // For WebM videos, we need to add a little bit of shift to get the right frame.
+    const msPerFrame = 1000 / fps;
+    const msShift = msPerFrame / 2;
+    return (expectedFrame * msPerFrame + msShift) / 1000;
 };
 exports.getMediaTime = getMediaTime;

package/dist/cjs/z-color.d.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+export declare const REMOTION_COLOR_BRAND = "__remotion-color";
+export declare const parseColor: (value: string) => {
+    a: number;
+    r: number;
+    g: number;
+    b: number;
+};
+export declare const zColor: () => z.ZodEffects<z.ZodString, string, string>;

package/dist/cjs/z-color.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zColor = exports.parseColor = exports.REMOTION_COLOR_BRAND = void 0;
+const zod_1 = require("zod");
+const interpolate_colors_js_1 = require("./interpolate-colors.js");
+exports.REMOTION_COLOR_BRAND = '__remotion-color';
+const parseColor = (value) => {
+    const colored = (0, interpolate_colors_js_1.processColor)(value).toString(16).padStart(8, '0');
+    const opacity = parseInt(colored.slice(0, 2), 16);
+    const r = parseInt(colored.slice(2, 4), 16);
+    const g = parseInt(colored.slice(4, 6), 16);
+    const b = parseInt(colored.slice(6, 8), 16);
+    return { a: opacity, r, g, b };
+};
+exports.parseColor = parseColor;
+const zColor = () => zod_1.z
+    .string()
+    .refine((value) => {
+    try {
+        (0, exports.parseColor)(value);
+        return true;
+    }
+    catch (err) {
+        return false;
+    }
+}, { message: 'Invalid color' })
+    .describe(exports.REMOTION_COLOR_BRAND);
+exports.zColor = zColor;

package/dist/esm/index.mjs

@@ -58,7 +58,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '3.3.81';
+const VERSION = '3.3.83';
 
 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({
@@ -1197,20 +1197,21 @@ const getMediaTime = ({ fps, frame, src, playbackRate, startFrom, mediaType, })
         playbackRate,
         startFrom,
     });
-    if (src.endsWith('webm')) {
-        // For WebM videos, we need to add a little bit of shift to get the right frame.
-        const msPerFrame = 1000 / fps;
-        const msShift = msPerFrame / 2;
-        return (expectedFrame * msPerFrame + msShift) / 1000;
-    }
-    if (mediaType === 'video') {
+    const isChrome = typeof window !== 'undefined' &&
+        window.navigator.userAgent.match(/Chrome\/([0-9]+)/);
+    if (isChrome &&
+        Number(isChrome[1]) < 112 &&
+        mediaType === 'video' &&
+        src.endsWith('.mp4')) {
         // In Chrome, for MP4s, if 30fps, the first frame is still displayed at 0.033333
         // even though after that it increases by 0.033333333 each.
         // So frame = 0 in Remotion is like frame = 1 for the browser
         return (expectedFrame + 1) / fps;
     }
-    // For audio, we don't do any shift correction
-    return expectedFrame / fps;
+    // For WebM videos, we need to add a little bit of shift to get the right frame.
+    const msPerFrame = 1000 / fps;
+    const msShift = msPerFrame / 2;
+    return (expectedFrame * msPerFrame + msShift) / 1000;
 };
 
 const alreadyWarned = {};
@@ -2790,47 +2791,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 }));
 };
 /**

package/dist/esm/version.mjs

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

package/package.json

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