remotion 4.0.8 → 4.0.11

package/dist/cjs/Img.js

@@ -65,7 +65,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
             if (process.env.NODE_ENV === 'test') {
                 return;
             }
-            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + src);
+            const newHandle = (0, delay_render_js_1.delayRender)('Loading <Img> with src=' + actualSrc);
             const { current } = imageRef;
             const onComplete = () => {
                 var _a, _b, _c, _d;
@@ -89,7 +89,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
                 current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
                 (0, delay_render_js_1.continueRender)(newHandle);
             };
-        }, [src]);
+        }, [actualSrc]);
     }
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };

package/dist/cjs/delay-render.js

@@ -7,7 +7,9 @@ if (typeof window !== 'undefined') {
     window.remotion_renderReady = false;
 }
 let handles = [];
-const timeouts = {};
+if (typeof window !== 'undefined') {
+    window.remotion_delayRenderTimeouts = {};
+}
 exports.DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
 const defaultTimeout = 30000;
 /**
@@ -29,18 +31,23 @@ const delayRender = (label) => {
         const timeoutToUse = typeof window === 'undefined'
             ? defaultTimeout
             : ((_c = window.remotion_puppeteerTimeout) !== null && _c !== void 0 ? _c : defaultTimeout) - 2000;
-        timeouts[handle] = setTimeout(() => {
-            const message = [
-                `A delayRender()`,
-                label ? `"${label}"` : null,
-                `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-                exports.DELAY_RENDER_CALLSTACK_TOKEN,
-                called,
-            ]
-                .filter(truthy_js_1.truthy)
-                .join(' ');
-            throw new Error(message);
-        }, timeoutToUse);
+        if (typeof window !== 'undefined') {
+            window.remotion_delayRenderTimeouts[handle] = {
+                label: label !== null && label !== void 0 ? label : null,
+                timeout: setTimeout(() => {
+                    const message = [
+                        `A delayRender()`,
+                        label ? `"${label}"` : null,
+                        `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+                        exports.DELAY_RENDER_CALLSTACK_TOKEN,
+                        called,
+                    ]
+                        .filter(truthy_js_1.truthy)
+                        .join(' ');
+                    throw new Error(message);
+                }, timeoutToUse),
+            };
+        }
     }
     if (typeof window !== 'undefined') {
         window.remotion_renderReady = false;
@@ -64,7 +71,8 @@ const continueRender = (handle) => {
     handles = handles.filter((h) => {
         if (h === handle) {
             if ((0, get_environment_js_1.getRemotionEnvironment)() === 'rendering') {
-                clearTimeout(timeouts[handle]);
+                clearTimeout(window.remotion_delayRenderTimeouts[handle].timeout);
+                delete window.remotion_delayRenderTimeouts[handle];
             }
             return false;
         }

package/dist/cjs/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import './asset-types.js';
 import type { TAsset } from './CompositionManager.js';
 import type { StaticFile } from './get-static-files.js';
@@ -6,6 +7,12 @@ import type { VideoConfig } from './video-config.js';
 declare global {
     interface Window {
         remotion_renderReady: boolean;
+        remotion_delayRenderTimeouts: {
+            [key: string]: {
+                label: string | null;
+                timeout: number | NodeJS.Timeout;
+            };
+        };
         remotion_cancelledError: string | undefined;
         remotion_getCompositionNames: () => string[];
         getStaticCompositions: () => Promise<VideoConfig[]>;
@@ -34,7 +41,7 @@ declare global {
         remotion_isPlayer: boolean;
         remotion_isBuilding: undefined | (() => void);
         remotion_finishedBuilding: undefined | (() => void);
-        siteVersion: '8';
+        siteVersion: '9';
         remotion_version: string;
         remotion_imported: string | boolean;
     }

package/dist/cjs/input-props-serialization.d.ts

@@ -5,6 +5,7 @@ export type SerializedJSONWithCustomFields = {
     mapUsed: boolean;
     setUsed: boolean;
 };
+export declare const DATE_TOKEN = "remotion-date:";
 export declare const FILE_TOKEN = "remotion-file:";
 export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
     data: Record<string, unknown>;

package/dist/cjs/input-props-serialization.js

@@ -1,9 +1,9 @@
 "use strict";
 // Must keep this file in sync with the one in packages/lambda/src/shared/serialize-props.ts!
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = void 0;
+exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = exports.DATE_TOKEN = void 0;
 const static_file_js_1 = require("./static-file.js");
-const DATE_TOKEN = 'remotion-date:';
+exports.DATE_TOKEN = 'remotion-date:';
 exports.FILE_TOKEN = 'remotion-file:';
 const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
     let customDateUsed = false;
@@ -14,7 +14,7 @@ const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
         const item = this[key];
         if (item instanceof Date) {
             customDateUsed = true;
-            return `${DATE_TOKEN}${item.toISOString()}`;
+            return `${exports.DATE_TOKEN}${item.toISOString()}`;
         }
         if (item instanceof Map) {
             mapUsed = true;
@@ -37,8 +37,8 @@ const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
 exports.serializeJSONWithDate = serializeJSONWithDate;
 const deserializeJSONWithCustomFields = (data) => {
     return JSON.parse(data, (_, value) => {
-        if (typeof value === 'string' && value.startsWith(DATE_TOKEN)) {
-            return new Date(value.replace(DATE_TOKEN, ''));
+        if (typeof value === 'string' && value.startsWith(exports.DATE_TOKEN)) {
+            return new Date(value.replace(exports.DATE_TOKEN, ''));
         }
         if (typeof value === 'string' && value.startsWith(exports.FILE_TOKEN)) {
             return (0, static_file_js_1.staticFile)(value.replace(exports.FILE_TOKEN, ''));

package/dist/cjs/internals.d.ts

@@ -138,6 +138,7 @@ export declare const Internals: {
     }) => SerializedJSONWithCustomFields;
     readonly deserializeJSONWithCustomFields: (data: string) => Record<string, unknown>;
     readonly FILE_TOKEN: "remotion-file:";
+    readonly DATE_TOKEN: "remotion-date:";
     readonly NativeLayersProvider: import("react").FC<{
         children?: import("react").ReactNode;
     }>;

package/dist/cjs/internals.js

@@ -127,6 +127,7 @@ exports.Internals = {
     serializeJSONWithDate: input_props_serialization_js_1.serializeJSONWithDate,
     deserializeJSONWithCustomFields: input_props_serialization_js_1.deserializeJSONWithCustomFields,
     FILE_TOKEN: input_props_serialization_js_1.FILE_TOKEN,
+    DATE_TOKEN: input_props_serialization_js_1.DATE_TOKEN,
     NativeLayersProvider: NativeLayers_js_1.NativeLayersProvider,
     ClipComposition: Composition_js_1.ClipComposition,
 };

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.8";
+export declare const VERSION = "4.0.11";

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 = '4.0.8';
+exports.VERSION = '4.0.11';

package/dist/cjs/video/OffthreadVideo.js

@@ -35,6 +35,7 @@ const OffthreadVideo = (props) => {
     if (environment === 'rendering') {
         return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { ...otherProps });
     }
-    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
+    const { transparent, ...withoutTransparent } = otherProps;
+    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
 };
 exports.OffthreadVideo = OffthreadVideo;

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
 const AssetManager_js_1 = require("../AssetManager.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
+const cancel_render_js_1 = require("../cancel-render.js");
 const default_css_js_1 = require("../default-css.js");
 const Img_js_1 = require("../Img.js");
 const random_js_1 = require("../random.js");
@@ -91,8 +92,13 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent((0, absolute_src_js_1.getAbsoluteSrc)(src))}&time=${encodeURIComponent(currentTime)}&transparent=${String(transparent)}`;
     }, [currentTime, src, transparent]);
     const onErr = (0, react_1.useCallback)((e) => {
-        onError === null || onError === void 0 ? void 0 : onError(e);
-    }, [onError]);
+        if (onError) {
+            onError === null || onError === void 0 ? void 0 : onError(e);
+        }
+        else {
+            (0, cancel_render_js_1.cancelRender)('Failed to load image with src ' + actualSrc);
+        }
+    }, [actualSrc, onError]);
     const className = (0, react_1.useMemo)(() => {
         return [default_css_js_1.OFFTHREAD_VIDEO_CLASS_NAME, props.className]
             .filter(truthy_js_1.truthy)

package/dist/esm/index.mjs

@@ -59,7 +59,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.8';
+const VERSION = '4.0.11';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -2240,7 +2240,9 @@ if (typeof window !== 'undefined') {
     window.remotion_renderReady = false;
 }
 let handles = [];
-const timeouts = {};
+if (typeof window !== 'undefined') {
+    window.remotion_delayRenderTimeouts = {};
+}
 const DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
 const defaultTimeout = 30000;
 /**
@@ -2262,18 +2264,23 @@ const delayRender = (label) => {
         const timeoutToUse = typeof window === 'undefined'
             ? defaultTimeout
             : ((_c = window.remotion_puppeteerTimeout) !== null && _c !== void 0 ? _c : defaultTimeout) - 2000;
-        timeouts[handle] = setTimeout(() => {
-            const message = [
-                `A delayRender()`,
-                label ? `"${label}"` : null,
-                `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-                DELAY_RENDER_CALLSTACK_TOKEN,
-                called,
-            ]
-                .filter(truthy)
-                .join(' ');
-            throw new Error(message);
-        }, timeoutToUse);
+        if (typeof window !== 'undefined') {
+            window.remotion_delayRenderTimeouts[handle] = {
+                label: label !== null && label !== void 0 ? label : null,
+                timeout: setTimeout(() => {
+                    const message = [
+                        `A delayRender()`,
+                        label ? `"${label}"` : null,
+                        `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+                        DELAY_RENDER_CALLSTACK_TOKEN,
+                        called,
+                    ]
+                        .filter(truthy)
+                        .join(' ');
+                    throw new Error(message);
+                }, timeoutToUse),
+            };
+        }
     }
     if (typeof window !== 'undefined') {
         window.remotion_renderReady = false;
@@ -2296,7 +2303,8 @@ const continueRender = (handle) => {
     handles = handles.filter((h) => {
         if (h === handle) {
             if (getRemotionEnvironment() === 'rendering') {
-                clearTimeout(timeouts[handle]);
+                clearTimeout(window.remotion_delayRenderTimeouts[handle].timeout);
+                delete window.remotion_delayRenderTimeouts[handle];
             }
             return false;
         }
@@ -3018,7 +3026,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
             if (process.env.NODE_ENV === 'test') {
                 return;
             }
-            const newHandle = delayRender('Loading <Img> with src=' + src);
+            const newHandle = delayRender('Loading <Img> with src=' + actualSrc);
             const { current } = imageRef;
             const onComplete = () => {
                 var _a, _b, _c, _d;
@@ -3042,7 +3050,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, ...props }, ref) => {
                 current === null || current === void 0 ? void 0 : current.removeEventListener('load', didLoad);
                 continueRender(newHandle);
             };
-        }, [src]);
+        }, [actualSrc]);
     }
     return (jsx("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));
 };
@@ -3836,6 +3844,7 @@ const Internals = {
     serializeJSONWithDate,
     deserializeJSONWithCustomFields,
     FILE_TOKEN,
+    DATE_TOKEN,
     NativeLayersProvider,
     ClipComposition,
 };
@@ -4247,8 +4256,13 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
         return `http://localhost:${window.remotion_proxyPort}/proxy?src=${encodeURIComponent(getAbsoluteSrc(src))}&time=${encodeURIComponent(currentTime)}&transparent=${String(transparent)}`;
     }, [currentTime, src, transparent]);
     const onErr = useCallback((e) => {
-        onError === null || onError === void 0 ? void 0 : onError(e);
-    }, [onError]);
+        if (onError) {
+            onError === null || onError === void 0 ? void 0 : onError(e);
+        }
+        else {
+            cancelRender('Failed to load image with src ' + actualSrc);
+        }
+    }, [actualSrc, onError]);
     const className = useMemo(() => {
         return [OFFTHREAD_VIDEO_CLASS_NAME, props.className]
             .filter(truthy)
@@ -4441,7 +4455,8 @@ const OffthreadVideo = (props) => {
     if (environment === 'rendering') {
         return jsx(OffthreadVideoForRendering, { ...otherProps });
     }
-    return (jsx(VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
+    const { transparent, ...withoutTransparent } = otherProps;
+    return (jsx(VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
 };
 
 const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, ...props }, ref) => {

package/dist/esm/version.mjs

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

package/package.json

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