@remotion/studio-server 4.0.477 → 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

@@ -735,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,
@@ -1045,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);
         }

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/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.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.477",
+		"remotion": "4.0.478",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.477",
-		"@remotion/renderer": "4.0.477",
-		"@remotion/studio-shared": "4.0.477",
+		"@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.477",
+		"@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"