remotion 4.0.525 → 4.0.526

package/dist/cjs/AbsoluteFill.d.ts

@@ -74,7 +74,6 @@ export declare const absoluteFillSchema: {
         readonly type: "font-weight";
         readonly default: 400;
         readonly description: "Font weight";
-        readonly keyframable: false;
     };
     readonly 'style.fontStyle': {
         readonly type: "enum";

package/dist/cjs/Img.d.ts

@@ -8,6 +8,7 @@ export type ImgProps = NativeImgProps & {
     readonly delayRenderRetries?: number;
     readonly delayRenderTimeoutInMilliseconds?: number;
     readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
+    readonly onImageError?: (error: Error) => void;
     readonly src: string;
     readonly effects?: EffectsProp;
     readonly showInTimeline?: boolean;
@@ -225,6 +226,7 @@ export declare const Img: React.ComponentType<NativeImgProps & {
     readonly delayRenderRetries?: number | undefined;
     readonly delayRenderTimeoutInMilliseconds?: number | undefined;
     readonly onImageFrame?: ((imageElement: HTMLImageElement) => void) | undefined;
+    readonly onImageError?: ((error: Error) => void) | undefined;
     readonly src: string;
     readonly effects?: EffectsProp | undefined;
     readonly showInTimeline?: boolean | undefined;

package/dist/cjs/Img.js

@@ -22,7 +22,7 @@ const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js")
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, refForOutline, ...props }) => {
+const ImgContent = ({ onError, onImageError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, refForOutline, ...props }) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -67,34 +67,36 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
     const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
     const didGetError = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _j, _k, _l, _m;
         if (!errors.current) {
             return;
         }
         errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src] =
-            ((_h = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _h !== void 0 ? _h : 0) + 1;
-        if (onError &&
-            ((_j = errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src]) !== null && _j !== void 0 ? _j : 0) > maxRetries) {
-            onError(e);
+            ((_j = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _j !== void 0 ? _j : 0) + 1;
+        if ((onError || onImageError) &&
+            ((_k = errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src]) !== null && _k !== void 0 ? _k : 0) > maxRetries) {
+            onError === null || onError === void 0 ? void 0 : onError(e);
+            onImageError === null || onImageError === void 0 ? void 0 : onImageError(new Error('Error loading image with src: ' +
+                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src)));
             return;
         }
-        if (((_k = errors.current[(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src]) !== null && _k !== void 0 ? _k : 0) <= maxRetries) {
-            const backoff = exponentialBackoff((_l = errors.current[(_e = imageRef.current) === null || _e === void 0 ? void 0 : _e.src]) !== null && _l !== void 0 ? _l : 0);
+        if (((_l = errors.current[(_e = imageRef.current) === null || _e === void 0 ? void 0 : _e.src]) !== null && _l !== void 0 ? _l : 0) <= maxRetries) {
+            const backoff = exponentialBackoff((_m = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _m !== void 0 ? _m : 0);
             // eslint-disable-next-line no-console
-            console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src)}, retrying again in ${backoff}ms`);
+            console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_g = imageRef.current) === null || _g === void 0 ? void 0 : _g.src)}, retrying again in ${backoff}ms`);
             retryIn(backoff);
             return;
         }
         try {
             cancelRender('Error loading image with src: ' +
-                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_g = imageRef.current) === null || _g === void 0 ? void 0 : _g.src));
+                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src));
         }
