@remotion/studio-server 4.0.492 → 4.0.494

package/dist/codemods/recast-mods.js

@@ -434,6 +434,8 @@ const transformLoneJsxElement = (expression, transformation, changesMade, parent
         compId === transformation.idToDelete) ||
         (transformation.type === 'rename-composition' &&
             compId === transformation.idToRename) ||
+        (transformation.type === 'update-composition-metadata' &&
+            compId === transformation.idToUpdate) ||
         (transformation.type === 'duplicate-composition' &&
             compId === transformation.idToDuplicate) ||
         (transformation.type === 'delete-folder' &&
@@ -512,6 +514,21 @@ const mapJsxChild = (c, transformation, changesMade, parentFolderName) => {
             }),
         ];
     }
+    if (transformation.type === 'update-composition-metadata' &&
+        compId === transformation.idToUpdate) {
+        return [
+            changeComposition({
+                jsxElement: c,
+                newCompositionId: null,
+                newCompositionFps: transformation.newFps,
+                newCompositionDurationInFrames: transformation.newDurationInFrames,
+                newCompositionHeight: transformation.newHeight,
+                newCompositionWidth: transformation.newWidth,
+                changesMade,
+                newTagToUse: null,
+            }),
+        ];
+    }
     if (transformation.type === 'delete-composition' &&
         compId === transformation.idToDelete) {
         changesMade.push({
@@ -783,7 +800,8 @@ const changeComposition = ({ jsxElement, newCompositionId, newCompositionFps, ne
         // id="one"
         if (attribute.name.name === 'id' &&
             attribute.value &&
-            attribute.value.type === 'StringLiteral') {
+            attribute.value.type === 'StringLiteral' &&
+            newCompositionId !== null) {
             changesMade.push({
                 description: 'Replaced composition id',
             });
@@ -796,7 +814,8 @@ const changeComposition = ({ jsxElement, newCompositionId, newCompositionFps, ne
         if (attribute.name.name === 'id' &&
             attribute.value &&
             attribute.value.type === 'JSXExpressionContainer' &&
-            attribute.value.expression.type === 'StringLiteral') {
+            attribute.value.expression.type === 'StringLiteral' &&
+            newCompositionId !== null) {
             changesMade.push({
                 description: 'Replaced composition id',
             });
@@ -811,85 +830,74 @@ const changeComposition = ({ jsxElement, newCompositionId, newCompositionFps, ne
                 },
             };
         }
-        if (attribute.name.name === 'fps' &&
-            attribute.value &&
-            attribute.value.type === 'JSXExpressionContainer' &&
-            attribute.value.expression.type === 'NumericLiteral' &&
-            newCompositionFps !== null) {
+        if (attribute.name.name === 'fps' && newCompositionFps !== null) {
             changesMade.push({
                 description: 'Replaced FPS',
             });
             return {
                 ...attribute,
-                value: {
-                    ...attribute.value,
-                    expression: {
-                        ...attribute.value.expression,
-                        value: newCompositionFps,
-                    },
-                },
+                value: b.jsxExpressionContainer(b.numericLiteral(newCompositionFps)),
             };
         }
         if (attribute.name.name === 'durationInFrames' &&
-            attribute.value &&
-            attribute.value.type === 'JSXExpressionContainer' &&
-            attribute.value.expression.type === 'NumericLiteral' &&
             newCompositionDurationInFrames !== null) {
             changesMade.push({
                 description: 'Replaced durationInFrames',
             });
             return {
                 ...attribute,
-                value: {
-                    ...attribute.value,
-                    expression: {
-                        ...attribute.value.expression,
-                        value: newCompositionDurationInFrames,
-                    },
-                },
+                value: b.jsxExpressionContainer(b.numericLiteral(newCompositionDurationInFrames)),
             };
         }
-        if (attribute.name.name === 'width' &&
-            attribute.value &&
-            attribute.value.type === 'JSXExpressionContainer' &&
-            attribute.value.expression.type === 'NumericLiteral' &&
-            newCompositionWidth !== null) {
+        if (attribute.name.name === 'width' && newCompositionWidth !== null) {
             changesMade.push({
                 description: 'Replaced width',
             });
             return {
                 ...attribute,
-                value: {
-                    ...attribute.value,
-                    expression: {
-                        ...attribute.value.expression,
-                        value: newCompositionWidth,
-                    },
-                },
+                value: b.jsxExpressionContainer(b.numericLiteral(newCompositionWidth)),
             };
         }
-        if (attribute.name.name === 'height' &&
-            attribute.value &&
-            attribute.value.type === 'JSXExpressionContainer' &&
-            attribute.value.expression.type === 'NumericLiteral' &&
-            newCompositionHeight !== null) {
+        if (attribute.name.name === 'height' && newCompositionHeight !== null) {
             changesMade.push({
                 description: 'Replaced height',
             });
             return {
                 ...attribute,
-                value: {
-                    ...attribute.value,
-                    expression: {
-                        ...attribute.value.expression,
-                        value: newCompositionHeight,
-                    },
-                },
+                value: b.jsxExpressionContainer(b.numericLiteral(newCompositionHeight)),
             };
         }
         return attribute;
     })
         .filter(Boolean);
+    if (newCompositionFps !== null &&
+        !attributes.some((attribute) => attribute.type === 'JSXAttribute' &&
+            attribute.name.type === 'JSXIdentifier' &&
+            attribute.name.name === 'fps')) {
+        changesMade.push({ description: 'Added FPS' });
+        attributes.push(jsxAttributeWithExpression('fps', b.numericLiteral(newCompositionFps)));
+    }
+    if (newCompositionDurationInFrames !== null &&
+        !attributes.some((attribute) => attribute.type === 'JSXAttribute' &&
+            attribute.name.type === 'JSXIdentifier' &&
+            attribute.name.name === 'durationInFrames')) {
+        changesMade.push({ description: 'Added durationInFrames' });
+        attributes.push(jsxAttributeWithExpression('durationInFrames', b.numericLiteral(newCompositionDurationInFrames)));
+    }
+    if (newCompositionWidth !== null &&
+        !attributes.some((attribute) => attribute.type === 'JSXAttribute' &&
+            attribute.name.type === 'JSXIdentifier' &&
+            attribute.name.name === 'width')) {
+        changesMade.push({ description: 'Added width' });
+        attributes.push(jsxAttributeWithExpression('width', b.numericLiteral(newCompositionWidth)));
+    }
+    if (newCompositionHeight !== null &&
+        !attributes.some((attribute) => attribute.type === 'JSXAttribute' &&
+            attribute.name.type === 'JSXIdentifier' &&
+            attribute.name.name === 'height')) {
+        changesMade.push({ description: 'Added height' });
+        attributes.push(jsxAttributeWithExpression('height', b.numericLiteral(newCompositionHeight)));
+    }
     const newName = newTagToUse !== null && newTagToUse !== void 0 ? newTagToUse : name.name;
     if (newName !== name.name) {
         changesMade.push({

package/dist/codemods/update-keyframes/update-keyframes.d.ts

@@ -10,6 +10,7 @@ export type KeyframeOperation = {
 } | {
     type: 'remove';
     frame: number;
+    valueWhenLastKeyframeDeleted: unknown | null;
 } | {
     type: 'settings';
     clamping: {

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

@@ -682,7 +682,7 @@ const addKeyframe = ({ expression, key, frame, value, schema, videoConfigValues,
         },
     };
 };
-const removeKeyframe = ({ expression, frame, videoConfigValues, }) => {
+const removeKeyframe = ({ expression, frame, videoConfigValues, valueWhenLastKeyframeDeleted, }) => {
     const existing = getInterpolationExpression(expression, videoConfigValues);
     if (!existing) {
         throw new Error('Cannot remove keyframe from non-interpolated expression');
@@ -694,7 +694,9 @@ const removeKeyframe = ({ expression, frame, videoConfigValues, }) => {
     const nextKeyframes = existing.keyframes.filter((_keyframe, index) => index !== keyframeIndex);
     if (nextKeyframes.length === 0) {
         return {
-            expression: existing.keyframes[keyframeIndex].output,
+            expression: valueWhenLastKeyframeDeleted === null
+                ? existing.keyframes[keyframeIndex].output
+                : (0, update_nested_prop_1.parseValueExpression)(valueWhenLastKeyframeDeleted),
             introduced: noIntroducedIdentifiers,
         };
     }
@@ -828,6 +830,7 @@ const applyKeyframeOperation = ({ expression, key, operation, schema, videoConfi
         expression,
         frame: operation.frame,
         videoConfigValues,
+        valueWhenLastKeyframeDeleted: operation.valueWhenLastKeyframeDeleted,
     });
 };
 const getExpressionFromJsxAttribute = (attr) => {

package/dist/helpers/resolve-composition-component.js

@@ -508,6 +508,9 @@ const getComponentRootNode = (declaration) => {
 const createSequenceElement = () => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier('Sequence'), []), recast.types.builders.jsxClosingElement(recast.types.builders.jsxIdentifier('Sequence')), []);
 };
+const createSequenceWithChild = ({ child, sequenceLocalName, }) => {
+    return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(sequenceLocalName), []), recast.types.builders.jsxClosingElement(recast.types.builders.jsxIdentifier(sequenceLocalName)), [child]);
+};
 const createNumberAttribute = (name, value) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.jsxExpressionContainer(recast.types.builders.numericLiteral(value)));
 };
@@ -1019,8 +1022,8 @@ const createCompositionComponentElement = ({ localName, props, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), attributes, true), null, []);
 };
 const addElementToComponentRoot = ({ ast, exportName, element, }) => {
-    var _a;
-    var _b;
+    var _a, _b;
+    var _c, _d;
     const declaration = getDeclarationByExportName({ ast, exportName });
     if (!declaration) {
         throw new Error('Could not find composition component declaration');
@@ -1033,9 +1036,6 @@ const addElementToComponentRoot = ({ ast, exportName, element, }) => {
         }
         throw new Error('Composition component does not return JSX');
     }
-    if (rootNode.type === 'JSXElement' && rootNode.openingElement.selfClosing) {
-        throw new Error('Cannot insert into a self-closing root JSX element');
-    }
     const CANVAS_ROOT_ELEMENTS = [
         'ThreeCanvas',
         'RiveCanvas',
@@ -1047,11 +1047,35 @@ const addElementToComponentRoot = ({ ast, exportName, element, }) => {
         CANVAS_ROOT_ELEMENTS.includes(rootNode.openingElement.name.name)) {
         throw new Error(`Cannot insert a JSX element into a composition whose root element is <${rootNode.openingElement.name.name}>`);
     }
+    if (rootNode.type === 'JSXElement' && rootNode.openingElement.selfClosing) {
+        const fragment = recast.types.builders.jsxFragment(recast.types.builders.jsxOpeningFragment(), recast.types.builders.jsxClosingFragment(), [
+            createSequenceWithChild({
+                child: rootNode,
+                sequenceLocalName: ensureSequenceImport(ast),
+            }),
+            element,
+        ]);
+        let replaced = false;
+        recast.types.visit(ast, {
+            visitJSXElement(astPath) {
+                if (astPath.node === rootNode) {
+                    astPath.replace(fragment);
+                    replaced = true;
+                    return false;
+                }
+                this.traverse(astPath);
+            },
+        });
+        if (!replaced) {
+            throw new Error('Could not replace composition component root');
+        }
+        return (_c = (_a = rootNode.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _c !== void 0 ? _c : 1;
+    }
     if (!rootNode.children) {
         throw new Error('Composition component root does not accept children');
     }
     rootNode.children.push(element);
-    return (_b = (_a = rootNode.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _b !== void 0 ? _b : 1;
+    return (_d = (_b = rootNode.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _d !== void 0 ? _d : 1;
 };
 const getDefaultExportDeclaration = (ast) => {
     let declaration = null;

package/dist/helpers/video-config-numeric-expression.js

@@ -82,11 +82,35 @@ const parseVideoConfigNumericExpression = ({ node, videoConfigValues, }) => {
     if (videoConfigValue !== null) {
         return { type: 'video-config-value', ...videoConfigValue };
     }
-    if (node.type !== 'BinaryExpression' || node.operator !== '*') {
+    if (node.type !== 'BinaryExpression') {
         return null;
     }
     const left = node.left;
     const right = node.right;
+    if (node.operator === '-') {
+        const minuend = getVideoConfigValue({
+            node: left,
+            videoConfigValues,
+        });
+        const subtrahend = getNumericLiteral(right);
+        if (minuend === null || subtrahend === null) {
+            return null;
+        }
+        const resolvedValue = minuend.value - subtrahend;
+        if (!Number.isFinite(resolvedValue)) {
+            return null;
+        }
+        return {
+            type: 'video-config-subtraction',
+            identifier: minuend.identifier,
+            minuend: minuend.value,
+            subtrahend,
+            value: resolvedValue,
+        };
+    }
+    if (node.operator !== '*') {
+        return null;
+    }
     const leftNumber = getNumericLiteral(left);
     const rightNumber = getNumericLiteral(right);
     const leftVideoConfig = getVideoConfigValue({
@@ -136,6 +160,13 @@ const updateVideoConfigNumericExpression = ({ expression, value, }) => {
             ? b.identifier(expression.identifier)
             : numericExpression(value);
     }
+    if (expression.type === 'video-config-subtraction') {
+        const subtrahend = expression.minuend - value;
+        if (!Number.isFinite(subtrahend)) {
+            return numericExpression(value);
+        }
+        return b.binaryExpression('-', b.identifier(expression.identifier), numericExpression(subtrahend));
+    }
     if (expression.type !== 'video-config-multiplication' || value === 0) {
         return numericExpression(value);
     }

package/dist/preview-server/routes/apply-codemod.js

@@ -40,6 +40,9 @@ const getCodemodLogMessage = (codemod) => {
     if (codemod.type === 'rename-composition') {
         return `Renamed composition "${codemod.idToRename}" to "${codemod.newId}"`;
     }
+    if (codemod.type === 'update-composition-metadata') {
+        return `Updated metadata of composition "${codemod.idToUpdate}"`;
+    }
     if (codemod.type === 'delete-composition') {
         return `Deleted composition "${codemod.idToDelete}"`;
     }
@@ -84,6 +87,14 @@ const getCodemodUndoDescription = (codemod) => {
             entryType: codemod.type,
         };
     }
+    if (codemod.type === 'update-composition-metadata') {
+        const label = `metadata of composition "${codemod.idToUpdate}"`;
+        return {
+            undoMessage: `↩️  Update of ${label}`,
+            redoMessage: `↪️  Update of ${label}`,
+            entryType: codemod.type,
+        };
+    }
     if (codemod.type === 'duplicate-composition') {
         const label = `composition "${codemod.idToDuplicate}" to "${codemod.newId}"`;
         return {

package/dist/preview-server/routes/delete-keyframes.js

@@ -97,13 +97,17 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
                 input: output,
                 nodePath: firstSequenceKeyframe.nodePath.nodePath,
                 videoConfigValues: firstSequenceKeyframe.nodePath.videoConfigValues,
-                updates: keyframeGroup.map((keyframe) => ({
-                    key: keyframe.key,
-                    operation: {
-                        type: 'remove',
-                        frame: keyframe.frame,
-                    },
-                })),
+                updates: keyframeGroup.map((keyframe) => {
+                    var _a;
+                    return ({
+                        key: keyframe.key,
+                        operation: {
+                            type: 'remove',
+                            frame: keyframe.frame,
+                            valueWhenLastKeyframeDeleted: (_a = keyframe.valueWhenLastKeyframeDeleted) !== null && _a !== void 0 ? _a : null,
+                        },
+                    });
+                }),
             });
             output = result.output;
             firstLogLine = Math.min(firstLogLine, result.logLine);
@@ -128,13 +132,17 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
                 sequenceNodePath: firstEffectKeyframe.sequenceNodePath.nodePath,
                 effectIndex: firstEffectKeyframe.effectIndex,
                 videoConfigValues: firstEffectKeyframe.sequenceNodePath.videoConfigValues,
-                updates: keyframeGroup.map((keyframe) => ({
-                    key: keyframe.key,
-                    operation: {
-                        type: 'remove',
-                        frame: keyframe.frame,
-                    },
-                })),
+                updates: keyframeGroup.map((keyframe) => {
+                    var _a;
+                    return ({
+                        key: keyframe.key,
+                        operation: {
+                            type: 'remove',
+                            frame: keyframe.frame,
+                            valueWhenLastKeyframeDeleted: (_a = keyframe.valueWhenLastKeyframeDeleted) !== null && _a !== void 0 ? _a : null,
+                        },
+                    });
+                }),
             });
             output = result.output;
             firstLogLine = Math.min(firstLogLine, result.logLine);

package/dist/preview-server/routes/download-remote-asset.js

@@ -256,7 +256,8 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
         type: 'asset',
         assetType: fileType.type === 'gif'
             ? 'gif'
-            : fileType.type === 'apng'
+            : fileType.type === 'apng' ||
+                (fileType.type === 'webp' && fileType.animated)
                 ? 'animated-image'
                 : 'image',
         src: assetPath,

package/dist/preview-server/undo-stack.d.ts

@@ -3,7 +3,7 @@ export interface UndoEntryDescription {
     undoMessage: string;
     redoMessage: string;
 }
-type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'keyframe-add' | 'keyframe-delete' | 'add-effect' | 'delete-effect' | 'duplicate-effect' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'split-jsx-sequence' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'new-composition' | 'duplicate-composition' | 'move-composition-to-folder' | 'new-folder' | 'delete-folder' | 'rename-folder';
+type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'keyframe-add' | 'keyframe-delete' | 'add-effect' | 'delete-effect' | 'duplicate-effect' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'split-jsx-sequence' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'update-composition-metadata' | 'new-composition' | 'duplicate-composition' | 'move-composition-to-folder' | 'new-folder' | 'delete-folder' | 'rename-folder';
 type UndoEntrySnapshot = {
     filePath: string;
     oldContents: string | null;
@@ -55,6 +55,8 @@ type UndoEntry = {
     entryType: 'delete-composition';
 } | {
     entryType: 'rename-composition';
+} | {
+    entryType: 'update-composition-metadata';
 } | {
     entryType: 'new-composition';
 } | {

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.492",
+	"version": "4.0.494",
 	"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.492",
+		"remotion": "4.0.494",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.492",
-		"@remotion/renderer": "4.0.492",
-		"@remotion/studio-shared": "4.0.492",
+		"@remotion/bundler": "4.0.494",
+		"@remotion/renderer": "4.0.494",
+		"@remotion/studio-shared": "4.0.494",
 		"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.492",
+		"@remotion/eslint-config-internal": "4.0.494",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"