remotion 4.0.468 → 4.0.470

package/dist/cjs/effects/run-effect-chain.d.ts

@@ -2,7 +2,7 @@ import { CanvasPool } from './canvas-pool.js';
 import type { EffectDefinition, EffectDefinitionAndStack } from './effect-types.js';
 export type EffectChainState = {
     pool: CanvasPool;
-    setupCache: WeakMap<EffectDefinition<unknown, unknown>, unknown>;
+    setupCache: WeakMap<EffectDefinition<unknown, unknown>, WeakMap<HTMLCanvasElement, unknown>>;
     cleanupRegistry: Array<{
         definition: EffectDefinition<unknown, unknown>;
         state: unknown;

package/dist/cjs/effects/run-effect-chain.js

@@ -20,11 +20,16 @@ const cleanupEffectChainState = (state) => {
 exports.cleanupEffectChainState = cleanupEffectChainState;
 const ensureSetup = (state, def, target) => {
     const widened = def;
-    if (state.setupCache.has(widened)) {
-        return state.setupCache.get(widened);
+    let cacheForDefinition = state.setupCache.get(widened);
+    if (!cacheForDefinition) {
+        cacheForDefinition = new WeakMap();
+        state.setupCache.set(widened, cacheForDefinition);
+    }
+    if (cacheForDefinition.has(target)) {
+        return cacheForDefinition.get(target);
     }
     const setupState = def.setup(target);
-    state.setupCache.set(widened, setupState);
+    cacheForDefinition.set(target, setupState);
     state.cleanupRegistry.push({ definition: widened, state: setupState });
     return setupState;
 };
@@ -68,7 +73,9 @@ const runEffectChain = async ({ state, source, effects, output, width, height, }
     if (isCancelled()) {
         return false;
     }
-    // Raw component sources are 2D frame canvases (Gif, WrappedCanvas.canvas, …).
+    // Canvas sources are DOM-oriented. Flip them when uploading into WebGL so
+    // texture coordinates match clip-space output. `ImageBitmap` bridges below
+    // opt out because they are already oriented for upload.
     let flipWebGLSourceY = true;
     for (let runIndex = 0; runIndex < runs.length; runIndex++) {
         const run = runs[runIndex];
@@ -88,7 +95,10 @@ const runEffectChain = async ({ state, source, effects, output, width, height, }
                 flipSourceY: run.backend === 'webgl2' ? flipWebGLSourceY : false,
             });
             if (run.backend === 'webgl2') {
-                flipWebGLSourceY = false;
+                // Same-backend ping-pong passes feed the previous WebGL canvas back
+                // through `texImage2D()`. That source is still a DOM canvas, so the
+                // next upload also needs to be flipped.
+                flipWebGLSourceY = true;
                 state.pool.assertContextNotLost(dst);
             }
             currentImage = dst;

package/dist/cjs/index.d.ts

@@ -55,7 +55,8 @@ declare global {
         remotion_envVariables: string;
         remotion_isMainTab: boolean;
         remotion_mediaCacheSizeInBytes: number | null;
-        remotion_sampleRate: number;
+        remotion_sampleRate: number | null;
+        remotion_previewSampleRate: number | null;
         remotion_initialMemoryAvailable: number | null;
         remotion_collectAssets: () => TRenderAsset[];
         remotion_isPlayer: boolean;
@@ -92,20 +93,20 @@ export type BundleEvaluationState = {
 export type BundleState = BundleIndexState | BundleEvaluationState | BundleCompositionState;
 export * from './AbsoluteFill.js';
 export * from './animated-image/index.js';
-export type { EffectDefinitionAndStack, EffectDescriptor, EffectsProp, EffectDefinition, EffectFactory, } from './effects/index.js';
+export type { EffectDefinition, EffectDefinitionAndStack, EffectDescriptor, EffectFactory, EffectsProp, } from './effects/index.js';
 /**
  * @description Renders a solid-color rectangle on a `<canvas>`.
  * @see [Documentation](https://www.remotion.dev/docs/solid)
  */
-export { Solid } from './effects/Solid.js';
-export type { SolidProps } from './effects/Solid.js';
-export { HtmlInCanvas, HTML_IN_CANVAS_UNSUPPORTED_MESSAGE, isHtmlInCanvasSupported, type HtmlInCanvasOnInit, type HtmlInCanvasOnInitCleanup, type HtmlInCanvasOnPaint, } from './HtmlInCanvas.js';
-export type { HtmlInCanvasOnPaintParams, HtmlInCanvasProps, } from './HtmlInCanvas.js';
 export type { AnyZodObject } from './any-zod-type.js';
 export { Artifact } from './Artifact.js';
 export { Audio, Html5Audio, RemotionAudioProps } from './audio/index.js';
 export type { LoopVolumeCurveBehavior } from './audio/use-audio-frame.js';
 export { cancelRender } from './cancel-render.js';
+export { Solid } from './effects/Solid.js';
+export type { SolidProps } from './effects/Solid.js';
+export { HTML_IN_CANVAS_UNSUPPORTED_MESSAGE, HtmlInCanvas, isHtmlInCanvasSupported, type HtmlInCanvasOnInit, type HtmlInCanvasOnInitCleanup, type HtmlInCanvasOnPaint, } from './HtmlInCanvas.js';
+export type { HtmlInCanvasOnPaintParams, HtmlInCanvasProps, } from './HtmlInCanvas.js';
 /**
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
  * @see [Documentation](https://www.remotion.dev/docs/canvasimage)
@@ -121,16 +122,16 @@ export { DownloadBehavior } from './download-behavior.js';
 export * from './easing.js';
 export * from './Folder.js';
 export * from './freeze.js';
-export type { NonceHistory } from './nonce.js';
 export { getRemotionEnvironment } from './get-remotion-environment.js';
 export { getStaticFiles, StaticFile } from './get-static-files.js';
 export * from './IFrame.js';
 export { Img, ImgProps } from './Img.js';
 export * from './internals.js';
-export { interpolateColors } from './interpolate-colors.js';
+export { interpolateColors, type InterpolateColorsOptions, } from './interpolate-colors.js';
 export { LogLevel } from './log.js';
 export { Loop } from './loop/index.js';
-export { assertValidInterpolateEasingOption, EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, random, RandomSeed, } from './no-react';
+export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, random, RandomSeed, } from './no-react';
+export type { NonceHistory } from './nonce.js';
 export { prefetch, PrefetchOnProgress } from './prefetch.js';
 export { registerRoot } from './register-root.js';
 export type { PixelFormat, VideoImageFormat } from './render-types.js';

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = exports.isHtmlInCanvasSupported = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.HtmlInCanvas = exports.Solid = void 0;
+exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = void 0;
 require("./_check-rsc.js");
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
@@ -27,16 +27,6 @@ const Sequence_js_1 = require("./Sequence.js");
 (0, multiple_versions_warning_js_1.checkMultipleRemotionVersions)();
 __exportStar(require("./AbsoluteFill.js"), exports);
 __exportStar(require("./animated-image/index.js"), exports);
-/**
- * @description Renders a solid-color rectangle on a `<canvas>`.
- * @see [Documentation](https://www.remotion.dev/docs/solid)
- */
-var Solid_js_1 = require("./effects/Solid.js");
-Object.defineProperty(exports, "Solid", { enumerable: true, get: function () { return Solid_js_1.Solid; } });
-var HtmlInCanvas_js_1 = require("./HtmlInCanvas.js");
-Object.defineProperty(exports, "HtmlInCanvas", { enumerable: true, get: function () { return HtmlInCanvas_js_1.HtmlInCanvas; } });
-Object.defineProperty(exports, "HTML_IN_CANVAS_UNSUPPORTED_MESSAGE", { enumerable: true, get: function () { return HtmlInCanvas_js_1.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE; } });
-Object.defineProperty(exports, "isHtmlInCanvasSupported", { enumerable: true, get: function () { return HtmlInCanvas_js_1.isHtmlInCanvasSupported; } });
 var Artifact_js_1 = require("./Artifact.js");
 Object.defineProperty(exports, "Artifact", { enumerable: true, get: function () { return Artifact_js_1.Artifact; } });
 var index_js_1 = require("./audio/index.js");
@@ -44,6 +34,12 @@ Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { r
 Object.defineProperty(exports, "Html5Audio", { enumerable: true, get: function () { return index_js_1.Html5Audio; } });
 var cancel_render_js_1 = require("./cancel-render.js");
 Object.defineProperty(exports, "cancelRender", { enumerable: true, get: function () { return cancel_render_js_1.cancelRender; } });
+var Solid_js_1 = require("./effects/Solid.js");
+Object.defineProperty(exports, "Solid", { enumerable: true, get: function () { return Solid_js_1.Solid; } });
+var HtmlInCanvas_js_1 = require("./HtmlInCanvas.js");
+Object.defineProperty(exports, "HTML_IN_CANVAS_UNSUPPORTED_MESSAGE", { enumerable: true, get: function () { return HtmlInCanvas_js_1.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE; } });
+Object.defineProperty(exports, "HtmlInCanvas", { enumerable: true, get: function () { return HtmlInCanvas_js_1.HtmlInCanvas; } });
+Object.defineProperty(exports, "isHtmlInCanvasSupported", { enumerable: true, get: function () { return HtmlInCanvas_js_1.isHtmlInCanvasSupported; } });
 /**
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
  * @see [Documentation](https://www.remotion.dev/docs/canvasimage)
@@ -74,6 +70,7 @@ var index_js_3 = require("./loop/index.js");
 Object.defineProperty(exports, "Loop", { enumerable: true, get: function () { return index_js_3.Loop; } });
 var no_react_1 = require("./no-react");
 Object.defineProperty(exports, "assertValidInterpolateEasingOption", { enumerable: true, get: function () { return no_react_1.assertValidInterpolateEasingOption; } });
+Object.defineProperty(exports, "assertValidInterpolatePosterizeOption", { enumerable: true, get: function () { return no_react_1.assertValidInterpolatePosterizeOption; } });
 Object.defineProperty(exports, "interpolate", { enumerable: true, get: function () { return no_react_1.interpolate; } });
 Object.defineProperty(exports, "random", { enumerable: true, get: function () { return no_react_1.random; } });
 var prefetch_js_1 = require("./prefetch.js");

package/dist/cjs/internals.d.ts

@@ -18,7 +18,7 @@ import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFal
 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, CanUpdateSequencePropStatusTrue, GetCodeValues, GetDragOverrides, GetEffectCodeValues, GetEffectDragOverrides } from './use-schema.js';
+import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusTrue, GetCodeValues, GetDragOverrides, GetEffectCodeValues, GetEffectDragOverrides } from './use-schema.js';
 import { type CanUpdateSequencePropStatus, type CodeValues, type DragOverrides, type EffectDragOverrides } from './use-schema.js';
 import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state.js';
 import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
@@ -253,6 +253,7 @@ export declare const Internals: {
         readonly numberOfAudioTags: number;
         readonly logLevel: import("./log.js").LogLevel;
         readonly audioLatencyHint: AudioContextLatencyCategory;
+        readonly previewSampleRate: number | null;
         readonly videoEnabled: boolean;
         readonly audioEnabled: boolean;
         readonly frameState: Record<string, number> | null;
@@ -270,7 +271,7 @@ export declare const Internals: {
     readonly getRoot: () => import("react").FC<{}> | null;
     readonly useMediaVolumeState: () => readonly [number, (u: number) => void];
     readonly useMediaMutedState: () => readonly [boolean, (u: React.SetStateAction<boolean>) => void];
-    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, }: {
+    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, }: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         mediaVolume: number;
         src: string | undefined;
@@ -284,6 +285,7 @@ export declare const Internals: {
         postmountDisplay: number | null;
         loopDisplay: import("./CompositionManager.js").LoopDisplay | undefined;
         documentationLink: string | null;
+        refForOutline: React.RefObject<HTMLElement | null> | null;
     }) => void;
     readonly useLazyComponent: <Props>({ compProps, componentName, noSuspense, }: {
         compProps: CompProps<Props>;
@@ -320,6 +322,7 @@ export declare const Internals: {
         readonly children: React.ReactNode;
         readonly audioLatencyHint: AudioContextLatencyCategory;
         readonly audioEnabled: boolean;
+        readonly previewSampleRate: number | null;
     }>;
     readonly SharedAudioTagsContext: import("react").Context<{
         registerAudio: (options: {
@@ -622,6 +625,8 @@ export declare const Internals: {
     readonly useEffectChainState: () => {
         get: (width: number, height: number) => import("./effects/run-effect-chain.js").EffectChainState | null;
     };
+    readonly createEffectChainState: (width: number, height: number) => import("./effects/run-effect-chain.js").EffectChainState;
+    readonly cleanupEffectChainState: (state: import("./effects/run-effect-chain.js").EffectChainState) => void;
     readonly runEffectChain: ({ state, source, effects, output, width, height, }: import("./effects/run-effect-chain.js").RunEffectChainOptions) => Promise<boolean>;
     readonly useMemoizedEffects: ({ effects, overrideId, }: {
         effects: readonly import("./index.js").EffectDescriptor<unknown>[];
@@ -631,15 +636,20 @@ export declare const Internals: {
     readonly createEffect: <P, S>(definition: import("./index.js").EffectDefinition<P, S>) => import("./index.js").EffectFactory<P>;
     readonly createWebGLContextError: (effectName: string) => Error;
     readonly createWebGL2ContextError: (effectName: string) => Error;
-    readonly computeEffectiveSchemaValuesDotNotation: ({ schema, currentValue, overrideValues, propStatus, }: {
+    readonly computeEffectiveSchemaValuesDotNotation: ({ schema, currentValue, overrideValues, propStatus, frame, }: {
         schema: SequenceSchema;
         currentValue: Record<string, unknown>;
         overrideValues: Record<string, unknown>;
         propStatus: Record<string, CanUpdateSequencePropStatus> | undefined;
+        frame: number | null;
     }) => {
         merged: Record<string, unknown>;
         propsToDelete: Set<string>;
     };
+    readonly interpolateKeyframedStatus: ({ frame, status, }: {
+        frame: number;
+        status: CanUpdateSequencePropStatusKeyframed;
+    }) => number | string | null;
     readonly OverrideIdsToNodePathsGettersContext: import("react").Context<OverrideToNodePathGetters>;
     readonly OverrideIdsToNodePathsSettersContext: import("react").Context<OverrideToNodeSetters>;
     readonly findPropsToDelete: ({ schema, key, value, }: {
@@ -665,4 +675,4 @@ export declare const Internals: {
     };
     readonly hiddenField: SequenceFieldSchema;
 };
-export type { CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusTrue, CodeValues, CompositionManagerContext, CompProps, DragOverrides, EffectDragOverrides, GetCodeValues, GetDragOverrides, GetEffectCodeValues, GetEffectDragOverrides, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, SequenceFieldSchema, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, RemotionAudioContextState, };
+export type { CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusTrue, CodeValues, CompositionManagerContext, CompProps, DragOverrides, EffectDragOverrides, GetCodeValues, GetDragOverrides, GetEffectCodeValues, GetEffectDragOverrides, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, SequenceFieldSchema, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -62,6 +62,7 @@ const get_effective_visual_mode_value_js_1 = require("./get-effective-visual-mod
 const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const input_props_override_js_1 = require("./input-props-override.js");
+const interpolate_keyframed_status_js_1 = require("./interpolate-keyframed-status.js");
 const is_player_js_1 = require("./is-player.js");
 const log_level_context_js_1 = require("./log-level-context.js");
 const log_js_1 = require("./log.js");
@@ -230,6 +231,8 @@ exports.Internals = {
     getEffectiveVisualModeValue: get_effective_visual_mode_value_js_1.getEffectiveVisualModeValue,
     CompositionRenderErrorContext: composition_render_error_context_js_1.CompositionRenderErrorContext,
     useEffectChainState: use_effect_chain_state_js_1.useEffectChainState,
+    createEffectChainState: run_effect_chain_js_1.createEffectChainState,
+    cleanupEffectChainState: run_effect_chain_js_1.cleanupEffectChainState,
     runEffectChain: run_effect_chain_js_1.runEffectChain,
     useMemoizedEffects: use_memoized_effects_js_1.useMemoizedEffects,
     useMemoizedEffectDefinitions: use_memoized_effects_js_1.useMemoizedEffectDefinitions,
@@ -237,6 +240,7 @@ exports.Internals = {
     createWebGLContextError: webgl2_context_error_js_1.createWebGLContextError,
     createWebGL2ContextError: webgl2_context_error_js_1.createWebGL2ContextError,
     computeEffectiveSchemaValuesDotNotation: use_schema_js_1.computeEffectiveSchemaValuesDotNotation,
+    interpolateKeyframedStatus: interpolate_keyframed_status_js_1.interpolateKeyframedStatus,
     OverrideIdsToNodePathsGettersContext: sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext,
     OverrideIdsToNodePathsSettersContext: sequence_node_path_js_1.OverrideIdsToNodePathsSettersContext,
     findPropsToDelete: find_props_to_delete_js_1.findPropsToDelete,

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

@@ -2,8 +2,11 @@
  * Copied from:
  * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
  */
+export type InterpolateColorsOptions = {
+    posterize: number | undefined;
+};
 export declare const colorNames: {
     [key: string]: number;
 };
 export declare function processColor(color: string): number;
-export declare const interpolateColors: (input: number, inputRange: readonly number[], outputRange: readonly string[]) => string;
+export declare const interpolateColors: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateColorsOptions) => string;

package/dist/cjs/interpolate-colors.js

@@ -536,11 +536,12 @@ function processColor(color) {
     const normalizedColor = normalizeColor(color);
     return ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
 }
-const interpolateColorsRGB = (value, inputRange, colors) => {
+const interpolateColorsRGB = (value, inputRange, colors, options) => {
     const [r, g, b, a] = [red, green, blue, opacity].map((f) => {
         const unrounded = (0, interpolate_js_1.interpolate)(value, inputRange, colors.map((c) => f(c)), {
             extrapolateLeft: 'clamp',
             extrapolateRight: 'clamp',
+            posterize: options === null || options === void 0 ? void 0 : options.posterize,
         });
         if (f === opacity) {
             return Number(unrounded.toFixed(3));
@@ -553,7 +554,7 @@ const interpolateColorsRGB = (value, inputRange, colors) => {
  * @description Allows you to map a range of values to colors using a concise syntax.
  * @see [Documentation](https://remotion.dev/docs/interpolate-colors)
  */
-const interpolateColors = (input, inputRange, outputRange) => {
+const interpolateColors = (input, inputRange, outputRange, options) => {
     if (typeof input === 'undefined') {
         throw new TypeError('input can not be undefined');
     }
@@ -571,6 +572,6 @@ const interpolateColors = (input, inputRange, outputRange) => {
             ' values provided) must have the same length');
     }
     const processedOutputRange = outputRange.map((c) => processColor(c));
-    return interpolateColorsRGB(input, inputRange, processedOutputRange);
+    return interpolateColorsRGB(input, inputRange, processedOutputRange, options);
 };
 exports.interpolateColors = interpolateColors;

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

@@ -0,0 +1,5 @@
+import type { CanUpdateSequencePropStatusKeyframed } from './use-schema.js';
+export declare const interpolateKeyframedStatus: ({ frame, status, }: {
+    frame: number;
+    status: CanUpdateSequencePropStatusKeyframed;
+}) => number | string | null;

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateKeyframedStatus = void 0;
+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) => {
+    if (e === 'linear') {
+        return easing_js_1.Easing.linear;
+    }
+    return (0, bezier_js_1.bezier)(e[0], e[1], e[2], e[3]);
+};
+const interpolateKeyframedStatus = ({ frame, status, }) => {
+    const { keyframes, easing, clamping, interpolationFunction } = status;
+    if (keyframes.length === 0) {
+        return null;
+    }
+    const inputRange = keyframes.map((k) => k.frame);
+    const outputs = keyframes.map((k) => k.value);
+    if (interpolationFunction === 'interpolateColors') {
+        if (!outputs.every((v) => typeof v === 'string')) {
+            return null;
+        }
+        if (keyframes.length === 1) {
+            return outputs[0];
+        }
+        try {
+            return (0, interpolate_colors_js_1.interpolateColors)(frame, inputRange, outputs, {
+                posterize: status.posterize,
+            });
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    if (interpolationFunction !== 'interpolate') {
+        return null;
+    }
+    if (!outputs.every((v) => typeof v === 'number')) {
+        return null;
+    }
+    if (keyframes.length === 1) {
+        return outputs[0];
+    }
+    try {
+        return (0, interpolate_js_1.interpolate)(frame, inputRange, outputs, {
+            easing: easing.map(easingToFn),
+            extrapolateLeft: clamping.left,
+            extrapolateRight: clamping.right,
+            posterize: status.posterize,
+        });
+    }
+    catch (_b) {
+        return null;
+    }
+};
+exports.interpolateKeyframedStatus = interpolateKeyframedStatus;

package/dist/cjs/interpolate.d.ts

@@ -8,6 +8,8 @@ export type InterpolateOptions = Partial<{
     easing: EasingFunction | readonly EasingFunction[];
     extrapolateLeft: ExtrapolateType;
     extrapolateRight: ExtrapolateType;
+    posterize: number;
 }>;
 export declare function assertValidInterpolateEasingOption(easing: EasingFunction | readonly EasingFunction[] | undefined, inputRangeLength: number): void;
+export declare function assertValidInterpolatePosterizeOption(posterize: number | undefined): void;
 export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number;

package/dist/cjs/interpolate.js

@@ -2,6 +2,7 @@
 // Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/nodes/AnimatedInterpolation.js
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.assertValidInterpolateEasingOption = assertValidInterpolateEasingOption;
+exports.assertValidInterpolatePosterizeOption = assertValidInterpolatePosterizeOption;
 exports.interpolate = interpolate;
 function interpolateFunction(input, inputRange, outputRange, options) {
     const { extrapolateLeft, extrapolateRight, easing } = options;
@@ -66,8 +67,8 @@ function checkValidInputRange(arr) {
     }
 }
 function checkInfiniteRange(name, arr) {
-    if (arr.length < 2) {
-        throw new Error(name + ' must have at least 2 elements');
+    if (arr.length < 1) {
+        throw new Error(name + ' must have at least 1 element');
     }
     for (const element of arr) {
         if (typeof element !== 'number') {
@@ -95,6 +96,16 @@ function assertValidInterpolateEasingOption(easing, inputRangeLength) {
         }
     }
 }
+function assertValidInterpolatePosterizeOption(posterize) {
+    if (posterize === undefined) {
+        return;
+    }
+    if (typeof posterize !== 'number' ||
+        !Number.isFinite(posterize) ||
+        posterize <= 0) {
+        throw new Error(`posterize must be a positive finite number, but got ${posterize}`);
+    }
+}
 /*
  * @description Allows you to map a range of values to another using a concise syntax.
  * @see [Documentation](https://remotion.dev/docs/interpolate)
@@ -120,6 +131,7 @@ function interpolate(input, inputRange, outputRange, options) {
     checkInfiniteRange('outputRange', outputRange);
     checkValidInputRange(inputRange);
     assertValidInterpolateEasingOption(options === null || options === void 0 ? void 0 : options.easing, inputRange.length);
+    assertValidInterpolatePosterizeOption(options === null || options === void 0 ? void 0 : options.posterize);
     const easingOption = options === null || options === void 0 ? void 0 : options.easing;
     const defaultEasing = (num) => num;
     const resolveEasingForSegment = (segmentIndex) => {
@@ -143,8 +155,14 @@ function interpolate(input, inputRange, outputRange, options) {
     if (typeof input !== 'number') {
         throw new TypeError('Cannot interpolate an input which is not a number');
     }
-    const range = findRange(input, inputRange);
-    return interpolateFunction(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
+    if (inputRange.length === 1) {
+        return outputRange[0];
+    }
+    const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
+        ? 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),
         extrapolateLeft,
         extrapolateRight,

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

@@ -1,6 +1,6 @@
 export type { ArtifactAsset, AudioOrVideoAsset, InlineAudioAsset, TRenderAsset, } from './CompositionManager';
 export type { DownloadBehavior } from './download-behavior';
-export { assertValidInterpolateEasingOption, interpolate } from './interpolate';
+export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, interpolate, } from './interpolate';
 export type { EasingFunction, ExtrapolateType, InterpolateOptions, } from './interpolate';
 export { random } from './random.js';
 export type { RandomSeed } from './random.js';

package/dist/cjs/no-react.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoReactInternals = exports.random = exports.interpolate = exports.assertValidInterpolateEasingOption = void 0;
+exports.NoReactInternals = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = void 0;
 var interpolate_1 = require("./interpolate");
 Object.defineProperty(exports, "assertValidInterpolateEasingOption", { enumerable: true, get: function () { return interpolate_1.assertValidInterpolateEasingOption; } });
+Object.defineProperty(exports, "assertValidInterpolatePosterizeOption", { enumerable: true, get: function () { return interpolate_1.assertValidInterpolatePosterizeOption; } });
 Object.defineProperty(exports, "interpolate", { enumerable: true, get: function () { return interpolate_1.interpolate; } });
 var random_js_1 = require("./random.js");
 Object.defineProperty(exports, "random", { enumerable: true, get: function () { return random_js_1.random; } });

package/dist/cjs/sequence-field-schema.d.ts

@@ -26,6 +26,14 @@ export type TranslateFieldSchema = {
     default: string | undefined;
     description?: string;
 };
+export type UvCoordinateFieldSchema = {
+    type: 'uv-coordinate';
+    min?: number;
+    max?: number;
+    step?: number;
+    default: readonly [number, number] | undefined;
+    description?: string;
+};
 export type ColorFieldSchema = {
     type: 'color';
     default: string | undefined;
@@ -37,7 +45,7 @@ export type EnumFieldSchema = {
     description?: string;
     variants: Record<string, SequenceSchema>;
 };
-export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationFieldSchema | TranslateFieldSchema | ColorFieldSchema | EnumFieldSchema;
+export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationFieldSchema | TranslateFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | EnumFieldSchema;
 export type SequenceFieldSchema = VisibleFieldSchema | HiddenFieldSchema;
 export type SequenceSchema = {
     [key: string]: SequenceFieldSchema;

package/dist/cjs/truncate-src-for-label.d.ts

@@ -0,0 +1 @@
+export declare function truncateSrcForLabel(src: string): string;

package/dist/cjs/truncate-src-for-label.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.truncateSrcForLabel = truncateSrcForLabel;
+// Data URLs like the ones from canvas.toDataURL() can be many megabytes, which makes the delayRender() label
+// unreadable and bloats log output
+function truncateSrcForLabel(src) {
+    if (src.startsWith('data:') && src.length > 100) {
+        return src.slice(0, 60) + '...[' + src.length + ' chars total]';
+    }
+    return src;
+}

package/dist/cjs/use-media-in-timeline.d.ts

@@ -24,7 +24,7 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     playbackRate: number;
 };
 export type BasicMediaInTimelineReturnType = ReturnType<typeof useBasicMediaInTimeline>;
-export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, }: {
+export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     src: string | undefined;
@@ -38,4 +38,5 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType,
     postmountDisplay: number | null;
     loopDisplay: LoopDisplay | undefined;
     documentationLink: string | null;
+    refForOutline: React.RefObject<HTMLElement | null> | null;
 }) => void;

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

@@ -86,7 +86,7 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
     return memoizedResult;
 };
 exports.useBasicMediaInTimeline = useBasicMediaInTimeline;
-const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, }) => {
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
@@ -139,6 +139,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             postmountDisplay,
             controls: null,
             effects: [],
+            refForOutline,
         });
         return () => {
             unregisterSequence(id);
@@ -165,6 +166,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
         rootId,
         finalDisplayName,
         isStudio,
+        refForOutline,
     ]);
 };
 exports.useMediaInTimeline = useMediaInTimeline;

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

@@ -1,3 +1,4 @@
+import type { ExtrapolateType } from './interpolate.js';
 import type { SequenceSchema } from './sequence-field-schema.js';
 import type { CanUpdateSequencePropsResponse, SequencePropsSubscriptionKey } from './SequenceManager.js';
 export type CanUpdateSequencePropStatusTrue = {
@@ -8,11 +9,26 @@ export type CanUpdateSequencePropStatusKeyframe = {
     frame: number;
     value: unknown;
 };
-export type CanUpdateSequencePropStatusFalse = {
+export type CanUpdateSequencePropStatusEasing = 'linear' | [number, number, number, number];
+export type CanUpdateSequencePropStatusClamping = {
+    left: ExtrapolateType;
+    right: ExtrapolateType;
+};
+export type CanUpdateSequencePropStatusInterpolationFunction = 'interpolate' | 'interpolateColors';
+export type CanUpdateSequencePropStatusComputed = {
     canUpdate: false;
     reason: 'computed';
-    keyframes?: CanUpdateSequencePropStatusKeyframe[];
 };
+export type CanUpdateSequencePropStatusKeyframed = {
+    canUpdate: false;
+    reason: 'keyframed';
+    interpolationFunction: CanUpdateSequencePropStatusInterpolationFunction;
+    keyframes: CanUpdateSequencePropStatusKeyframe[];
+    easing: CanUpdateSequencePropStatusEasing[];
+    clamping: CanUpdateSequencePropStatusClamping;
+    posterize: number | undefined;
+};
+export type CanUpdateSequencePropStatusFalse = CanUpdateSequencePropStatusComputed | CanUpdateSequencePropStatusKeyframed;
 export type CanUpdateSequencePropStatus = CanUpdateSequencePropStatusTrue | CanUpdateSequencePropStatusFalse;
 export type DragOverrides = Record<string, Record<string, unknown>>;
 export type EffectDragOverrides = Record<string, Record<string, unknown>>;
@@ -21,11 +37,12 @@ export type GetCodeValues = (nodePath: SequencePropsSubscriptionKey) => Record<s
 export type GetEffectCodeValues = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, CanUpdateSequencePropStatus> | undefined;
 export type GetDragOverrides = (nodePath: SequencePropsSubscriptionKey) => DragOverrides[string];
 export type GetEffectDragOverrides = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, unknown>;
-export declare const computeEffectiveSchemaValuesDotNotation: ({ schema, currentValue, overrideValues, propStatus, }: {
+export declare const computeEffectiveSchemaValuesDotNotation: ({ schema, currentValue, overrideValues, propStatus, frame, }: {
     schema: SequenceSchema;
     currentValue: Record<string, unknown>;
     overrideValues: Record<string, unknown>;
     propStatus: Record<string, CanUpdateSequencePropStatus> | undefined;
+    frame: number | null;
 }) => {
     merged: Record<string, unknown>;
     propsToDelete: Set<string>;