remotion 4.0.520 → 4.0.522

package/dist/cjs/wrap-in-schema.js

@@ -0,0 +1,203 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapInSchema = exports.mergeValues = exports.selectActiveKeys = exports.readValuesFromProps = exports.getNestedValue = void 0;
+const react_1 = __importStar(require("react"));
+const delete_nested_key_js_1 = require("./delete-nested-key.js");
+const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
+const flatten_schema_js_1 = require("./flatten-schema.js");
+const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
+const sequence_node_path_js_1 = require("./sequence-node-path.js");
+const SequenceManager_js_1 = require("./SequenceManager.js");
+const use_current_frame_js_1 = require("./use-current-frame.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const use_schema_js_1 = require("./use-schema.js");
+const getNestedValue = (obj, key) => {
+    const parts = key.split('.');
+    let current = obj;
+    for (const part of parts) {
+        if (current === null ||
+            current === undefined ||
+            typeof current !== 'object')
+            return undefined;
+        current = current[part];
+    }
+    return current;
+};
+exports.getNestedValue = getNestedValue;
+const readValuesFromProps = (props, keys) => {
+    const out = {};
+    for (const key of keys) {
+        out[key] = (0, exports.getNestedValue)(props, key);
+    }
+    return out;
+};
+exports.readValuesFromProps = readValuesFromProps;
+const selectActiveKeys = (schema, values) => {
+    return Object.keys((0, flatten_schema_js_1.flattenActiveSchema)(schema, (key) => values[key]));
+};
+exports.selectActiveKeys = selectActiveKeys;
+const mergeValues = ({ props, valuesDotNotation, schemaKeys, propsToDelete, }) => {
+    const merged = { ...props };
+    for (const key of schemaKeys) {
+        const value = valuesDotNotation[key];
+        const parts = key.split('.');
+        if (parts.length === 1) {
+            merged[key] = value;
+            continue;
+        }
+        // For dot-notation keys like 'style.opacity',
+        // clone and set the nested path
+        let current = merged;
+        for (let i = 0; i < parts.length - 1; i++) {
+            const part = parts[i];
+            if (typeof current[part] === 'object' && current[part] !== null) {
+                current[part] = { ...current[part] };
+            }
+            else {
+                current[part] = {};
+            }
+            current = current[part];
+        }
+        current[parts[parts.length - 1]] = value;
+    }
+    (0, delete_nested_key_js_1.deleteNestedKey)(merged, propsToDelete);
+    return merged;
+};
+exports.mergeValues = mergeValues;
+const stackToOverrideMap = {};
+const wrapInSchema = ({ Component, componentIdentity, schema, supportsEffects, }) => {
+    // Schema is static for a component, so we move this outside
+    const schemaWithSequenceName = (0, sequence_field_schema_js_1.extendSchemaWithSequenceName)(schema);
+    const flatSchema = (0, flatten_schema_js_1.getFlatSchemaWithAllKeys)(schemaWithSequenceName);
+    const flatKeys = Object.keys(flatSchema);
+    const Wrapped = (0, react_1.forwardRef)((props, ref) => {
+        var _a;
+        const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+        if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
+            return react_1.default.createElement(Component, {
+                ...props,
+                _experimentalControls: null,
+                ref,
+            });
+        }
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { propStatuses } = (0, react_1.useContext)(SequenceManager_js_1.VisualModePropStatusesContext);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { getDragOverrides } = (0, react_1.useContext)(SequenceManager_js_1.VisualModeDragOverridesContext);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const nodePathMapping = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+        // If the parent has passed `_experimentalControls`, we should not override it.
+        // @ts-expect-error
+        if (props._experimentalControls) {
+            return react_1.default.createElement(Component, {
+                ...props,
+                ref,
+            });
+        }
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [overrideId] = (0, react_1.useState)(() => {
+            const { stack } = props;
+            if (!stack) {
+                return String(Math.random());
+            }
+            const existingOverrideId = stackToOverrideMap[stack];
+            if (existingOverrideId) {
+                return existingOverrideId;
+            }
+            const newOverrideId = String(Math.random());
+            stackToOverrideMap[stack] = newOverrideId;
+            return newOverrideId;
+        });
+        const nodePath = (_a = nodePathMapping.overrideIdToNodePathMappings[overrideId]) !== null && _a !== void 0 ? _a : null;
+        // Read the runtime values for every flat key from the JSX props,
+        // memoized on the leaf values so the object reference is stable
+        // when nothing changed — otherwise downstream `useMemo`s churn and
+        // effects (e.g. Sequence registration) re-fire every render.
+        const runtimeValues = flatKeys.map((k) => (0, exports.getNestedValue)(props, k));
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const currentRuntimeValueDotNotation = (0, react_1.useMemo)(() => (0, exports.readValuesFromProps)(props, flatKeys), 
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        runtimeValues);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const controls = (0, react_1.useMemo)(() => {
+            return {
+                schema: schemaWithSequenceName,
+                currentRuntimeValueDotNotation,
+                overrideId,
+                supportsEffects,
+                componentIdentity,
+            };
+        }, [currentRuntimeValueDotNotation, overrideId]);
+        // 3. Apply drag/code overrides on top of the runtime values.
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const { merged: valuesDotNotation, propsToDelete } = (0, react_1.useMemo)(() => {
+            return (0, use_schema_js_1.computeEffectiveSchemaValuesDotNotation)({
+                schema: schemaWithSequenceName,
+                currentValue: currentRuntimeValueDotNotation,
+                overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
+                propStatus: nodePath === null
+                    ? undefined
+                    : (0, use_memoized_effects_js_1.getPropStatusesCtx)(propStatuses, nodePath),
+                frame,
+            });
+        }, [
+            currentRuntimeValueDotNotation,
+            getDragOverrides,
+            nodePath,
+            propStatuses,
+            frame,
+        ]);
+        // 4. Eliminate values forbidden by the resolved discriminated union.
+        const activeKeys = (0, exports.selectActiveKeys)(schemaWithSequenceName, valuesDotNotation);
+        // 5. Apply the active values back onto the props.
+        const mergedProps = (0, exports.mergeValues)({
+            props: props,
+            valuesDotNotation,
+            schemaKeys: activeKeys,
+            propsToDelete,
+        });
+        return react_1.default.createElement(Component, {
+            ...mergedProps,
+            _experimentalControls: controls,
+            ref,
+        });
+    });
+    Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || 'Component'})`;
+    return Wrapped;
+};
+exports.wrapInSchema = wrapInSchema;

package/dist/esm/index.mjs

@@ -1537,7 +1537,7 @@ var Composition = (props) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.520";
+var VERSION = "4.0.522";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2053,22 +2053,10 @@ var 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",
@@ -5254,6 +5242,17 @@ var withInteractivitySchema = ({
     const { getDragOverrides } = useContext19(VisualModeDragOverridesContext);
     const nodePathMapping = useContext19(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
+    const videoConfig = useUnsafeVideoConfig();
+    const durationInFrames = videoConfig?.durationInFrames;
+    const fps = videoConfig?.fps;
+    const height = videoConfig?.height;
+    const width = videoConfig?.width;
+    const videoConfigValues = useMemo12(() => durationInFrames === undefined || fps === undefined || height === undefined || width === undefined ? null : {
+      durationInFrames,
+      fps,
+      height,
+      width
+    }, [durationInFrames, fps, height, width]);
     if (cleanProps.controls) {
       const passedControls = cleanProps.controls;
       if (getStackForControls(passedControls) === null) {
@@ -5292,12 +5291,18 @@ var withInteractivitySchema = ({
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
         runtimeValues: runtimeValueStore.store,
+        videoConfigValues,
         overrideId,
         supportsEffects,
         componentIdentity,
         componentName
       };
-    }, [currentRuntimeValueDotNotation, overrideId, runtimeValueStore.store]);
+    }, [
+      currentRuntimeValueDotNotation,
+      overrideId,
+      runtimeValueStore.store,
+      videoConfigValues
+    ]);
     setStackForControls(controls, internalStack);
     const { merged: valuesDotNotation, propsToDelete } = useMemo12(() => {
       return computeEffectiveSchemaValuesDotNotation({
@@ -5490,9 +5495,10 @@ var RegularSequenceRefForwardingFunction = ({
   const controlsSupportsEffects = controls?.supportsEffects;
   const controlsComponentIdentity = controls?.componentIdentity;
   const controlsComponentName = controls?.componentName;
+  const controlsVideoConfigValues = controls?.videoConfigValues;
   const effectRuntimeValues = useMemo13(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
   const registrationControls = useMemo13(() => {
-    if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined) {
+    if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined || controlsVideoConfigValues === undefined) {
       return null;
     }
     return {
@@ -5501,11 +5507,13 @@ var RegularSequenceRefForwardingFunction = ({
       overrideId: controlsOverrideId,
       supportsEffects: controlsSupportsEffects,
       componentIdentity: controlsComponentIdentity,
-      componentName: controlsComponentName
+      componentName: controlsComponentName,
+      videoConfigValues: controlsVideoConfigValues
     };
   }, [
     controlsComponentIdentity,
     controlsComponentName,
+    controlsVideoConfigValues,
     controlsOverrideId,
     controlsRuntimeValues,
     controlsSchema,
@@ -6465,6 +6473,7 @@ import { jsx as jsx15 } from "react/jsx-runtime";
 var animatedImageSchema = {
   src: {
     type: "asset",
+    assetType: "image",
     default: undefined,
     description: "Source",
     keyframable: false
@@ -7693,7 +7702,7 @@ var useSingletonAudioContext = ({
 
 // src/audio/wait-until-actually-resumed.ts
 var RESUME_WAIT_TIMEOUT = 1000;
-var waitUntilActuallyResumed = (audioContext, logLevel, signal) => {
+var waitUntilActuallyResumed = (audioContext, logLevel, signal, isAutoPlayAttempt) => {
   return new Promise((resolve) => {
     const startCurrentTime = audioContext.currentTime;
     const start = audioContext.getOutputTimestamp();
@@ -7741,14 +7750,16 @@ var waitUntilActuallyResumed = (audioContext, logLevel, signal) => {
       return;
     }
     signal.addEventListener("abort", onAbort, { once: true });
-    timeout = setTimeout(() => {
-      if (hasAudiblyStarted(startOutputPerformanceTime)) {
-        finish("resumed");
-        return;
-      }
-      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(() => {
+        if (hasAudiblyStarted(startOutputPerformanceTime)) {
+          finish("resumed");
+          return;
+        }
+        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);
   });
 };
@@ -7820,6 +7831,7 @@ var SharedAudioContextProvider = ({
   }
   const isResuming = useRef13(null);
   const nextResumeAttemptId = useRef13(0);
+  const nextResumeIsAutoPlayAttempt = useRef13(false);
   const audioSyncAnchor = useMemo21(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef13([]);
   const audioSyncAnchorEmitter = useMemo21(() => {
@@ -7895,6 +7907,8 @@ var SharedAudioContextProvider = ({
     };
   }, [ctxAndGain, _experimentalKeepAudioContextAlive, logLevel]);
   const resume = useCallback10(() => {
+    const isAutoPlayAttempt = nextResumeIsAutoPlayAttempt.current;
+    nextResumeIsAutoPlayAttempt.current = false;
     if (!ctxAndGain) {
       return Promise.resolve();
     }
@@ -7916,7 +7930,7 @@ var SharedAudioContextProvider = ({
     const abortController = new AbortController;
     const resumeAttemptId = nextResumeAttemptId.current++;
     const waitPromise = new Promise((resolve) => {
-      waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel, abortController.signal).then(resolve);
+      waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel, abortController.signal, isAutoPlayAttempt).then(resolve);
       resumePromise.catch((err) => {
         Log.warn({ logLevel, tag: "audio" }, "AudioContext resume rejected, muting playback and continuing without audio", err);
         abortController.abort();
@@ -7934,6 +7948,10 @@ var SharedAudioContextProvider = ({
     };
     return resumePromise.catch(() => {});
   }, [ctxAndGain, _experimentalKeepAudioContextAlive, logLevel]);
+  const resumeAsAutoPlay = useCallback10(() => {
+    nextResumeIsAutoPlayAttempt.current = true;
+    return resume();
+  }, [resume]);
   const getIsResumingAudioContext = useCallback10(() => {
     return isResuming.current?.promise ?? null;
   }, []);
@@ -7990,6 +8008,7 @@ var SharedAudioContextProvider = ({
       audioSyncAnchorEmitter,
       scheduleAudioNode,
       resume,
+      resumeAsAutoPlay,
       suspend,
       getIsResumingAudioContext,
       unscheduleAudioNode,
@@ -8001,6 +8020,7 @@ var SharedAudioContextProvider = ({
     audioSyncAnchorEmitter,
     scheduleAudioNode,
     resume,
+    resumeAsAutoPlay,
     suspend,
     getIsResumingAudioContext,
     unscheduleAudioNode,
@@ -9387,6 +9407,9 @@ var useMediaPlayback = ({
   const env = useRemotionEnvironment();
   useLayoutEffect10(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
+    if (mediaRef.current && mediaRef.current.defaultPlaybackRate !== playbackRateToSet) {
+      mediaRef.current.defaultPlaybackRate = playbackRateToSet;
+    }
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
     }
@@ -10804,6 +10827,7 @@ import { jsx as jsx27 } from "react/jsx-runtime";
 var canvasImageSchema = {
   src: {
     type: "asset",
+    assetType: "image",
     default: undefined,
     description: "Source",
     keyframable: false
@@ -11572,6 +11596,7 @@ var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
   src: {
     type: "asset",
+    assetType: "image",
     default: undefined,
     description: "Source",
     keyframable: false

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.520";
+var VERSION = "4.0.522";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.520",
+	"version": "4.0.522",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -34,8 +34,8 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
-		"zod": "4.4.3",
-		"@remotion/eslint-config-internal": "4.0.520",
+		"zod": "4.5.4",
+		"@remotion/eslint-config-internal": "4.0.522",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},