@remotion/studio-server 4.0.485 → 4.0.487

package/dist/preview-server/routes/save-sequence-props.js

@@ -4,15 +4,41 @@ exports.saveSequencePropsHandler = exports.shouldSuppressHmrForSequencePropEdits
 const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
+const update_keyframes_1 = require("../../codemods/update-keyframes/update-keyframes");
 const update_sequence_props_1 = require("../../codemods/update-sequence-props/update-sequence-props");
 const file_watcher_1 = require("../../file-watcher");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const undo_stack_1 = require("../undo-stack");
 const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
 const can_update_sequence_props_1 = require("./can-update-sequence-props");
+const log_effect_update_1 = require("./log-updates/log-effect-update");
 const log_update_1 = require("./log-updates/log-update");
 const source_file_write_queue_1 = require("./source-file-write-queue");
+const parseSequencePropEditValue = (value) => {
+    if (value.type === 'undefined') {
+        return undefined;
+    }
+    return JSON.parse(value.serialized);
+};
+const stringifySequencePropEditValue = (value) => {
+    if (value === undefined) {
+        return 'undefined';
+    }
+    return JSON.stringify(value);
+};
+const groupBy = (items, getKey) => {
+    var _a;
+    const groups = new Map();
+    for (const item of items) {
+        const key = getKey(item);
+        const group = (_a = groups.get(key)) !== null && _a !== void 0 ? _a : [];
+        group.push(item);
+        groups.set(key, group);
+    }
+    return [...groups.values()];
+};
 const convertSequencePropEditToCodemodChange = (edit) => {
+    var _a;
     return {
         nodePath: edit.nodePath.nodePath,
         updates: [
@@ -20,6 +46,7 @@ const convertSequencePropEditToCodemodChange = (edit) => {
                 key: edit.key,
                 value: edit.value,
                 defaultValue: edit.defaultValue,
+                googleFont: ((_a = edit.sourceEdit) === null || _a === void 0 ? void 0 : _a.type) === 'google-font' ? edit.sourceEdit.font : null,
             },
         ],
         schema: edit.schema,
@@ -27,18 +54,21 @@ const convertSequencePropEditToCodemodChange = (edit) => {
 };
 exports.convertSequencePropEditToCodemodChange = convertSequencePropEditToCodemodChange;
 const shouldSuppressHmrForSequencePropEdits = (edits) => {
-    return edits.every((edit) => edit.key !== 'showInTimeline');
+    return edits.every((edit) => edit.key !== 'showInTimeline' &&
+        (edit.sourceEdit === null || edit.sourceEdit === undefined));
 };
 exports.shouldSuppressHmrForSequencePropEdits = shouldSuppressHmrForSequencePropEdits;
-const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLabel }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
-    var _a;
-    if (edits.length === 0) {
+const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceKeyframes: [], effectKeyframes: [] }, clientId, undoLabel, redoLabel, }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a, _b, _c;
+    const totalKeyframeMoves = movedKeyframes.sequenceKeyframes.length +
+        movedKeyframes.effectKeyframes.length;
+    if (edits.length === 0 && totalKeyframeMoves === 0) {
         throw new Error('No sequence prop edits to save');
     }
-    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-sequence-props] Received request with ${edits.length} edit(s)`);
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-sequence-props] Received request with ${edits.length} edit(s) and ${totalKeyframeMoves} moved keyframe(s)`);
     const editGroups = new Map();
     for (const [index, edit] of edits.entries()) {
-        const parsedValue = JSON.parse(edit.value);
+        const parsedValue = parseSequencePropEditValue(edit.value);
         const parsedDefaultValue = edit.defaultValue !== null ? JSON.parse(edit.defaultValue) : null;
         const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
@@ -48,6 +78,8 @@ const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLab
         const group = (_a = editGroups.get(absolutePath)) !== null && _a !== void 0 ? _a : {
             fileRelativeToRoot,
             edits: [],
+            sequenceKeyframes: [],
+            effectKeyframes: [],
         };
         group.edits.push({
             index,
@@ -55,42 +87,165 @@ const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLab
             nodePath: edit.nodePath,
             key: edit.key,
             value: parsedValue,
-            valueString: JSON.stringify(parsedValue),
+            valueString: stringifySequencePropEditValue(parsedValue),
             defaultValue: parsedDefaultValue,
             defaultValueString: parsedDefaultValue !== null
                 ? JSON.stringify(parsedDefaultValue)
                 : null,
             schema: edit.schema,
+            sourceEdit: edit.sourceEdit,
         });
         editGroups.set(absolutePath, group);
     }
