remotion - npm Package Compare versions

Comparing version 4.0.482 to 4.0.483

dist/cjs/audio/html5-audio.js

@@ -25,4 +25,5 @@ "use strict";
     const audioTagsContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioTagsContext);
-    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, ...otherProps } = props;
-    const { loop, ...propsOtherThanLoop } = props;
+    const propsWithFreeze = props;
+    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, freeze, ...otherProps } = propsWithFreeze;
+    const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
@@ -33,2 +34,5 @@ const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     }
+    if (typeof freeze !== 'undefined') {
+        throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
+    }
     const { durations, setDurations } = (0, react_1.useContext)(duration_state_js_1.DurationsContext);
@@ -35,0 +39,0 @@ if (typeof props.src !== 'string') {

dist/cjs/easing.d.ts

 import type { SpringConfig } from './spring/spring-utils.js';
-export type EasingSpringConfig = Partial<Pick<SpringConfig, 'damping' | 'mass' | 'stiffness' | 'overshootClamping'>>;
+export type EasingSpringConfig = Partial<Pick<SpringConfig, 'damping' | 'mass' | 'stiffness' | 'overshootClamping'>> & {
+    readonly allowTail?: boolean;
+    readonly durationRestThreshold?: number;
+};
 /**
@@ -20,3 +23,3 @@ * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
     static back(s?: number): (t: number) => number;
-    static spring(config?: EasingSpringConfig): (t: number) => number;
+    static spring({ allowTail, durationRestThreshold, ...config }?: EasingSpringConfig): (t: number) => number;
     static bounce(t: number): number;
@@ -23,0 +26,0 @@ static bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;

dist/cjs/easing.js

@@ -55,10 +55,22 @@ "use strict";
     }
-    static spring(config = {}) {
-        return (t) => {
+    static spring({ allowTail = false, durationRestThreshold, ...config } = {}) {
+        const easing = (t) => {
             if (t <= 0) {
                 return 0;
             }
-            if (t >= 1) {
+            if (!allowTail && t >= 1) {
                 return 1;
             }
+            if (allowTail) {
+                return (0, index_js_1.spring)({
+                    fps: springEasingDurationInFrames,
+                    frame: t *
+                        (0, index_js_1.measureSpring)({
+                            fps: springEasingDurationInFrames,
+                            config,
+                            threshold: durationRestThreshold,
+                        }),
+                    config,
+                });
+            }
             return (0, index_js_1.spring)({
@@ -69,4 +81,8 @@ fps: springEasingDurationInFrames,
                 durationInFrames: springEasingDurationInFrames,
+                durationRestThreshold,
             });
         };
+        return Object.assign(easing, {
+            remotionShouldExtendRight: allowTail,
+        });
     }
@@ -73,0 +89,0 @@ static bounce(t) {

dist/cjs/effects/use-memoized-effects.js

@@ -54,2 +54,3 @@ "use strict";
             const value = (0, interpolate_keyframed_status_js_1.interpolateKeyframedStatus)({
+                forceSpringAllowTail: null,
                 frame,
@@ -56,0 +57,0 @@ status,

dist/cjs/get-effective-visual-mode-value.js

@@ -16,2 +16,3 @@ "use strict";
     const interpolated = (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
+        forceSpringAllowTail: null,
         frame,
@@ -37,2 +38,3 @@ status: dragOverrideValue.status,
             return (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
+                forceSpringAllowTail: null,
                 frame,
@@ -39,0 +41,0 @@ status: propStatus,

dist/cjs/HtmlInCanvas.js

@@ -14,2 +14,3 @@ "use strict";
 const use_delay_render_js_1 = require("./use-delay-render.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
@@ -62,2 +63,6 @@ const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 }
+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, }) => {
@@ -90,2 +95,3 @@ if (offscreen.width !== width) {
     const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const { isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     if (!(0, exports.isHtmlInCanvasSupported)()) {
@@ -145,3 +151,2 @@ cancelRender(new Error(exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
             if (!initializedRef.current) {
-                initializedRef.current = true;
                 // `onInit` may be async (e.g. WebGPU `requestAdapter`/`requestDevice`).
@@ -153,24 +158,58 @@ // Capture an `ElementImage` here only for `onInit` consumers — do NOT
                 // "No context found for ElementImage" on the very first paint.
-                const initImage = placeholderCanvas.captureElementImage(element);
-                const currentOnInit = onInitRef.current;
-                if (currentOnInit) {
-                    const cleanup = await currentOnInit({
-                        canvas: offscreen,
-                        element,
-                        elementImage: initImage,
-                        pixelDensity: resolvedPixelDensity,
-                    });
-                    if (typeof cleanup !== 'function') {
-                        throw new Error('HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.');
+                let initImage = null;
+                try {
+                    initImage = placeholderCanvas.captureElementImage(element);
+                }
+                catch (error) {
+                    if (isMissingPaintRecordError(error) && !isRendering) {
+                        // Element may be outside viewport (no cached paint record).
+                        // Skip init — will retry on the next paint cycle.
                     }
-                    if (unmountedRef.current) {
-                        cleanup();
+                    else if (isMissingPaintRecordError(error)) {
+                        throw new Error(missingPaintRecordMessage);
                     }
                     else {
-                        onInitCleanupRef.current = cleanup;
+                        throw error;
                     }
                 }
+                if (initImage) {
+                    initializedRef.current = true;
+                    const currentOnInit = onInitRef.current;
+                    if (currentOnInit) {
+                        const cleanup = await currentOnInit({
+                            canvas: offscreen,
+                            element,
+                            elementImage: initImage,
+                            pixelDensity: resolvedPixelDensity,
+                        });
+                        if (typeof cleanup !== 'function') {
+                            throw new Error('HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.');
+                        }
+                        if (unmountedRef.current) {
+                            cleanup();
+                        }
+                        else {
+                            onInitCleanupRef.current = cleanup;
+                        }
+                    }
+                }
             }
             const handler = (_a = onPaintRef.current) !== null && _a !== void 0 ? _a : defaultOnPaint;
-            const elImage = placeholderCanvas.captureElementImage(element);
+            let elImage;
+            try {
+                elImage = placeholderCanvas.captureElementImage(element);
+            }
+            catch (error) {
+                // `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) {
+                    continueRender(handle);
+                    return;
+                }
+                if (isMissingPaintRecordError(error)) {
+                    throw new Error(missingPaintRecordMessage);
+                }
+                throw error;
+            }
             await handler({
@@ -202,2 +241,3 @@ canvas: offscreen,
         resolvedPixelDensity,
+        isRendering,
     ]);
@@ -204,0 +244,0 @@ // Transfer control once per layout canvas instance, then listen for paint on

dist/cjs/interactivity-schema.d.ts

@@ -65,3 +65,12 @@ export type HiddenFieldSchema = {
     step?: number;
-    lineTo?: string;
+    visual?: {
+        readonly type: 'line';
+        readonly to: string;
+    } | {
+        readonly type: 'ellipse';
+        readonly width: string;
+        readonly height: string;
+        readonly rotation?: string;
+        readonly innerScale?: string;
+    };
     default: readonly [number, number] | undefined;
@@ -68,0 +77,0 @@ description?: string;

dist/cjs/internals.d.ts

@@ -862,4 +862,5 @@ import type { ScheduleAudioNodeResult } from './audio/shared-audio-tags.js';
     };
-    readonly interpolateKeyframedStatus: ({ frame, status, }: {
+    readonly interpolateKeyframedStatus: ({ frame, forceSpringAllowTail, status, }: {
         frame: number;
+        forceSpringAllowTail: boolean | null;
         status: CanUpdateSequencePropStatusKeyframed;
@@ -866,0 +867,0 @@ }) => string | number | readonly number[] | null;

dist/cjs/interpolate-keyframed-status.d.ts

 import type { CanUpdateSequencePropStatusKeyframed } from './use-schema.js';
 type InterpolateKeyframedStatusResult = number | string | readonly number[] | null;
-export declare const interpolateKeyframedStatus: ({ frame, status, }: {
+export declare const interpolateKeyframedStatus: ({ frame, forceSpringAllowTail, status, }: {
     frame: number;
+    forceSpringAllowTail: boolean | null;
     status: CanUpdateSequencePropStatusKeyframed;
 }) => InterpolateKeyframedStatusResult;
 export {};

dist/cjs/interpolate-keyframed-status.js

@@ -8,4 +8,5 @@ "use strict";
 const interpolate_js_1 = require("./interpolate.js");
-const easingToFn = (e) => {
-    switch (e.type) {
+const easingToFn = ({ easing, forceSpringAllowTail, }) => {
+    var _a, _b;
+    switch (easing.type) {
         case 'linear':
@@ -15,14 +16,16 @@ return easing_js_1.Easing.linear;
             return easing_js_1.Easing.spring({
-                damping: e.damping,
-                mass: e.mass,
-                overshootClamping: e.overshootClamping,
-                stiffness: e.stiffness,
+                allowTail: (_a = forceSpringAllowTail !== null && forceSpringAllowTail !== void 0 ? forceSpringAllowTail : easing.allowTail) !== null && _a !== void 0 ? _a : undefined,
+                damping: easing.damping,
+                durationRestThreshold: (_b = easing.durationRestThreshold) !== null && _b !== void 0 ? _b : undefined,
+                mass: easing.mass,
+                overshootClamping: easing.overshootClamping,
+                stiffness: easing.stiffness,
             });
         case 'bezier':
-            return (0, bezier_js_1.bezier)(e.x1, e.y1, e.x2, e.y2);
+            return (0, bezier_js_1.bezier)(easing.x1, easing.y1, easing.x2, easing.y2);
         default:
-            throw new TypeError(`Unsupported easing: ${JSON.stringify(e)}`);
+            throw new TypeError(`Unsupported easing: ${JSON.stringify(easing)}`);
     }
 };
-const interpolateKeyframedStatus = ({ frame, status, }) => {
+const interpolateKeyframedStatus = ({ frame, forceSpringAllowTail, status, }) => {
     const { keyframes, easing, clamping, interpolationFunction } = status;
@@ -44,3 +47,3 @@ if (keyframes.length === 0) {
             return (0, interpolate_colors_js_1.interpolateColors)(frame, inputRange, outputs, {
-                easing: easing.map(easingToFn),
+                easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
                 posterize: status.posterize,
@@ -58,3 +61,3 @@ });
         return (0, interpolate_js_1.interpolate)(frame, inputRange, outputs, {
-            easing: easing.map(easingToFn),
+            easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
             extrapolateLeft: clamping.left,
@@ -61,0 +64,0 @@ extrapolateRight: clamping.right,

dist/cjs/interpolate.d.ts

@@ -6,3 +6,5 @@ export type ExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
  */
-export type EasingFunction = (input: number) => number;
+export type EasingFunction = ((input: number) => number) & {
+    readonly remotionShouldExtendRight?: boolean;
+};
 export type InterpolateOptions = Partial<{
@@ -9,0 +11,0 @@ easing: EasingFunction | readonly EasingFunction[];

dist/cjs/interpolate.js

@@ -328,2 +328,26 @@ "use strict";
 const defaultEasing = (num) => num;
+const shouldExtendRightForEasing = (easing) => {
+    return easing.remotionShouldExtendRight === true;
+};
+const resolveEasingForSegment = ({ easing, segmentIndex, }) => {
+    if (easing === undefined) {
+        return defaultEasing;
+    }
+    if (typeof easing === 'function') {
+        return easing;
+    }
+    // `segmentIndex` is in [0, inputRange.length - 2]; array length was validated above.
+    return easing[segmentIndex];
+};
+const interpolateSegment = ({ input, inputRange, outputRange, easing, extrapolateLeft, extrapolateRight, }) => {
+    return interpolateFunction(input, inputRange, outputRange, {
+        easing,
+        extrapolateLeft,
+        extrapolateRight: input > inputRange[1] &&
+            extrapolateRight === 'clamp' &&
+            shouldExtendRightForEasing(easing)
+            ? 'extend'
+            : extrapolateRight,
+    });
+};
 const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
@@ -334,12 +358,2 @@ if (inputRange.length === 1) {
     const easingOption = options === null || options === void 0 ? void 0 : options.easing;
-    const resolveEasingForSegment = (segmentIndex) => {
-        if (easingOption === undefined) {
-            return defaultEasing;
-        }
-        if (typeof easingOption === 'function') {
-            return easingOption;
-        }
-        // `segmentIndex` is in [0, inputRange.length - 2]; array length was validated above.
-        return easingOption[segmentIndex];
-    };
     let extrapolateLeft = 'extend';
@@ -357,7 +371,37 @@ if ((options === null || options === void 0 ? void 0 : options.extrapolateLeft) !== undefined) {
     const range = findRange(posterizedInput, inputRange);
-    return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-        easing: resolveEasingForSegment(range),
+    const easing = resolveEasingForSegment({
+        easing: easingOption,
+        segmentIndex: range,
+    });
+    let result = interpolateSegment({
+        input: posterizedInput,
+        inputRange: [inputRange[range], inputRange[range + 1]],
+        outputRange: [outputRange[range], outputRange[range + 1]],
+        easing,
         extrapolateLeft,
         extrapolateRight,
     });
+    for (let segmentIndex = 0; segmentIndex < range; segmentIndex++) {
+        const previousEasing = resolveEasingForSegment({
+            easing: easingOption,
+            segmentIndex,
+        });
+        if (!shouldExtendRightForEasing(previousEasing)) {
+            continue;
+        }
+        const previousSegmentEnd = inputRange[segmentIndex + 1];
+        if (posterizedInput <= previousSegmentEnd) {
+            continue;
+        }
+        const continuedSegmentValue = interpolateSegment({
+            input: posterizedInput,
+            inputRange: [inputRange[segmentIndex], previousSegmentEnd],
+            outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
+            easing: previousEasing,
+            extrapolateLeft,
+            extrapolateRight: 'extend',
+        });
+        result += continuedSegmentValue - outputRange[segmentIndex + 1];
+    }
+    return result;
 };
@@ -364,0 +408,0 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {

dist/cjs/use-schema.d.ts

@@ -24,2 +24,3 @@ import type { InteractivitySchema } from './interactivity-schema.js';
     type: 'spring';
+    allowTail: boolean | null;
     damping: number;
@@ -29,2 +30,3 @@ mass: number;
     overshootClamping: boolean;
+    durationRestThreshold: number | null;
 };
@@ -31,0 +33,0 @@ export type CanUpdateSequencePropStatusEasing = CanUpdateSequencePropStatusLinearEasing | CanUpdateSequencePropStatusBezierEasing | CanUpdateSequencePropStatusSpringEasing;

dist/cjs/use-schema.js

@@ -10,2 +10,9 @@ "use strict";
 };
+const getEasingIndexToDuplicate = ({ insertedKeyframeIndex, easingLength, keyframeCount, }) => {
+    const isSplittingExistingSegment = insertedKeyframeIndex > 0 && insertedKeyframeIndex < keyframeCount - 1;
+    if (!isSplittingExistingSegment || easingLength === 0) {
+        return null;
+    }
+    return Math.min(insertedKeyframeIndex - 1, easingLength - 1);
+};
 const makeStaticDragOverride = (value) => {
@@ -21,2 +28,14 @@ return { type: 'static', value };
     const easing = [...status.easing];
+    if (existingIndex === -1) {
+        const insertedKeyframeIndex = keyframes.findIndex((keyframe) => keyframe.frame === frame);
+        const easingIndexToDuplicate = getEasingIndexToDuplicate({
+            insertedKeyframeIndex,
+            easingLength: easing.length,
+            keyframeCount: keyframes.length,
+        });
+        const easingToDuplicate = easingIndexToDuplicate === null
+            ? exports.DEFAULT_LINEAR_EASING
+            : easing[easingIndexToDuplicate];
+        easing.splice(insertedKeyframeIndex, 0, easingToDuplicate);
+    }
     while (easing.length < keyframes.length - 1) {
@@ -95,2 +114,3 @@ easing.push(exports.DEFAULT_LINEAR_EASING);
                     const interpolated = (0, interpolate_keyframed_status_js_1.interpolateKeyframedStatus)({
+                        forceSpringAllowTail: null,
                         frame,
@@ -97,0 +117,0 @@ status,

dist/cjs/version.d.ts

@@ -6,2 +6,2 @@ /**
  */
-export declare const VERSION = "4.0.482";
+export declare const VERSION = "4.0.483";

dist/cjs/version.js

@@ -10,2 +10,2 @@ "use strict";
  */
-exports.VERSION = '4.0.482';
+exports.VERSION = '4.0.483';

dist/esm/no-react.mjs

@@ -299,2 +299,31 @@ // src/normalize-number.ts
 var defaultEasing = (num) => num;
+var shouldExtendRightForEasing = (easing) => {
+  return easing.remotionShouldExtendRight === true;
+};
+var resolveEasingForSegment = ({
+  easing,
+  segmentIndex
+}) => {
+  if (easing === undefined) {
+    return defaultEasing;
+  }
+  if (typeof easing === "function") {
+    return easing;
+  }
+  return easing[segmentIndex];
+};
+var interpolateSegment = ({
+  input,
+  inputRange,
+  outputRange,
+  easing,
+  extrapolateLeft,
+  extrapolateRight
+}) => {
+  return interpolateFunction(input, inputRange, outputRange, {
+    easing,
+    extrapolateLeft,
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight
+  });
+};
 var interpolateNumber = ({
@@ -310,11 +339,2 @@ input,
   const easingOption = options?.easing;
-  const resolveEasingForSegment = (segmentIndex) => {
-    if (easingOption === undefined) {
-      return defaultEasing;
-    }
-    if (typeof easingOption === "function") {
-      return easingOption;
-    }
-    return easingOption[segmentIndex];
-  };
   let extrapolateLeft = "extend";
@@ -330,7 +350,37 @@ if (options?.extrapolateLeft !== undefined) {
   const range = findRange(posterizedInput, inputRange);
-  return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing: resolveEasingForSegment(range),
+  const easing = resolveEasingForSegment({
+    easing: easingOption,
+    segmentIndex: range
+  });
+  let result = interpolateSegment({
+    input: posterizedInput,
+    inputRange: [inputRange[range], inputRange[range + 1]],
+    outputRange: [outputRange[range], outputRange[range + 1]],
+    easing,
     extrapolateLeft,
     extrapolateRight
   });
+  for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
+    const previousEasing = resolveEasingForSegment({
+      easing: easingOption,
+      segmentIndex
+    });
+    if (!shouldExtendRightForEasing(previousEasing)) {
+      continue;
+    }
+    const previousSegmentEnd = inputRange[segmentIndex + 1];
+    if (posterizedInput <= previousSegmentEnd) {
+      continue;
+    }
+    const continuedSegmentValue = interpolateSegment({
+      input: posterizedInput,
+      inputRange: [inputRange[segmentIndex], previousSegmentEnd],
+      outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
+      easing: previousEasing,
+      extrapolateLeft,
+      extrapolateRight: "extend"
+    });
+    result += continuedSegmentValue - outputRange[segmentIndex + 1];
+  }
+  return result;
 };
@@ -337,0 +387,0 @@ var interpolateString = ({

dist/esm/version.mjs

 // src/version.ts
-var VERSION = "4.0.482";
+var VERSION = "4.0.483";
 export {
   VERSION
 };

package.json

@@ -6,3 +6,3 @@ {
 	"name": "remotion",
-	"version": "4.0.482",
+	"version": "4.0.483",
 	"description": "Make videos programmatically",
@@ -39,3 +39,3 @@ "main": "dist/cjs/index.js",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.482",
+		"@remotion/eslint-config-internal": "4.0.483",
 		"eslint": "9.19.0",
@@ -42,0 +42,0 @@ "@typescript/native-preview": "7.0.0-dev.20260217.1"

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Improved metrics

Total package byte prevSize

1296847

0.97%

Lines of code

33603

1%

No dependency changes