@remotion/studio-server 4.0.529 → 4.0.531

package/dist/preview-server/routes/split-sequences.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitSequencesHandler = void 0;
+const node_fs_1 = require("node:fs");
+const codemods_1 = require("@remotion/codemods");
+const renderer_1 = require("@remotion/renderer");
+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 sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
+const undo_stack_1 = require("../undo-stack");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const splitSequencesHandler = ({ input: { sequences }, remotionRoot, logLevel }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a;
+    try {
+        if (sequences.length === 0) {
+            throw new Error('No JSX sequences were specified for splitting');
+        }
+        renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[split-sequences] Received request to split ${sequences.length} JSX sequence${sequences.length === 1 ? '' : 's'}`);
+        const sequencesByFileName = new Map();
+        for (const sequence of sequences) {
+            const fileSequences = (_a = sequencesByFileName.get(sequence.fileName)) !== null && _a !== void 0 ? _a : [];
+            fileSequences.push(sequence);
+            sequencesByFileName.set(sequence.fileName, fileSequences);
+        }
+        const updates = await Promise.all([...sequencesByFileName].map(async ([fileName, fileSequences]) => {
+            var _a;
+            var _b;
+            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 result = await (0, codemods_1.splitSequences)({
+                project: {
+                    files: { [absolutePath]: fileContents },
+                    rootDir: remotionRoot,
+                },
+                splits: fileSequences.map(({ nodePath, sequenceKeys, splitFrame }) => ({
+                    node: { filePath: absolutePath, nodePath },
+                    sequenceKeys,
+                    frame: splitFrame,
+                })),
+            });
+            const output = (_b = (_a = result.changes[0]) === null || _a === void 0 ? void 0 : _a.nextContents) !== null && _b !== void 0 ? _b : fileContents;
+            const { nodeLabels, logLines } = result.editDetails[0];
+            const nodePathRemappings = result.nodePathRemappings.map(({ oldNodePath, newNodePath, oldJsxName, newJsxName }) => ({
+                oldNodePath,
+                newNodePath,
+                oldJsxName,
+                newJsxName,
+            }));
+            return {
+                absolutePath,
+                fileContents,
+                fileRelativeToRoot,
+                logLine: Math.min(...logLines),
+                nodeLabels,
+                nodePathRemappings,
+                output,
+            };
+        }));
+        const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)(updates.map((update) => ({
+            absolutePath: update.absolutePath,
+            remappings: update.nodePathRemappings,
+        })), null);
+        const splitDescription = sequences.length === 1
+            ? updates[0].nodeLabels[0]
+            : `${sequences.length} JSX sequences`;
+        (0, undo_stack_1.pushTransactionToUndoStack)({
+            snapshots: updates.map((update) => ({
+                filePath: update.absolutePath,
+                oldContents: update.fileContents,
+                newContents: null,
+                logLine: update.logLine,
+                nodePathRemappings: update.nodePathRemappings,
+            })),
+            logLevel,
+            remotionRoot,
+            description: {
+                undoMessage: `↩️  Split of ${splitDescription}`,
+                redoMessage: `↪️  Split of ${splitDescription}`,
+            },
+            entryType: 'split-sequences',
+            suppressHmrOnFileRestore: false,
+            undoRedoNavigation: null,
+        });
+        for (const update of updates) {
+            (0, undo_stack_1.suppressUndoStackInvalidation)(update.absolutePath);
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+                file: update.absolutePath,
+                content: update.output,
+                originatorClientId: undefined,
+                metadata: { skipSequencePropsUpdate: true },
+            });
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath: update.absolutePath,
+                line: update.logLine,
+            });
+            const fileDescription = update.nodeLabels.length === 1
+                ? update.nodeLabels[0]
+                : `${update.nodeLabels.length} JSX sequences`;
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(`${locationLabel}`)} Split ${fileDescription}`);
+            renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[split-sequences] Wrote ${update.fileRelativeToRoot}`);
+        }
+        (0, undo_stack_1.printUndoHint)(logLevel);
+        return {
+            success: true,
+            nodePathMutation,
+        };
+    }
+    catch (err) {
+        return {
+            success: false,
+            reason: err.message,
+            stack: err.stack,
+        };
+    }
+});
+exports.splitSequencesHandler = splitSequencesHandler;

package/dist/preview-server/routes/split-video-from-audio.js

@@ -28,7 +28,12 @@ const splitVideoFromAudioHandler = ({ input: { fileName, nodePath }, remotionRoo
         });
         const output = (_b = (_a = result.changes[0]) === null || _a === void 0 ? void 0 : _a.nextContents) !== null && _b !== void 0 ? _b : fileContents;
         const { formatted, nodeLabel, logLine } = result.editDetails[0];
-        const nodePathRemappings = result.nodePathRemappings.map(({ oldNodePath, newNodePath }) => ({ oldNodePath, newNodePath }));
+        const nodePathRemappings = result.nodePathRemappings.map(({ oldNodePath, newNodePath, oldJsxName, newJsxName }) => ({
+            oldNodePath,
+            newNodePath,
+            oldJsxName,
+            newJsxName,
+        }));
         const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([
             {
                 absolutePath,

package/dist/preview-server/routes/unwrap-folder.d.ts

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

package/dist/preview-server/routes/unwrap-folder.js

@@ -0,0 +1,107 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unwrapFolderHandler = void 0;
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
+const codemods_1 = require("@remotion/codemods");
+const renderer_1 = require("@remotion/renderer");
+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 project_info_1 = require("../project-info");
+const undo_stack_1 = require("../undo-stack");
+const can_update_default_props_1 = require("./can-update-default-props");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const unwrapFolderHandler = ({ input: request, logLevel, remotionRoot, entryPoint }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a, _b;
+    var _c, _d;
+    try {
+        let filePath;
+        if ((_a = request.symbolicatedStack) === null || _a === void 0 ? void 0 : _a.originalFileName) {
+            filePath = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+                remotionRoot,
+                fileName: request.symbolicatedStack.originalFileName,
+                action: 'delete a folder from',
+            }).absolutePath;
+        }
+        else {
+            const { rootFile } = await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint);
+            if (rootFile === null) {
+                throw new Error('Cannot find the Remotion root file');
+            }
+            filePath = rootFile;
+        }
+        (0, can_update_default_props_1.checkIfTypeScriptFile)(filePath);
+        const result = (0, codemods_1.unwrapFolder)({
+            project: {
+                files: { [filePath]: (0, node_fs_1.readFileSync)(filePath, 'utf-8') },
+                rootDir: node_path_1.default.dirname(filePath),
+            },
+            compositionFile: filePath,
+            folder: { name: request.folderName, parentName: request.parentName },
+        });
+        for (const change of result.changes) {
+            const currentContents = (0, node_fs_1.existsSync)(change.filePath)
+                ? (0, node_fs_1.readFileSync)(change.filePath, 'utf-8')
+                : null;
+            if (currentContents !== change.previousContents) {
+                throw new Error(`Source changed before deleting folder: ${change.filePath}`);
+            }
+        }
+        if (result.changes.length > 0) {
+            const logLine = (_c = (_b = request.symbolicatedStack) === null || _b === void 0 ? void 0 : _b.originalLineNumber) !== null && _c !== void 0 ? _c : 1;
+            const folderPath = request.parentName
+                ? `${request.parentName}/${request.folderName}`
+                : request.folderName;
+            (0, undo_stack_1.pushTransactionToUndoStack)({
+                snapshots: result.changes.map((change) => ({
+                    filePath: change.filePath,
+                    oldContents: change.previousContents,
+                    newContents: change.nextContents,
+                    logLine: change.filePath === filePath ? logLine : 1,
+                    nodePathRemappings: null,
+                })),
+                logLevel,
+                remotionRoot,
+                description: {
+                    undoMessage: `↩️  Deletion of folder "${folderPath}"`,
+                    redoMessage: `↪️  Deletion of folder "${folderPath}"`,
+                },
+                entryType: 'delete-folder',
+                suppressHmrOnFileRestore: false,
+                undoRedoNavigation: request.undoRedoNavigation,
+            });
+            for (const change of result.changes) {
+                if (change.nextContents === null) {
+                    throw new Error('Deleting a folder cannot remove source files');
+                }
+                (0, undo_stack_1.suppressUndoStackInvalidation)(change.filePath);
+                (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+                    file: change.filePath,
+                    content: change.nextContents,
+                    originatorClientId: undefined,
+                    metadata: null,
+                });
+            }
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath: filePath,
+                line: logLine,
+            });
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(locationLabel)} Deleted folder "${folderPath}"`);
+            (0, undo_stack_1.printUndoHint)(logLevel);
+        }
+        return { success: true, nodePathMutation: null };
+    }
+    catch (error) {
+        return {
+            success: false,
+            reason: error instanceof Error ? error.message : String(error),
+            stack: error instanceof Error ? ((_d = error.stack) !== null && _d !== void 0 ? _d : '') : '',
+        };
+    }
+});
+exports.unwrapFolderHandler = unwrapFolderHandler;

