remotion 4.0.490 → 4.0.491

package/dist/cjs/CompositionManager.d.ts

@@ -33,6 +33,7 @@ type EnhancedTSequenceData = {
     volume: string | number;
     doesVolumeChange: boolean;
     startMediaFrom: number;
+    mediaFrameAtSequenceZero: number | null;
     playbackRate: number;
     frozenMediaFrame: number | null;
 } | {
@@ -41,6 +42,7 @@ type EnhancedTSequenceData = {
     volume: string | number;
     doesVolumeChange: boolean;
     startMediaFrom: number;
+    mediaFrameAtSequenceZero: number | null;
     playbackRate: number;
     frozenMediaFrame: number | null;
 } | {

package/dist/cjs/HtmlInCanvas.js

@@ -63,12 +63,12 @@ const isMissingPaintRecordError = (error) => {
     return error instanceof DOMException && error.name === 'InvalidStateError';
 };
 const missingPaintRecordMessage = 'HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.';
-const resizeOffscreenCanvas = ({ offscreen, width, height, }) => {
-    if (offscreen.width !== width) {
-        offscreen.width = width;
+const resizePaintTarget = ({ target, width, height, }) => {
+    if (target.width !== width) {
+        target.width = width;
     }
-    if (offscreen.height !== height) {
-        offscreen.height = height;
+    if (target.height !== height) {
+        target.height = height;
     }
 };
 const defaultOnPaint = ({ canvas, element, elementImage, }) => {
@@ -80,24 +80,25 @@ const defaultOnPaint = ({ canvas, element, elementImage, }) => {
     const transform = ctx.drawElementImage(elementImage, 0, 0);
     element.style.transform = transform.toString();
 };
-/* eslint-enable react/require-default-props */
-const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
+const HtmlInCanvasAncestorContext = (0, react_1.createContext)(null);
 const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, children, onPaint, onInit, pixelDensity, controls, style, }, ref) => {
     var _a;
-    const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
+    const ancestor = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
     const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
     const canvasHeight = Math.ceil(height * resolvedPixelDensity);
     const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
-    const { isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const { isClientSideRendering, isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
+    const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
     if (!(0, exports.isHtmlInCanvasSupported)()) {
         cancelRender(new Error(exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
     }
     const canvas2dRef = (0, react_1.useRef)(null);
-    const offscreenRef = (0, react_1.useRef)(null);
+    const paintTargetRef = (0, react_1.useRef)(null);
     const divRef = (0, react_1.useRef)(null);
-    const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}`;
+    const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${usesDirectLayoutCanvas ? 'direct' : 'offscreen'}`;
     const setLayoutCanvasRef = (0, react_1.useCallback)((node) => {
         canvas2dRef.current = node;
         if (typeof ref === 'function') {
@@ -122,18 +123,20 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const initializedRef = (0, react_1.useRef)(false);
     const onInitCleanupRef = (0, react_1.useRef)(null);
     const unmountedRef = (0, react_1.useRef)(false);
+    const ancestorRef = (0, react_1.useRef)(ancestor);
+    ancestorRef.current = ancestor;
     const onPaintCb = (0, react_1.useCallback)(async () => {
         var _a;
         const element = divRef.current;
         if (!element) {
             throw new Error('Canvas or scene element not found');
         }
-        const offscreen = offscreenRef.current;
-        if (!offscreen) {
-            throw new Error('HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)');
+        const paintTarget = paintTargetRef.current;
+        if (!paintTarget) {
+            throw new Error('HtmlInCanvas: paint target is not ready because the canvas is remounting');
         }
-        resizeOffscreenCanvas({
-            offscreen,
+        resizePaintTarget({
+            target: paintTarget,
             width: canvasWidth,
             height: canvasHeight,
         });
@@ -144,34 +147,38 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             }
             const handle = (0, delay_render_js_1.delayRender)('onPaint');
             if (!initializedRef.current) {
-                // `onInit` may be async (e.g. WebGPU `requestAdapter`/`requestDevice`).
-                // Capture an `ElementImage` here only for `onInit` consumers — do NOT
-                // reuse it for the paint handler below, because awaiting `onInit`
-                // can invalidate the capture's paint context, leaving subsequent
-                // uploads (e.g. `copyElementImageToTexture`) failing with
-                // "No context found for ElementImage" on the very first paint.
-                let initImage = null;
-                try {
-                    initImage = placeholderCanvas.captureElementImage(element);
+                const currentOnInit = onInitRef.current;
+                if (!currentOnInit) {
+                    initializedRef.current = true;
                 }
-                catch (error) {
-                    if (isMissingPaintRecordError(error) && !isRendering) {
-                        // Element may be outside viewport (no cached paint record).
-                        // Skip init — will retry on the next paint cycle.
-                    }
-                    else if (isMissingPaintRecordError(error)) {
-                        throw new Error(missingPaintRecordMessage);
+                else {
+                    // `onInit` may be async (e.g. WebGPU
+                    // `requestAdapter`/`requestDevice`). Do not reuse this capture for
+                    // `onPaint`: awaiting initialization can invalidate its paint context.
+                    let initImage;
+                    try {
+                        initImage = placeholderCanvas.captureElementImage(element);
                     }
-                    else {
+                    catch (error) {
+                        if (isMissingPaintRecordError(error) &&
+                            canRetryMissingPaintRecord) {
+                            // The web renderer explicitly drives additional paint cycles, so a
+                            // transient missing record can be retried without failing the render.
+                            continueRender(handle);
+                            return;
+                        }
+                        if (isMissingPaintRecordError(error)) {
+                            throw new Error(missingPaintRecordMessage);
+                        }
                         throw error;
                     }
-                }
-                if (initImage) {
                     initializedRef.current = true;
-                    const currentOnInit = onInitRef.current;
-                    if (currentOnInit) {
+                    try {
+                        if (paintTarget instanceof HTMLCanvasElement) {
+                            throw new Error('HtmlInCanvas: onInit requires an OffscreenCanvas paint target');
+                        }
                         const cleanup = await currentOnInit({
-                            canvas: offscreen,
+                            canvas: paintTarget,
                             element,
                             elementImage: initImage,
                             pixelDensity: resolvedPixelDensity,
@@ -186,9 +193,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                             onInitCleanupRef.current = cleanup;
                         }
                     }
+                    finally {
+                        initImage.close();
+                    }
                 }
             }
-            const handler = (_a = onPaintRef.current) !== null && _a !== void 0 ? _a : defaultOnPaint;
             let elImage;
             try {
                 elImage = placeholderCanvas.captureElementImage(element);
@@ -197,7 +206,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 // `captureElementImage` throws `InvalidStateError` when the
                 // element is outside the viewport (no cached paint record).
                 // Skip this paint cycle — the canvas retains its last state.
-                if (isMissingPaintRecordError(error) && !isRendering) {
+                if (isMissingPaintRecordError(error) && canRetryMissingPaintRecord) {
                     continueRender(handle);
                     return;
                 }
@@ -206,20 +215,46 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 }
                 throw error;
             }
-            await handler({
-                canvas: offscreen,
-                element,
-                elementImage: elImage,
-                pixelDensity: resolvedPixelDensity,
-            });
-            await (0, run_effect_chain_js_1.runEffectChain)({
-                state: chainState.get(canvasWidth, canvasHeight),
-                source: offscreen,
-                effects: effectsRef.current,
-                output: offscreen,
-                width: canvasWidth,
-                height: canvasHeight,
-            });
+            try {
+                const currentOnPaint = onPaintRef.current;
+                if (currentOnPaint) {
+                    if (paintTarget instanceof HTMLCanvasElement) {
+                        throw new Error('HtmlInCanvas: onPaint requires an OffscreenCanvas paint target');
+                    }
+                    const paintResult = currentOnPaint({
+                        canvas: paintTarget,
+                        element,
+                        elementImage: elImage,
+                        pixelDensity: resolvedPixelDensity,
+                    });
+                    if (paintResult) {
+                        await paintResult;
+                    }
+                }
+                else {
+                    defaultOnPaint({
+                        canvas: paintTarget,
+                        element,
+                        elementImage: elImage,
+                        pixelDensity: resolvedPixelDensity,
+                    });
+                }
+                await (0, run_effect_chain_js_1.runEffectChain)({
+                    state: chainState.get(canvasWidth, canvasHeight),
+                    source: paintTarget,
+                    effects: effectsRef.current,
+                    output: paintTarget,
+                    width: canvasWidth,
+                    height: canvasHeight,
+                });
+            }
+            finally {
+                elImage.close();
+            }
+            // Effects may complete after Chromium has dispatched the parent's
+            // paint event. Repaint the direct parent so deeply nested canvases
+            // propagate their final pixels through every ancestor.
+            (_a = ancestorRef.current) === null || _a === void 0 ? void 0 : _a.requestParentPaint();
             continueRender(handle);
         }
         catch (error) {
@@ -232,20 +267,23 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         continueRender,
         cancelRender,
         resolvedPixelDensity,
-        isRendering,
+        canRetryMissingPaintRecord,
     ]);
-    // Transfer control once per layout canvas instance, then listen for paint on
-    // the placeholder (capture) while drawing on the linked offscreen surface.
+    // Default paint handlers draw synchronously on the layout canvas itself so
+    // Chromium can include their final pixels during its deepest-first nested
+    // paint traversal. Custom handlers retain the transferred OffscreenCanvas API.
     (0, react_1.useLayoutEffect)(() => {
         const placeholder = canvas2dRef.current;
         if (!placeholder) {
             throw new Error('Canvas not found');
         }
         placeholder.layoutSubtree = true;
-        const offscreen = placeholder.transferControlToOffscreen();
-        offscreenRef.current = offscreen;
-        resizeOffscreenCanvas({
-            offscreen,
+        const paintTarget = usesDirectLayoutCanvas
+            ? placeholder
+            : placeholder.transferControlToOffscreen();
+        paintTargetRef.current = paintTarget;
+        resizePaintTarget({
+            target: paintTarget,
             width: canvasWidth,
             height: canvasHeight,
         });
@@ -255,13 +293,19 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         return () => {
             var _a;
             placeholder.removeEventListener('paint', onPaintCb);
-            offscreenRef.current = null;
+            paintTargetRef.current = null;
             initializedRef.current = false;
             unmountedRef.current = true;
             (_a = onInitCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(onInitCleanupRef);
             onInitCleanupRef.current = null;
         };
-    }, [onPaintCb, cancelRender, canvasWidth, canvasHeight]);
+    }, [
+        onPaintCb,
+        cancelRender,
+        canvasWidth,
+        canvasHeight,
+        usesDirectLayoutCanvas,
+    ]);
     const onPaintChangedRef = (0, react_1.useRef)(false);
     (0, react_1.useLayoutEffect)(() => {
         var _a;
@@ -301,10 +345,15 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             ...(style !== null && style !== void 0 ? style : {}),
         };
     }, [height, style, width]);
-    if (isInsideAncestorHtmlInCanvas) {
-        throw new Error('<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.');
-    }
-    return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: true, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
+    const ancestorValue = (0, react_1.useMemo)(() => {
+        return {
+            requestParentPaint: () => {
+                var _a, _b;
+                (_b = (_a = canvas2dRef.current) === null || _a === void 0 ? void 0 : _a.requestPaint) === null || _b === void 0 ? void 0 : _b.call(_a);
+            },
+        };
+    }, []);
+    return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: ancestorValue, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, durationInFrames, name, ...sequenceProps }, ref) => {

package/dist/cjs/Sequence.js

@@ -235,6 +235,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     src: isMedia.data.src,
                     getStack: () => stackRef.current,
                     startMediaFrom: startMediaFrom !== null && startMediaFrom !== void 0 ? startMediaFrom : isMedia.data.startMediaFrom,
+                    mediaFrameAtSequenceZero,
                     volume: isMedia.data.volumes,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
@@ -298,6 +299,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         isInsideSeries,
         registeredFrozenFrame,
         startMediaFrom,
+        mediaFrameAtSequenceZero,
         frozenMediaFrame,
     ]);
     // Ceil to support floats

package/dist/cjs/SequenceManager.d.ts

@@ -64,6 +64,13 @@ export type SequencePropsSubscriptionKey = {
     nodePath: SequenceNodePath;
     sequenceKeys: string[];
     effectKeys: string[][];
+    videoConfigValues: VideoConfigValues | null;
+};
+export type VideoConfigValues = {
+    durationInFrames: number;
+    fps: number;
+    height: number;
+    width: number;
 };
 export declare const SequenceManagerProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/cjs/SequenceManager.js

@@ -49,7 +49,7 @@ exports.SequenceManagerRefContext = react_1.default.createContext({
     current: [],
 });
 const makeSequencePropsSubscriptionKey = (key) => {
-    return `${key.nodePath.join('.')}.${key.sequenceKeys.join('.')}.${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
+    return `${key.absolutePath}\0${key.nodePath.join('.')}\0${key.sequenceKeys.join('.')}\0${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
 };
 exports.makeSequencePropsSubscriptionKey = makeSequencePropsSubscriptionKey;
 exports.VisualModePropStatusesContext = react_1.default.createContext({

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

@@ -321,7 +321,9 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
                 return;
             }
             if (data === undefined) {
-                current.src = EMPTY_AUDIO;
+                if (current.src !== EMPTY_AUDIO) {
+                    current.src = EMPTY_AUDIO;
+                }
                 return;
             }
             if (!data) {
@@ -393,7 +395,9 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
                     prevA.premounting === premounting &&
                     prevA.postmounting === postmounting;
                 if (isTheSame) {
-                    return prevA;
+                    return prevA.audioMounted === audioMounted
+                        ? prevA
+                        : { ...prevA, audioMounted };
                 }
                 changed = true;
                 return {
@@ -405,7 +409,9 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
                     audioMounted,
                 };
             }
-            return prevA;
+            return prevA.audioMounted === audioMounted
+                ? prevA
+                : { ...prevA, audioMounted };
         });
         if (changed) {
             rerenderAudios();
@@ -444,13 +450,16 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
         unregisterAudio,
         updateAudio,
     ]);
-    return (jsx_runtime_1.jsxs(exports.SharedAudioTagsContext.Provider, { value: audioTagsValue, children: [refs.map(({ id, ref }) => {
-                return (
-                // Without preload="metadata", iOS will seek the time internally
-                // but not actually with sound. Adding `preload="metadata"` helps here.
-                // https://discord.com/channels/809501355504959528/817306414069710848/1130519583367888906
-                jsx_runtime_1.jsx("audio", { ref: ref, preload: "metadata", src: EMPTY_AUDIO }, id));
-            }), children] }));
+    const sharedAudioTagElements = (0, react_1.useMemo)(() => {
+        return refs.map(({ id, ref }) => {
+            return (
+            // Without preload="metadata", iOS will seek the time internally
+            // but not actually with sound. Adding `preload="metadata"` helps here.
+            // https://discord.com/channels/809501355504959528/817306414069710848/1130519583367888906
+            jsx_runtime_1.jsx("audio", { ref: ref, preload: "metadata", src: EMPTY_AUDIO }, id));
+        });
+    }, [refs]);
+    return (jsx_runtime_1.jsxs(exports.SharedAudioTagsContext.Provider, { value: audioTagsValue, children: [sharedAudioTagElements, children] }));
 };
 exports.SharedAudioTagsContextProvider = SharedAudioTagsContextProvider;
 const useSharedAudio = ({ aud, audioId, premounting, postmounting, }) => {

package/dist/cjs/internals.d.ts

@@ -14,11 +14,11 @@ import type { OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSe
 import { OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext } from './sequence-node-path.js';
 import type { ResolvedStackLocation } from './sequence-stack-traces.js';
 import type { CannotUpdateSequenceReason } from './SequenceManager.js';
-import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFalse, type CanUpdateEffectPropsResponseTrue, type CanUpdateSequencePropsResponse, type CanUpdateSequencePropsResponseFalse, type CanUpdateSequencePropsResponseTrue, type SequenceNodePath, type SequencePropsSubscriptionKey } from './SequenceManager.js';
+import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFalse, type CanUpdateEffectPropsResponseTrue, type CanUpdateSequencePropsResponse, type CanUpdateSequencePropsResponseFalse, type CanUpdateSequencePropsResponseTrue, type SequenceNodePath, type SequencePropsSubscriptionKey, type VideoConfigValues } from './SequenceManager.js';
 import * as TimelinePosition from './timeline-position-state.js';
 import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineContextValue } from './TimelineContext.js';
 import { truthy } from './truthy.js';
-import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses } from './use-schema.js';
+import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, VideoConfigNumericExpression } from './use-schema.js';
 import { type CanUpdateSequencePropStatus, type DragOverrides, type EffectDragOverrides, type PropStatuses } from './use-schema.js';
 import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state.js';
 import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
@@ -930,4 +930,4 @@ export declare const Internals: {
         readonly hiddenFromList: true;
     };
 };
-export type { ArrayFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };
+export type { ArrayFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, VideoConfigNumericExpression, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

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;