@remotion/studio-server 4.0.477 → 4.0.479

package/dist/codemods/duplicate-effect.d.ts

@@ -0,0 +1,26 @@
+import type { SequenceNodePath } from 'remotion';
+export type EffectDuplicationTarget = {
+    sequenceNodePath: SequenceNodePath;
+    effectIndex: number;
+};
+export declare const duplicateEffects: ({ input, effects, prettierConfigOverride, }: {
+    input: string;
+    effects: EffectDuplicationTarget[];
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
+}) => Promise<{
+    output: string;
+    formatted: boolean;
+    effectLabels: string[];
+    logLines: number[];
+}>;
+export declare const duplicateEffect: ({ input, sequenceNodePath, effectIndex, prettierConfigOverride, }: {
+    input: string;
+    sequenceNodePath: SequenceNodePath;
+    effectIndex: number;
+    prettierConfigOverride?: Record<string, unknown> | null | undefined;
+}) => Promise<{
+    output: string;
+    formatted: boolean;
+    effectLabel: string;
+    logLine: number;
+}>;

package/dist/codemods/duplicate-effect.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.duplicateEffect = exports.duplicateEffects = void 0;
+const types_1 = require("@babel/types");
+const can_update_sequence_props_1 = require("../preview-server/routes/can-update-sequence-props");
+const format_file_content_1 = require("./format-file-content");
+const parse_ast_1 = require("./parse-ast");
+const update_effect_props_1 = require("./update-effect-props/update-effect-props");
+const getEffectsArray = (attr) => {
+    if (!attr.value || attr.value.type !== 'JSXExpressionContainer') {
+        throw new Error('Cannot duplicate effect: effects prop is not an array');
+    }
+    const expr = attr.value.expression;
+    if (expr.type !== 'ArrayExpression') {
+        throw new Error('Cannot duplicate effect: effects prop is not an array');
+    }
+    return expr;
+};
+const duplicateEffects = async ({ input, effects, prettierConfigOverride, }) => {
+    var _a, _b;
+    var _c, _d, _e;
+    if (effects.length === 0) {
+        throw new Error('No effects were specified for duplication');
+    }
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const duplicationsByAttr = new Map();
+    for (const effect of effects) {
+        const { sequenceNodePath, effectIndex } = effect;
+        const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, sequenceNodePath);
+        if (!jsx) {
+            throw new Error('Could not find a JSX element at the specified location to duplicate effect');
+        }
+        const attr = (0, update_effect_props_1.findEffectsAttr)((_c = jsx.attributes) !== null && _c !== void 0 ? _c : []);
+        if (!attr) {
+            throw new Error('Could not find effects on the target JSX element');
+        }
+        const effectsArray = getEffectsArray(attr);
+        const existingDuplication = duplicationsByAttr.get(attr);
+        const duplication = existingDuplication !== null && existingDuplication !== void 0 ? existingDuplication : {
+            effectsArray,
+            effectIndices: new Set(),
+            effectLabels: [],
+            logLines: [],
+        };
+        duplicationsByAttr.set(attr, duplication);
+        if (duplication.effectIndices.has(effectIndex)) {
+            continue;
+        }
+        const found = (0, update_effect_props_1.findEffectCallExpression)({ attr, effectIndex });
+        if (found.kind === 'error') {
+            throw new Error(`Cannot duplicate effect: ${found.reason}`);
+        }
+        duplication.effectIndices.add(effectIndex);
+        duplication.effectLabels.push(`${found.callee}()`);
+        duplication.logLines.push((_e = (_d = (_a = found.call.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _d !== void 0 ? _d : (_b = jsx.loc) === null || _b === void 0 ? void 0 : _b.start.line) !== null && _e !== void 0 ? _e : 1);
+    }
+    for (const duplication of duplicationsByAttr.values()) {
+        for (const effectIndex of [...duplication.effectIndices].sort((a, b) => b - a)) {
+            const effect = duplication.effectsArray.elements[effectIndex];
+            if (!effect || effect.type !== 'CallExpression') {
+                throw new Error('Cannot duplicate effect: not-call-expression');
+            }
+            duplication.effectsArray.elements.splice(effectIndex + 1, 0, (0, types_1.cloneNode)(effect, true));
+        }
+    }
+    const finalFile = (0, parse_ast_1.serializeAst)(ast);
+    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
+        input: finalFile,
+        prettierConfigOverride,
+    });
+    return {
+        output,
+        formatted,
+        effectLabels: [...duplicationsByAttr.values()].flatMap((duplication) => duplication.effectLabels),
+        logLines: [...duplicationsByAttr.values()].flatMap((duplication) => duplication.logLines),
+    };
+};
+exports.duplicateEffects = duplicateEffects;
+const duplicateEffect = async ({ input, sequenceNodePath, effectIndex, prettierConfigOverride, }) => {
+    const { output, formatted, effectLabels, logLines } = await (0, exports.duplicateEffects)({
+        input,
+        effects: [{ sequenceNodePath, effectIndex }],
+        prettierConfigOverride,
+    });
+    return {
+        output,
+        formatted,
+        effectLabel: effectLabels[0],
+        logLine: logLines[0],
+    };
+};
+exports.duplicateEffect = duplicateEffect;

