@remotion/studio-server 4.0.476 → 4.0.478

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/helpers/resolve-composition-component.js

@@ -515,10 +515,15 @@ 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 createPositionAbsoluteStyleAttribute = () => {
-    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('style'), recast.types.builders.jsxExpressionContainer(recast.types.builders.objectExpression([
+const formatTranslateValue = ({ x, y }) => `${x}px ${y}px`;
+const createPositionAbsoluteStyleAttribute = (position) => {
+    const properties = [
         recast.types.builders.objectProperty(recast.types.builders.identifier('position'), recast.types.builders.stringLiteral('absolute')),
-    ])));
+    ];
+    if (position) {
+        properties.push(recast.types.builders.objectProperty(recast.types.builders.identifier('translate'), recast.types.builders.stringLiteral(formatTranslateValue(position))));
+    }
+    return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('style'), recast.types.builders.jsxExpressionContainer(recast.types.builders.objectExpression(properties)));
 };
 const createStaticFileSrcAttribute = ({ staticFileLocalName, src, }) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('src'), recast.types.builders.jsxExpressionContainer(recast.types.builders.callExpression(recast.types.builders.identifier(staticFileLocalName), [recast.types.builders.stringLiteral(src)])));
@@ -535,25 +540,27 @@ const createComponentProp = ({ name, value, }) => {
 const createStringSrcAttribute = (src) => {
     return recast.types.builders.jsxAttribute(recast.types.builders.jsxIdentifier('src'), recast.types.builders.stringLiteral(src));
 };
-const createSolidElement = ({ localName, width, height, }) => {
+const createSolidElement = ({ localName, width, height, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         createNumberAttribute('width', width),
         createNumberAttribute('height', height),
-        createPositionAbsoluteStyleAttribute(),
+        createPositionAbsoluteStyleAttribute(position),
     ], true), null, []);
 };
-const createComponentElement = ({ localName, props, }) => {
+const createComponentElement = ({ localName, props, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         ...props.map(createComponentProp),
-        createPositionAbsoluteStyleAttribute(),
+        createPositionAbsoluteStyleAttribute(position),
     ], true), null, []);
 };