+    for (const [index, keyframe,] of movedKeyframes.sequenceKeyframes.entries()) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: keyframe.fileName,
+            action: 'modify',
+        });
+        const group = (_b = editGroups.get(absolutePath)) !== null && _b !== void 0 ? _b : {
+            fileRelativeToRoot,
+            edits: [],
+            sequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        group.sequenceKeyframes.push({ ...keyframe, index });
+        editGroups.set(absolutePath, group);
+    }
+    for (const [index, keyframe] of movedKeyframes.effectKeyframes.entries()) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: keyframe.fileName,
+            action: 'modify',
+        });
+        const group = (_c = editGroups.get(absolutePath)) !== null && _c !== void 0 ? _c : {
+            fileRelativeToRoot,
+            edits: [],
+            sequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        group.effectKeyframes.push({ ...keyframe, index });
+        editGroups.set(absolutePath, group);
+    }
     const snapshots = [];
     const outputByPath = new Map();
     const resultByIndex = new Map();
+    const sequenceKeyframeLogs = [];
+    const effectKeyframeLogs = [];
     for (const [absolutePath, group] of editGroups) {
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
-        const { output, formatted, results: updateResults, } = await (0, update_sequence_props_1.updateMultipleSequenceProps)({
-            input: fileContents,
-            changes: group.edits.map(exports.convertSequencePropEditToCodemodChange),
-            prettierConfigOverride: null,
-        });
-        const [{ logLine: firstLogLine }] = updateResults;
+        let output = fileContents;
+        let firstLogLine = Number.POSITIVE_INFINITY;
+        if (group.edits.length > 0) {
+            const { output: sequencePropsOutput, formatted, results: updateResults, } = await (0, update_sequence_props_1.updateMultipleSequenceProps)({
+                input: output,
+                changes: group.edits.map(exports.convertSequencePropEditToCodemodChange),
+                prettierConfigOverride: null,
+            });
+            output = sequencePropsOutput;
+            const firstUpdate = updateResults[0];
+            if (firstUpdate) {
+                firstLogLine = Math.min(firstLogLine, firstUpdate.logLine);
+            }
+            for (const [resultIndex, result] of updateResults.entries()) {
+                const edit = group.edits[resultIndex];
+                resultByIndex.set(edit.index, {
+                    oldValueString: result.oldValueStrings[0],
+                    logLine: result.logLine,
+                    removedProps: result.removedProps,
+                    formatted,
+                });
+            }
+        }
+        for (const keyframeGroup of groupBy(group.sequenceKeyframes, (keyframe) => JSON.stringify(keyframe.nodePath.nodePath))) {
+            const [firstSequenceKeyframe] = keyframeGroup;
+            if (!firstSequenceKeyframe) {
+                continue;
+            }
+            const updates = groupBy(keyframeGroup, (keyframe) => keyframe.key).map((keyframes) => {
+                const [firstMove] = keyframes;
+                if (!firstMove) {
+                    throw new Error('Expected keyframe');
+                }
+                return {
+                    key: firstMove.key,
+                    operation: {
+                        type: 'move',
+                        moves: keyframes.map((keyframe) => ({
+                            fromFrame: keyframe.fromFrame,
+                            toFrame: keyframe.toFrame,
+                        })),
+                    },
+                };
+            });
+            const result = await (0, update_keyframes_1.updateSequenceKeyframes)({
+                input: output,
+                nodePath: firstSequenceKeyframe.nodePath.nodePath,
+                schema: firstSequenceKeyframe.schema,
+                updates,
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [updateIndex, update] of updates.entries()) {
+                sequenceKeyframeLogs.push({
+                    fileRelativeToRoot: group.fileRelativeToRoot,
+                    line: result.logLine,
+                    key: update.key,
+                    oldValueString: result.oldValueStrings[updateIndex],
+                    newValueString: result.newValueStrings[updateIndex],
+                    formatted: result.formatted,
+                });
+            }
+        }
+        for (const keyframeGroup of groupBy(group.effectKeyframes, (keyframe) => `${JSON.stringify(keyframe.sequenceNodePath.nodePath)}:${keyframe.effectIndex}`)) {
+            const [firstEffectKeyframe] = keyframeGroup;
+            if (!firstEffectKeyframe) {
+                continue;
+            }
+            const updates = groupBy(keyframeGroup, (keyframe) => keyframe.key).map((keyframes) => {
+                const [firstMove] = keyframes;
+                if (!firstMove) {
+                    throw new Error('Expected keyframe');
+                }
+                return {
+                    key: firstMove.key,
+                    operation: {
+                        type: 'move',
+                        moves: keyframes.map((keyframe) => ({
+                            fromFrame: keyframe.fromFrame,
+                            toFrame: keyframe.toFrame,
+                        })),
+                    },
+                };
+            });
+            const result = await (0, update_keyframes_1.updateEffectKeyframes)({
+                input: output,
+                sequenceNodePath: firstEffectKeyframe.sequenceNodePath.nodePath,
+                effectIndex: firstEffectKeyframe.effectIndex,
+                schema: firstEffectKeyframe.schema,
+                updates,
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [updateIndex, update] of updates.entries()) {
+                effectKeyframeLogs.push({
+                    fileRelativeToRoot: group.fileRelativeToRoot,
+                    line: result.logLine,
+                    effectName: result.effectCallee,
+                    propKey: update.key,
+                    oldValueString: result.oldValueStrings[updateIndex],
+                    newValueString: result.newValueStrings[updateIndex],
+                    formatted: result.formatted,
+                });
+            }
+        }
         outputByPath.set(absolutePath, output);
         snapshots.push({
             filePath: absolutePath,
             oldContents: fileContents,
             newContents: output,
-            logLine: firstLogLine,
+            logLine: Number.isFinite(firstLogLine) ? firstLogLine : 1,
         });
-        for (const [resultIndex, result] of updateResults.entries()) {
-            const edit = group.edits[resultIndex];
-            resultByIndex.set(edit.index, {
-                oldValueString: result.oldValueStrings[0],
-                logLine: result.logLine,
-                removedProps: result.removedProps,
-                formatted,
-            });
-        }
     }
     const undoMessage = `↩️  ${undoLabel}`;
     const redoMessage = `↪️  ${redoLabel}`;
@@ -130,6 +285,35 @@ const saveSequencePropsHandler = ({ input: { edits, clientId, undoLabel, redoLab
             });
         }
     }
+    for (const log of sequenceKeyframeLogs) {
+        (0, log_update_1.logUpdate)({
+            fileRelativeToRoot: log.fileRelativeToRoot,
+            line: log.line,
+            key: log.key,
+            oldValueString: log.oldValueString,
+            newValueString: log.newValueString,
+            defaultValueString: null,
+            formatted: log.formatted,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
+    for (const log of effectKeyframeLogs) {
+        (0, log_effect_update_1.logEffectUpdate)({
+            fileRelativeToRoot: log.fileRelativeToRoot,
+            line: log.line,
+            effectName: log.effectName,
+            propKey: log.propKey,
+            oldValueString: log.oldValueString,
+            newValueString: log.newValueString,
+            defaultValueString: null,
+            formatted: log.formatted,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
     (0, undo_stack_1.printUndoHint)(logLevel);
     const results = edits.map((edit) => {
         const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({

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' | 'duplicate-effect' | 'paste-effects' | 'reorder-effect' | 'reorder-sequence' | 'delete-jsx-node' | 'duplicate-jsx-node' | 'split-jsx-sequence' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'new-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' | 'split-jsx-sequence' | 'insert-jsx-element' | 'delete-composition' | 'rename-composition' | 'new-composition' | 'duplicate-composition' | 'move-composition-to-folder' | 'new-folder' | 'delete-folder' | 'rename-folder';
 type UndoEntrySnapshot = {
     filePath: string;
     oldContents: string | null;
@@ -59,6 +59,10 @@ type UndoEntry = {
     entryType: 'new-composition';
 } | {
     entryType: 'duplicate-composition';
+} | {
+    entryType: 'move-composition-to-folder';
+} | {
+    entryType: 'new-folder';
 } | {
     entryType: 'delete-folder';
 } | {

package/dist/start-studio.js

@@ -11,6 +11,7 @@ const renderer_1 = require("@remotion/renderer");
 const file_watcher_1 = require("./file-watcher");
 const get_network_address_1 = require("./get-network-address");
 const maybe_open_browser_1 = require("./maybe-open-browser");
+const open_browser_shortcut_1 = require("./open-browser-shortcut");
 const close_and_restart_1 = require("./preview-server/close-and-restart");
 const get_absolute_public_dir_1 = require("./preview-server/get-absolute-public-dir");
 const live_events_1 = require("./preview-server/live-events");
@@ -120,14 +121,26 @@ const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEn
     }
     (0, server_ready_1.printServerReadyComment)('Server ready', logLevel);
     renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, 'Building...');
-    await (0, maybe_open_browser_1.maybeOpenBrowser)({
+    const studioUrl = `http://localhost:${port}`;
+    const openBrowserShortcut = (0, open_browser_shortcut_1.registerOpenBrowserShortcut)({
         browserArgs,
         browserFlag,
-        shouldOpenBrowser,
-        url: `http://localhost:${port}`,
+        url: studioUrl,
         logLevel,
     });
-    await (0, close_and_restart_1.noOpUntilRestart)();
+    try {
+        await (0, maybe_open_browser_1.maybeOpenBrowser)({
+            browserArgs,
+            browserFlag,
+            shouldOpenBrowser,
+            url: studioUrl,
+            logLevel,
+        });
+        await (0, close_and_restart_1.noOpUntilRestart)();
+    }
+    finally {
+        openBrowserShortcut.cleanup();
+    }
     renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, 'Closing server to restart...');
     await liveEventsServer.closeConnections();
     cleanupLiveEventsListener();

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