remotion 4.0.487 → 4.0.488

package/dist/cjs/Img.js

@@ -23,6 +23,7 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const _propsValid = true;
     if (!_propsValid) {
         throw new Error('typecheck error');
@@ -59,6 +60,8 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
         }, timeout);
     }, []);
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    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;
@@ -89,8 +92,19 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
         }
     }, [cancelRender, maxRetries, onError, retryIn]);
     if (typeof window !== 'undefined') {
-        const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
-        const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
+            if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
+                return;
+            }
+            return delayPlayback().unblock;
+        }, [
+            delayPlayback,
+            isLoading,
+            isPostmounting,
+            isPremounting,
+            pauseWhenLoading,
+        ]);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             var _a, _b;
@@ -104,13 +118,11 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
             if (!current) {
                 return;
             }
+            setIsLoading(true);
             const newHandle = delayRender('Loading <Img> with src=' + (0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc), {
                 retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
             });
-            const unblock = pauseWhenLoading && !isPremounting && !isPostmounting
-                ? delayPlayback().unblock
-                : () => undefined;
             let unmounted = false;
             const onComplete = () => {
                 var _a, _b, _c;
@@ -128,7 +140,7 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
                 if (current) {
                     onImageFrame === null || onImageFrame === void 0 ? void 0 : onImageFrame(current);
                 }
-                unblock();
+                setIsLoading(false);
                 continueRender(newHandle);
             };
             if (!imageRef.current) {
@@ -158,17 +170,12 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
             return () => {
                 unmounted = true;
                 current.removeEventListener('load', onComplete);
-                unblock();
                 continueRender(newHandle);
             };
         }, [
             actualSrc,
-            delayPlayback,
             delayRenderRetries,
             delayRenderTimeoutInMilliseconds,
-            pauseWhenLoading,
-            isPremounting,
-            isPostmounting,
             onImageFrame,
             continueRender,
             delayRender,

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -1,8 +1,19 @@
 import type React from 'react';
 import type { SequenceControls } from '../CompositionManager.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-import type { RemotionAnimatedImageProps } from './props';
-export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & RemotionAnimatedImageProps & {
+export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & {
+    src: string;
+    width?: number | undefined;
+    height?: number | undefined;
+    onError?: ((error: Error) => void) | undefined;
+    fit?: import("../calculate-image-fit.js").ImageFit | undefined;
+    playbackRate?: number | undefined;
+    style?: React.CSSProperties | undefined;
+    loopBehavior?: import("./props").RemotionAnimatedImageLoopBehavior | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    requestInit?: RequestInit | undefined;
+} & React.AriaAttributes & Record<`data-${string}`, string | undefined> & {
     readonly effects?: EffectsProp | undefined;
 } & {
     readonly controls?: SequenceControls | undefined;

package/dist/cjs/animated-image/AnimatedImage.js

@@ -30,6 +30,17 @@ const animatedImageSchema = {
     },
     ...interactivity_schema_js_1.transformSchema,
 };
+const getCanvasPropsFromSequenceProps = (props) => {
+    const canvasProps = {};
+    const mutableCanvasProps = canvasProps;
+    for (const key in props) {
+        if (Object.prototype.hasOwnProperty.call(props, key) &&
+            (key.startsWith('data-') || key.startsWith('aria-'))) {
+            mutableCanvasProps[key] = props[key];
+        }
+    }
+    return canvasProps;
+};
 const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, controls, ...props }, canvasRef) => {
     var _a;
     const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
@@ -158,6 +169,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
+    const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
     const animatedImageProps = {
         src,
         width,
@@ -170,6 +182,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         className,
         style,
         requestInit,
+        ...canvasProps,
     };
     return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
 };

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

@@ -1,18 +1,15 @@
 import React from 'react';
 import type { EffectDefinitionAndStack } from '../effects/effect-types.js';
-import type { AnimatedImageFillMode } from './props';
-type Props = {
-    readonly width?: number;
-    readonly height?: number;
-    readonly fit: AnimatedImageFillMode;
-    readonly className?: string;
-    readonly style?: React.CSSProperties;
-    readonly effects: EffectDefinitionAndStack<unknown>[];
-};
 export type AnimatedImageCanvasRef = {
     readonly draw: (imageData: VideoFrame) => Promise<boolean>;
     readonly getCanvas: () => HTMLCanvasElement | null;
     clear: () => void;
 };
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<AnimatedImageCanvasRef>>;
-export {};
+export declare const Canvas: React.ForwardRefExoticComponent<{
+    readonly width?: number | undefined;
+    readonly height?: number | undefined;
+    readonly fit: import("../calculate-image-fit.js").ImageFit;
+    readonly className?: string | undefined;
+    readonly style?: React.CSSProperties | undefined;
+    readonly effects: EffectDefinitionAndStack<unknown>[];
+} & React.AriaAttributes & Record<`data-${string}`, string | undefined> & React.RefAttributes<AnimatedImageCanvasRef>>;

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

