@remotion/studio-server 4.0.469 → 4.0.470

package/dist/codemods/update-keyframes/update-keyframes.js

@@ -35,11 +35,13 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateEffectKeyframes = exports.updateEffectKeyframesAst = exports.updateSequenceKeyframes = exports.updateSequenceKeyframesAst = void 0;
 const recast = __importStar(require("recast"));
+const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 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 update_nested_prop_1 = require("../update-nested-prop");
+const ensure_imports_and_frame_hook_1 = require("./ensure-imports-and-frame-hook");
 const b = recast.types.builders;
 const getSupportedCallArgument = (arg) => {
     if (arg === undefined ||
@@ -139,6 +141,10 @@ const createInterpolateExpression = ({ callee, input, extraArgs, keyframes, }) =
         ...extraArgs,
     ]);
 };
+const noIntroducedIdentifiers = {
+    calleeName: null,
+    needsFrameHook: false,
+};
 const addKeyframe = ({ expression, frame, value, }) => {
     const existing = getInterpolationExpression(expression);
     const newOutput = (0, update_nested_prop_1.parseValueExpression)(value);
@@ -149,12 +155,15 @@ const addKeyframe = ({ expression, frame, value, }) => {
             : existing.keyframes.map((keyframe, index) => index === existingIndex
                 ? { frame, output: newOutput, value }
                 : keyframe);
-        return createInterpolateExpression({
-            callee: existing.callee,
-            input: existing.input,
-            extraArgs: existing.extraArgs,
-            keyframes: nextKeyframes,
-        });
+        return {
+            expression: createInterpolateExpression({
+                callee: existing.callee,
+                input: existing.input,
+                extraArgs: existing.extraArgs,
+                keyframes: nextKeyframes,
+            }),
+            introduced: noIntroducedIdentifiers,
+        };
     }
     if (!(0, can_update_sequence_props_1.isStaticValue)(expression)) {
         throw new Error('Cannot add keyframe to computed expression');
@@ -167,15 +176,24 @@ const addKeyframe = ({ expression, frame, value, }) => {
             { frame: 0, output: staticOutput, value: staticValue },
             { frame, output: newOutput, value },
         ];
-    return createInterpolateExpression({
-        callee: getInterpolationCalleeForValues({
-            staticValue,
-            newValue: value,
-        }),
-        input: b.identifier('frame'),
-        extraArgs: [],
-        keyframes,
+    const callee = getInterpolationCalleeForValues({
+        staticValue,
+        newValue: value,
     });
+    return {
+        expression: createInterpolateExpression({
+            callee,
+            input: b.identifier('frame'),
+            extraArgs: [],
+            keyframes,
+        }),
+        introduced: {
+            calleeName: callee.type === 'Identifier'
+                ? callee.name
+                : null,
+            needsFrameHook: true,
+        },
+    };
 };
 const removeKeyframe = ({ expression, frame, }) => {
     const existing = getInterpolationExpression(expression);
@@ -202,7 +220,10 @@ const applyKeyframeOperation = ({ expression, operation, }) => {
             value: operation.value,
         });
     }
-    return removeKeyframe({ expression, frame: operation.frame });
+    return {
+        expression: removeKeyframe({ expression, frame: operation.frame }),
+        introduced: noIntroducedIdentifiers,
+    };
 };
 const getExpressionFromJsxAttribute = (attr) => {
     if (!attr.value) {
@@ -301,34 +322,55 @@ const updateSequenceKeyframesAst = ({ input, nodePath, updates, }) => {
     var _a;
     var _b;
     const ast = (0, parse_ast_1.parseAst)(input);
+    const jsxPath = (0, get_ast_node_path_1.getAstNodePath)(ast, nodePath);
     const node = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, nodePath);
-    if (!node) {
+    if (!node || !jsxPath) {
         throw new Error('Could not find a JSX element at the specified location to update keyframes');
     }
     if (!node.attributes) {
         node.attributes = [];
     }
+    const requiredImports = new Set();
+    let needsFrameHook = false;
     const oldValueStrings = [];
+    const newValueStrings = [];
     for (const update of updates) {
         const prop = getSequenceWritableProp({
             attributes: node.attributes,
             key: update.key,
         });
         oldValueStrings.push(recast.print(prop.expression).code);
-        prop.setExpression(applyKeyframeOperation({
+        const { expression: nextExpression, introduced } = applyKeyframeOperation({
             expression: prop.expression,
             operation: update.operation,
-        }));
+        });
+        newValueStrings.push(recast.print(nextExpression).code);
+        prop.setExpression(nextExpression);
+        if (introduced.calleeName) {
+            requiredImports.add(introduced.calleeName);
+        }
+        if (introduced.needsFrameHook) {
+            requiredImports.add('useCurrentFrame');
+            needsFrameHook = true;
+        }
     }
+    if (needsFrameHook) {
+        const fnPath = (0, ensure_imports_and_frame_hook_1.findEnclosingFunctionPath)(jsxPath);
+        if (fnPath) {
+            (0, ensure_imports_and_frame_hook_1.ensureUseCurrentFrameHook)(fnPath);
+        }
+    }
+    (0, ensure_imports_and_frame_hook_1.ensureRemotionImports)(ast, requiredImports);
     return {
         serialized: (0, parse_ast_1.serializeAst)(ast),
         oldValueStrings,
+        newValueStrings,
         logLine: (_b = (_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _b !== void 0 ? _b : 1,
     };
 };
 exports.updateSequenceKeyframesAst = updateSequenceKeyframesAst;
 const updateSequenceKeyframes = async ({ input, nodePath, updates, prettierConfigOverride, }) => {
-    const { serialized, oldValueStrings, logLine } = (0, exports.updateSequenceKeyframesAst)({
+    const { serialized, oldValueStrings, newValueStrings, logLine } = (0, exports.updateSequenceKeyframesAst)({
         input,
         nodePath,
         updates,
@@ -337,15 +379,16 @@ const updateSequenceKeyframes = async ({ input, nodePath, updates, prettierConfi
         input: serialized,
         prettierConfigOverride,
     });
-    return { output, formatted, oldValueStrings, logLine };
+    return { output, formatted, oldValueStrings, newValueStrings, logLine };
 };
 exports.updateSequenceKeyframes = updateSequenceKeyframes;
 const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, updates, }) => {
     var _a, _b;
     var _c, _d, _e;
     const ast = (0, parse_ast_1.parseAst)(input);
+    const jsxPath = (0, get_ast_node_path_1.getAstNodePath)(ast, sequenceNodePath);
     const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, sequenceNodePath);
-    if (!jsx) {
+    if (!jsx || !jsxPath) {
         throw new Error('Could not find a JSX element at the specified location to update effect keyframes');
     }
     const attr = (0, update_effect_props_1.findEffectsAttr)((_c = jsx.attributes) !== null && _c !== void 0 ? _c : []);
@@ -363,27 +406,47 @@ const updateEffectKeyframesAst = ({ input, sequenceNodePath, effectIndex, update
     }
     const objExpr = call.arguments[0];
     const oldValueStrings = [];
+    const newValueStrings = [];
+    const requiredImports = new Set();
+    let needsFrameHook = false;
     for (const update of updates) {
         const { prop } = findObjectProperty(objExpr, update.key);
         if (!prop) {
             throw new Error(`Cannot update keyframes: "${update.key}" is not set`);
         }
         oldValueStrings.push(recast.print(prop.value).code);
-        prop.value = applyKeyframeOperation({
+        const { expression: nextExpression, introduced } = applyKeyframeOperation({
             expression: prop.value,
             operation: update.operation,
         });
+        newValueStrings.push(recast.print(nextExpression).code);
+        prop.value = nextExpression;
+        if (introduced.calleeName) {
+            requiredImports.add(introduced.calleeName);
+        }
+        if (introduced.needsFrameHook) {
+            requiredImports.add('useCurrentFrame');
+            needsFrameHook = true;
+        }
     }
+    if (needsFrameHook) {
+        const fnPath = (0, ensure_imports_and_frame_hook_1.findEnclosingFunctionPath)(jsxPath);
+        if (fnPath) {
+            (0, ensure_imports_and_frame_hook_1.ensureUseCurrentFrameHook)(fnPath);
+        }
+    }
+    (0, ensure_imports_and_frame_hook_1.ensureRemotionImports)(ast, requiredImports);
     return {
         serialized: (0, parse_ast_1.serializeAst)(ast),
         oldValueStrings,
+        newValueStrings,
         logLine: (_e = (_d = (_a = 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,
         effectCallee,
     };
 };
 exports.updateEffectKeyframesAst = updateEffectKeyframesAst;
 const updateEffectKeyframes = async ({ input, sequenceNodePath, effectIndex, updates, prettierConfigOverride, }) => {
-    const { serialized, oldValueStrings, logLine, effectCallee } = (0, exports.updateEffectKeyframesAst)({
+    const { serialized, oldValueStrings, newValueStrings, logLine, effectCallee } = (0, exports.updateEffectKeyframesAst)({
         input,
         sequenceNodePath,
         effectIndex,
@@ -393,6 +456,13 @@ const updateEffectKeyframes = async ({ input, sequenceNodePath, effectIndex, upd
         input: serialized,
         prettierConfigOverride,
     });
-    return { output, formatted, oldValueStrings, logLine, effectCallee };
+    return {
+        output,
+        formatted,
+        oldValueStrings,
+        newValueStrings,
+        logLine,
+        effectCallee,
+    };
 };
 exports.updateEffectKeyframes = updateEffectKeyframes;

package/dist/codemods/update-sequence-props/update-sequence-props.d.ts

@@ -1,5 +1,4 @@
-import type { SequenceNodePath } from 'remotion';
-import type { SequenceSchema } from 'remotion';
+import type { SequenceNodePath, SequenceSchema } from 'remotion';
 export type SequencePropUpdate = {
     key: string;
     value: unknown;
@@ -9,6 +8,29 @@ export type RemovedProp = {
     key: string;
     valueString: string;
 };
+export type SequencePropsNodeUpdate = {
+    nodePath: SequenceNodePath;
+    updates: SequencePropUpdate[];
+    schema: SequenceSchema;
+};
+export type SequencePropsNodeUpdateResult = {
+    oldValueStrings: string[];
+    logLine: number;
+    removedProps: RemovedProp[];
+};
+type PrettierConfigOverride = Record<string, unknown> | null;
+type UpdateMultipleSequencePropsResult = {
+    output: string;
+    formatted: boolean;
+    results: SequencePropsNodeUpdateResult[];
+};
+type UpdateSequencePropsResult = {
+    output: string;
+    oldValueStrings: string[];
+    formatted: boolean;
+    logLine: number;
+    removedProps: RemovedProp[];
+};
 export declare const updateSequencePropsAst: ({ input, nodePath, updates, schema, }: {
     input: string;
     nodePath: SequenceNodePath;
@@ -20,16 +42,16 @@ export declare const updateSequencePropsAst: ({ input, nodePath, updates, schema
     logLine: number;
     removedProps: RemovedProp[];
 };
+export declare const updateMultipleSequenceProps: ({ input, changes, prettierConfigOverride, }: {
+    input: string;
+    changes: SequencePropsNodeUpdate[];
+    prettierConfigOverride: PrettierConfigOverride;
+}) => Promise<UpdateMultipleSequencePropsResult>;
 export declare const updateSequenceProps: ({ input, nodePath, updates, schema, prettierConfigOverride, }: {
     input: string;
     nodePath: SequenceNodePath;
     updates: SequencePropUpdate[];
     schema: SequenceSchema;
-    prettierConfigOverride?: Record<string, unknown> | null | undefined;
-}) => Promise<{
-    output: string;
-    oldValueStrings: string[];
-    formatted: boolean;
-    logLine: number;
-    removedProps: RemovedProp[];
-}>;
+    prettierConfigOverride: PrettierConfigOverride;
+}) => Promise<UpdateSequencePropsResult>;
+export {};

package/dist/codemods/update-sequence-props/update-sequence-props.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateSequenceProps = exports.updateSequencePropsAst = void 0;
+exports.updateSequenceProps = exports.updateMultipleSequenceProps = exports.updateSequencePropsAst = void 0;
 const recast = __importStar(require("recast"));
 const no_react_1 = require("remotion/no-react");
 const can_update_sequence_props_1 = require("../../preview-server/routes/can-update-sequence-props");
@@ -85,14 +85,9 @@ const snapshotTopLevelAttrs = (node) => {
     }
     return result;
 };
-const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
+const updateSequencePropsNode = ({ node, updates, schema, }) => {
     var _a, _b, _c;
     var _d, _e;
-    const ast = (0, parse_ast_1.parseAst)(input);
-    const node = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, nodePath);
-    if (!node) {
-        throw new Error('Could not find a JSX element at the specified line to update');
-    }
     const logLine = (_d = (_a = node.loc) === null || _a === void 0 ? void 0 : _a.start.line) !== null && _d !== void 0 ? _d : 1;
     const oldValueStrings = [];
     const initialAttrs = snapshotTopLevelAttrs(node);
@@ -194,6 +189,23 @@ const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
         }
         removedProps.push({ key: name, valueString });
     }
+    return {
+        oldValueStrings,
+        logLine,
+        removedProps,
+    };
+};
+const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const node = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, nodePath);
+    if (!node) {
+        throw new Error('Could not find a JSX element at the specified line to update');
+    }
+    const { oldValueStrings, logLine, removedProps } = updateSequencePropsNode({
+        node,
+        updates,
+        schema,
+    });
     return {
         serialized: (0, parse_ast_1.serializeAst)(ast),
         oldValueStrings,
@@ -202,6 +214,26 @@ const updateSequencePropsAst = ({ input, nodePath, updates, schema, }) => {
     };
 };
 exports.updateSequencePropsAst = updateSequencePropsAst;
+const updateMultipleSequenceProps = async ({ input, changes, prettierConfigOverride, }) => {
+    const ast = (0, parse_ast_1.parseAst)(input);
+    const results = changes.map(({ nodePath, updates, schema }) => {
+        const node = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, nodePath);
+        if (!node) {
+            throw new Error('Could not find a JSX element at the specified line to update');
+        }
+        return updateSequencePropsNode({ node, updates, schema });
+    });
+    const { output, formatted } = await (0, format_file_content_1.formatFileContent)({
+        input: (0, parse_ast_1.serializeAst)(ast),
+        prettierConfigOverride,
+    });
+    return {
+        output,
+        formatted,
+        results,
+    };
+};
+exports.updateMultipleSequenceProps = updateMultipleSequenceProps;
 const updateSequenceProps = async ({ input, nodePath, updates, schema, prettierConfigOverride, }) => {
     const { serialized, oldValueStrings, logLine, removedProps } = (0, exports.updateSequencePropsAst)({
         input,

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { ApiRoutes, CopyStillToClipboardRequest, getDefaultOutLocation, OpenInFi
 export type { AggregateRenderProgress, BundlingState, CopyingState, DownloadProgress, HotMiddlewareOptions, JobProgressCallback, ModuleMap, PackageManager, ProjectInfo, RenderingProgressInput, RenderJob, RenderJobWithCleanup, RequiredChromiumOptions, StitchingProgressInput, UiOpenGlOptions, } from '@remotion/studio-shared';
 import { AnsiDiff } from './ansi-diff';
 export declare const StudioServerInternals: {
-    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, experimentalClientSideRenderingEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, enableCrossSiteIsolation, askAIEnabled, forceNew, rspack, }: {
+    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, maxTimelineTracks, remotionRoot, keyboardShortcutsEnabled, experimentalClientSideRenderingEnabled, relativePublicDir, webpackOverride, poll, getRenderDefaults, getRenderQueue, numberOfAudioTags, queueMethods, previewEntry, gitSource, bufferStateDelayInMilliseconds, binariesDirectory, forceIPv4, audioLatencyHint, previewSampleRate, enableCrossSiteIsolation, askAIEnabled, forceNew, rspack, }: {
         browserArgs: string;
         browserFlag: string;
         logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -23,6 +23,7 @@ export declare const StudioServerInternals: {
         getRenderQueue: () => import("@remotion/studio-shared").RenderJob[];
         numberOfAudioTags: number;
         audioLatencyHint: AudioContextLatencyCategory | null;
+        previewSampleRate: number | null;
         enableCrossSiteIsolation: boolean;
         queueMethods: import("./preview-server/api-types").QueueMethods;
         previewEntry: string;

package/dist/preview-server/api-routes.js

@@ -1,18 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.allApiRoutes = void 0;
+const add_effect_keyframe_1 = require("./routes/add-effect-keyframe");
 const add_render_1 = require("./routes/add-render");
+const add_sequence_keyframe_1 = require("./routes/add-sequence-keyframe");
 const apply_codemod_1 = require("./routes/apply-codemod");
 const apply_visual_control_change_1 = require("./routes/apply-visual-control-change");
 const cancel_render_1 = require("./routes/cancel-render");
+const composition_component_info_1 = require("./routes/composition-component-info");
 const delete_effect_1 = require("./routes/delete-effect");
+const delete_effect_keyframe_1 = require("./routes/delete-effect-keyframe");
 const delete_jsx_node_1 = require("./routes/delete-jsx-node");
+const delete_sequence_keyframe_1 = require("./routes/delete-sequence-keyframe");
 const delete_static_file_1 = require("./routes/delete-static-file");
 const duplicate_jsx_node_1 = require("./routes/duplicate-jsx-node");
 const install_dependency_1 = require("./routes/install-dependency");
+const open_in_editor_1 = require("./routes/open-in-editor");
 const open_in_file_explorer_1 = require("./routes/open-in-file-explorer");
 const project_info_1 = require("./routes/project-info");
 const redo_1 = require("./routes/redo");
+const register_client_render_1 = require("./routes/register-client-render");
 const remove_render_1 = require("./routes/remove-render");
 const restart_studio_1 = require("./routes/restart-studio");
 const save_effect_props_1 = require("./routes/save-effect-props");
@@ -21,18 +28,23 @@ const subscribe_to_default_props_1 = require("./routes/subscribe-to-default-prop
 const subscribe_to_file_existence_1 = require("./routes/subscribe-to-file-existence");
 const subscribe_to_sequence_props_1 = require("./routes/subscribe-to-sequence-props");
 const undo_1 = require("./routes/undo");
+const unregister_client_render_1 = require("./routes/unregister-client-render");
 const unsubscribe_from_default_props_1 = require("./routes/unsubscribe-from-default-props");
 const unsubscribe_from_file_existence_1 = require("./routes/unsubscribe-from-file-existence");
 const unsubscribe_from_sequence_props_1 = require("./routes/unsubscribe-from-sequence-props");
 const update_available_1 = require("./routes/update-available");
 const update_default_props_1 = require("./routes/update-default-props");
 exports.allApiRoutes = {
+    '/api/composition-component-info': composition_component_info_1.compositionComponentInfoHandler,
     '/api/cancel': cancel_render_1.handleCancelRender,
     '/api/render': add_render_1.handleAddRender,
     '/api/unsubscribe-from-file-existence': unsubscribe_from_file_existence_1.unsubscribeFromFileExistence,
     '/api/subscribe-to-file-existence': subscribe_to_file_existence_1.subscribeToFileExistence,
     '/api/remove-render': remove_render_1.handleRemoveRender,
+    '/api/open-in-editor': open_in_editor_1.openInEditorHandler,
     '/api/open-in-file-explorer': open_in_file_explorer_1.handleOpenInFileExplorer,
+    '/api/register-client-render': register_client_render_1.registerClientRenderHandler,
+    '/api/unregister-client-render': unregister_client_render_1.unregisterClientRenderHandler,
     '/api/update-default-props': update_default_props_1.updateDefaultPropsHandler,
     '/api/apply-visual-control-change': apply_visual_control_change_1.applyVisualControlHandler,
     '/api/apply-codemod': apply_codemod_1.applyCodemodHandler,
@@ -42,6 +54,10 @@ exports.allApiRoutes = {
     '/api/unsubscribe-from-sequence-props': unsubscribe_from_sequence_props_1.unsubscribeFromSequenceProps,
     '/api/save-sequence-props': save_sequence_props_1.saveSequencePropsHandler,
     '/api/save-effect-props': save_effect_props_1.saveEffectPropsHandler,
+    '/api/delete-sequence-keyframe': delete_sequence_keyframe_1.deleteSequenceKeyframeHandler,
+    '/api/add-sequence-keyframe': add_sequence_keyframe_1.addSequenceKeyframeHandler,
+    '/api/delete-effect-keyframe': delete_effect_keyframe_1.deleteEffectKeyframeHandler,
+    '/api/add-effect-keyframe': add_effect_keyframe_1.addEffectKeyframeHandler,
     '/api/delete-effect': delete_effect_1.deleteEffectHandler,
     '/api/delete-jsx-node': delete_jsx_node_1.deleteJsxNodeHandler,
     '/api/duplicate-jsx-node': duplicate_jsx_node_1.duplicateJsxNodeHandler,

package/dist/preview-server/routes/add-effect-keyframe.d.ts

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

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

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addEffectKeyframeHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const studio_shared_1 = require("@remotion/studio-shared");
+const parse_ast_1 = require("../../codemods/parse-ast");
+const update_keyframes_1 = require("../../codemods/update-keyframes/update-keyframes");
+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_effect_props_1 = require("./can-update-effect-props");
+const can_update_sequence_props_1 = require("./can-update-sequence-props");
+const log_effect_update_1 = require("./log-updates/log-effect-update");
+const save_props_mutex_1 = require("./save-props-mutex");
+const addEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectIndex, key, frame, value, schema, clientId, }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[add-effect-keyframe] Received request for fileName="${fileName}" effectIndex=${effectIndex} key="${key}" frame=${frame}`);
+    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 parsedValue = JSON.parse(value);
+    const { output, oldValueStrings, newValueStrings, formatted, logLine, effectCallee, } = await (0, update_keyframes_1.updateEffectKeyframes)({
+        input: fileContents,
+        sequenceNodePath: sequenceNodePath.nodePath,
+        effectIndex,
+        updates: [
+            {
+                key,
+                operation: {
+                    type: 'add',
+                    frame,
+                    value: parsedValue,
+                },
+            },
+        ],
+    });
+    const oldValueString = oldValueStrings[0];
+    const newValueString = newValueStrings[0];
+    const undoPropChange = `${key} keyframe removed at frame ${frame}`;
+    const redoPropChange = `${key} keyframe added at frame ${frame}`;
+    (0, undo_stack_1.pushToUndoStack)({
+        filePath: absolutePath,
+        oldContents: fileContents,
+        newContents: null,
+        logLevel,
+        remotionRoot,
+        logLine,
+        description: {
+            undoMessage: `↩️  ${undoPropChange}`,
+            redoMessage: `↪️  ${redoPropChange}`,
+        },
+        entryType: 'effect-props',
+        suppressHmrOnFileRestore: true,
+    });
+    (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
+    (0, log_effect_update_1.logEffectUpdate)({
+        fileRelativeToRoot,
+        line: logLine,
+        effectName: effectCallee,
+        propKey: key,
+        oldValueString,
+        newValueString,
+        defaultValueString: null,
+        formatted,
+        logLevel,
+        removedProps: [],
+        addedProps: [],
+    });
+    (0, undo_stack_1.printUndoHint)(logLevel);
+    const ast = (0, parse_ast_1.parseAst)((0, node_fs_1.readFileSync)(absolutePath, 'utf-8'));
+    const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, sequenceNodePath.nodePath);
+    if (!jsx) {
+        return {
+            canUpdate: false,
+            effectIndex,
+            reason: 'not-found',
+        };
+    }
+    return (0, can_update_effect_props_1.computeEffectPropStatus)({
+        jsx,
+        effectIndex,
+        keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+    });
+});
+exports.addEffectKeyframeHandler = addEffectKeyframeHandler;

package/dist/preview-server/routes/add-sequence-keyframe.d.ts

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

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

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addSequenceKeyframeHandler = void 0;
+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 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_update_1 = require("./log-updates/log-update");
+const save_props_mutex_1 = require("./save-props-mutex");
+const addSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, value, schema, clientId }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[add-sequence-keyframe] Received request for fileName="${fileName}" key="${key}" frame=${frame}`);
+    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 parsedValue = JSON.parse(value);
+    const { output, oldValueStrings, newValueStrings, formatted, logLine } = await (0, update_keyframes_1.updateSequenceKeyframes)({
+        input: fileContents,
+        nodePath: nodePath.nodePath,
+        updates: [
+            {
+                key,
+                operation: {
+                    type: 'add',
+                    frame,
+                    value: parsedValue,
+                },
+            },
+        ],
+    });
+    const oldValueString = oldValueStrings[0];
+    const newValueString = newValueStrings[0];
+    const undoPropChange = `${key} keyframe removed at frame ${frame}`;
+    const redoPropChange = `${key} keyframe added at frame ${frame}`;
+    (0, undo_stack_1.pushToUndoStack)({
+        filePath: absolutePath,
+        oldContents: fileContents,
+        newContents: null,
+        logLevel,
+        remotionRoot,
+        logLine,
+        description: {
+            undoMessage: `↩️  ${undoPropChange}`,
+            redoMessage: `↪️  ${redoPropChange}`,
+        },
+        entryType: 'sequence-props',
+        suppressHmrOnFileRestore: true,
+    });
+    (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
+    (0, log_update_1.logUpdate)({
+        fileRelativeToRoot,
+        line: logLine,
+        key,
+        oldValueString,
+        newValueString,
+        defaultValueString: null,
+        formatted,
+        logLevel,
+        removedProps: [],
+        addedProps: [],
+    });
+    (0, undo_stack_1.printUndoHint)(logLevel);
+    const status = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
+        fileContents: output,
+        keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+        nodePath: nodePath.nodePath,
+        effects: [],
+    });
+    return {
+        canUpdate: true,
+        props: status.props,
+        results: [{ fileName, nodePath, props: status.props }],
+    };
+});
+exports.addSequenceKeyframeHandler = addSequenceKeyframeHandler;

package/dist/preview-server/routes/apply-codemod.js

@@ -68,6 +68,7 @@ const applyCodemodHandler = async ({ input: { codemod, dryRun, symbolicatedStack
             (0, undo_stack_1.pushToUndoStack)({
                 filePath,
                 oldContents: input,
+                newContents: null,
                 logLevel,
                 remotionRoot,
                 logLine: (_a = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalLineNumber) !== null && _a !== void 0 ? _a : 1,

package/dist/preview-server/routes/apply-visual-control-change.js

@@ -111,6 +111,7 @@ const applyVisualControlHandler = async ({ input: { fileName, changes }, remotio
     (0, undo_stack_1.pushToUndoStack)({
         filePath: absolutePath,
         oldContents: fileContents,
+        newContents: null,
         logLevel,
         remotionRoot,
         logLine,