-        catch (_m) {
+        catch (_o) {
             // cancelRender() intentionally throws after storing the error in scope.
             // In async image callbacks, we rely on the stored error for renderer propagation.
         }
-    }, [cancelRender, maxRetries, onError, retryIn]);
+    }, [cancelRender, maxRetries, onError, onImageError, retryIn]);
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -200,6 +202,10 @@ const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, d
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
+    const isMedia = (0, react_1.useMemo)(() => ({
+        type: 'image',
+        src,
+    }), [src]);
     const { effectivePostmountFor, effectivePremountFor, freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
         from: from !== null && from !== void 0 ? from : 0,
         durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
@@ -218,7 +224,7 @@ const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, d
         style: premountingStyle,
         componentName: '<Img />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -239,7 +245,6 @@ exports.imgSchema = {
 };
 const imgCanvasFallbackIncompatibleProps = new Set([
     'alt',
-    'crossOrigin',
     'decoding',
     'fetchPriority',
     'loading',
@@ -276,12 +281,12 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, cropLeft, cropRight, cropTop, cropBottom, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, cropLeft, cropRight, cropTop, cropBottom, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageError, ...props }) => {
     var _a;
     const refForOutline = (0, react_1.useRef)(null);
     const shouldPauseWhenLoading = (0, v5_flag_js_1.resolveV5Default)(pauseWhenLoading);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, onImageError: onImageError, outlineRef: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -296,7 +301,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, outlineRef: refForOutline, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, onError: onImageError, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, outlineRef: refForOutline, ...canvasProps }));
 };
 /*
  * @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.

package/dist/cjs/Interactive.d.ts

@@ -126,7 +126,6 @@ export declare const Interactive: {
             readonly type: "font-weight";
             readonly default: 400;
             readonly description: "Font weight";
-            readonly keyframable: false;
         };
         readonly 'style.fontStyle': {
             readonly type: "enum";

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -219,6 +219,7 @@ export declare const canvasImageSchema: {
 };
 export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & CanvasImageCanvasProps & {
     readonly src: string;
+    readonly crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     readonly width?: number | undefined;
     readonly height?: number | undefined;
     readonly fit?: import("../calculate-image-fit.js").ImageFit | undefined;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -53,7 +53,7 @@ const makeAbortError = () => {
     error.name = 'AbortError';
     return error;
 };
-const loadImage = ({ src, signal, }) => {
+const loadImage = ({ src, signal, crossOrigin, }) => {
     return new Promise((resolve, reject) => {
         const image = new Image();
         let settled = false;
@@ -94,7 +94,7 @@ const loadImage = ({ src, signal, }) => {
             onAbort();
             return;
         }
-        image.crossOrigin = 'anonymous';
+        image.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : 'anonymous';
         image.src = src;
     });
 };
@@ -109,7 +109,7 @@ const waitForNextFrame = ({ onFrame, }) => {
     const frame = requestAnimationFrame(onFrame);
     return () => cancelAnimationFrame(frame);
 };
-const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, refForOutline, ...canvasProps }, ref) => {
+const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, refForOutline, ...canvasProps }, ref) => {
     var _a;
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -187,7 +187,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
             continued: false,
         };
         const attemptLoad = () => {
-            loadImage({ src: actualSrc, signal: controller.signal })
+            loadImage({ src: actualSrc, signal: controller.signal, crossOrigin })
                 .then((image) => {
                 if (cancelled) {
                     return;
@@ -232,6 +232,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         actualSrc,
         cancelRender,
         continuePendingLoadDelay,
+        crossOrigin,
         delayRender,
         delayRenderRetries,
         delayRenderTimeoutInMilliseconds,
@@ -329,10 +330,14 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     return (jsx_runtime_1.jsx("canvas", { ...canvasProps, ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
 });
 CanvasImageContent.displayName = 'CanvasImageContent';
-const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, outlineRef, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, outlineRef, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
+    const isMedia = (0, react_1.useMemo)(() => ({
+        type: 'image',
+        src,
+    }), [src]);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => {
@@ -356,7 +361,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
         style: premountingStyle,
         componentName: _remotionInternalCropComponentName !== null && _remotionInternalCropComponentName !== void 0 ? _remotionInternalCropComponentName : '<CanvasImage />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, crossOrigin: crossOrigin, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.

package/dist/cjs/canvas-image/props.d.ts

@@ -6,6 +6,7 @@ type CanvasImageSequenceProps = InteractiveBaseProps & InteractiveCropProps & In
 export type CanvasImageCanvasProps = Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'children' | 'height' | 'onError' | 'width'>;
 export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps & {
     readonly src: string;
+    readonly crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
     readonly width?: number;
     readonly height?: number;
     readonly fit?: ImageFit;

package/dist/cjs/delay-render.js

@@ -30,7 +30,7 @@ const delayRenderInternal = ({ scope, environment, label, options, }) => {
     scope.remotion_delayRenderHandles.push(handle);
     const called = (_b = (_a = Error().stack) === null || _a === void 0 ? void 0 : _a.replace(/^Error/g, '')) !== null && _b !== void 0 ? _b : '';
     if (environment.isRendering) {
-        const timeoutToUse = ((_d = (_c = options === null || options === void 0 ? void 0 : options.timeoutInMilliseconds) !== null && _c !== void 0 ? _c : scope.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout) - 2000;
+        const timeoutToUse = Math.max(0, ((_d = (_c = options === null || options === void 0 ? void 0 : options.timeoutInMilliseconds) !== null && _c !== void 0 ? _c : scope.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout) - 2000);
         const retriesLeft = ((_e = options === null || options === void 0 ? void 0 : options.retries) !== null && _e !== void 0 ? _e : 0) - (scope.remotion_attempt - 1);
         scope.remotion_delayRenderTimeouts[handle] = {
             label: label !== null && label !== void 0 ? label : null,

package/dist/cjs/interactivity-schema.d.ts

@@ -101,7 +101,7 @@ export type FontWeightFieldSchema = {
     type: 'font-weight';
     default: number | string | undefined;
     description?: string;
-    keyframable?: false;
+    keyframable?: boolean;
 };
 export type AssetFieldSchema = {
     type: 'asset';
@@ -265,7 +265,6 @@ export declare const textSchema: {
         readonly type: "font-weight";
         readonly default: 400;
         readonly description: "Font weight";
-        readonly keyframable: false;
     };
     readonly 'style.fontStyle': {
         readonly type: "enum";

package/dist/cjs/interactivity-schema.js

@@ -79,7 +79,6 @@ exports.textSchema = {
         type: 'font-weight',
         default: 400,
         description: 'Font weight',
-        keyframable: false,
     },
     'style.fontStyle': {
         type: 'enum',

package/dist/cjs/internals.d.ts

@@ -654,7 +654,6 @@ export declare const Internals: {
             readonly type: "font-weight";
             readonly default: 400;
             readonly description: "Font weight";
-            readonly keyframable: false;
         };
         readonly 'style.fontStyle': {
             readonly type: "enum";

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.525";
+export declare const VERSION = "4.0.526";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.525';
+exports.VERSION = '4.0.526';

package/dist/esm/index.mjs

@@ -1200,7 +1200,7 @@ var delayRenderInternal = ({
   scope.remotion_delayRenderHandles.push(handle);
   const called = Error().stack?.replace(/^Error/g, "") ?? "";
   if (environment.isRendering) {
-    const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
+    const timeoutToUse = Math.max(0, (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000);
     const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
     scope.remotion_delayRenderTimeouts[handle] = {
       label: label2 ?? null,
@@ -1537,7 +1537,7 @@ var Composition = (props) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.525";
+var VERSION = "4.0.526";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2061,8 +2061,7 @@ var textSchema = {
   "style.fontWeight": {
     type: "font-weight",
     default: 400,
-    description: "Font weight",
-    keyframable: false
+    description: "Font weight"
   },
   "style.fontStyle": {
     type: "enum",
@@ -10936,7 +10935,8 @@ var makeAbortError = () => {
 };
 var loadImage = ({
   src,
-  signal
+  signal,
+  crossOrigin
 }) => {
   return new Promise((resolve, reject) => {
     const image = new Image;
@@ -10977,7 +10977,7 @@ var loadImage = ({
       onAbort();
       return;
     }
-    image.crossOrigin = "anonymous";
+    image.crossOrigin = crossOrigin ?? "anonymous";
     image.src = src;
   });
 };
@@ -10998,6 +10998,7 @@ var waitForNextFrame = ({
 };
 var CanvasImageContent = forwardRef10(({
   src,
+  crossOrigin,
   width,
   height,
   fit = "fill",
@@ -11086,7 +11087,7 @@ var CanvasImageContent = forwardRef10(({
       continued: false
     };
     const attemptLoad = () => {
-      loadImage({ src: actualSrc, signal: controller.signal }).then((image) => {
+      loadImage({ src: actualSrc, signal: controller.signal, crossOrigin }).then((image) => {
         if (cancelled) {
           return;
         }
@@ -11126,6 +11127,7 @@ var CanvasImageContent = forwardRef10(({
     actualSrc,
     cancelRender2,
     continuePendingLoadDelay,
+    crossOrigin,
     delayRender2,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -11232,6 +11234,7 @@ var CanvasImageContent = forwardRef10(({
 CanvasImageContent.displayName = "CanvasImageContent";
 var CanvasImageInner = forwardRef10(({
   src,
+  crossOrigin,
   width,
   height,
   fit,
@@ -11268,6 +11271,10 @@ var CanvasImageInner = forwardRef10(({
   if (!src) {
     throw new Error('No "src" prop was passed to <CanvasImage>.');
   }
+  const isMedia = useMemo32(() => ({
+    type: "image",
+    src
+  }), [src]);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   const actualRef = useRef24(null);
   useImperativeHandle7(ref, () => {
@@ -11314,7 +11321,7 @@ var CanvasImageInner = forwardRef10(({
       _remotionInternalDocumentationLink: _remotionInternalDocumentationLink ?? "https://www.remotion.dev/docs/canvasimage",
       controls,
       _remotionInternalEffects: memoizedEffectDefinitions,
-      _remotionInternalIsMedia: { type: "image", src },
+      _remotionInternalIsMedia: isMedia,
       _remotionInternalPremountDisplay: effectivePremountFor || null,
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
@@ -11323,6 +11330,7 @@ var CanvasImageInner = forwardRef10(({
       children: /* @__PURE__ */ jsx28(CanvasImageContent, {
         ref: actualRef,
         src,
+        crossOrigin,
         width,
         height,
         fit,
@@ -11423,6 +11431,7 @@ import {
   useCallback as useCallback21,
   useContext as useContext37,
   useLayoutEffect as useLayoutEffect14,
+  useMemo as useMemo33,
   useRef as useRef25,
   useState as useState19
 } from "react";
@@ -11432,6 +11441,7 @@ function exponentialBackoff2(errorCount) {
 }
 var ImgContent = ({
   onError,
+  onImageError,
   maxRetries = 2,
   src,
   pauseWhenLoading,
@@ -11488,8 +11498,9 @@ var ImgContent = ({
       return;
     }
     errors.current[imageRef.current?.src] = (errors.current[imageRef.current?.src] ?? 0) + 1;
-    if (onError && (errors.current[imageRef.current?.src] ?? 0) > maxRetries) {
-      onError(e);
+    if ((onError || onImageError) && (errors.current[imageRef.current?.src] ?? 0) > maxRetries) {
+      onError?.(e);
+      onImageError?.(new Error("Error loading image with src: " + truncateSrcForLabel(imageRef.current?.src)));
       return;
     }
     if ((errors.current[imageRef.current?.src] ?? 0) <= maxRetries) {
@@ -11501,7 +11512,7 @@ var ImgContent = ({
     try {
       cancelRender2("Error loading image with src: " + truncateSrcForLabel(imageRef.current?.src));
     } catch {}
-  }, [cancelRender2, maxRetries, onError, retryIn]);
+  }, [cancelRender2, maxRetries, onError, onImageError, retryIn]);
   if (typeof window !== "undefined") {
     useLayoutEffect14(() => {
       if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
@@ -11613,6 +11624,10 @@ var NativeImgInner = ({
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
+  const isMedia = useMemo33(() => ({
+    type: "image",
+    src
+  }), [src]);
   const {
     effectivePostmountFor,
     effectivePremountFor,
@@ -11649,7 +11664,7 @@ var NativeImgInner = ({
       durationInFrames: durationInFrames ?? Infinity,
       freeze,
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
-      _remotionInternalIsMedia: { type: "image", src },
+      _remotionInternalIsMedia: isMedia,
       _remotionInternalPremountDisplay: effectivePremountFor || null,
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
@@ -11687,7 +11702,6 @@ var imgSchema = {
 };
 var imgCanvasFallbackIncompatibleProps = new Set([
   "alt",
-  "crossOrigin",
   "decoding",
   "fetchPriority",
   "loading",
@@ -11756,6 +11770,7 @@ var ImgInner = ({
   maxRetries,
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
+  onImageError,
   ...props2
 }) => {
   const refForOutline = useRef25(null);
@@ -11790,6 +11805,7 @@ var ImgInner = ({
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
+      onImageError,
       outlineRef: refForOutline
     });
   }
@@ -11819,6 +11835,7 @@ var ImgInner = ({
     cropTop,
     cropBottom,
     id,
+    onError: onImageError,
     pauseWhenLoading: shouldPauseWhenLoading,
     maxRetries,
     delayRenderRetries,
@@ -12085,7 +12102,7 @@ import {
   useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useLayoutEffect as useLayoutEffect15,
-  useMemo as useMemo33,
+  useMemo as useMemo34,
   useRef as useRef27,
   useState as useState20
 } from "react";
@@ -12248,7 +12265,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo33(() => {
+  const compositionManagerSetters = useMemo34(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -12265,7 +12282,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo33(() => {
+  const compositionManagerContextValue = useMemo34(() => {
     return {
       compositions,
       folders,
@@ -12510,7 +12527,7 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useMemo as useMemo34 } from "react";
+import { useMemo as useMemo35 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var RemotionRootContexts = ({
   children,
@@ -12523,7 +12540,7 @@ var RemotionRootContexts = ({
   frameState,
   _experimentalKeepAudioContextAlive
 }) => {
-  const logging = useMemo34(() => {
+  const logging = useMemo35(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx33(LogLevelContext.Provider, {
@@ -12857,7 +12874,7 @@ import {
   useContext as useContext39,
   useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect16,
-  useMemo as useMemo35,
+  useMemo as useMemo36,
   useState as useState21
 } from "react";
 
@@ -12903,7 +12920,7 @@ var OffthreadVideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo35(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo36(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -12958,14 +12975,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.cumulatedNegativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo35(() => {
+  const currentTime = useMemo36(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo35(() => {
+  const actualSrc = useMemo36(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -13053,7 +13070,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo35(() => {
+  const className = useMemo36(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback24((img) => {
@@ -13083,7 +13100,7 @@ import React41, {
   useContext as useContext40,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo36,
+  useMemo as useMemo37,
   useRef as useRef28,
   useState as useState22
 } from "react";
@@ -13141,7 +13158,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef28(null);
-  const sharedSource = useMemo36(() => {
+  const sharedSource = useMemo37(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -13350,7 +13367,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo36(() => {
+  const actualStyle = useMemo37(() => {
     return {
       ...style
     };
@@ -13577,7 +13594,7 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React43, { useMemo as useMemo37 } from "react";
+import React43, { useMemo as useMemo38 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function useRemotionContexts() {
   const compositionManagerCtx = React43.useContext(CompositionManager);
@@ -13593,7 +13610,7 @@ function useRemotionContexts() {
   const visualModePropStatusesRefContext = React43.useContext(VisualModePropStatusesRefContext);
   const bufferManagerContext = React43.useContext(BufferingContextReact);
   const logLevelContext = React43.useContext(LogLevelContext);
-  return useMemo37(() => ({
+  return useMemo38(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -13851,7 +13868,7 @@ var fontDataByUrl = new Map;
 // src/series/index.tsx
 import React45, {
   forwardRef as forwardRef14,
-  useMemo as useMemo38
+  useMemo as useMemo39
 } from "react";
 
 // src/series/flatten-children.tsx
@@ -13921,7 +13938,7 @@ var validateSeriesSequenceProps = ({
   return offset;
 };
 var SeriesInner = (props2) => {
-  const childrenValue = useMemo38(() => {
+  const childrenValue = useMemo39(() => {
     const flattenedChildren = flattenChildren(props2.children);
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -14124,7 +14141,7 @@ import {
   useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect17,
-  useMemo as useMemo39,
+  useMemo as useMemo40,
   useRef as useRef29
 } from "react";
 
@@ -14283,7 +14300,7 @@ var VideoForRenderingForwardFunction = ({
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const { registerRenderAsset, unregisterRenderAsset } = useContext41(RenderAssetManager);
-  const id = useMemo39(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo40(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.525";
+var VERSION = "4.0.526";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.525",
+	"version": "4.0.526",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.5.4",
-		"@remotion/eslint-config-internal": "4.0.525",
+		"@remotion/eslint-config-internal": "4.0.526",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},