package/dist/codemods/effect-param-expression.js

@@ -38,7 +38,7 @@ const recast = __importStar(require("recast"));
 const imports_1 = require("../helpers/imports");
 const update_nested_prop_1 = require("./update-nested-prop");
 const b = recast.types.builders;
-const isNonLinearEasing = (easing) => easing !== 'linear';
+const isNonLinearEasing = (easing) => easing.type !== 'linear';
 const keyframedParamNeedsEasingImport = (param) => param.easing.some(isNonLinearEasing);
 const getRequiredRemotionImportsForEffectParams = (params) => {
     const requiredImports = new Set();
@@ -73,10 +73,23 @@ const ensureRemotionImportLocalNames = ({ ast, requiredImports, }) => {
 };
 exports.ensureRemotionImportLocalNames = ensureRemotionImportLocalNames;
 const makeEasingExpression = ({ easing, easingLocalName, }) => {
-    if (easing === 'linear') {
-        return b.memberExpression(b.identifier(easingLocalName), b.identifier('linear'));
+    switch (easing.type) {
+        case 'linear':
+            return b.memberExpression(b.identifier(easingLocalName), b.identifier('linear'));
+        case 'spring':
+            return b.callExpression(b.memberExpression(b.identifier(easingLocalName), b.identifier('spring')), [
+                b.objectExpression([
+                    b.objectProperty(b.identifier('damping'), (0, update_nested_prop_1.parseValueExpression)(easing.damping)),
+                    b.objectProperty(b.identifier('mass'), (0, update_nested_prop_1.parseValueExpression)(easing.mass)),
+                    b.objectProperty(b.identifier('stiffness'), (0, update_nested_prop_1.parseValueExpression)(easing.stiffness)),
+                    b.objectProperty(b.identifier('overshootClamping'), b.booleanLiteral(easing.overshootClamping)),
+                ]),
+            ]);
+        case 'bezier':
+            return b.callExpression(b.memberExpression(b.identifier(easingLocalName), b.identifier('bezier')), [easing.x1, easing.y1, easing.x2, easing.y2].map((value) => (0, update_nested_prop_1.parseValueExpression)(value)));
+        default:
+            throw new Error(`Unsupported easing: ${JSON.stringify(easing)}`);
     }
-    return b.callExpression(b.memberExpression(b.identifier(easingLocalName), b.identifier('bezier')), easing.map((value) => (0, update_nested_prop_1.parseValueExpression)(value)));
 };
 const makeKeyframedOptions = ({ param, remotionLocalNames, }) => {
     var _a;

package/dist/codemods/update-effect-props/update-effect-props.d.ts

@@ -1,6 +1,6 @@
 import type { ArrayExpression, CallExpression, JSXAttribute } from '@babel/types';
 import type { EffectClipboardParam } from '@remotion/studio-shared';
-import type { SequenceNodePath, SequenceSchema } from 'remotion';
+import type { SequenceNodePath, InteractivitySchema } from 'remotion';
 export type EffectPropUpdate = {
     key: string;
     value: unknown;
@@ -49,7 +49,7 @@ export declare const updateEffectPropsAst: ({ input, sequenceNodePath, effectInd
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     update: EffectPropUpdate;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 }) => {
     serialized: string;
     oldValueString: string;
@@ -63,6 +63,6 @@ export declare const updateEffectProps: ({ input, sequenceNodePath, effectIndex,
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     update: EffectPropUpdate;
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<UpdateEffectPropsResult>;

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

@@ -1,5 +1,5 @@
 import { type KeyframeInterpolationFunction } from '@remotion/studio-shared';
-import type { CanUpdateSequencePropStatus, ExtrapolateType, SequenceNodePath, SequenceSchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, ExtrapolateType, SequenceNodePath, InteractivitySchema } from 'remotion';
 type KeyframeEasing = Extract<CanUpdateSequencePropStatus, {
     status: 'keyframed';
 }>['easing'][number];
@@ -45,7 +45,7 @@ export declare const updateSequenceKeyframesAst: ({ input, nodePath, updates, sc
     input: string;
     nodePath: SequenceNodePath;
     updates: SequenceKeyframeUpdate[];
-    schema?: SequenceSchema | undefined;
+    schema?: InteractivitySchema | undefined;
 }) => {
     serialized: string;
     oldValueStrings: string[];
@@ -57,7 +57,7 @@ export declare const updateSequenceKeyframes: ({ input, nodePath, updates, schem
     input: string;
     nodePath: SequenceNodePath;
     updates: SequenceKeyframeUpdate[];
-    schema?: SequenceSchema | undefined;
+    schema?: InteractivitySchema | undefined;
     prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<{
     output: string;
@@ -72,7 +72,7 @@ export declare const updateEffectKeyframesAst: ({ input, sequenceNodePath, effec
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     updates: EffectKeyframeUpdate[];
-    schema?: SequenceSchema | undefined;
+    schema?: InteractivitySchema | undefined;
 }) => {
     serialized: string;
     oldValueStrings: string[];
@@ -86,7 +86,7 @@ export declare const updateEffectKeyframes: ({ input, sequenceNodePath, effectIn
     sequenceNodePath: SequenceNodePath;
     effectIndex: number;
     updates: EffectKeyframeUpdate[];
-    schema?: SequenceSchema | undefined;
+    schema?: InteractivitySchema | undefined;
     prettierConfigOverride?: Record<string, unknown> | null | undefined;
 }) => Promise<{
     output: string;

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

@@ -224,7 +224,7 @@ const setOptionsProperty = ({ options, propertyName, value, }) => {
     }
     options.properties.push(b.objectProperty(b.identifier(propertyName), value));
 };
-const isLinearEasing = (easing) => easing === 'linear';
+const isLinearEasing = (easing) => easing.type === 'linear';
 const getKeyframeEasing = (node) => {
     if (node.type === 'TSAsExpression') {
         return getKeyframeEasing(node.expression);
@@ -235,16 +235,29 @@ const getKeyframeEasing = (node) => {
         node.property.type === 'Identifier' &&
         node.property.name === 'linear' &&
         node.computed === false) {
-        return 'linear';
+        return { type: '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 ||
-        node.arguments.length !== 4) {
+        node.callee.computed) {
+        return null;
+    }
+    if (node.callee.property.name === 'spring') {
+        if (node.arguments.length > 1) {
+            return null;
+        }
+        const springConfig = node.arguments[0];
+        if ((springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'ArgumentPlaceholder' ||
+            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'JSXNamespacedName' ||
+            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'SpreadElement') {
+            return null;
+        }
+        return (0, studio_shared_1.parseSpringEasingConfig)(springConfig);
+    }
+    if (node.callee.property.name !== 'bezier' || node.arguments.length !== 4) {
         return null;
     }
     const values = node.arguments.map((arg) => {
@@ -258,7 +271,8 @@ const getKeyframeEasing = (node) => {
     if (values.some((value) => value === null)) {
         return null;
     }
-    return values;
+    const [x1, y1, x2, y2] = values;
+    return { type: 'bezier', x1, y1, x2, y2 };
 };
 const getKeyframeEasingArray = ({ easingNode, segmentCount, }) => {
     if (segmentCount === 0) {
@@ -285,7 +299,7 @@ const getKeyframeEasingArray = ({ easingNode, segmentCount, }) => {
         }
         const easingArray = parsed;
         while (easingArray.length < segmentCount) {
-            easingArray.push('linear');
+            easingArray.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
         }
         return easingArray;
     }
@@ -298,7 +312,7 @@ const getKeyframeEasingArray = ({ easingNode, segmentCount, }) => {
 const getExistingEasingArray = ({ options, segmentCount, }) => {
     const { prop } = findObjectOptionProperty(options, 'easing');
     if (!prop) {
-        return new Array(segmentCount).fill('linear');
+        return Array.from({ length: segmentCount }, () => ({ type: 'linear' }));
     }
     const easing = getKeyframeEasingArray({
         easingNode: prop.value,
@@ -317,10 +331,23 @@ const getExistingEasingArrayOrNull = ({ options, segmentCount, }) => {
     return getExistingEasingArray({ options, segmentCount });
 };
 const createEasingExpression = (easing) => {
-    if (easing === 'linear') {
-        return b.memberExpression(b.identifier('Easing'), b.identifier('linear'));
+    switch (easing.type) {
+        case 'linear':
+            return b.memberExpression(b.identifier('Easing'), b.identifier('linear'));
+        case 'spring':
+            return b.callExpression(b.memberExpression(b.identifier('Easing'), b.identifier('spring')), [
+                b.objectExpression([
+                    b.objectProperty(b.identifier('damping'), (0, update_nested_prop_1.parseValueExpression)(easing.damping)),
+                    b.objectProperty(b.identifier('mass'), (0, update_nested_prop_1.parseValueExpression)(easing.mass)),
+                    b.objectProperty(b.identifier('stiffness'), (0, update_nested_prop_1.parseValueExpression)(easing.stiffness)),
+                    b.objectProperty(b.identifier('overshootClamping'), b.booleanLiteral(easing.overshootClamping)),
+                ]),
+            ]);
+        case 'bezier':
+            return b.callExpression(b.memberExpression(b.identifier('Easing'), b.identifier('bezier')), [easing.x1, easing.y1, easing.x2, easing.y2].map((value) => (0, update_nested_prop_1.parseValueExpression)(value)));
+        default:
+            throw new Error(`Unsupported easing: ${JSON.stringify(easing)}`);
     }
-    return b.callExpression(b.memberExpression(b.identifier('Easing'), b.identifier('bezier')), easing.map((value) => (0, update_nested_prop_1.parseValueExpression)(value)));
 };
 const createEasingArrayExpression = (easing) => b.arrayExpression(easing.map((easingValue) => createEasingExpression(easingValue)));
 const setEasingOption = ({ options, easing, }) => {
@@ -357,7 +384,7 @@ const normalizeEasingAfterAddingKeyframe = ({ extraArgs, previousSegmentCount, n
         return { extraArgs, needsEasingImport: false };
     }
     while (easing.length < nextSegmentCount) {
-        easing.push('linear');
+        easing.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
     }
     return {
         extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
@@ -384,7 +411,7 @@ const normalizeEasingAfterRemovingKeyframe = ({ extraArgs, previousSegmentCount,
         easing.pop();
     }
     while (easing.length < nextSegmentCount) {
-        easing.push('linear');
+        easing.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
     }
     return {
         extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
@@ -414,7 +441,7 @@ const normalizeEasingAfterRemovingKeyframes = ({ extraArgs, previousSegmentCount
         easing.pop();
     }
     while (easing.length < nextSegmentCount) {
-        easing.push('linear');
+        easing.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
     }
     return {
         extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
@@ -901,6 +928,37 @@ const getSequenceWritableProp = ({ attributes, key, missingPropInitialValue, })
         },
     };
 };
+const getEffectWritableProp = ({ objExpr, key, missingPropInitialValue, }) => {
+    const { prop } = findObjectProperty(objExpr, key);
+    if (!prop) {
+        if (missingPropInitialValue) {
+            return {
+                expression: createMissingPropExpression(missingPropInitialValue),
+                setExpression: (nextExpression) => {
+                    objExpr.properties.push(createObjectProperty(key, nextExpression));
+                },
+            };
+        }
+        throw new Error(`Cannot update keyframes: "${key}" is not set`);
+    }
+    return {
+        expression: prop.value,
+        setExpression: (nextExpression) => {
+            prop.value = nextExpression;
+        },
+    };
+};
+const getEffectPropsObjectExpression = (call) => {
+    if (call.arguments.length === 0) {
+        const objExpr = b.objectExpression([]);
+        call.arguments.push(objExpr);
+        return objExpr;
+    }
+    if (call.arguments[0].type !== 'ObjectExpression') {
+        throw new Error('Cannot update effect keyframe: computed');
+    }
+    return call.arguments[0];
+};
 const updateSequenceKeyframesAst = ({ input, nodePath, updates, schema, }) => {
     var _a;
     var _b;
@@ -1014,29 +1072,34 @@ const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, update
         throw new Error(`Cannot update effect keyframe: ${found.reason}`);
     }
     const { call, callee: effectCallee } = found;
-    if (call.arguments.length === 0 ||
-        call.arguments[0].type !== 'ObjectExpression') {
-        throw new Error('Cannot update effect keyframe: computed');
-    }
-    const objExpr = call.arguments[0];
+    const objExpr = getEffectPropsObjectExpression(call);
     const oldValueStrings = [];
     const newValueStrings = [];
     const requiredImports = new Set();
     let needsFrameHook = false;
     for (const update of updates) {
-        const { prop } = findObjectProperty(objExpr, update.key);
-        if (!prop) {
-            throw new Error(`Cannot update keyframes: "${update.key}" is not set`);
-        }
-        oldValueStrings.push(recast.print(prop.value).code);
+        const prop = getEffectWritableProp({
+            objExpr,
+            key: update.key,
+            missingPropInitialValue: update.operation.type === 'add'
+                ? {
+                    value: getInitialValueForMissingProp({
+                        schema: schema !== null && schema !== void 0 ? schema : null,
+                        key: update.key,
+                        newValue: update.operation.value,
+                    }),
+                }
+                : null,
+        });
+        oldValueStrings.push(recast.print(prop.expression).code);
         const { expression: nextExpression, introduced } = applyKeyframeOperation({
-            expression: prop.value,
+            expression: prop.expression,
             key: update.key,
             operation: update.operation,
             schema: schema !== null && schema !== void 0 ? schema : null,
         });
         newValueStrings.push(recast.print(nextExpression).code);
-        prop.value = nextExpression;
+        prop.setExpression(nextExpression);
         if (introduced.calleeName) {
             requiredImports.add(introduced.calleeName);
         }

package/dist/codemods/update-sequence-props/update-sequence-props.d.ts

@@ -1,4 +1,4 @@
-import type { SequenceNodePath, SequenceSchema } from 'remotion';
+import type { SequenceNodePath, InteractivitySchema } from 'remotion';
 export type SequencePropUpdate = {
     key: string;
     value: unknown;
@@ -11,7 +11,7 @@ export type RemovedProp = {
 export type SequencePropsNodeUpdate = {
     nodePath: SequenceNodePath;
     updates: SequencePropUpdate[];
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 };
 export type SequencePropsNodeUpdateResult = {
     oldValueStrings: string[];
@@ -35,7 +35,7 @@ export declare const updateSequencePropsAst: ({ input, nodePath, updates, schema
     input: string;
     nodePath: SequenceNodePath;
     updates: SequencePropUpdate[];
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
 }) => {
     serialized: string;
     oldValueStrings: string[];
@@ -51,7 +51,7 @@ export declare const updateSequenceProps: ({ input, nodePath, updates, schema, p
     input: string;
     nodePath: SequenceNodePath;
     updates: SequencePropUpdate[];
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     prettierConfigOverride: PrettierConfigOverride;
 }) => Promise<UpdateSequencePropsResult>;
 export {};

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

@@ -515,7 +515,13 @@ const createStringAttribute = (name, value) => {
 const createBooleanAttribute = (name, value) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier(name), recast.types.builders.jsxExpressionContainer(recast.types.builders.booleanLiteral(value)));
 };
-const formatTranslateValue = ({ x, y }) => `${x}px ${y}px`;
+const translateDecimalPlaces = 1;
+const roundTranslateCoordinate = (value) => {
+    const factor = 10 ** translateDecimalPlaces;
+    const rounded = Math.round(value * factor) / factor;
+    return Object.is(rounded, -0) ? 0 : rounded;
+};
+const formatTranslateValue = ({ x, y }) => `${roundTranslateCoordinate(x)}px ${roundTranslateCoordinate(y)}px`;
 const createPositionAbsoluteStyleAttribute = (position) => {
     const properties = [
         recast.types.builders.objectProperty(recast.types.builders.identifier('position'), recast.types.builders.stringLiteral('absolute')),
@@ -735,6 +741,14 @@ const ensureImgImport = (ast) => {
         label: '<Img>',
     });
 };
+const ensureAnimatedImageImport = (ast) => {
+    return ensureOfficialNamedImport({
+        ast,
+        importedName: 'AnimatedImage',
+        sourcePath: 'remotion',
+        label: '<AnimatedImage>',
+    });
+};
 const ensureVideoImport = (ast) => {
     return ensureOfficialNamedImport({
         ast,
@@ -1045,6 +1059,9 @@ const createInsertableJsxElement = ({ ast, element, }) => {
         else if (element.assetType === 'gif') {
             localName = ensureGifImport(ast);
         }
+        else if (element.assetType === 'animated-image') {
+            localName = ensureAnimatedImageImport(ast);
+        }
         else if (element.assetType === 'audio') {
             localName = ensureAudioImport(ast);
         }

package/dist/preview-server/api-routes.js

@@ -15,6 +15,7 @@ const delete_jsx_node_1 = require("./routes/delete-jsx-node");
 const delete_keyframes_1 = require("./routes/delete-keyframes");
 const delete_static_file_1 = require("./routes/delete-static-file");
 const download_remote_asset_1 = require("./routes/download-remote-asset");
+const duplicate_effect_1 = require("./routes/duplicate-effect");
 const duplicate_jsx_node_1 = require("./routes/duplicate-jsx-node");
 const insert_jsx_element_1 = require("./routes/insert-jsx-element");
 const install_dependency_1 = require("./routes/install-dependency");
@@ -67,6 +68,7 @@ exports.allApiRoutes = {
     '/api/save-effect-props': save_effect_props_1.saveEffectPropsHandler,
     '/api/add-effect': add_effect_1.addEffectHandler,
     '/api/reorder-effect': reorder_effect_1.reorderEffectHandler,
+    '/api/duplicate-effect': duplicate_effect_1.duplicateEffectHandler,
     '/api/reorder-sequence': reorder_sequence_1.reorderSequenceHandler,
     '/api/delete-keyframes': delete_keyframes_1.deleteKeyframesHandler,
     '/api/move-keyframes': move_keyframes_1.moveKeyframesHandler,

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

@@ -1,5 +1,5 @@
 import type { File, JSXOpeningElement } from '@babel/types';
-import type { CanUpdateEffectPropsResponse, SequenceNodePath, SequenceSchema } from 'remotion';
+import type { CanUpdateEffectPropsResponse, SequenceNodePath, InteractivitySchema } from 'remotion';
 export declare const computeEffectPropStatus: ({ ast, jsx, effectIndex, keys, }: {
     ast: File;
     jsx: JSXOpeningElement;
@@ -9,13 +9,13 @@ export declare const computeEffectPropStatus: ({ ast, jsx, effectIndex, keys, }:
 export declare const computeEffectPropsStatusesFromContent: ({ fileContents, sequenceNodePath, effects, keysFor, }: {
     fileContents: string;
     sequenceNodePath: SequenceNodePath;
-    effects: SequenceSchema[];
-    keysFor: (effect: SequenceSchema) => string[];
+    effects: InteractivitySchema[];
+    keysFor: (effect: InteractivitySchema) => string[];
 }) => CanUpdateEffectPropsResponse[];
 export declare const computeEffectPropsStatusesFromFile: ({ fileName, sequenceNodePath, effects, keysFor, remotionRoot, }: {
     fileName: string;
     sequenceNodePath: SequenceNodePath;
-    effects: SequenceSchema[];
-    keysFor: (effect: SequenceSchema) => string[];
+    effects: InteractivitySchema[];
+    keysFor: (effect: InteractivitySchema) => string[];
     remotionRoot: string;
 }) => CanUpdateEffectPropsResponse[];

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

@@ -210,18 +210,29 @@ const getKeyframeEasing = (node) => {
         node.property.type === 'Identifier' &&
         node.property.name === 'linear' &&
         node.computed === false) {
-        return 'linear';
+        return { type: '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) {
+    if (node.callee.property.name === 'spring') {
+        if (node.arguments.length > 1) {
+            return null;
+        }
+        const springConfig = node.arguments[0];
+        if ((springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'ArgumentPlaceholder' ||
+            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'JSXNamespacedName' ||
+            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'SpreadElement') {
+            return null;
+        }
+        return (0, studio_shared_1.parseSpringEasingConfig)(springConfig);
+    }
+    if (node.callee.property.name !== 'bezier' || node.arguments.length !== 4) {
         return null;
     }
     const values = node.arguments.map((arg) => {
@@ -235,7 +246,8 @@ const getKeyframeEasing = (node) => {
     if (values.some((v) => v === null)) {
         return null;
     }
-    return values;
+    const [x1, y1, x2, y2] = values;
+    return { type: 'bezier', x1, y1, x2, y2 };
 };
 const getKeyframeEasingArray = ({ easingNode, segments, }) => {
     if (segments === 0) {
@@ -280,7 +292,7 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
             right: 'extend',
         };
     const defaults = {
-        easing: new Array(segments).fill('linear'),
+        easing: Array.from({ length: segments }, () => studio_shared_1.LINEAR_KEYFRAME_EASING),
         clamping: defaultClamping,
         posterize: undefined,
     };

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

@@ -13,9 +13,10 @@ const validate_same_origin_1 = require("../validate-same-origin");
 const maxRemoteAssetSize = 50 * 1024 * 1024;
 const remoteAssetDownloadTimeout = 15000;
 const maxRemoteAssetRedirects = 5;
-const remoteAssetAcceptHeader = 'image/png,image/jpeg,image/webp,image/bmp,image/gif';
+const remoteAssetAcceptHeader = 'image/png,image/apng,image/jpeg,image/webp,image/bmp,image/gif';
 const extensionsForFileType = {
     png: ['png'],
+    apng: ['png', 'apng'],
     jpeg: ['jpg', 'jpeg'],
     webp: ['webp'],
     bmp: ['bmp'],
@@ -253,7 +254,11 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
     }
     const element = {
         type: 'asset',
-        assetType: fileType.type === 'gif' ? 'gif' : 'image',
+        assetType: fileType.type === 'gif'
+            ? 'gif'
+            : fileType.type === 'apng'
+                ? 'animated-image'
+                : 'image',
         src: assetPath,
         srcType: 'static',
         dimensions: fileType.dimensions,

package/dist/preview-server/routes/duplicate-effect.d.ts

@@ -0,0 +1,3 @@
+import type { DuplicateEffectRequest, DuplicateEffectResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const duplicateEffectHandler: ApiHandler<DuplicateEffectRequest, DuplicateEffectResponse>;

package/dist/preview-server/routes/duplicate-effect.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.duplicateEffectHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const duplicate_effect_1 = require("../../codemods/duplicate-effect");
+const file_watcher_1 = require("../../file-watcher");
+const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const format_log_file_location_1 = require("../format-log-file-location");
+const undo_stack_1 = require("../undo-stack");
+const formatting_1 = require("./log-updates/formatting");
+const log_update_1 = require("./log-updates/log-update");
+const getDuplicatedEffectDescription = (effectLabels) => {
+    if (effectLabels.length === 1) {
+        return effectLabels[0];
+    }
+    return `${effectLabels.length} effects`;
+};
+const duplicateEffectHandler = async ({ input: effects, remotionRoot, logLevel }) => {
+    var _a;
+    try {
+        if (effects.length === 0) {
+            throw new Error('No effects were specified for duplication');
+        }
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[duplicate-effect] Received request to duplicate ${effects.length} effect target${effects.length === 1 ? '' : 's'}`);
+        const itemsByFileName = new Map();
+        for (const item of effects) {
+            const fileItems = (_a = itemsByFileName.get(item.fileName)) !== null && _a !== void 0 ? _a : [];
+            fileItems.push(item);
+            itemsByFileName.set(item.fileName, fileItems);
+        }
+        const updates = await Promise.all([...itemsByFileName.entries()].map(async ([fileName, fileItems]) => {
+            const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+                remotionRoot,
+                fileName,
+                action: 'modify',
+            });
+            const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+            const { output, formatted, effectLabels, logLines } = await (0, duplicate_effect_1.duplicateEffects)({
+                input: fileContents,
+                effects: fileItems.map((item) => ({
+                    sequenceNodePath: item.sequenceNodePath.nodePath,
+                    effectIndex: item.effectIndex,
+                })),
+            });
+            return {
+                absolutePath,
+                fileRelativeToRoot,
+                fileContents,
+                output,
+                formatted,
+                effectLabels,
+                logLine: Math.min(...logLines),
+            };
+        }));
+        for (const update of updates) {
+            const duplicatedEffectDescription = getDuplicatedEffectDescription(update.effectLabels);
+            (0, undo_stack_1.pushToUndoStack)({
+                filePath: update.absolutePath,
+                oldContents: update.fileContents,
+                newContents: null,
+                logLevel,
+                remotionRoot,
+                logLine: update.logLine,
+                description: {
+                    undoMessage: `↩️  Duplication of ${duplicatedEffectDescription}`,
+                    redoMessage: `↪️  Duplication of ${duplicatedEffectDescription}`,
+                },
+                entryType: 'duplicate-effect',
+                suppressHmrOnFileRestore: false,
+            });
+            (0, undo_stack_1.suppressUndoStackInvalidation)(update.absolutePath);
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)(update.absolutePath, update.output, undefined);
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath: update.absolutePath,
+                line: update.logLine,
+            });
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Duplicated ${(0, formatting_1.attrName)(duplicatedEffectDescription)}`);
+            if (!update.formatted) {
+                (0, log_update_1.warnAboutPrettierOnce)(logLevel);
+            }
+            renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[duplicate-effect] Wrote ${update.fileRelativeToRoot}${update.formatted ? ' (formatted)' : ''}`);
+        }
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        return {
+            success: true,
+        };
+    }
+    catch (err) {
+        return {
+            success: false,
+            reason: err.message,
+            stack: err.stack,
+        };
+    }
+};
+exports.duplicateEffectHandler = duplicateEffectHandler;

package/dist/preview-server/routes/insert-jsx-element.js

@@ -75,6 +75,9 @@ const getElementLabel = (element) => {
         if (element.assetType === 'gif') {
             return '<Gif>';
         }
+        if (element.assetType === 'animated-image') {
+            return '<AnimatedImage>';
+        }
         if (element.assetType === 'audio') {
             return '<Audio>';
         }

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' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'duplicate-composition' | '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' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'duplicate-composition' | 'delete-folder' | 'rename-folder';
 type UndoEntrySnapshot = {
     filePath: string;
     oldContents: string;
@@ -35,6 +35,8 @@ type UndoEntry = {
     entryType: 'add-effect';
 } | {
     entryType: 'delete-effect';
+} | {
+    entryType: 'duplicate-effect';
 } | {
     entryType: 'paste-effects';
 } | {

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