@remotion/studio-server 4.0.528 → 4.0.530

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,

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

@@ -4,7 +4,7 @@ export interface UndoEntryDescription {
     undoMessage: string;
     redoMessage: string;
 }
-type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'keyframe-add' | 'keyframe-delete' | 'add-effect' | 'delete-effect' | 'duplicate-effect' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-jsx-nodes' | 'duplicate-jsx-node' | 'wrap-jsx-node' | 'split-jsx-sequence' | 'split-video-from-audio' | 'insert-basic-captions' | 'replace-video-source' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'update-composition-metadata' | 'new-composition' | 'duplicate-composition' | 'move-composition-or-folder' | 'new-folder' | 'delete-folder' | 'rename-folder';
+type UndoEntryType = 'visual-control' | 'default-props' | 'sequence-props' | 'effect-props' | 'keyframe-add' | 'keyframe-delete' | 'add-effect' | 'delete-effect' | 'duplicate-effect' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-nodes' | 'duplicate-nodes' | 'wrap-node' | 'precompose-jsx-nodes' | 'split-sequences' | 'split-video-from-audio' | 'insert-basic-captions' | 'replace-video-source' | 'insert-composition-element' | 'delete-composition' | 'rename-composition' | 'update-composition-metadata' | 'new-composition' | 'duplicate-composition' | 'move-composition-or-folder' | 'new-folder' | 'delete-folder' | 'rename-folder';
 type UndoEntrySnapshot = {
     filePath: string;
     oldContents: string | null;

package/dist/preview-server/undo-stack.js

@@ -268,6 +268,12 @@ function popUndo() {
                 remappings: snapshot.nodePathRemappings.map((remapping) => ({
                     oldNodePath: remapping.newNodePath,
                     newNodePath: remapping.oldNodePath,
+                    ...(remapping.newJsxName === undefined
+                        ? {}
+                        : { oldJsxName: remapping.newJsxName }),
+                    ...(remapping.oldJsxName === undefined
+                        ? {}
+                        : { newJsxName: remapping.oldJsxName }),
                 })),
             },
         ];

package/dist/start-studio.js

@@ -99,7 +99,7 @@ const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEn
         configFile,
     });
     if (result.type === 'already-running') {
-        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `Already running on port ${result.port}.`);
+        renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `Already running at http://localhost:${result.port}`);
         const res = await (0, maybe_open_browser_1.maybeOpenBrowser)({
             browserArgs,
             browserFlag,

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.528",
+	"version": "4.0.530",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -23,7 +23,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.528",
+		"@remotion/studio-protocol": "4.0.530",
 		"@babel/types": "7.24.0",
 		"@babel/parser": "7.24.1",
 		"@svgr/core": "8.1.0",
@@ -31,12 +31,12 @@
 		"kiwi-schema": "0.5.0",
 		"semver": "7.5.3",
 		"zod": "4.5.4",
-		"remotion": "4.0.528",
+		"remotion": "4.0.530",
 		"recast": "0.23.21",
-		"@remotion/bundler": "4.0.528",
-		"@remotion/renderer": "4.0.528",
-		"@remotion/codemods": "4.0.528",
-		"@remotion/studio-shared": "4.0.528",
+		"@remotion/bundler": "4.0.530",
+		"@remotion/renderer": "4.0.530",
+		"@remotion/codemods": "4.0.530",
+		"@remotion/studio-shared": "4.0.530",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -44,7 +44,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.528",
+		"@remotion/eslint-config-internal": "4.0.530",
 		"eslint": "9.19.0",
 		"prettier": "3.8.1",
 		"@types/node": "20.12.14",