@remotion/studio-server 4.0.468 → 4.0.469

package/dist/codemods/update-keyframes/update-keyframes.js

@@ -159,11 +159,14 @@ const addKeyframe = ({ expression, frame, value, }) => {
     if (!(0, can_update_sequence_props_1.isStaticValue)(expression)) {
         throw new Error('Cannot add keyframe to computed expression');
     }
-    if (frame === 0) {
-        throw new Error('Cannot add keyframe to static expression at frame 0 because interpolate requires two distinct frames');
-    }
     const staticValue = (0, can_update_sequence_props_1.extractStaticValue)(expression);
     const staticOutput = (0, update_nested_prop_1.parseValueExpression)(staticValue);
+    const keyframes = frame === 0
+        ? [{ frame, output: newOutput, value }]
+        : [
+            { frame: 0, output: staticOutput, value: staticValue },
+            { frame, output: newOutput, value },
+        ];
     return createInterpolateExpression({
         callee: getInterpolationCalleeForValues({
             staticValue,
@@ -171,10 +174,7 @@ const addKeyframe = ({ expression, frame, value, }) => {
         }),
         input: b.identifier('frame'),
         extraArgs: [],
-        keyframes: [
-            { frame: 0, output: staticOutput, value: staticValue },
-            { frame, output: newOutput, value },
-        ],
+        keyframes,
     });
 };
 const removeKeyframe = ({ expression, frame, }) => {
@@ -187,9 +187,6 @@ const removeKeyframe = ({ expression, frame, }) => {
         throw new Error(`Cannot remove keyframe at frame ${frame}: not found`);
     }
     const nextKeyframes = existing.keyframes.filter((_keyframe, index) => index !== keyframeIndex);
-    if (nextKeyframes.length === 1) {
-        return (0, update_nested_prop_1.parseValueExpression)(nextKeyframes[0].value);
-    }
     return createInterpolateExpression({
         callee: existing.callee,
         input: existing.input,

package/dist/preview-server/routes/can-update-sequence-props.d.ts

@@ -6,15 +6,6 @@ export declare const extractStaticValue: (node: Expression) => unknown;
 export declare const getComputedStatus: (node: Expression) => CanUpdateSequencePropStatus;
 export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
 export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;
-export declare const computeSequencePropsOnlyStatus: ({ fileName, nodePath, keys, remotionRoot, }: {
-    fileName: string;
-    nodePath: SequenceNodePath;
-    keys: string[];
-    remotionRoot: string;
-}) => {
-    canUpdate: true;
-    props: Record<string, CanUpdateSequencePropStatus>;
-};
 export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, keys, effects, }: {
     fileContents: string;
     nodePath: SequenceNodePath;

package/dist/preview-server/routes/can-update-sequence-props.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.computeSequencePropsStatusFromFilenameByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.computeSequencePropsOnlyStatus = exports.lineColumnToNodePath = exports.findJsxElementAtNodePath = exports.getComputedStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
+exports.computeSequencePropsStatusFromFilenameByLine = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.lineColumnToNodePath = exports.findJsxElementAtNodePath = exports.getComputedStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
 const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const recast = __importStar(require("recast"));
@@ -128,6 +128,159 @@ const getNumericValue = (node) => {
     }
     return null;
 };
+const getExtrapolateType = (node) => {
+    if (node.type === 'StringLiteral') {
+        if (node.value === 'extend' ||
+            node.value === 'identity' ||
+            node.value === 'clamp' ||
+            node.value === 'wrap') {
+            return node.value;
+        }
+        return null;
+    }
+    if (node.type === 'TSAsExpression') {
+        return getExtrapolateType(node.expression);
+    }
+    return null;
+};
+const getKeyframeEasing = (node) => {
+    if (node.type === 'TSAsExpression') {
+        return getKeyframeEasing(node.expression);
+    }
+    if (node.type === 'MemberExpression' &&
+        node.object.type === 'Identifier' &&
+        node.object.name === 'Easing' &&
+        node.property.type === 'Identifier' &&
+        node.property.name === 'linear' &&
+        node.computed === false) {
+        return 'linear';
+    }
+    if (node.type !== 'CallExpression' ||
+        node.callee.type !== 'MemberExpression' ||
+        node.callee.object.type !== 'Identifier' ||
+        node.callee.object.name !== 'Easing' ||
+        node.callee.property.type !== 'Identifier' ||
+        node.callee.property.name !== 'bezier' ||
+        node.callee.computed) {
+        return null;
+    }
+    if (node.arguments.length !== 4) {
+        return null;
+    }
+    const values = node.arguments.map((arg) => {
+        if (arg.type === 'ArgumentPlaceholder' ||
+            arg.type === 'JSXNamespacedName' ||
+            arg.type === 'SpreadElement') {
+            return null;
+        }
+        return getNumericValue(arg);
+    });
+    if (values.some((v) => v === null)) {
+        return null;
+    }
+    return values;
+};
+const getKeyframeEasingArray = ({ easingNode, segments, }) => {
+    if (segments === 0) {
+        return [];
+    }
+    if (easingNode.type === 'TSAsExpression') {
+        return getKeyframeEasingArray({
+            easingNode: easingNode.expression,
+            segments,
+        });
+    }
+    if (easingNode.type === 'ArrayExpression') {
+        if (easingNode.elements.length !== segments) {
+            return null;
+        }
+        const parsed = easingNode.elements.map((element) => {
+            if (!element || element.type === 'SpreadElement') {
+                return null;
+            }
+            return getKeyframeEasing(element);
+        });
+        if (parsed.some((value) => value === null)) {
+            return null;
+        }
+        return parsed;
+    }
+    const easing = getKeyframeEasing(easingNode);
+    if (!easing) {
+        return null;
+    }
+    return new Array(segments).fill(easing);
+};
+const getInterpolationMetadata = (callExpression, keyframeCount) => {
+    const segments = Math.max(0, keyframeCount - 1);
+    if (callExpression.callee.type !== 'Identifier') {
+        return null;
+    }
+    const defaultClamping = callExpression.callee.name === 'interpolateColors'
+        ? {
+            left: 'clamp',
+            right: 'clamp',
+        }
+        : {
+            left: 'extend',
+            right: 'extend',
+        };
+    const defaults = {
+        easing: new Array(segments).fill('linear'),
+        clamping: defaultClamping,
+    };
+    if (callExpression.callee.name === 'interpolateColors') {
+        return defaults;
+    }
+    if (callExpression.callee.name !== 'interpolate') {
+        return null;
+    }
+    const optionsArg = callExpression.arguments[3];
+    if (!optionsArg) {
+        return defaults;
+    }
+    if (optionsArg.type !== 'ObjectExpression') {
+        return null;
+    }
+    let { easing } = defaults;
+    let { clamping } = defaults;
+    for (const property of optionsArg.properties) {
+        if (property.type !== 'ObjectProperty' || property.computed) {
+            return null;
+        }
+        const key = property.key.type === 'Identifier'
+            ? property.key.name
+            : property.key.type === 'StringLiteral'
+                ? property.key.value
+                : null;
+        if (!key) {
+            return null;
+        }
+        const value = property.value;
+        if (key === 'easing') {
+            const parsedEasing = getKeyframeEasingArray({
+                easingNode: value,
+                segments,
+            });
+            if (!parsedEasing) {
+                return null;
+            }
+            easing = parsedEasing;
+            continue;
+        }
+        if (key === 'extrapolateLeft' || key === 'extrapolateRight') {
+            const extrapolateType = getExtrapolateType(value);
+            if (!extrapolateType) {
+                return null;
+            }
+            clamping =
+                key === 'extrapolateLeft'
+                    ? { ...clamping, left: extrapolateType }
+                    : { ...clamping, right: extrapolateType };
+        }
+    }
+    return { easing, clamping };
+};
 const getInterpolationKeyframes = (node) => {
     if (node.type === 'TSAsExpression') {
         return getInterpolationKeyframes(node.expression);
@@ -171,17 +324,30 @@ const getInterpolationKeyframes = (node) => {
             value: (0, exports.extractStaticValue)(outputElement),
         });
     }
-    return keyframes.length > 0 ? keyframes : undefined;
+    if (keyframes.length === 0) {
+        return undefined;
+    }
+    const metadata = getInterpolationMetadata(callExpression, keyframes.length);
+    if (!metadata) {
+        return undefined;
+    }
+    return {
+        keyframes,
+        easing: metadata.easing,
+        clamping: metadata.clamping,
+    };
 };
 const getComputedStatus = (node) => {
-    const keyframes = getInterpolationKeyframes(node);
-    if (!keyframes) {
+    const interpolation = getInterpolationKeyframes(node);
+    if (!interpolation) {
         return { canUpdate: false, reason: 'computed' };
     }
     return {
         canUpdate: false,
-        reason: 'computed',
-        keyframes,
+        reason: 'keyframed',
+        keyframes: interpolation.keyframes,
+        easing: interpolation.easing,
+        clamping: interpolation.clamping,
     };
 };
 exports.getComputedStatus = getComputedStatus;
@@ -345,24 +511,6 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, keys, }) => {
     }
     return filteredProps;
 };
