remotion 4.0.481 → 4.0.483

package/dist/cjs/internals.js

@@ -146,6 +146,7 @@ exports.Internals = {
     sequenceStyleSchema: interactivity_schema_js_1.sequenceStyleSchema,
     sequenceVisualStyleSchema: interactivity_schema_js_1.sequenceVisualStyleSchema,
     sequencePremountSchema: interactivity_schema_js_1.sequencePremountSchema,
+    textSchema: interactivity_schema_js_1.textSchema,
     transformSchema: interactivity_schema_js_1.transformSchema,
     premountSchema: interactivity_schema_js_1.premountSchema,
     flattenActiveSchema: flatten_schema_js_1.flattenActiveSchema,
@@ -155,7 +156,7 @@ exports.Internals = {
     useVideo: use_video_js_1.useVideo,
     getRoot: register_root_js_1.getRoot,
     useMediaVolumeState: volume_position_state_js_1.useMediaVolumeState,
-    useMediaMutedState: volume_position_state_js_1.useMediaMutedState,
+    usePlayerMutedState: volume_position_state_js_1.usePlayerMutedState,
     useMediaInTimeline: use_media_in_timeline_js_1.useMediaInTimeline,
     useLazyComponent: use_lazy_component_js_1.useLazyComponent,
     truthy: truthy_js_1.truthy,

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

@@ -1,7 +1,8 @@
 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 {};

package/dist/cjs/interpolate-keyframed-status.js

@@ -5,24 +5,27 @@ const bezier_js_1 = require("./bezier.js");
 const easing_js_1 = require("./easing.js");
 const interpolate_colors_js_1 = require("./interpolate-colors.js");
 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':
             return easing_js_1.Easing.linear;
         case 'spring':
             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;
     if (keyframes.length === 0) {
         return null;
@@ -39,7 +42,7 @@ const interpolateKeyframedStatus = ({ frame, status, }) => {
         }
         try {
             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,
             });
         }
@@ -52,7 +55,7 @@ const interpolateKeyframedStatus = ({ frame, status, }) => {
     }
     try {
         return (0, interpolate_js_1.interpolate)(frame, inputRange, outputs, {
-            easing: easing.map(easingToFn),
+            easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
             extrapolateLeft: clamping.left,
             extrapolateRight: clamping.right,
             posterize: status.posterize,

package/dist/cjs/interpolate.d.ts

@@ -3,7 +3,9 @@ export type ExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
  * @description This function allows you to map a range of values to another with a concise syntax
  * @see [Documentation](https://www.remotion.dev/docs/interpolate)
  */
-export type EasingFunction = (input: number) => number;
+export type EasingFunction = ((input: number) => number) & {
+    readonly remotionShouldExtendRight?: boolean;
+};
 export type InterpolateOptions = Partial<{
     easing: EasingFunction | readonly EasingFunction[];
     extrapolateLeft: ExtrapolateType;

package/dist/cjs/interpolate.js

@@ -325,21 +325,35 @@ function findRange(input, inputRange) {
     return i - 1;
 }
 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, }) => {
     if (inputRange.length === 1) {
         return outputRange[0];
     }
     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';
     if ((options === null || options === void 0 ? void 0 : options.extrapolateLeft) !== undefined) {
         extrapolateLeft = options.extrapolateLeft;
@@ -352,11 +366,41 @@ const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
         ? input
         : Math.floor(input / options.posterize) * options.posterize;
     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;
 };
 const interpolateString = ({ input, inputRange, outputRange, options, }) => {
     var _a;

package/dist/cjs/no-react.d.ts

@@ -75,6 +75,13 @@ export declare const NoReactInternals: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly trimBefore: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;

package/dist/cjs/prefetch.js

@@ -96,15 +96,15 @@ const prefetch = (src, options) => {
         resolve = res;
         reject = rej;
     });
+    waitUntilDone.catch(() => undefined);
     const controller = new AbortController();
-    let canBeAborted = true;
+    let reader = null;
     fetch(srcWithoutHash, {
         signal: controller.signal,
         credentials: (_c = options === null || options === void 0 ? void 0 : options.credentials) !== null && _c !== void 0 ? _c : undefined,
     })
         .then((res) => {
         var _a, _b, _c;
-        canBeAborted = false;
         if (canceled) {
             return null;
         }
@@ -124,9 +124,10 @@ const prefetch = (src, options) => {
         if (!res.body) {
             throw new Error(`HTTP response of ${srcWithoutHash} has no body`);
         }
-        const reader = res.body.getReader();
+        const responseReader = res.body.getReader();
+        reader = responseReader;
         return getBlobFromReader({
-            reader,
+            reader: responseReader,
             contentType: (_c = (_b = options === null || options === void 0 ? void 0 : options.contentType) !== null && _b !== void 0 ? _b : headerContentType) !== null && _c !== void 0 ? _c : null,
             contentLength: res.headers.get('Content-Length')
                 ? parseInt(res.headers.get('Content-Length'), 10)
@@ -135,7 +136,7 @@ const prefetch = (src, options) => {
         });
     })
         .then((buf) => {
-        if (!buf) {
+        if (!buf || canceled) {
             return;
         }
         const actualBlob = (options === null || options === void 0 ? void 0 : options.contentType)
@@ -188,13 +189,17 @@ const prefetch = (src, options) => {
                 });
             }
             else {
+                if (canceled) {
+                    return;
+                }
                 canceled = true;
-                if (canBeAborted) {
-                    try {
-                        controller.abort(new Error('free() called'));
-                    }
-                    catch (_a) { }
+                const cancellationError = new Error('free() called');
+                reject(cancellationError);
+                try {
+                    controller.abort(cancellationError);
                 }
+                catch (_a) { }
+                reader === null || reader === void 0 ? void 0 : reader.cancel(cancellationError).catch(() => undefined);
             }
         },
         waitUntilDone: () => {

package/dist/cjs/use-media-in-timeline.js

@@ -124,6 +124,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             id,
             duration,
             from: 0,
+            trimBefore: null,
             parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
             displayName: finalDisplayName,
             documentationLink,

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

@@ -21,10 +21,12 @@ export type CanUpdateSequencePropStatusBezierEasing = {
 };
 export type CanUpdateSequencePropStatusSpringEasing = {
     type: 'spring';
+    allowTail: boolean | null;
     damping: number;
     mass: number;
     stiffness: number;
     overshootClamping: boolean;
+    durationRestThreshold: number | null;
 };
 export type CanUpdateSequencePropStatusEasing = CanUpdateSequencePropStatusLinearEasing | CanUpdateSequencePropStatusBezierEasing | CanUpdateSequencePropStatusSpringEasing;
 export declare const DEFAULT_LINEAR_EASING: CanUpdateSequencePropStatusLinearEasing;

package/dist/cjs/use-schema.js

@@ -7,6 +7,13 @@ const interpolate_keyframed_status_js_1 = require("./interpolate-keyframed-statu
 exports.DEFAULT_LINEAR_EASING = {
     type: 'linear',
 };
+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) => {
     return { type: 'static', value };
 };
@@ -17,6 +24,18 @@ const makeKeyframedDragOverride = ({ status, frame, value, }) => {
         ? [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame)
         : status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
     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) {
         easing.push(exports.DEFAULT_LINEAR_EASING);
     }
@@ -90,6 +109,7 @@ const computeEffectiveSchemaValuesDotNotation = ({ schema, currentValue, overrid
                 }
                 else if (frame !== null) {
                     const interpolated = (0, interpolate_keyframed_status_js_1.interpolateKeyframedStatus)({
+                        forceSpringAllowTail: null,
                         frame,
                         status,
                     });

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

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.481';
+exports.VERSION = '4.0.483';

package/dist/cjs/video/VideoForPreview.js

@@ -108,7 +108,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
     const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
-    const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
+    const [playerMuted] = (0, volume_position_state_js_1.usePlayerMutedState)();
     const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
         frame: volumePropFrame,
         volume,
@@ -280,6 +280,6 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         requestsVideoFrame: Boolean(onVideoFrame),
         isClientSideRendering: false,
     });
-    return (jsx_runtime_1.jsx("video", { ...nativeProps, ref: videoRef, muted: muted || mediaMuted || userPreferredVolume <= 0, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, controls: false }));
+    return (jsx_runtime_1.jsx("video", { ...nativeProps, ref: videoRef, muted: muted || playerMuted || userPreferredVolume <= 0, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, disableRemotePlayback: true, crossOrigin: crossOriginValue, controls: false }));
 };
 exports.VideoForPreview = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);

package/dist/cjs/volume-position-state.d.ts

@@ -1,18 +1,18 @@
 export type MediaVolumeContextValue = {
-    mediaMuted: boolean;
+    playerMuted: boolean;
     mediaVolume: number;
 };
 export type SetMediaVolumeContextValue = {
-    setMediaMuted: (u: React.SetStateAction<boolean>) => void;
+    setPlayerMuted: (u: React.SetStateAction<boolean>) => void;
     setMediaVolume: (u: number) => void;
 };
 export declare const MediaVolumeContext: import("react").Context<MediaVolumeContextValue>;
 export declare const SetMediaVolumeContext: import("react").Context<SetMediaVolumeContextValue>;
 type MediaVolumeReturnType = readonly [number, (u: number) => void];
 export declare const useMediaVolumeState: () => MediaVolumeReturnType;
-type MediaMutedReturnType = readonly [
+type PlayerMutedReturnType = readonly [
     boolean,
     (u: React.SetStateAction<boolean>) => void
 ];
-export declare const useMediaMutedState: () => MediaMutedReturnType;
+export declare const usePlayerMutedState: () => PlayerMutedReturnType;
 export {};

package/dist/cjs/volume-position-state.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaMutedState = exports.useMediaVolumeState = exports.SetMediaVolumeContext = exports.MediaVolumeContext = void 0;
+exports.usePlayerMutedState = exports.useMediaVolumeState = exports.SetMediaVolumeContext = exports.MediaVolumeContext = void 0;
 const react_1 = require("react");
 exports.MediaVolumeContext = (0, react_1.createContext)({
-    mediaMuted: false,
+    playerMuted: false,
     mediaVolume: 1,
 });
 exports.SetMediaVolumeContext = (0, react_1.createContext)({
-    setMediaMuted: () => {
+    setPlayerMuted: () => {
         throw new Error('default');
     },
     setMediaVolume: () => {
@@ -22,11 +22,11 @@ const useMediaVolumeState = () => {
     }, [mediaVolume, setMediaVolume]);
 };
 exports.useMediaVolumeState = useMediaVolumeState;
-const useMediaMutedState = () => {
-    const { mediaMuted } = (0, react_1.useContext)(exports.MediaVolumeContext);
-    const { setMediaMuted } = (0, react_1.useContext)(exports.SetMediaVolumeContext);
+const usePlayerMutedState = () => {
+    const { playerMuted } = (0, react_1.useContext)(exports.MediaVolumeContext);
+    const { setPlayerMuted } = (0, react_1.useContext)(exports.SetMediaVolumeContext);
     return (0, react_1.useMemo)(() => {
-        return [mediaMuted, setMediaMuted];
-    }, [mediaMuted, setMediaMuted]);
+        return [playerMuted, setPlayerMuted];
+    }, [playerMuted, setPlayerMuted]);
 };
-exports.useMediaMutedState = useMediaMutedState;
+exports.usePlayerMutedState = usePlayerMutedState;