-const createAssetElement = ({ addPositionStyle, localName, staticFileLocalName, src, dimensions, }) => {
+const createAssetElement = ({ addPositionStyle, localName, staticFileLocalName, src, dimensions, position, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(localName), [
         staticFileLocalName === null
             ? createStringSrcAttribute(src)
             : createStaticFileSrcAttribute({ staticFileLocalName, src }),
-        ...(addPositionStyle ? [createPositionAbsoluteStyleAttribute()] : []),
+        ...(addPositionStyle
+            ? [createPositionAbsoluteStyleAttribute(position)]
+            : []),
         ...(dimensions
             ? [
                 createNumberAttribute('width', dimensions.width),
@@ -728,6 +735,14 @@ const ensureImgImport = (ast) => {
         label: '<Img>',
     });
 };
+const ensureAnimatedImageImport = (ast) => {
+    return ensureOfficialNamedImport({
+        ast,
+        importedName: 'AnimatedImage',
+        sourcePath: 'remotion',
+        label: '<AnimatedImage>',
+    });
+};
 const ensureVideoImport = (ast) => {
     return ensureOfficialNamedImport({
         ast,
@@ -1007,6 +1022,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
             localName: solidLocalName,
             width: element.width,
             height: element.height,
+            position: element.position,
         });
     }
     if (element.type === 'component') {
@@ -1019,6 +1035,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
         return createComponentElement({
             localName: componentLocalName,
             props: element.props,
+            position: element.position,
         });
     }
     if (element.type === 'asset') {
@@ -1036,6 +1053,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);
         }
@@ -1048,6 +1068,7 @@ const createInsertableJsxElement = ({ ast, element, }) => {
             staticFileLocalName,
             src: element.src,
             dimensions: element.dimensions,
+            position: element.position,
         });
     }
     throw new Error('Unsupported element type');

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/jsx-component-identity.d.ts

@@ -0,0 +1,12 @@
+import type { File, JSXOpeningElement } from '@babel/types';
+export declare class JsxElementIdentityMismatchError extends Error {
+    constructor();
+}
+export declare const getJsxComponentIdentity: ({ ast, jsxElement, }: {
+    ast: File;
+    jsxElement: JSXOpeningElement;
+}) => string | null;
+export declare const jsxComponentIdentitiesMatch: ({ expected, actual, }: {
+    expected: string | null;
+    actual: string | null;
+}) => boolean;

package/dist/preview-server/jsx-component-identity.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.jsxComponentIdentitiesMatch = exports.getJsxComponentIdentity = exports.JsxElementIdentityMismatchError = void 0;
+const imports_1 = require("../helpers/imports");
+class JsxElementIdentityMismatchError extends Error {
+    constructor() {
+        super('JSX element identity changed');
+    }
+}
+exports.JsxElementIdentityMismatchError = JsxElementIdentityMismatchError;
+const jsxMemberToString = (expr) => {
+    if (expr.type === 'JSXIdentifier') {
+        return expr.name;
+    }
+    return `${jsxMemberToString(expr.object)}.${expr.property.name}`;
+};
+const getJsxRootIdentifier = (expr) => {
+    if (expr.type === 'JSXIdentifier') {
+        return expr;
+    }
+    return getJsxRootIdentifier(expr.object);
+};
+const getTagName = (node) => {
+    if (node.name.type === 'JSXIdentifier') {
+        return node.name.name;
+    }
+    if (node.name.type === 'JSXMemberExpression') {
+        return jsxMemberToString(node.name);
+    }
+    return null;
+};
+const getMemberPath = (tagName) => {
+    const dotIndex = tagName.indexOf('.');
+    return dotIndex === -1 ? '' : tagName.slice(dotIndex + 1);
+};
+const getMemberPathAfterImportName = ({ tagName, importName, }) => {
+    const parts = tagName.split('.');
+    const importNameIndex = parts.indexOf(importName);
+    if (importNameIndex === -1) {
+        return getMemberPath(tagName);
+    }
+    return parts.slice(importNameIndex + 1).join('.');
+};
+const sourcePathToIdentityPrefix = (sourcePath) => {
+    if (sourcePath === 'remotion') {
+        return 'dev.remotion.remotion';
+    }
+    if (sourcePath.startsWith('@remotion/')) {
+        const packageName = sourcePath
+            .slice('@remotion/'.length)
+            .replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+        return `dev.remotion.${packageName}`;
+    }
+    return null;
+};
+const makeImportedIdentity = ({ sourcePath, importName, memberPath, }) => {
+    const prefix = sourcePathToIdentityPrefix(sourcePath);
+    if (prefix === null) {
+        return null;
+    }
+    return [prefix, importName, memberPath].filter(Boolean).join('.');
+};
+const getJsxComponentIdentity = ({ ast, jsxElement, }) => {
+    var _a;
+    const tagName = getTagName(jsxElement);
+    if (tagName === null) {
+        return null;
+    }
+    const rootIdentifier = jsxElement.name.type === 'JSXIdentifier'
+        ? jsxElement.name
+        : jsxElement.name.type === 'JSXMemberExpression'
+            ? getJsxRootIdentifier(jsxElement.name)
+            : null;
+    if (rootIdentifier === null) {
+        return tagName;
+    }
+    for (const node of ast.program.body) {
+        if (node.type !== 'ImportDeclaration') {
+            continue;
+        }
+        const sourcePath = String(node.source.value);
+        for (const specifier of node.specifiers) {
+            if (specifier.type === 'ImportSpecifier' &&
+                ((_a = specifier.local) === null || _a === void 0 ? void 0 : _a.name) === rootIdentifier.name) {
+                const importName = (0, imports_1.getImportedName)(specifier);
+                return makeImportedIdentity({
+                    sourcePath,
+                    importName,
+                    memberPath: getMemberPath(tagName),
+                });
+            }
+            if (specifier.type === 'ImportNamespaceSpecifier' &&
+                specifier.local.name === rootIdentifier.name) {
+                const [importName, ...members] = getMemberPath(tagName).split('.');
+                if (!importName) {
+                    return null;
+                }
+                return makeImportedIdentity({
+                    sourcePath,
+                    importName,
+                    memberPath: members.join('.'),
+                });
+            }
+            if (specifier.type === 'ImportDefaultSpecifier' &&
+                specifier.local.name === rootIdentifier.name) {
+                return makeImportedIdentity({
+                    sourcePath,
+                    importName: 'default',
+                    memberPath: getMemberPathAfterImportName({
+                        tagName,
+                        importName: rootIdentifier.name,
+                    }),
+                });
+            }
+        }
+    }
+    return tagName;
+};
+exports.getJsxComponentIdentity = getJsxComponentIdentity;
+const jsxComponentIdentitiesMatch = ({ expected, actual, }) => {
+    if (expected === null) {
+        return true;
+    }
+    return expected === actual;
+};
+exports.jsxComponentIdentitiesMatch = jsxComponentIdentitiesMatch;

package/dist/preview-server/routes/add-sequence-keyframe.js

@@ -74,6 +74,7 @@ const addSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, v
         fileContents: output,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
         nodePath: updatedNodePath,
+        componentIdentity: null,
         effects: [],
     });
     const updatedSubscriptionKey = { ...nodePath, nodePath: updatedNodePath };

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