@@ -39,7 +39,7 @@ const react_1 = __importStar(require("react"));
 const calculate_image_fit_js_1 = require("../calculate-image-fit.js");
 const run_effect_chain_js_1 = require("../effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("../effects/use-effect-chain-state.js");
-const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects }, ref) => {
+const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
     const sourceCanvas = (0, react_1.useMemo)(() => {
@@ -101,6 +101,6 @@ const CanvasRefForwardingFunction = ({ width, height, fit, className, style, eff
             },
         };
     }, [draw]);
-    return jsx_runtime_1.jsx("canvas", { ref: canvasRef, className: className, style: style });
+    return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, className: className, style: style, ...props }));
 };
 exports.Canvas = react_1.default.forwardRef(CanvasRefForwardingFunction);

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

@@ -2,6 +2,7 @@ import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { InteractiveBaseProps } from '../Interactive.js';
 export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
+export type AnimatedImageCanvasProps = React.AriaAttributes & Record<`data-${string}`, string | undefined>;
 export type RemotionAnimatedImageProps = {
     src: string;
     width?: number;
@@ -14,7 +15,7 @@ export type RemotionAnimatedImageProps = {
     id?: string;
     className?: string;
     requestInit?: RequestInit;
-};
+} & AnimatedImageCanvasProps;
 export type AnimatedImageProps = InteractiveBaseProps & RemotionAnimatedImageProps & {
     readonly effects?: EffectsProp;
 };

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -33,6 +33,7 @@ export type ScheduleAudioNodeResult = {
 export type ScheduleAudioNodeOptions = {
     readonly node: AudioBufferSourceNode;
     readonly mediaTimestamp: number;
+    readonly sourceOffset: number;
     readonly scheduledTime: number;
     readonly originalUnloopedMediaTimestamp: number;
     readonly duration: number;

package/dist/cjs/audio/shared-audio-tags.js

@@ -129,7 +129,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
         nodesToResume.current.delete(node);
     }, []);
     const scheduleAudioNode = (0, react_1.useMemo)(() => {
-        return ({ node, mediaTimestamp, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {
+        return ({ node, mediaTimestamp, sourceOffset, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {
             if (!ctxAndGain) {
                 throw new Error('Audio context not found');
             }
@@ -154,7 +154,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
                 }
             }
             const scheduledEndTime = scheduledTime + duration / node.playbackRate.value;
-            const mediaTime = mediaTimestamp + offset;
+            const mediaTime = mediaTimestamp + offset - sourceOffset;
             const mediaEndTime = mediaTime + duration;
             const latency = ctxAndGain.audioContext.baseLatency +
                 ctxAndGain.audioContext.outputLatency;

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

@@ -108,13 +108,18 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     });
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const pendingLoadDelayRef = (0, react_1.useRef)(null);
-    const continuePendingLoadDelay = (0, react_1.useCallback)(() => {
+    const [isLoadPending, setIsLoadPending] = (0, react_1.useState)(false);
+    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 continuePendingLoadDelay = (0, react_1.useCallback)(({ markAsReady }) => {
         const pending = pendingLoadDelayRef.current;
         if (!pending || pending.continued) {
             return;
         }
         pending.continued = true;
-        pending.unblock();
+        if (markAsReady) {
+            setIsLoadPending(false);
+        }
         continueRender(pending.handle);
         pendingLoadDelayRef.current = null;
     }, [continueRender]);
@@ -137,23 +142,33 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         }
     }, [ref, refForOutline]);
     (0, react_1.useLayoutEffect)(() => {
-        const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
-        const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
+        if (!pauseWhenLoading ||
+            !isLoadPending ||
+            isPremounting ||
+            isPostmounting) {
+            return;
+        }
+        return delayPlayback().unblock;
+    }, [
+        delayPlayback,
+        isLoadPending,
+        isPostmounting,
+        isPremounting,
+        pauseWhenLoading,
+    ]);
+    (0, react_1.useLayoutEffect)(() => {
         const handle = delayRender(`Rendering <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}"`, {
             retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
         });
-        const unblock = pauseWhenLoading && !isPremounting && !isPostmounting
-            ? delayPlayback().unblock
-            : () => undefined;
         const controller = new AbortController();
         let cancelled = false;
         let errorCount = 0;
         let timeoutId = null;
         setLoadedImage(null);
+        setIsLoadPending(true);
         pendingLoadDelayRef.current = {
             handle,
-            unblock,
             continued: false,
         };
         const attemptLoad = () => {
@@ -166,7 +181,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
             })
                 .catch((err) => {
                 if (err.name === 'AbortError') {
-                    continuePendingLoadDelay();
+                    continuePendingLoadDelay({ markAsReady: false });
                     return;
                 }
                 errorCount++;
@@ -182,7 +197,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                 }
                 else if (onError) {
                     onError(err);
-                    continuePendingLoadDelay();
+                    continuePendingLoadDelay({ markAsReady: true });
                 }
                 else {
                     cancelRender(err);
@@ -196,21 +211,17 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                 clearTimeout(timeoutId);
             }
             controller.abort();
-            continuePendingLoadDelay();
+            continuePendingLoadDelay({ markAsReady: false });
         };
     }, [
         actualSrc,
         cancelRender,
         continuePendingLoadDelay,
-        delayPlayback,
         delayRender,
         delayRenderRetries,
         delayRenderTimeoutInMilliseconds,
         maxRetries,
         onError,
-        pauseWhenLoading,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting,
     ]);
     (0, react_1.useLayoutEffect)(() => {
         if (!loadedImage || !outputCanvas || !sourceCanvas) {
@@ -261,7 +272,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                             return;
                         }
                         continueRenderOnce();
-                        continuePendingLoadDelay();
+                        continuePendingLoadDelay({ markAsReady: true });
                     },
                 });
             }