-const computeSequencePropsOnlyStatus = ({ fileName, nodePath, keys, remotionRoot, }) => {
-    const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
-        remotionRoot,
-        fileName,
-        action: 'read',
-    });
-    const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-    const ast = (0, parse_ast_1.parseAst)(fileContents);
-    const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);
-    if (!jsxElement) {
-        throw new Error('Cannot compute sequence props: Could not find a JSX element at the specified location');
-    }
-    return {
-        canUpdate: true,
-        props: computeSequenceOnlyPropsRecord({ jsxElement, keys }),
-    };
-};
-exports.computeSequencePropsOnlyStatus = computeSequencePropsOnlyStatus;
 const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, effects, }) => {
     const ast = (0, parse_ast_1.parseAst)(fileContents);
     const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);

package/dist/preview-server/routes/save-sequence-props.js

@@ -86,12 +86,15 @@ const saveSequencePropsHandler = ({ input: { fileName, nodePath, key, value, def
         addedProps: [],
     });
     (0, undo_stack_1.printUndoHint)(logLevel);
-    const newStatus = (0, can_update_sequence_props_1.computeSequencePropsOnlyStatus)({
-        fileName,
+    const newStatus = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
+        fileContents: output,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
         nodePath: nodePath.nodePath,
-        remotionRoot,
+        effects: [],
     });
-    return newStatus;
+    return {
+        canUpdate: true,
+        props: newStatus.props,
+    };
 });
 exports.saveSequencePropsHandler = saveSequencePropsHandler;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-server"
 	},
 	"name": "@remotion/studio-server",
-	"version": "4.0.468",
+	"version": "4.0.469",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.468",
+		"remotion": "4.0.469",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.468",
-		"@remotion/renderer": "4.0.468",
-		"@remotion/studio-shared": "4.0.468",
+		"@remotion/bundler": "4.0.469",
+		"@remotion/renderer": "4.0.469",
+		"@remotion/studio-shared": "4.0.469",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -39,7 +39,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.468",
+		"@remotion/eslint-config-internal": "4.0.469",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"