@@ -10,22 +10,25 @@ export declare const getComputedStatus: (node: Expression, ast: File) => CanUpda
 export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
 export declare const findNodePathForJsxElement: (ast: File, target: JSXOpeningElement) => SequenceNodePath | null;
 export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;
-export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, keys, effects, }: {
+export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, componentIdentity, keys, effects, }: {
     fileContents: string;
     nodePath: SequenceNodePath;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
 }) => CanUpdateSequencePropsResponseTrue;
-export declare const computeSequencePropsStatus: ({ fileName, nodePath, keys, effects, remotionRoot, }: {
+export declare const computeSequencePropsStatus: ({ fileName, nodePath, componentIdentity, keys, effects, remotionRoot, }: {
     fileName: string;
     nodePath: SequenceNodePath;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
     remotionRoot: string;
 }) => CanUpdateSequencePropsResponseTrue;
-export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName, line, keys, effects, remotionRoot, logLevel, }: {
+export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName, line, componentIdentity, keys, effects, remotionRoot, logLevel, }: {
     fileName: string;
     line: number;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
     remotionRoot: string;

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

@@ -43,6 +43,7 @@ const parse_ast_1 = require("../../codemods/parse-ast");
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 const import_agnostic_node_path_1 = require("../../helpers/import-agnostic-node-path");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const jsx_component_identity_1 = require("../jsx-component-identity");
 const jsx_element_not_found_at_location_error_1 = require("../jsx-element-not-found-at-location-error");
 const can_update_effect_props_1 = require("./can-update-effect-props");
 const staticStatus = (codeValue) => ({
@@ -353,6 +354,25 @@ const getInterpolationKeyframes = (node, ast) => {
     if (node.type === 'TSAsExpression') {
         return getInterpolationKeyframes(node.expression, ast);
     }
+    if (node.type === 'CallExpression' &&
+        node.callee.type === 'Identifier' &&
+        node.callee.name === 'String' &&
+        node.arguments.length === 1 &&
+        node.arguments[0].type !== 'ArgumentPlaceholder' &&
+        node.arguments[0].type !== 'JSXNamespacedName' &&
+        node.arguments[0].type !== 'SpreadElement') {
+        const interpolation = getInterpolationKeyframes(node.arguments[0], ast);
+        if (!interpolation) {
+            return undefined;
+        }
+        return {
+            ...interpolation,
+            keyframes: interpolation.keyframes.map((keyframe) => ({
+                ...keyframe,
+                value: String(keyframe.value),
+            })),
+        };
+    }
     if (node.type !== 'CallExpression') {
         return undefined;
     }
@@ -627,12 +647,18 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, ast, keys, }) => {
     }
     return filteredProps;
 };
-const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, effects, }) => {
+const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, componentIdentity, keys, effects, }) => {
     const ast = (0, parse_ast_1.parseAst)(fileContents);
     const jsxElement = (0, exports.findJsxElementAtNodePath)(ast, nodePath);
     if (!jsxElement) {
         throw new jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError();
     }
+    if (!(0, jsx_component_identity_1.jsxComponentIdentitiesMatch)({
+        expected: componentIdentity,
+        actual: (0, jsx_component_identity_1.getJsxComponentIdentity)({ ast, jsxElement }),
+    })) {
+        throw new jsx_component_identity_1.JsxElementIdentityMismatchError();
+    }
     const filteredProps = computeSequenceOnlyPropsRecord({ jsxElement, ast, keys });
     const effectsStatuses = computeEffectsForJsx({ ast, jsxElement, effects });
     return {
@@ -642,7 +668,7 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, keys, e
     };
 };
 exports.computeSequencePropsStatusFromContent = computeSequencePropsStatusFromContent;
