remotion 4.0.537 → 4.0.539

package/dist/cjs/internals.js

@@ -58,7 +58,9 @@ const CSSUtils = __importStar(require("./default-css.js"));
 const default_css_js_1 = require("./default-css.js");
 const DefaultPremountContext_js_1 = require("./DefaultPremountContext.js");
 const EditorProps_js_1 = require("./EditorProps.js");
+const create_curve_sampler_js_1 = require("./effects/create-curve-sampler.js");
 const create_effect_js_1 = require("./effects/create-effect.js");
+const effect_source_observer_js_1 = require("./effects/effect-source-observer.js");
 const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
@@ -72,6 +74,8 @@ const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
 const get_effective_visual_mode_value_js_1 = require("./get-effective-visual-mode-value.js");
 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 HtmlInCanvas_js_1 = require("./HtmlInCanvas.js");
+const HtmlInCanvasFallback_js_1 = require("./HtmlInCanvasFallback.js");
 const input_props_override_js_1 = require("./input-props-override.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const interpolate_keyframed_status_js_1 = require("./interpolate-keyframed-status.js");
@@ -82,6 +86,7 @@ const max_video_cache_size_js_1 = require("./max-video-cache-size.js");
 const media_resource_manager_js_1 = require("./media-resource-manager.js");
 const optimistic_sequence_deletion_js_1 = require("./optimistic-sequence-deletion.js");
 const playback_logging_js_1 = require("./playback-logging.js");
+const playback_pitch_context_1 = require("./playback-pitch-context");
 const portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const prefetch_js_1 = require("./prefetch.js");
@@ -146,6 +151,8 @@ const compositionSelectorRef = (0, react_1.createRef)();
 // Mark them as Internals so use don't assume this is public
 // API and are less likely to use it
 exports.Internals = {
+    HtmlInCanvasFallback: HtmlInCanvasFallback_js_1.HtmlInCanvasFallback,
+    useHtmlInCanvasUnsupportedMessage: HtmlInCanvas_js_1.useHtmlInCanvasUnsupportedMessage,
     OptimisticSequenceDeletion: optimistic_sequence_deletion_js_1.OptimisticSequenceDeletion,
     usePendingSequenceDeletions: optimistic_sequence_deletion_js_1.usePendingSequenceDeletions,
     createElementSourceProxy: create_element_source_proxy_js_1.createElementSourceProxy,
@@ -184,6 +191,7 @@ exports.Internals = {
     CompositionSetters: CompositionManagerContext_js_1.CompositionSetters,
     VisualModePropStatusesContext: SequenceManager_js_1.VisualModePropStatusesContext,
     VisualModePropStatusesRefContext: SequenceManager_js_1.VisualModePropStatusesRefContext,
+    VisualModePropStatusesSubscriptionContext: SequenceManager_js_1.VisualModePropStatusesSubscriptionContext,
     VisualModeBatchSettersContext: SequenceManager_js_1.VisualModeBatchSettersContext,
     VisualModeDragOverridesContext: SequenceManager_js_1.VisualModeDragOverridesContext,
     VisualModeDragOverridesRefContext: SequenceManager_js_1.VisualModeDragOverridesRefContext,
@@ -321,6 +329,7 @@ exports.Internals = {
     DelayRenderContextType: use_delay_render_js_1.DelayRenderContextType,
     TimelineContext: TimelineContext_js_1.TimelineContext,
     usePlaying: use_playing_js_1.usePlaying,
+    PlaybackPitchContext: playback_pitch_context_1.PlaybackPitchContext,
     PlaybackRateContext: TimelineContext_js_1.PlaybackRateContext,
     AbsoluteTimeContext: TimelineContext_js_1.AbsoluteTimeContext,
     RenderAssetManagerProvider: RenderAssetManager_js_1.RenderAssetManagerProvider,
@@ -331,8 +340,10 @@ exports.Internals = {
     cleanupEffectChainState: run_effect_chain_js_1.cleanupEffectChainState,
     runEffectChain: run_effect_chain_js_1.runEffectChain,
     useMemoizedEffects: use_memoized_effects_js_1.useMemoizedEffects,
+    subscribeToEffectSource: effect_source_observer_js_1.subscribeToEffectSource,
     useMemoizedEffectDefinitions: use_memoized_effects_js_1.useMemoizedEffectDefinitions,
     createEffect: create_effect_js_1.createEffect,
+    createCurveSampler: create_curve_sampler_js_1.createCurveSampler,
     createWebGLContextError: webgl2_context_error_js_1.createWebGLContextError,
     createWebGL2ContextError: webgl2_context_error_js_1.createWebGL2ContextError,
     computeEffectiveSchemaValuesDotNotation: use_schema_js_1.computeEffectiveSchemaValuesDotNotation,

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

@@ -8,4 +8,4 @@ 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[], options?: InterpolateColorsOptions | undefined) => string;
+export declare const interpolateColors: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateColorsOptions) => string;

package/dist/cjs/interpolate-colors.js

@@ -27,23 +27,24 @@ function modernColorCall(name) {
         MODERN_VALUE +
         '))?\\s*\\)');
 }
+const cachedMatchers = {
+    rgb: undefined,
+    rgba: undefined,
+    hsl: undefined,
+    hsla: undefined,
+    hex3: undefined,
+    hex4: undefined,
+    hex5: undefined,
+    hex6: undefined,
+    hex8: undefined,
+    oklch: undefined,
+    oklab: undefined,
+    lab: undefined,
+    lch: undefined,
+    hwb: undefined,
+};
 function getMatchers() {
-    const cachedMatchers = {
-        rgb: undefined,
-        rgba: undefined,
-        hsl: undefined,
-        hsla: undefined,
-        hex3: undefined,
-        hex4: undefined,
-        hex5: undefined,
-        hex6: undefined,
-        hex8: undefined,
-        oklch: undefined,
-        oklab: undefined,
-        lab: undefined,
-        lch: undefined,
-        hwb: undefined,
-    };
+    // These expressions have no global or sticky flags, so exec() can reuse them.
     if (cachedMatchers.rgb === undefined) {
         cachedMatchers.rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));
         cachedMatchers.rgba = new RegExp('rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER));
@@ -137,15 +138,19 @@ function parseModernComponent(str, percentScale) {
 function parseHueAngle(str) {
     if (str === 'none')
         return 0;
-    if (str.endsWith('rad')) {
-        return (Number.parseFloat(str) * 180) / Math.PI;
+    let degrees = Number.parseFloat(str);
+    if (str.endsWith('grad')) {
+        degrees *= 0.9;
+    }
+    else if (str.endsWith('rad')) {
+        degrees = (degrees * 180) / Math.PI;
+    }
+    else if (str.endsWith('turn')) {
+        degrees *= 360;
     }
-    if (str.endsWith('grad'))
-        return Number.parseFloat(str) * 0.9;
-    if (str.endsWith('turn'))
-        return Number.parseFloat(str) * 360;
     // 'deg' suffix or plain number = degrees
-    return Number.parseFloat(str);
+    const normalized = degrees % 360;
+    return normalized < 0 ? (normalized + 360) % 360 : normalized;
 }
 function parseModernAlpha(str) {
     if (str === undefined || str === 'none')

package/dist/cjs/interpolate.d.ts

@@ -35,13 +35,6 @@ export declare function interpolate(input: number, inputRange: readonly number[]
 export declare const prepareNumericInterpolation: ({ inputRange, outputRange, options, }: {
     inputRange: readonly number[];
     outputRange: readonly number[];
-    options: Omit<Partial<{
-        easing: readonly EasingFunction[] | EasingFunction;
-        extrapolateLeft: ExtrapolateType;
-        extrapolateRight: ExtrapolateType;
-        output: InterpolateOutputOption;
-        outputType: InterpolateOutputType;
-        posterize: number;
-    }>, "outputType">;
-}) => (input: number) => number;
+    options: Omit<InterpolateOptions, 'outputType'>;
+}) => ((input: number) => number);
 export {};

package/dist/cjs/interpolate.js

@@ -456,6 +456,21 @@ const interpolateSegment = ({ input, inputRange, outputRange, easing, extrapolat
         output,
     });
 };
+const getInputForInterpolation = ({ input, inputRange, options, }) => {
+    const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
+        ? input
+        : Math.floor(input / options.posterize) * options.posterize;
+    const inputMin = inputRange[0];
+    const inputMax = inputRange[inputRange.length - 1];
+    if (inputRange.length === 1 ||
+        !((posterizedInput < inputMin && (options === null || options === void 0 ? void 0 : options.extrapolateLeft) === 'wrap') ||
+            (posterizedInput > inputMax && (options === null || options === void 0 ? void 0 : options.extrapolateRight) === 'wrap'))) {
+        return posterizedInput;
+    }
+    // Wrap before choosing a segment so the entire keyframe range repeats.
+    const range = inputMax - inputMin;
+    return ((((posterizedInput - inputMin) % range) + range) % range) + inputMin;
+};
 const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
     const output = resolveOutputOption(options === null || options === void 0 ? void 0 : options.output);
     if (inputRange.length === 1) {
@@ -470,16 +485,18 @@ const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
     if ((options === null || options === void 0 ? void 0 : options.extrapolateRight) !== undefined) {
         extrapolateRight = options.extrapolateRight;
     }
-    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);
+    const resolvedInput = getInputForInterpolation({
+        input,
+        inputRange,
+        options: options !== null && options !== void 0 ? options : null,
+    });
+    const range = findRange(resolvedInput, inputRange);
     const easing = resolveEasingForSegment({
         easing: easingOption,
         segmentIndex: range,
     });
     let result = interpolateSegment({
-        input: posterizedInput,
+        input: resolvedInput,
         inputRange: [inputRange[range], inputRange[range + 1]],
         outputRange: [outputRange[range], outputRange[range + 1]],
         easing,
@@ -496,11 +513,11 @@ const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
             continue;
         }
         const previousSegmentEnd = inputRange[segmentIndex + 1];
-        if (posterizedInput <= previousSegmentEnd) {
+        if (resolvedInput <= previousSegmentEnd) {
             continue;
         }
         const continuedSegmentValue = interpolateSegment({
-            input: posterizedInput,
+            input: resolvedInput,
             inputRange: [inputRange[segmentIndex], previousSegmentEnd],
             outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
             easing: previousEasing,
@@ -516,10 +533,12 @@ const interpolateString = ({ input, inputRange, outputRange, options, outputType
     var _a;
     const initiallyParsedOutputRange = outputRange.map((output) => parseStringInterpolationValue(output, outputType));
     const hasAxisRotation = initiallyParsedOutputRange.some((parsed) => parsed.axisRotation);
-    const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
-        ? input
-        : Math.floor(input / options.posterize) * options.posterize;
-    const segmentIndex = inputRange.length === 1 ? 0 : findRange(posterizedInput, inputRange);
+    const resolvedInput = getInputForInterpolation({
+        input,
+        inputRange,
+        options: options !== null && options !== void 0 ? options : null,
+    });
+    const segmentIndex = inputRange.length === 1 ? 0 : findRange(resolvedInput, inputRange);
     const parsedOutputRange = hasAxisRotation
         ? initiallyParsedOutputRange.map((parsed, index) => {
             if (parsed.kind !== 'rotate') {
@@ -658,27 +677,20 @@ const interpolateDiscreteValue = ({ input, inputRange, outputRange, options, })
                 : 'Non-numeric strings can only be interpolated using Easing.step1');
         }
     }
-    const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
-        ? input
-        : Math.floor(input / options.posterize) * options.posterize;
+    const resolvedInput = getInputForInterpolation({
+        input,
+        inputRange,
+        options: options !== null && options !== void 0 ? options : null,
+    });
     const inputMin = inputRange[0];
     const inputMax = inputRange[inputRange.length - 1];
-    let resolvedInput = posterizedInput;
     if (resolvedInput < inputMin) {
         if ((options === null || options === void 0 ? void 0 : options.extrapolateLeft) === 'identity') {
             throw new TypeError(typeof outputRange[0] === 'boolean'
                 ? 'extrapolateLeft: "identity" is not supported for booleans'
                 : 'extrapolateLeft: "identity" is not supported for non-numeric strings');
         }
-        if ((options === null || options === void 0 ? void 0 : options.extrapolateLeft) === 'wrap') {
-            const wrapRange = inputMax - inputMin;
-            resolvedInput =
-                ((((resolvedInput - inputMin) % wrapRange) + wrapRange) % wrapRange) +
-                    inputMin;
-        }
-        else {
-            return outputRange[0];
-        }
+        return outputRange[0];
     }
     if (resolvedInput > inputMax) {
         if ((options === null || options === void 0 ? void 0 : options.extrapolateRight) === 'identity') {
@@ -686,15 +698,7 @@ const interpolateDiscreteValue = ({ input, inputRange, outputRange, options, })
                 ? 'extrapolateRight: "identity" is not supported for booleans'
                 : 'extrapolateRight: "identity" is not supported for non-numeric strings');
         }
-        if ((options === null || options === void 0 ? void 0 : options.extrapolateRight) === 'wrap') {
-            const wrapRange = inputMax - inputMin;
-            resolvedInput =
-                ((((resolvedInput - inputMin) % wrapRange) + wrapRange) % wrapRange) +
-                    inputMin;
-        }
-        else {
-            return outputRange[outputRange.length - 1];
-        }
+        return outputRange[outputRange.length - 1];
     }
     const range = findRange(resolvedInput, inputRange);
     return resolvedInput >= inputRange[range + 1]

package/dist/cjs/is-player.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const IsPlayerContext = (0, react_1.createContext)(false);
 const IsPlayerContextProvider = ({ children, }) => {
-    return jsx_runtime_1.jsx(IsPlayerContext.Provider, { value: true, children: children });
+    return (0, jsx_runtime_1.jsx)(IsPlayerContext.Provider, { value: true, children: children });
 };
 exports.IsPlayerContextProvider = IsPlayerContextProvider;
 const useIsPlayer = () => {

package/dist/cjs/loading-indicator.js

@@ -27,8 +27,7 @@ const content = {
 };
 const Loading = () => {
     const scale = (0, use_current_scale_js_1.useCurrentScale)({ dontThrowIfOutsideOfRemotion: true });
-    return (jsx_runtime_1.jsxs(AbsoluteFillElement_js_1.AbsoluteFillElement, { style: container, id: "remotion-comp-loading", children: [
-            jsx_runtime_1.jsx("style", { type: "text/css", children: `
+    return ((0, jsx_runtime_1.jsxs)(AbsoluteFillElement_js_1.AbsoluteFillElement, { style: container, id: "remotion-comp-loading", children: [(0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `
 				@keyframes anim {
 					from {
 						opacity: 0
@@ -37,9 +36,6 @@ const Loading = () => {
 						opacity: 1
 					}
 				}
-			` }), jsx_runtime_1.jsxs("div", { id: "remotion-comp-loading-content", style: content, children: [
-                    jsx_runtime_1.jsx("svg", { width: ICON_SIZE / scale, height: ICON_SIZE / scale, viewBox: "-100 -100 400 400", style: rotate, children: jsx_runtime_1.jsx("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), jsx_runtime_1.jsxs("p", { style: { ...label, fontSize: LABEL_SIZE / scale }, children: ["Resolving ", '<Suspense>', "..."] })
-                ] })
-        ] }));
+			` }), (0, jsx_runtime_1.jsxs)("div", { id: "remotion-comp-loading-content", style: content, children: [(0, jsx_runtime_1.jsx)("svg", { width: ICON_SIZE / scale, height: ICON_SIZE / scale, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#555", stroke: "#555", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }), (0, jsx_runtime_1.jsxs)("p", { style: { ...label, fontSize: LABEL_SIZE / scale }, children: ["Resolving ", '<Suspense>', "..."] })] })] }));
 };
 exports.Loading = Loading;

package/dist/cjs/log-level-context.d.ts

@@ -5,5 +5,5 @@ export type LoggingContextValue = {
     mountTime: number;
 };
 export declare const LogLevelContext: React.Context<LoggingContextValue>;
-export declare const useLogLevel: () => "error" | "info" | "trace" | "verbose" | "warn";
+export declare const useLogLevel: () => LogLevel;
 export declare const useMountTime: () => number;

package/dist/cjs/log.d.ts

@@ -1,15 +1,20 @@
-export declare const logLevels: readonly ["trace", "verbose", "info", "warn", "error"];
+export declare const logLevels: readonly ['trace', 'verbose', 'info', 'warn', 'error'];
 export type LogLevel = (typeof logLevels)[number];
-export declare const isEqualOrBelowLogLevel: (currentLevel: "error" | "info" | "trace" | "verbose" | "warn", level: "error" | "info" | "trace" | "verbose" | "warn") => boolean;
+export declare const isEqualOrBelowLogLevel: (currentLevel: LogLevel, level: LogLevel) => boolean;
 type Options = {
     logLevel: LogLevel;
     tag: string | null;
 };
+declare const verbose: (options: Options, ...args: Parameters<typeof console.log>) => void;
+declare const trace: (options: Options, ...args: Parameters<typeof console.log>) => void;
+declare const info: (options: Options, ...args: Parameters<typeof console.log>) => void;
+declare const warn: (options: Options, ...args: Parameters<typeof console.log>) => void;
+declare const error: (options: Options, ...args: Parameters<typeof console.log>) => void;
 export declare const Log: {
-    trace: (options: Options, message?: any, ...optionalParams: any[]) => void;
-    verbose: (options: Options, message?: any, ...optionalParams: any[]) => void;
-    info: (options: Options, message?: any, ...optionalParams: any[]) => void;
-    warn: (options: Options, message?: any, ...optionalParams: any[]) => void;
-    error: (options: Options, message?: any, ...optionalParams: any[]) => void;
+    trace: typeof trace;
+    verbose: typeof verbose;
+    info: typeof info;
+    warn: typeof warn;
+    error: typeof error;
 };
 export {};

package/dist/cjs/loop/index.js

@@ -115,7 +115,7 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, showInTimeli
     if (actualTimes === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(exports.LoopTimelineContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(loop_context_js_1.LoopContext.Provider, { value: loopContext, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/loop", _remotionInternalLoopDisplay: loopDisplay, ...props, showInTimeline: showInTimeline, playbackRate: playbackRate, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.LoopTimelineContext.Provider, { value: timelineContext, children: (0, jsx_runtime_1.jsx)(loop_context_js_1.LoopContext.Provider, { value: loopContext, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/loop", _remotionInternalLoopDisplay: loopDisplay, ...props, showInTimeline: showInTimeline, playbackRate: playbackRate, children: children }) }) }));
 };
 exports.Loop = Loop;
 exports.Loop.useLoop = useLoop;

package/dist/cjs/media-resource-manager.d.ts

@@ -4,7 +4,7 @@ export type MediaResourceLease<T> = {
     release: () => void;
 };
 export type MediaResourceManager = {
-    acquire: <T>({ key, create }: {
+    acquire: <T>({ key, create, }: {
         key: string;
         create: () => {
             resource: T;

package/dist/cjs/media-tag-current-time-timestamp.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const useCurrentTimeOfMediaTagWithUpdateTimeStamp: (mediaRef: React.RefObject<HTMLAudioElement | HTMLVideoElement | null>) => React.RefObject<{
+export declare const useCurrentTimeOfMediaTagWithUpdateTimeStamp: (mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>) => React.RefObject<{
     time: number;
     lastUpdate: number;
 }>;