@@ -273,7 +284,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
             if (onError) {
                 onError(err);
                 continueRenderOnce();
-                continuePendingLoadDelay();
+                continuePendingLoadDelay({ markAsReady: true });
             }
             else {
                 cancelRender(err);

package/dist/cjs/interpolate-translate.d.ts

@@ -0,0 +1,8 @@
+import { type InterpolateOptions } from './interpolate.js';
+export type InterpolateTranslateOptions = InterpolateOptions;
+export declare const interpolateTranslate: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: Partial<{
+    easing: import("./interpolate.js").EasingFunction | readonly import("./interpolate.js").EasingFunction[];
+    extrapolateLeft: import("./interpolate.js").ExtrapolateType;
+    extrapolateRight: import("./interpolate.js").ExtrapolateType;
+    posterize: number;
+}> | undefined) => string;

package/dist/cjs/interpolate-translate.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateTranslate = void 0;
+const interpolate_js_1 = require("./interpolate.js");
+const pixelValueRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))px$/;
+const parseTranslate = (value) => {
+    if (typeof value !== 'string') {
+        throw new TypeError(`outputRange must contain only strings, but got ${typeof value}`);
+    }
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        throw new TypeError(`translate values must contain 1 to 3 pixel values, but got "${value}"`);
+    }
+    return parts.map((part) => {
+        const match = pixelValueRegex.exec(part);
+        if (match === null) {
+            throw new TypeError(`interpolateTranslate() only supports px values, but got "${part}" in "${value}"`);
+        }
+        return Number(match[1]);
+    });
+};
+/*
+ * @description Allows you to map a range of values to CSS translate values using pixel units.
+ * @see [Documentation](https://remotion.dev/docs/interpolate-translate)
+ */
+const interpolateTranslate = (input, inputRange, outputRange, options) => {
+    var _a;
+    if (typeof input === 'undefined') {
+        throw new TypeError('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new TypeError('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new TypeError('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new TypeError('inputRange (' +
+            inputRange.length +
+            ' values provided) and outputRange (' +
+            outputRange.length +
+            ' values provided) must have the same length');
+    }
+    const parsedOutputRange = outputRange.map((translateValue) => parseTranslate(translateValue));
+    const firstValueLength = (_a = parsedOutputRange[0]) === null || _a === void 0 ? void 0 : _a.length;
+    if (firstValueLength === undefined) {
+        throw new TypeError('outputRange must have at least 1 element');
+    }
+    for (const parsedTranslate of parsedOutputRange) {
+        if (parsedTranslate.length !== firstValueLength) {
+            throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${parsedTranslate.length}`);
+        }
+    }
+    return new Array(firstValueLength)
+        .fill(true)
+        .map((_, index) => {
+        const outputValues = [];
+        for (const translateValue of parsedOutputRange) {
+            const value = translateValue[index];
+            if (value === undefined) {
+                throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${translateValue.length}`);
+            }
+            outputValues.push(value);
+        }
+        const interpolatedValue = (0, interpolate_js_1.interpolate)(input, inputRange, outputValues, options);
+        return `${interpolatedValue}px`;
+    })
+        .join(' ');
+};
+exports.interpolateTranslate = interpolateTranslate;

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

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.487';
+exports.VERSION = '4.0.488';