-const computeSequencePropsStatus = ({ fileName, nodePath, keys, effects, remotionRoot, }) => {
+const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, keys, effects, remotionRoot, }) => {
     const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
         remotionRoot,
         fileName,
@@ -652,12 +678,13 @@ const computeSequencePropsStatus = ({ fileName, nodePath, keys, effects, remotio
     return (0, exports.computeSequencePropsStatusFromContent)({
         fileContents,
         nodePath,
+        componentIdentity,
         keys,
         effects,
     });
 };
 exports.computeSequencePropsStatus = computeSequencePropsStatus;
-const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, keys, effects, remotionRoot, logLevel, }) => {
+const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, componentIdentity, keys, effects, remotionRoot, logLevel, }) => {
     try {
         const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
@@ -680,6 +707,7 @@ const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, keys, ef
             status: (0, exports.computeSequencePropsStatus)({
                 fileName,
                 nodePath: resolvedNodePath,
+                componentIdentity,
                 keys,
                 effects,
                 remotionRoot,

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

@@ -215,6 +215,7 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
             fileContents: output,
             keys: (0, studio_shared_1.getAllSchemaKeys)(keyframe.schema),
             nodePath: keyframe.nodePath.nodePath,
+            componentIdentity: null,
             effects: [],
         });
         return {

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,10 +254,15 @@ 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,
+        position: null,
     };
     return {
         assetPath,

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

@@ -14,7 +14,16 @@ const validateDimension = (name, value) => {
         throw new Error(`${name} must be a positive number`);
     }
 };
+const validatePosition = (position) => {
+    if (position === null) {
+        return;
+    }
+    if (!Number.isFinite(position.x) || !Number.isFinite(position.y)) {
+        throw new Error('Position must be finite');
+    }
+};
 const validateElement = (element) => {
+    validatePosition(element.position);
     if (element.type === 'solid') {
         validateDimension('width', element.width);
         validateDimension('height', element.height);
@@ -66,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/routes/save-sequence-props.js

@@ -145,6 +145,7 @@ const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLab
             fileContents: output,
             keys: (0, studio_shared_1.getAllSchemaKeys)(edit.schema),
             nodePath: edit.nodePath.nodePath,
+            componentIdentity: null,
             effects: [],
         });
         return {

package/dist/preview-server/routes/subscribe-to-sequence-props.js

@@ -2,12 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToSequenceProps = void 0;
 const sequence_props_watchers_1 = require("../sequence-props-watchers");
-const subscribeToSequenceProps = ({ input: { fileName, line, column, nodePath, keys, effects, clientId }, remotionRoot, logLevel, }) => {
+const subscribeToSequenceProps = ({ input: { fileName, line, column, nodePath, componentIdentity, keys, effects, clientId, }, remotionRoot, logLevel, }) => {
     const result = (0, sequence_props_watchers_1.subscribeToSequencePropsWatchers)({
         fileName,
         line,
         column,
         nodePath,
+        componentIdentity,
         keys,
         effects,
         remotionRoot,

package/dist/preview-server/routes/update-sequence-keyframe-settings.js

@@ -77,6 +77,7 @@ const updateSequenceKeyframeSettingsHandler = ({ input: { fileName, nodePath, ke
         fileContents: output,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
         nodePath: updatedNodePath,
+        componentIdentity: null,
         effects: [],
     });
     const updatedSubscriptionKey = { ...nodePath, nodePath: updatedNodePath };

package/dist/preview-server/sequence-props-watchers.d.ts

@@ -1,10 +1,11 @@
 import { type SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
 import type { SequenceNodePath } from 'remotion';
-export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, nodePath: preferredNodePath, keys, effects, remotionRoot, clientId, logLevel, }: {
+export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, nodePath: preferredNodePath, componentIdentity, keys, effects, remotionRoot, clientId, logLevel, }: {
     fileName: string;
     line: number;
     column: number;
     nodePath: SequenceNodePath | null;
+    componentIdentity: string | null;
     keys: string[];
     effects: string[][];
     remotionRoot: string;

package/dist/preview-server/sequence-props-watchers.js

@@ -8,42 +8,64 @@ const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const file_watcher_1 = require("../file-watcher");
+const jsx_component_identity_1 = require("./jsx-component-identity");
 const jsx_element_not_found_at_location_error_1 = require("./jsx-element-not-found-at-location-error");
 const live_events_1 = require("./live-events");
 const node_path_cache_1 = require("./node-path-cache");
 const can_update_sequence_props_1 = require("./routes/can-update-sequence-props");
 const sequencePropsWatchers = {};
-const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, keys, effects, remotionRoot, logLevel, }) => {
+const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, componentIdentity, keys, effects, remotionRoot, logLevel, }) => {
     if (preferredNodePath) {
-        const fromNodePath = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
-            fileName,
-            nodePath: preferredNodePath,
-            keys,
-            effects,
-            remotionRoot,
-        });
-        return {
-            status: fromNodePath,
-            nodePath: {
-                absolutePath: node_path_1.default.resolve(remotionRoot, fileName),
+        try {
+            const fromNodePath = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+                fileName,
                 nodePath: preferredNodePath,
-                sequenceKeys: keys,
-                effectKeys: effects,
-            },
-            success: true,
-        };
+                componentIdentity,
+                keys,
+                effects,
+                remotionRoot,
+            });
+            return {
+                status: fromNodePath,
+                nodePath: {
+                    absolutePath: node_path_1.default.resolve(remotionRoot, fileName),
+                    nodePath: preferredNodePath,
+                    sequenceKeys: keys,
+                    effectKeys: effects,
+                },
+                success: true,
+            };
+        }
+        catch (error) {
+            if (!(error instanceof jsx_component_identity_1.JsxElementIdentityMismatchError ||
+                error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError)) {
+                throw error;
+            }
+        }
     }
     // Try cached nodePath first (handles stale source maps after suppressed rebuilds)
     const cachedNodePath = (0, node_path_cache_1.getCachedNodePath)(fileName, line, column);
     if (cachedNodePath) {
-        const cachedResult = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
-            fileName,
-            nodePath: cachedNodePath,
-            keys,
-            effects,
-            remotionRoot,
-        });
-        if (cachedResult.canUpdate) {
+        const cachedResult = (() => {
+            try {
+                return (0, can_update_sequence_props_1.computeSequencePropsStatus)({
+                    fileName,
+                    nodePath: cachedNodePath,
+                    componentIdentity,
+                    keys,
+                    effects,
+                    remotionRoot,
+                });
+            }
+            catch (error) {
+                if (error instanceof jsx_component_identity_1.JsxElementIdentityMismatchError ||
+                    error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError) {
+                    return null;
+                }
+                throw error;
+            }
+        })();
+        if (cachedResult === null || cachedResult === void 0 ? void 0 : cachedResult.canUpdate) {
             return {
                 status: cachedResult,
                 nodePath: {
@@ -59,6 +81,7 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, key
     const status = (0, can_update_sequence_props_1.computeSequencePropsStatusFromFilenameByLine)({
         fileName,
         line,
+        componentIdentity,
         keys,
         effects,
         remotionRoot,
@@ -66,13 +89,14 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, key
     });
     return status;
 };
-const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: preferredNodePath, keys, effects, remotionRoot, clientId, logLevel, }) => {
+const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: preferredNodePath, componentIdentity, keys, effects, remotionRoot, clientId, logLevel, }) => {
     var _a;
     const initialResult = getSequencePropsStatus({
         fileName,
         line,
         column,
         preferredNodePath,
+        componentIdentity,
         keys,
         effects,
         remotionRoot,
@@ -105,6 +129,7 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: pr
                 const result = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
                     fileContents: event.content,
                     nodePath: nodePath.nodePath,
+                    componentIdentity,
                     keys,
                     effects,
                 });
@@ -125,7 +150,8 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: pr
                 });
             }
             catch (error) {
-                if (error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError) {
+                if (error instanceof jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError ||
+                    error instanceof jsx_component_identity_1.JsxElementIdentityMismatchError) {
                     (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
                         listener.sendEventToClientId(clientId, {
                             type: 'lost-node-path',

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