remotion 4.0.520 → 4.0.522

package/dist/cjs/AbsoluteFill.d.ts

@@ -71,22 +71,10 @@ export declare const absoluteFillSchema: {
         readonly hiddenFromList: false;
     };
     readonly 'style.fontWeight': {
-        readonly type: "enum";
-        readonly default: "400";
+        readonly type: "font-weight";
+        readonly default: 400;
         readonly description: "Font weight";
-        readonly variants: {
-            readonly '100': {};
-            readonly '200': {};
-            readonly '300': {};
-            readonly '400': {};
-            readonly '500': {};
-            readonly '600': {};
-            readonly '700': {};
-            readonly '800': {};
-            readonly '900': {};
-            readonly normal: {};
-            readonly bold: {};
-        };
+        readonly keyframable: false;
     };
     readonly 'style.fontStyle': {
         readonly type: "enum";

package/dist/cjs/CompositionManager.d.ts

@@ -7,6 +7,7 @@ import type { EffectDefinition } from './effects/effect-types.js';
 import type { InteractivitySchema } from './interactivity-schema.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 import type { RuntimeValueSnapshot, RuntimeValueStore } from './runtime-value-store.js';
+import type { VideoConfigValues } from './video-config.js';
 export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     width: number | undefined;
     height: number | undefined;
@@ -61,6 +62,7 @@ export type JsxComponentIdentity = string;
 export type SequenceRegistrationControls = {
     schema: InteractivitySchema;
     runtimeValues: RuntimeValueStore;
+    videoConfigValues: VideoConfigValues | null;
     overrideId: string;
     supportsEffects: boolean;
     componentIdentity: JsxComponentIdentity | null;

package/dist/cjs/Img.d.ts

@@ -213,6 +213,7 @@ export declare const imgSchema: {
     readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
     readonly src: {
         readonly type: "asset";
+        readonly assetType: "image";
         readonly default: undefined;
         readonly description: "Source";
         readonly keyframable: false;

package/dist/cjs/Img.js

@@ -224,6 +224,7 @@ const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
     src: {
         type: 'asset',
+        assetType: 'image',
         default: undefined,
         description: 'Source',
         keyframable: false,

package/dist/cjs/Interactive.d.ts

@@ -123,22 +123,10 @@ export declare const Interactive: {
             readonly hiddenFromList: false;
         };
         readonly 'style.fontWeight': {
-            readonly type: "enum";
-            readonly default: "400";
+            readonly type: "font-weight";
+            readonly default: 400;
             readonly description: "Font weight";
-            readonly variants: {
-                readonly '100': {};
-                readonly '200': {};
-                readonly '300': {};
-                readonly '400': {};
-                readonly '500': {};
-                readonly '600': {};
-                readonly '700': {};
-                readonly '800': {};
-                readonly '900': {};
-                readonly normal: {};
-                readonly bold: {};
-            };
+            readonly keyframable: false;
         };
         readonly 'style.fontStyle': {
             readonly type: "enum";

package/dist/cjs/Sequence.js

@@ -195,6 +195,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     const controlsSupportsEffects = controls === null || controls === void 0 ? void 0 : controls.supportsEffects;
     const controlsComponentIdentity = controls === null || controls === void 0 ? void 0 : controls.componentIdentity;
     const controlsComponentName = controls === null || controls === void 0 ? void 0 : controls.componentName;
+    const controlsVideoConfigValues = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues;
     const effectRuntimeValues = (0, react_1.useMemo)(() => {
         var _a;
         return (_a = _remotionInternalEffects === null || _remotionInternalEffects === void 0 ? void 0 : _remotionInternalEffects.runtimeValues) !== null && _a !== void 0 ? _a : null;
@@ -205,7 +206,8 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             controlsOverrideId === undefined ||
             controlsSupportsEffects === undefined ||
             controlsComponentIdentity === undefined ||
-            controlsComponentName === undefined) {
+            controlsComponentName === undefined ||
+            controlsVideoConfigValues === undefined) {
             return null;
         }
         return {
@@ -215,10 +217,12 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             supportsEffects: controlsSupportsEffects,
             componentIdentity: controlsComponentIdentity,
             componentName: controlsComponentName,
+            videoConfigValues: controlsVideoConfigValues,
         };
     }, [
         controlsComponentIdentity,
         controlsComponentName,
+        controlsVideoConfigValues,
         controlsOverrideId,
         controlsRuntimeValues,
         controlsSchema,

package/dist/cjs/SequenceManager.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { TSequence } from './CompositionManager.js';
 import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, PropStatuses } from './use-schema.js';
+import type { VideoConfigValues } from './video-config.js';
 export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
     updateSequence: ((seq: TSequence) => void) | null;
@@ -74,12 +75,7 @@ export type SequencePropsSubscriptionKey = {
     effectKeys: string[][];
     videoConfigValues: VideoConfigValues | null;
 };
-export type VideoConfigValues = {
-    durationInFrames: number;
-    fps: number;
-    height: number;
-    width: number;
-};
+export type { VideoConfigValues } from './video-config.js';
 export declare const SequenceManagerProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -201,6 +201,7 @@ export declare const animatedImageSchema: {
     readonly showInTimeline: import("../interactivity-schema.js").HiddenFieldSchema;
     readonly src: {
         readonly type: "asset";
+        readonly assetType: "image";
         readonly default: undefined;
         readonly description: "Source";
         readonly keyframable: false;

package/dist/cjs/animated-image/AnimatedImage.js

@@ -23,6 +23,7 @@ const resolve_image_source_1 = require("./resolve-image-source");
 exports.animatedImageSchema = {
     src: {
         type: 'asset',
+        assetType: 'image',
         default: undefined,
         description: 'Source',
         keyframable: false,

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -58,6 +58,7 @@ type SharedAudioContextValue = {
     audioSyncAnchorEmitter: AudioSyncAnchorEmitter;
     scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
     resume: () => Promise<void>;
+    resumeAsAutoPlay: () => Promise<void>;
     suspend: () => Promise<void>;
     getIsResumingAudioContext: () => Promise<AudioContextResumeResult> | null;
     unscheduleAudioNode: (node: AudioBufferSourceNode) => void;

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

@@ -111,6 +111,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
     }
     const isResuming = (0, react_1.useRef)(null);
     const nextResumeAttemptId = (0, react_1.useRef)(0);
+    const nextResumeIsAutoPlayAttempt = (0, react_1.useRef)(false);
     const audioSyncAnchor = (0, react_1.useMemo)(() => ({ value: 0 }), []);
     const audioSyncAnchorListeners = (0, react_1.useRef)([]);
     const audioSyncAnchorEmitter = (0, react_1.useMemo)(() => {
@@ -201,6 +202,8 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
         };
     }, [ctxAndGain, _experimentalKeepAudioContextAlive, logLevel]);
     const resume = (0, react_1.useCallback)(() => {
+        const isAutoPlayAttempt = nextResumeIsAutoPlayAttempt.current;
+        nextResumeIsAutoPlayAttempt.current = false;
         if (!ctxAndGain) {
             return Promise.resolve();
         }
@@ -226,7 +229,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
         const abortController = new AbortController();
         const resumeAttemptId = nextResumeAttemptId.current++;
         const waitPromise = new Promise((resolve) => {
-            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel, abortController.signal).then(resolve);
+            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel, abortController.signal, isAutoPlayAttempt).then(resolve);
             resumePromise.catch((err) => {
                 log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'AudioContext resume rejected, muting playback and continuing without audio', err);
                 abortController.abort();
@@ -248,6 +251,10 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
             // since callers (e.g. use-playback.ts) do not await this.
         });
     }, [ctxAndGain, _experimentalKeepAudioContextAlive, logLevel]);
+    const resumeAsAutoPlay = (0, react_1.useCallback)(() => {
+        nextResumeIsAutoPlayAttempt.current = true;
+        return resume();
+    }, [resume]);
     const getIsResumingAudioContext = (0, react_1.useCallback)(() => {
         var _a;
         var _b;
@@ -326,6 +333,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
             audioSyncAnchorEmitter,
             scheduleAudioNode,
             resume,
+            resumeAsAutoPlay,
             suspend,
             getIsResumingAudioContext,
             unscheduleAudioNode,
@@ -337,6 +345,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
         audioSyncAnchorEmitter,
         scheduleAudioNode,
         resume,
+        resumeAsAutoPlay,
         suspend,
         getIsResumingAudioContext,
         unscheduleAudioNode,

package/dist/cjs/audio/wait-until-actually-resumed.d.ts

@@ -1,2 +1,2 @@
 export type AudioContextResumeResult = 'resumed' | 'cancelled' | 'failed';
-export declare const waitUntilActuallyResumed: (audioContext: AudioContext, logLevel: "error" | "info" | "trace" | "verbose" | "warn", signal: AbortSignal) => Promise<AudioContextResumeResult>;
+export declare const waitUntilActuallyResumed: (audioContext: AudioContext, logLevel: "error" | "info" | "trace" | "verbose" | "warn", signal: AbortSignal, isAutoPlayAttempt: boolean) => Promise<AudioContextResumeResult>;

package/dist/cjs/audio/wait-until-actually-resumed.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitUntilActuallyResumed = void 0;
 const log_js_1 = require("../log.js");
 const RESUME_WAIT_TIMEOUT = 1000;
-const waitUntilActuallyResumed = (audioContext, logLevel, signal) => {
+const waitUntilActuallyResumed = (audioContext, logLevel, signal, isAutoPlayAttempt) => {
     return new Promise((resolve) => {
         const startCurrentTime = audioContext.currentTime;
         const start = audioContext.getOutputTimestamp();
@@ -55,19 +55,21 @@ const waitUntilActuallyResumed = (audioContext, logLevel, signal) => {
             return;
         }
         signal.addEventListener('abort', onAbort, { once: true });
-        timeout = setTimeout(() => {
-            // The success check is scheduled with requestAnimationFrame, which can
-            // be starved while the main thread is busy. Re-check once before
-            // declaring failure so a resume that actually completed is not
-            // reported as failed - the Player would otherwise mute itself even
-            // though playback was started by a user gesture and audio is running.
-            if (hasAudiblyStarted(startOutputPerformanceTime)) {
-                finish('resumed');
-                return;
-            }
-            log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'WARNING: You enabled autoPlay on an unmuted <Player /> and the browser did not allow the video to be started. Remotion muted the <Player /> so it can play. To properly handle this, either set the `muted` prop or remove the `autoPlay` prop');
-            finish('failed');
-        }, RESUME_WAIT_TIMEOUT);
+        if (isAutoPlayAttempt) {
+            timeout = setTimeout(() => {
+                // The success check is scheduled with requestAnimationFrame, which can
+                // be starved while the main thread is busy. Re-check once before
+                // declaring failure so a resume that actually completed is not
+                // reported as failed - the Player would otherwise mute itself even
+                // though playback was started by a user gesture and audio is running.
+                if (hasAudiblyStarted(startOutputPerformanceTime)) {
+                    finish('resumed');
+                    return;
+                }
+                log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'WARNING: You enabled autoPlay on an unmuted <Player /> and the browser did not allow the video to be started. Remotion muted the <Player /> so it can play. To properly handle this, either set the `muted` prop or remove the `autoPlay` prop');
+                finish('failed');
+            }, RESUME_WAIT_TIMEOUT);
+        }
         animationFrame = requestAnimationFrame(check);
     });
 };

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -201,6 +201,7 @@ export declare const canvasImageSchema: {
     readonly showInTimeline: import("../interactivity-schema.js").HiddenFieldSchema;
     readonly src: {
         readonly type: "asset";
+        readonly assetType: "image";
         readonly default: undefined;
         readonly description: "Source";
         readonly keyframable: false;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -22,6 +22,7 @@ const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js"
 exports.canvasImageSchema = {
     src: {
         type: 'asset',
+        assetType: 'image',
         default: undefined,
         description: 'Source',
         keyframable: false,

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

@@ -97,8 +97,15 @@ export type FontFamilyFieldSchema = {
     description?: string;
     keyframable?: false;
 };
+export type FontWeightFieldSchema = {
+    type: 'font-weight';
+    default: number | string | undefined;
+    description?: string;
+    keyframable?: false;
+};
 export type AssetFieldSchema = {
     type: 'asset';
+    assetType?: 'audio' | 'video' | 'image';
     default: string | undefined;
     description?: string;
     keyframable?: false;
@@ -138,7 +145,7 @@ export type CaptionsFieldSchema = {
     description?: string;
     keyframable: false;
 };
-export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | FontFamilyFieldSchema | AssetFieldSchema | ArrayFieldSchema | CaptionsFieldSchema | EnumFieldSchema;
+export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | FontFamilyFieldSchema | FontWeightFieldSchema | AssetFieldSchema | ArrayFieldSchema | CaptionsFieldSchema | EnumFieldSchema;
 export type InteractivitySchemaField = VisibleFieldSchema | HiddenFieldSchema;
 export type InteractivitySchema = {
     [key: string]: InteractivitySchemaField;
@@ -255,22 +262,10 @@ export declare const textSchema: {
         readonly hiddenFromList: false;
     };
     readonly 'style.fontWeight': {
-        readonly type: "enum";
-        readonly default: "400";
+        readonly type: "font-weight";
+        readonly default: 400;
         readonly description: "Font weight";
-        readonly variants: {
-            readonly '100': {};
-            readonly '200': {};
-            readonly '300': {};
-            readonly '400': {};
-            readonly '500': {};
-            readonly '600': {};
-            readonly '700': {};
-            readonly '800': {};
-            readonly '900': {};
-            readonly normal: {};
-            readonly bold: {};
-        };
+        readonly keyframable: false;
     };
     readonly 'style.fontStyle': {
         readonly type: "enum";

package/dist/cjs/interactivity-schema.js

@@ -76,22 +76,10 @@ exports.textSchema = {
         hiddenFromList: false,
     },
     'style.fontWeight': {
-        type: 'enum',
-        default: '400',
+        type: 'font-weight',
+        default: 400,
         description: 'Font weight',
-        variants: {
-            '100': {},
-            '200': {},
-            '300': {},
-            '400': {},
-            '500': {},
-            '600': {},
-            '700': {},
-            '800': {},
-            '900': {},
-            normal: {},
-            bold: {},
-        },
+        keyframable: false,
     },
     'style.fontStyle': {
         type: 'enum',

package/dist/cjs/internals.d.ts

@@ -645,22 +645,10 @@ export declare const Internals: {
             readonly hiddenFromList: false;
         };
         readonly 'style.fontWeight': {
-            readonly type: "enum";
-            readonly default: "400";
+            readonly type: "font-weight";
+            readonly default: 400;
             readonly description: "Font weight";
-            readonly variants: {
-                readonly '100': {};
-                readonly '200': {};
-                readonly '300': {};
-                readonly '400': {};
-                readonly '500': {};
-                readonly '600': {};
-                readonly '700': {};
-                readonly '800': {};
-                readonly '900': {};
-                readonly normal: {};
-                readonly bold: {};
-            };
+            readonly keyframable: false;
         };
         readonly 'style.fontStyle': {
             readonly type: "enum";
@@ -837,6 +825,7 @@ export declare const Internals: {
         audioSyncAnchorEmitter: import("./audio/shared-audio-tags.js").AudioSyncAnchorEmitter;
         scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
         resume: () => Promise<void>;
+        resumeAsAutoPlay: () => Promise<void>;
         suspend: () => Promise<void>;
         getIsResumingAudioContext: () => Promise<import("./audio/wait-until-actually-resumed.js").AudioContextResumeResult> | null;
         unscheduleAudioNode: (node: AudioBufferSourceNode) => void;

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

@@ -0,0 +1,8 @@
+import { type InterpolateOptions } from './interpolate.js';
+export type InterpolateTranslateOptions = InterpolateOptions;
+export declare const interpolateTranslate: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: Partial<{
+    easing: import("./interpolate.js").EasingFunction | readonly import("./interpolate.js").EasingFunction[];
+    extrapolateLeft: import("./interpolate.js").ExtrapolateType;
+    extrapolateRight: import("./interpolate.js").ExtrapolateType;
+    posterize: number;
+}> | undefined) => string;

package/dist/cjs/interpolate-translate.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateTranslate = void 0;
+const interpolate_js_1 = require("./interpolate.js");
+const pixelValueRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))px$/;
+const parseTranslate = (value) => {
+    if (typeof value !== 'string') {
+        throw new TypeError(`outputRange must contain only strings, but got ${typeof value}`);
+    }
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        throw new TypeError(`translate values must contain 1 to 3 pixel values, but got "${value}"`);
+    }
+    return parts.map((part) => {
+        const match = pixelValueRegex.exec(part);
+        if (match === null) {
+            throw new TypeError(`interpolateTranslate() only supports px values, but got "${part}" in "${value}"`);
+        }
+        return Number(match[1]);
+    });
+};
+/*
+ * @description Allows you to map a range of values to CSS translate values using pixel units.
+ * @see [Documentation](https://remotion.dev/docs/interpolate-translate)
+ */
+const interpolateTranslate = (input, inputRange, outputRange, options) => {
+    var _a;
+    if (typeof input === 'undefined') {
+        throw new TypeError('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new TypeError('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new TypeError('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new TypeError('inputRange (' +
+            inputRange.length +
+            ' values provided) and outputRange (' +
+            outputRange.length +
+            ' values provided) must have the same length');
+    }
+    const parsedOutputRange = outputRange.map((translateValue) => parseTranslate(translateValue));
+    const firstValueLength = (_a = parsedOutputRange[0]) === null || _a === void 0 ? void 0 : _a.length;
+    if (firstValueLength === undefined) {
+        throw new TypeError('outputRange must have at least 1 element');
+    }
+    for (const parsedTranslate of parsedOutputRange) {
+        if (parsedTranslate.length !== firstValueLength) {
+            throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${parsedTranslate.length}`);
+        }
+    }
+    return new Array(firstValueLength)
+        .fill(true)
+        .map((_, index) => {
+        const outputValues = [];
+        for (const translateValue of parsedOutputRange) {
+            const value = translateValue[index];
+            if (value === undefined) {
+                throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${translateValue.length}`);
+            }
+            outputValues.push(value);
+        }
+        const interpolatedValue = (0, interpolate_js_1.interpolate)(input, inputRange, outputValues, options);
+        return `${interpolatedValue}px`;
+    })
+        .join(' ');
+};
+exports.interpolateTranslate = interpolateTranslate;