package/dist/cjs/wrap-in-schema.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import type { SequenceControls } from './CompositionManager.js';
-import { type InteractivitySchema } from './interactivity-schema.js';
+import { type SequenceSchema } from './sequence-field-schema.js';
 export declare const getNestedValue: (obj: Record<string, unknown>, key: string) => unknown;
 export declare const readValuesFromProps: (props: Record<string, unknown>, keys: string[]) => Record<string, unknown>;
-export declare const selectActiveKeys: (schema: InteractivitySchema, values: Record<string, unknown>) => string[];
+export declare const selectActiveKeys: (schema: SequenceSchema, values: Record<string, unknown>) => string[];
 export declare const mergeValues: ({ props, valuesDotNotation, schemaKeys, propsToDelete, }: {
     props: Record<string, unknown>;
     valuesDotNotation: Record<string, unknown>;
     schemaKeys: string[];
     propsToDelete: Set<string>;
 }) => Record<string, unknown>;
-export declare const wrapInSchema: <S extends InteractivitySchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
+export declare const wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
     Component: React.ComponentType<Props & {
         readonly _experimentalControls: SequenceControls | undefined;
     }>;

package/dist/cjs/wrap-in-schema.js

@@ -38,7 +38,7 @@ const react_1 = __importStar(require("react"));
 const delete_nested_key_js_1 = require("./delete-nested-key.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const flatten_schema_js_1 = require("./flatten-schema.js");
-const interactivity_schema_js_1 = require("./interactivity-schema.js");
+const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
 const sequence_node_path_js_1 = require("./sequence-node-path.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
@@ -100,7 +100,7 @@ exports.mergeValues = mergeValues;
 const stackToOverrideMap = {};
 const wrapInSchema = ({ Component, componentIdentity, schema, supportsEffects, }) => {
     // Schema is static for a component, so we move this outside
-    const schemaWithSequenceName = (0, interactivity_schema_js_1.extendSchemaWithSequenceName)(schema);
+    const schemaWithSequenceName = (0, sequence_field_schema_js_1.extendSchemaWithSequenceName)(schema);
     const flatSchema = (0, flatten_schema_js_1.getFlatSchemaWithAllKeys)(schemaWithSequenceName);
     const flatKeys = Object.keys(flatSchema);
     const Wrapped = (0, react_1.forwardRef)((props, ref) => {

package/dist/esm/index.mjs

@@ -1291,7 +1291,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.487";
+var VERSION = "4.0.488";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -5124,7 +5124,7 @@ var useEffectChainState = () => {
 
 // src/animated-image/canvas.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
-var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects }, ref) => {
+var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
   const canvasRef = useRef8(null);
   const chainState = useEffectChainState();
   const sourceCanvas = useMemo16(() => {
@@ -5188,7 +5188,8 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
   return /* @__PURE__ */ jsx13("canvas", {
     ref: canvasRef,
     className,
-    style
+    style,
+    ...props
   });
 };
 var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
@@ -5374,6 +5375,16 @@ var animatedImageSchema = {
   },
   ...transformSchema
 };
+var getCanvasPropsFromSequenceProps = (props) => {
+  const canvasProps = {};
+  const mutableCanvasProps = canvasProps;
+  for (const key in props) {
+    if (Object.prototype.hasOwnProperty.call(props, key) && (key.startsWith("data-") || key.startsWith("aria-"))) {
+      mutableCanvasProps[key] = props[key];
+    }
+  }
+  return canvasProps;
+};
 var AnimatedImageContent = forwardRef4(({
   src,
   width,
@@ -5528,6 +5539,7 @@ var AnimatedImageInner = ({
   useImperativeHandle2(ref, () => {
     return actualRef.current;
   }, []);
+  const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
   const animatedImageProps = {
     src,
     width,
@@ -5539,7 +5551,8 @@ var AnimatedImageInner = ({
     id,
     className,
     style,
-    requestInit
+    requestInit,
+    ...canvasProps
   };
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
@@ -6567,6 +6580,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     return ({
       node,
       mediaTimestamp,
+      sourceOffset,
       scheduledTime,
       duration,
       offset,
@@ -6595,7 +6609,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
         }
       }
       const scheduledEndTime = scheduledTime + duration / node.playbackRate.value;
-      const mediaTime = mediaTimestamp + offset;
+      const mediaTime = mediaTimestamp + offset - sourceOffset;
       const mediaEndTime = mediaTime + duration;
       const latency = ctxAndGain.audioContext.baseLatency + ctxAndGain.audioContext.outputLatency;
       const timeDiff = scheduledTime - ctxAndGain.audioContext.currentTime;
@@ -9527,13 +9541,18 @@ var CanvasImageContent = forwardRef10(({
   });
   const sequenceContext = useContext32(SequenceContext);
   const pendingLoadDelayRef = useRef23(null);
-  const continuePendingLoadDelay = useCallback17(() => {
+  const [isLoadPending, setIsLoadPending] = useState16(false);
+  const isPremounting = Boolean(sequenceContext?.premounting);
+  const isPostmounting = Boolean(sequenceContext?.postmounting);
+  const continuePendingLoadDelay = useCallback17(({ markAsReady }) => {
     const pending = pendingLoadDelayRef.current;
     if (!pending || pending.continued) {
       return;
     }
     pending.continued = true;
-    pending.unblock();
+    if (markAsReady) {
+      setIsLoadPending(false);
+    }
     continueRender2(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender2]);
@@ -9555,23 +9574,30 @@ var CanvasImageContent = forwardRef10(({
     }
   }, [ref, refForOutline]);
   useLayoutEffect10(() => {
-    const isPremounting = Boolean(sequenceContext?.premounting);
-    const isPostmounting = Boolean(sequenceContext?.postmounting);
+    if (!pauseWhenLoading || !isLoadPending || isPremounting || isPostmounting) {
+      return;
+    }
+    return delayPlayback().unblock;
+  }, [
+    delayPlayback,
+    isLoadPending,
+    isPostmounting,
+    isPremounting,
+    pauseWhenLoading
+  ]);
+  useLayoutEffect10(() => {
     const handle = delayRender2(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
-    const unblock = pauseWhenLoading && !isPremounting && !isPostmounting ? delayPlayback().unblock : () => {
-      return;
-    };
     const controller = new AbortController;
     let cancelled = false;
     let errorCount = 0;
     let timeoutId = null;
     setLoadedImage(null);
+    setIsLoadPending(true);
     pendingLoadDelayRef.current = {
       handle,
-      unblock,
       continued: false
     };
     const attemptLoad = () => {
@@ -9582,7 +9608,7 @@ var CanvasImageContent = forwardRef10(({
         setLoadedImage(image);
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: false });
           return;
         }
         errorCount++;
@@ -9596,7 +9622,7 @@ var CanvasImageContent = forwardRef10(({
           }, backoff);
         } else if (onError) {
           onError(err);
-          continuePendingLoadDelay();
+          continuePendingLoadDelay({ markAsReady: true });
         } else {
           cancelRender2(err);
         }
@@ -9609,21 +9635,17 @@ var CanvasImageContent = forwardRef10(({
         clearTimeout(timeoutId);
       }
       controller.abort();
-      continuePendingLoadDelay();
+      continuePendingLoadDelay({ markAsReady: false });
     };
   }, [
     actualSrc,
     cancelRender2,
     continuePendingLoadDelay,
-    delayPlayback,
     delayRender2,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     maxRetries,
-    onError,
-    pauseWhenLoading,
-    sequenceContext?.postmounting,
-    sequenceContext?.premounting
+    onError
   ]);
   useLayoutEffect10(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
@@ -9675,7 +9697,7 @@ var CanvasImageContent = forwardRef10(({
               return;
             }
             continueRenderOnce();
-            continuePendingLoadDelay();
+            continuePendingLoadDelay({ markAsReady: true });
           }
         });
       }
@@ -9686,7 +9708,7 @@ var CanvasImageContent = forwardRef10(({
       if (onError) {
         onError(err);
         continueRenderOnce();
-        continuePendingLoadDelay();
+        continuePendingLoadDelay({ markAsReady: true });
       } else {
         cancelRender2(err);
       }
@@ -9871,7 +9893,13 @@ var IFrameRefForwarding = ({
 };
 var IFrame = forwardRef11(IFrameRefForwarding);
 // src/Img.tsx
-import { useCallback as useCallback19, useContext as useContext33, useLayoutEffect as useLayoutEffect11, useRef as useRef24 } from "react";
+import {
+  useCallback as useCallback19,
+  useContext as useContext33,
+  useLayoutEffect as useLayoutEffect11,
+  useRef as useRef24,
+  useState as useState18
+} from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 function exponentialBackoff2(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
@@ -9894,6 +9922,7 @@ var ImgContent = ({
   const errors = useRef24({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext33(SequenceContext);
+  const [isLoading, setIsLoading] = useState18(false);
   const _propsValid = true;
   if (!_propsValid) {
     throw new Error("typecheck error");
@@ -9926,6 +9955,8 @@ var ImgContent = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const isPremounting = Boolean(sequenceContext?.premounting);
+  const isPostmounting = Boolean(sequenceContext?.postmounting);
   const didGetError = useCallback19((e) => {
     if (!errors.current) {
       return;
@@ -9946,8 +9977,18 @@ var ImgContent = ({
     } catch {}
   }, [cancelRender2, maxRetries, onError, retryIn]);
   if (typeof window !== "undefined") {
-    const isPremounting = Boolean(sequenceContext?.premounting);
-    const isPostmounting = Boolean(sequenceContext?.postmounting);
+    useLayoutEffect11(() => {
+      if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
+        return;
+      }
+      return delayPlayback().unblock;
+    }, [
+      delayPlayback,
+      isLoading,
+      isPostmounting,
+      isPremounting,
+      pauseWhenLoading
+    ]);
     useLayoutEffect11(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
@@ -9959,13 +10000,11 @@ var ImgContent = ({
       if (!current) {
         return;
       }
+      setIsLoading(true);
       const newHandle = delayRender2("Loading <Img> with src=" + truncateSrcForLabel(actualSrc), {
         retries: delayRenderRetries ?? undefined,
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
       });
-      const unblock = pauseWhenLoading && !isPremounting && !isPostmounting ? delayPlayback().unblock : () => {
-        return;
-      };
       let unmounted = false;
       const onComplete = () => {
         if (unmounted) {
@@ -9979,7 +10018,7 @@ var ImgContent = ({
         if (current) {
           onImageFrame?.(current);
         }
-        unblock();
+        setIsLoading(false);
         continueRender2(newHandle);
       };
       if (!imageRef.current) {
@@ -9998,17 +10037,12 @@ var ImgContent = ({
       return () => {
         unmounted = true;
         current.removeEventListener("load", onComplete);
-        unblock();
         continueRender2(newHandle);
       };
     }, [
       actualSrc,
-      delayPlayback,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
-      pauseWhenLoading,
-      isPremounting,
-      isPostmounting,
       onImageFrame,
       continueRender2,
       delayRender2
@@ -10334,7 +10368,7 @@ import {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
   useRef as useRef26,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var CompositionManagerProvider = ({
@@ -10344,9 +10378,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState18([]);
-  const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
-  const [compositions, setCompositions] = useState18(initialCompositions);
+  const [folders, setFolders] = useState19([]);
+  const [canvasContent, setCanvasContent] = useState19(initialCanvasContent);
+  const [compositions, setCompositions] = useState19(initialCompositions);
   const currentcompositionsRef = useRef26(compositions);
   const updateCompositions = useCallback21((updateComps) => {
     setCompositions((comps) => {
@@ -10921,7 +10955,7 @@ import {
   useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo35,
-  useState as useState19
+  useState as useState20
 } from "react";
 
 // src/video/offthread-video-source.ts
@@ -11036,7 +11070,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState19(null);
+  const [imageSrc, setImageSrc] = useState20(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect12(() => {
     if (!window.remotion_videoEnabled) {
@@ -11148,7 +11182,7 @@ import React37, {
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
   useRef as useRef27,
-  useState as useState20
+  useState as useState21
 } from "react";
 
 // src/video/emit-video-frame.ts
@@ -11259,7 +11293,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const parentSequence = useContext37(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState20(() => String(Math.random()));
+  const [timelineId] = useState21(() => String(Math.random()));
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
@@ -11330,7 +11364,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState20(() => playbackLogging({
+  useState21(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.487";
+var VERSION = "4.0.488";
 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.487",
+	"version": "4.0.488",
 	"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.3.6",
-		"@remotion/eslint-config-internal": "4.0.487",
+		"@remotion/eslint-config-internal": "4.0.488",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},