package/dist/preview-server/routes/update-composition-metadata.d.ts

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

package/dist/preview-server/routes/update-composition-metadata.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateCompositionMetadataHandler = void 0;
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
+const codemods_1 = require("@remotion/codemods");
+const renderer_1 = require("@remotion/renderer");
+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 project_info_1 = require("../project-info");
+const undo_stack_1 = require("../undo-stack");
+const can_update_default_props_1 = require("./can-update-default-props");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const updateCompositionMetadataHandler = ({ input: request, logLevel, remotionRoot, entryPoint }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a, _b;
+    var _c, _d, _e, _f, _g, _h;
+    try {
+        let filePath;
+        if ((_a = request.symbolicatedStack) === null || _a === void 0 ? void 0 : _a.originalFileName) {
+            filePath = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+                remotionRoot,
+                fileName: request.symbolicatedStack.originalFileName,
+                action: 'update composition metadata in',
+            }).absolutePath;
+        }
+        else {
+            const { rootFile } = await (0, project_info_1.getProjectInfo)(remotionRoot, entryPoint);
+            if (rootFile === null) {
+                throw new Error('Cannot find the Remotion root file');
+            }
+            filePath = rootFile;
+        }
+        (0, can_update_default_props_1.checkIfTypeScriptFile)(filePath);
+        const result = (0, codemods_1.updateCompositionMetadata)({
+            project: {
+                files: { [filePath]: (0, node_fs_1.readFileSync)(filePath, 'utf-8') },
+                rootDir: node_path_1.default.dirname(filePath),
+            },
+            compositionFile: filePath,
+            compositionId: request.idToUpdate,
+            metadata: {
+                width: (_c = request.newWidth) !== null && _c !== void 0 ? _c : undefined,
+                height: (_d = request.newHeight) !== null && _d !== void 0 ? _d : undefined,
+                fps: (_e = request.newFps) !== null && _e !== void 0 ? _e : undefined,
+                durationInFrames: (_f = request.newDurationInFrames) !== null && _f !== void 0 ? _f : undefined,
+            },
+        });
+        for (const change of result.changes) {
+            const currentContents = (0, node_fs_1.existsSync)(change.filePath)
+                ? (0, node_fs_1.readFileSync)(change.filePath, 'utf-8')
+                : null;
+            if (currentContents !== change.previousContents) {
+                throw new Error(`Source changed before updating composition metadata: ${change.filePath}`);
+            }
+        }
+        if (result.changes.length > 0) {
+            const logLine = (_g = (_b = request.symbolicatedStack) === null || _b === void 0 ? void 0 : _b.originalLineNumber) !== null && _g !== void 0 ? _g : 1;
+            (0, undo_stack_1.pushTransactionToUndoStack)({
+                snapshots: result.changes.map((change) => ({
+                    filePath: change.filePath,
+                    oldContents: change.previousContents,
+                    newContents: change.nextContents,
+                    logLine: change.filePath === filePath ? logLine : 1,
+                    nodePathRemappings: null,
+                })),
+                logLevel,
+                remotionRoot,
+                description: {
+                    undoMessage: `↩️  Update of metadata of composition "${request.idToUpdate}"`,
+                    redoMessage: `↪️  Update of metadata of composition "${request.idToUpdate}"`,
+                },
+                entryType: 'update-composition-metadata',
+                suppressHmrOnFileRestore: false,
+                undoRedoNavigation: request.undoRedoNavigation,
+            });
+            for (const change of result.changes) {
+                if (change.nextContents === null) {
+                    throw new Error('Updating composition metadata cannot remove source files');
+                }
+                (0, undo_stack_1.suppressUndoStackInvalidation)(change.filePath);
+                (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+                    file: change.filePath,
+                    content: change.nextContents,
+                    originatorClientId: undefined,
+                    metadata: null,
+                });
+            }
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath: filePath,
+                line: logLine,
+            });
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(locationLabel)} Updated metadata of composition "${request.idToUpdate}"`);
+            (0, undo_stack_1.printUndoHint)(logLevel);
+        }
+        return { success: true, nodePathMutation: null };
+    }
+    catch (error) {
+        return {
+            success: false,
+            reason: error instanceof Error ? error.message : String(error),
+            stack: error instanceof Error ? ((_h = error.stack) !== null && _h !== void 0 ? _h : '') : '',
+        };
+    }
+});
+exports.updateCompositionMetadataHandler = updateCompositionMetadataHandler;

package/dist/preview-server/routes/update-public-license.d.ts

@@ -0,0 +1,11 @@
+import type { UpdatePublicLicenseRequest, UpdatePublicLicenseResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const updatePublicLicenseInConfig: ({ configContents, publicLicenseKey, }: {
+    configContents: string;
+    publicLicenseKey: string;
+}) => string;
+export declare const setPublicLicenseKeyInConfigFile: ({ configFile, publicLicenseKey, }: {
+    readonly configFile: string;
+    readonly publicLicenseKey: string;
+}) => void;
+export declare const updatePublicLicenseHandler: ApiHandler<UpdatePublicLicenseRequest, UpdatePublicLicenseResponse>;

package/dist/preview-server/routes/update-public-license.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updatePublicLicenseHandler = exports.setPublicLicenseKeyInConfigFile = exports.updatePublicLicenseInConfig = void 0;
+const node_fs_1 = require("node:fs");
+const recast = __importStar(require("recast"));
+const parse_ast_1 = require("../../codemods/parse-ast");
+const file_watcher_1 = require("../../file-watcher");
+const updatePublicLicenseInConfig = ({ configContents, publicLicenseKey, }) => {
+    const ast = (0, parse_ast_1.parseAst)(configContents);
+    recast.types.visit(ast.program, {
+        visitExpressionStatement(path) {
+            const { expression } = path.node;
+            if (expression.type === 'CallExpression' &&
+                expression.callee.type === 'MemberExpression' &&
+                !expression.callee.computed &&
+                expression.callee.object.type === 'Identifier' &&
+                expression.callee.object.name === 'Config' &&
+                expression.callee.property.type === 'Identifier' &&
+                expression.callee.property.name === 'setPublicLicenseKey') {
+                path.prune();
+                return false;
+            }
+            this.traverse(path);
+        },
+    });
+    const configWithoutExistingCalls = recast.print(ast, {
+        lineTerminator: '\n',
+    }).code;
+    const separator = configWithoutExistingCalls.endsWith('\n') ? '' : '\n';
+    const escapedPublicLicenseKey = publicLicenseKey
+        .replaceAll('\\', '\\\\')
+        .replaceAll("'", "\\'")
+        .replaceAll('\r', '\\r')
+        .replaceAll('\n', '\\n')
+        .replaceAll('\u2028', '\\u2028')
+        .replaceAll('\u2029', '\\u2029');
+    return `${configWithoutExistingCalls}${separator}Config.setPublicLicenseKey('${escapedPublicLicenseKey}');\n`;
+};
+exports.updatePublicLicenseInConfig = updatePublicLicenseInConfig;
+const setPublicLicenseKeyInConfigFile = ({ configFile, publicLicenseKey, }) => {
+    const configContents = (0, node_fs_1.readFileSync)(configFile, 'utf8');
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(configFile, (0, exports.updatePublicLicenseInConfig)({ configContents, publicLicenseKey }), undefined);
+};
+exports.setPublicLicenseKeyInConfigFile = setPublicLicenseKeyInConfigFile;
+const updatePublicLicenseHandler = ({ input, configFile }) => {
+    if (configFile === null || configFile === undefined) {
+        return Promise.resolve({
+            success: false,
+            reason: 'No Remotion config file was loaded.',
+        });
+    }
+    if (input.publicLicenseKey.length === 0) {
+        return Promise.resolve({
+            success: false,
+            reason: 'The public license key must not be empty.',
+        });
+    }
+    (0, exports.setPublicLicenseKeyInConfigFile)({
+        configFile,
+        publicLicenseKey: input.publicLicenseKey,
+    });
+    return Promise.resolve({ success: true });
+};
+exports.updatePublicLicenseHandler = updatePublicLicenseHandler;

package/dist/preview-server/routes/wrap-node.d.ts

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

package/dist/preview-server/routes/wrap-node.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapNodeHandler = void 0;
+const node_fs_1 = require("node:fs");
+const codemods_1 = require("@remotion/codemods");
+const renderer_1 = require("@remotion/renderer");
+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 sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
+const undo_stack_1 = require("../undo-stack");
+const source_file_write_queue_1 = require("./source-file-write-queue");
+const wrapNodeHandler = ({ input: { fileName, nodePath, wrapper, width, height, timing }, remotionRoot, logLevel, }) => {
+    return (0, source_file_write_queue_1.withSourceFileWriteQueue)(() => {
+        var _a;
+        try {
+            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 eligibility = (0, codemods_1.canWrapNode)({ input: fileContents, nodePath });
+            if (wrapper === null) {
+                return Promise.resolve({
+                    success: true,
+                    ...eligibility,
+                    nodePathMutation: null,
+                });
+            }
+            if (!eligibility.canWrap ||
+                ((wrapper === 'HtmlInCanvas' || wrapper === 'HtmlInCanvasMotionBlur') &&
+                    !eligibility.canWrapHtmlInCanvas)) {
+                throw new Error('This JSX element cannot be wrapped');
+            }
+            const result = (0, codemods_1.wrapNode)({
+                project: { files: { [absolutePath]: fileContents }, rootDir: remotionRoot },
+                node: { filePath: absolutePath, nodePath },
+                wrapper: (0, codemods_1.createElement)({
+                    component: wrapper,
+                    importPath: wrapper === 'HtmlInCanvasMotionBlur'
+                        ? '@remotion/motion-blur'
+                        : 'remotion',
+                    props: wrapper === 'HtmlInCanvas' || wrapper === 'HtmlInCanvasMotionBlur'
+                        ? {
+                            width: width !== null && width !== void 0 ? width : 0,
+                            height: height !== null && height !== void 0 ? height : 0,
+                            ...(timing !== null && timing !== void 0 ? timing : {}),
+                        }
+                        : {},
+                }),
+            });
+            const change = result.changes.find(({ filePath }) => filePath === absolutePath);
+            if ((change === null || change === void 0 ? void 0 : change.previousContents) !== fileContents ||
+                change.nextContents === null) {
+                throw new Error('Could not wrap JSX node');
+            }
+            const output = change.nextContents;
+            const remappings = result.nodePathRemappings.map(({ oldNodePath, newNodePath }) => ({ oldNodePath, newNodePath }));
+            const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)([{ absolutePath, remappings }], null);
+            const line = result.logLine;
+            (0, undo_stack_1.pushTransactionToUndoStack)({
+                snapshots: [
+                    {
+                        filePath: absolutePath,
+                        oldContents: fileContents,
+                        newContents: null,
+                        logLine: line,
+                        nodePathRemappings: remappings,
+                    },
+                ],
+                logLevel,
+                remotionRoot,
+                description: {
+                    undoMessage: `↩️  Wrapping in ${wrapper}`,
+                    redoMessage: `↪️  Wrapping in ${wrapper}`,
+                },
+                entryType: 'wrap-node',
+                suppressHmrOnFileRestore: false,
+                undoRedoNavigation: null,
+            });
+            (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+            (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
+                file: absolutePath,
+                content: output,
+                originatorClientId: undefined,
+                metadata: { skipSequencePropsUpdate: true },
+            });
+            const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
+                remotionRoot,
+                absolutePath,
+                line,
+            });
+            renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `${(0, source_file_write_queue_1.getCodemodTimingPrefix)(logLevel)}${renderer_1.RenderInternals.chalk.blueBright(locationLabel)} Wrapped JSX in <${wrapper}>`);
+            renderer_1.RenderInternals.Log.verbose({ indent: false, logLevel }, `[wrap-node] Wrote ${fileRelativeToRoot}`);
+            (0, undo_stack_1.printUndoHint)(logLevel);
+            return Promise.resolve({ success: true, ...eligibility, nodePathMutation });
+        }
+        catch (err) {
+            return Promise.resolve({
+                success: false,
+                reason: err.message,
+                stack: (_a = err.stack) !== null && _a !== void 0 ? _a : '',
+            });
+        }
+    });
+};
+exports.wrapNodeHandler = wrapNodeHandler;

package/dist/preview-server/studio-protocol/handle-discovery.js

@@ -10,7 +10,6 @@ const version_1 = require("remotion/version");
 const element_install_state_1 = require("../element-install-state");
 const origin_policy_1 = require("./origin-policy");
 const protocol_response_1 = require("./protocol-response");
-const STUDIO_PROTOCOL_FOCUS_MAX_AGE = 5 * 60 * 1000;
 exports.ELEMENT_INSTALL_TARGET_RESPONSE_WAIT = 250;
 const requestInstallTarget = ({ liveEventsServer, }) => {
     const requestId = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
@@ -25,17 +24,11 @@ const getLiveStudioTarget = (requestId) => {
     const now = Date.now();
     if (target === null ||
         now - target.updatedAt >= element_install_state_1.ELEMENT_INSTALL_TARGET_MAX_AGE ||
-        target.lastFocusedAt === null ||
-        now - target.lastFocusedAt >= STUDIO_PROTOCOL_FOCUS_MAX_AGE ||
         target.readOnly) {
         return null;
     }
     return target;
 };
-const isElementRequestTarget = (target) => target !== null &&
-    target.compositionFile !== null &&
-    target.compositionId !== null &&
-    target.lastFocusedAt !== null;
 const getProject = ({ gitSource, remotionRoot, }) => (0, studio_shared_1.getProjectName)({
     basename: node_path_1.default.basename,
     gitSource,
@@ -67,7 +60,7 @@ const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRo
         setTimeout(() => {
             const now = Date.now();
             const target = getLiveStudioTarget(requestId);
-            const installTarget = isElementRequestTarget(target) ? target : null;
+            const installTarget = target;
             const issuedInstallTarget = installTarget === null
                 ? null
                 : (0, element_install_state_1.issueStudioProtocolTarget)({
@@ -76,7 +69,7 @@ const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRo
                     purpose: 'install-element',
                     target: installTarget,
                 });
-            const issuedLicenseKeyTarget = target === null
+            const issuedLicenseKeyTarget = target === null || target.lastFocusedAt === null
                 ? null
                 : (0, element_install_state_1.issueStudioProtocolTarget)({
                     now,
@@ -84,7 +77,7 @@ const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRo
                     purpose: 'set-license-key',
                     target,
                 });
-            const issuedElementLibraryTarget = target === null
+            const issuedElementLibraryTarget = target === null || target.lastFocusedAt === null
                 ? null
                 : (0, element_install_state_1.issueStudioProtocolTarget)({
                     now,

package/dist/preview-server/studio-protocol/handle-install.js

@@ -11,9 +11,6 @@ const protocol_response_1 = require("./protocol-response");
 const MAX_STUDIO_PROTOCOL_INSTALL_BODY_SIZE = 1000000;
 const deliverElementInstall = ({ element, focusStudioTab, liveEventsServer, origin, target, }) => {
     var _a, _b, _c;
-    if (target.compositionFile === null || target.compositionId === null) {
-        return false;
-    }
     const installRequest = {
         id: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
         clientId: target.clientId,