@remotion/studio-server 4.0.508 → 4.0.509

package/dist/canvas-capture/generate-canvas-capture-composition.d.ts

@@ -0,0 +1,14 @@
+import type { CanvasCaptureData } from '@remotion/studio-shared';
+export declare const generateCanvasCaptureComposition: ({ componentName, compositionId, data, durationInFrames, fps, height, keyframeFps, videoFileName, videoHeight, videoWidth, width, }: {
+    readonly componentName: string;
+    readonly compositionId: string;
+    readonly data: CanvasCaptureData;
+    readonly durationInFrames: number;
+    readonly fps: number;
+    readonly height: number;
+    readonly keyframeFps: number;
+    readonly videoFileName: string;
+    readonly videoHeight: number;
+    readonly videoWidth: number;
+    readonly width: number;
+}) => Promise<string>;

package/dist/canvas-capture/generate-canvas-capture-composition.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCanvasCaptureComposition = void 0;
+const duplicate_composition_1 = require("../codemods/duplicate-composition");
+const customCursorRegex = /^\s*url\(/;
+const collapseMouseMovementsByFrame = ({ data, keyframeFps, }) => {
+    const movements = [];
+    for (const movement of data.mouseMovements) {
+        if (movement.canvasX === null || movement.canvasY === null) {
+            continue;
+        }
+        const framedMovement = {
+            ...movement,
+            frame: Math.ceil(movement.timeInSeconds * keyframeFps),
+        };
+        const previous = movements.at(-1);
+        if ((previous === null || previous === void 0 ? void 0 : previous.frame) === framedMovement.frame) {
+            movements[movements.length - 1] = framedMovement;
+        }
+        else {
+            movements.push(framedMovement);
+        }
+    }
+    return movements;
+};
+const getCursorName = (cursor) => {
+    var _a;
+    if (customCursorRegex.test(cursor)) {
+        return 'custom';
+    }
+    return ((_a = cursor.split(',').at(-1)) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase()) || 'default';
+};
+const serialize = (value) => JSON.stringify(value);
+const generateCanvasCaptureComposition = ({ componentName, compositionId, data, durationInFrames, fps, height, keyframeFps, videoFileName, videoHeight, videoWidth, width, }) => {
+    var _a;
+    const movements = collapseMouseMovementsByFrame({ data, keyframeFps });
+    if (movements.length === 0) {
+        throw new Error('The Canvas Capture does not contain cursor movements');
+    }
+    const cursorKeyframes = movements.reduce((keyframes, movement) => {
+        var _a;
+        const value = getCursorName(movement.cursor);
+        if (((_a = keyframes.at(-1)) === null || _a === void 0 ? void 0 : _a.value) !== value) {
+            keyframes.push({ frame: movement.frame, value });
+        }
+        return keyframes;
+    }, []);
+    const positionKeyframes = [];
+    for (const movement of movements) {
+        const previous = positionKeyframes.at(-1);
+        if (previous !== undefined && movement.frame - previous.frame > 1) {
+            positionKeyframes.push({
+                frame: movement.frame - 1,
+                value: previous.value,
+            });
+        }
+        positionKeyframes.push({
+            frame: movement.frame,
+            value: `${movement.canvasX}px ${movement.canvasY}px`,
+        });
+    }
+    const scaleKeyframes = [
+        { frame: 0, value: data.captureMetadata.density },
+        ...data.pointerClicks.map((click) => ({
+            frame: Math.ceil(click.timeInSeconds * keyframeFps),
+            value: click.type === 'pointer-down'
+                ? data.captureMetadata.density * 0.9
+                : data.captureMetadata.density,
+        })),
+    ].reduce((keyframes, keyframe) => {
+        var _a, _b;
+        if (((_a = keyframes.at(-1)) === null || _a === void 0 ? void 0 : _a.frame) === keyframe.frame) {
+            keyframes[keyframes.length - 1] = keyframe;
+        }
+        else if (((_b = keyframes.at(-1)) === null || _b === void 0 ? void 0 : _b.value) !== keyframe.value) {
+            keyframes.push(keyframe);
+        }
+        return keyframes;
+    }, []);
+    const customCursor = (_a = movements.find((movement) => customCursorRegex.test(movement.cursor))) === null || _a === void 0 ? void 0 : _a.cursor;
+    const cursorProp = cursorKeyframes.length === 1
+        ? `cursor=${serialize(cursorKeyframes[0].value)}`
+        : `cursor={interpolate(
+					frame,
+					${serialize(cursorKeyframes.map((keyframe) => keyframe.frame))},
+					${serialize(cursorKeyframes.map((keyframe) => keyframe.value))},
+					{
+						easing: Easing.step1,
+						extrapolateLeft: 'clamp',
+						extrapolateRight: 'clamp',
+					},
+				)}`;
+    const scale = scaleKeyframes.length === 1
+        ? serialize(scaleKeyframes[0].value)
+        : `interpolate(
+						frame,
+						${serialize(scaleKeyframes.map((keyframe) => keyframe.frame))},
+						${serialize(scaleKeyframes.map((keyframe) => keyframe.value))},
+						{
+							easing: Easing.step1,
+							extrapolateLeft: 'clamp',
+							extrapolateRight: 'clamp',
+						},
+					)`;
+    const translate = positionKeyframes.length === 1
+        ? serialize(positionKeyframes[0].value)
+        : `interpolate(
+						frame,
+						${serialize(positionKeyframes.map((keyframe) => keyframe.frame))},
+						${serialize(positionKeyframes.map((keyframe) => keyframe.value))},
+						{
+							extrapolateLeft: 'clamp',
+							extrapolateRight: 'clamp',
+						},
+					)`;
+    const previewComponentName = componentName.endsWith('Composition')
+        ? `${componentName.slice(0, -'Composition'.length)}Preview`
+        : `${componentName}Preview`;
+    return (0, duplicate_composition_1.formatOutput)(`import {MacOSCursor} from '@remotion/mac-cursors';
+import {Video} from '@remotion/media';
+import {
+	AbsoluteFill,
+	Composition,
+	Easing,
+	interpolate,
+	staticFile,
+	useCurrentFrame,
+} from 'remotion';
+
+export const ${previewComponentName} = () => {
+	const frame = useCurrentFrame();
+
+	return (
+		<AbsoluteFill
+			style={{
+				width: ${videoWidth},
+				height: ${videoHeight},
+			}}
+		>
+			<Video
+				src={staticFile(${serialize(videoFileName)})}
+				style={{
+					position: 'absolute',
+				}}
+			/>
+			<MacOSCursor
+				${cursorProp}
+${customCursor === undefined ? '' : `\t\t\t\tcustomCursor=${serialize(customCursor)}\n`}				style={{
+					position: 'absolute',
+					left: 0,
+					top: 0,
+					scale: ${scale},
+					translate: ${translate},
+				}}
+			/>
+		</AbsoluteFill>
+	);
+};
+
+export const ${componentName} = () => {
+	return (
+		<Composition
+			id=${serialize(compositionId)}
+			component={${previewComponentName}}
+			width={${width}}
+			height={${height}}
+			fps={${fps}}
+			durationInFrames={${durationInFrames}}
+		/>
+	);
+};
+`);
+};
+exports.generateCanvasCaptureComposition = generateCanvasCaptureComposition;

package/dist/codemods/delete-jsx-node.js

@@ -316,7 +316,7 @@ const deleteJsxNodes = async ({ input, nodePaths, prettierConfigOverride, }) =>
         input: finalFile,
         prettierConfigOverride,
     });
-    const nodePathRemappings = (0, get_node_path_remappings_1.getNodePathRemappings)({
+    const { nodePathRemappings } = (0, get_node_path_remappings_1.getNodePathRemappings)({
         ast,
         captured: capturedNodePaths,
         output,

package/dist/codemods/duplicate-composition.js

@@ -81,12 +81,14 @@ const parseAndApplyCodemod = ({ input, codeMod, }) => {
         });
     }
     if (codeMod.type === 'new-composition') {
-        (0, imports_1.ensureNamedImport)({
-            ast: newAst,
-            importedName: 'Composition',
-            sourcePath: 'remotion',
-            localName: 'Composition',
-        });
+        if (codeMod.canvasCapture === null) {
+            (0, imports_1.ensureNamedImport)({
+                ast: newAst,
+                importedName: 'Composition',
+                sourcePath: 'remotion',
+                localName: 'Composition',
+            });
+        }
         (0, imports_1.ensureNamedImport)({
             ast: newAst,
             importedName: codeMod.componentName,

package/dist/codemods/duplicate-jsx-node.js

@@ -303,7 +303,7 @@ const duplicateJsxNode = async ({ input, nodePath, prettierConfigOverride, }) =>
         input: finalFile,
         prettierConfigOverride,
     });
-    const nodePathRemappings = (0, get_node_path_remappings_1.getNodePathRemappings)({
+    const { nodePathRemappings } = (0, get_node_path_remappings_1.getNodePathRemappings)({
         ast,
         captured: capturedNodePaths,
         output,

package/dist/codemods/get-node-path-remappings.d.ts

@@ -10,4 +10,7 @@ export declare const getNodePathRemappings: ({ ast, captured, output, }: {
     ast: File;
     captured: CapturedJsxNodePath[];
     output: string;
-}) => SequenceNodePathRemapping[];
+}) => {
+    nodePathRemappings: SequenceNodePathRemapping[];
+    finalNodePathByNode: Map<JSXOpeningElement, SequenceNodePath>;
+};

package/dist/codemods/get-node-path-remappings.js

@@ -74,7 +74,7 @@ const getNodePathRemappings = ({ ast, captured, output, }) => {
     for (let i = 0; i < nodesAfterMutation.length; i++) {
         finalNodePathByNode.set(nodesAfterMutation[i], finalNodePaths[i]);
     }
-    return captured.flatMap(({ node, nodePath }) => {
+    const nodePathRemappings = captured.flatMap(({ node, nodePath }) => {
         var _a;
         const newNodePath = (_a = finalNodePathByNode.get(node)) !== null && _a !== void 0 ? _a : null;
         if (newNodePath !== null &&
@@ -83,5 +83,6 @@ const getNodePathRemappings = ({ ast, captured, output, }) => {
         }
         return [{ oldNodePath: nodePath, newNodePath }];
     });
+    return { finalNodePathByNode, nodePathRemappings };
 };
 exports.getNodePathRemappings = getNodePathRemappings;

package/dist/codemods/recast-mods.js

@@ -164,6 +164,19 @@ const jsxAttributeWithExpression = (name, expression) => ({
     },
 });
 const newCompositionElement = (transformation) => {
+    if (transformation.canvasCapture !== null) {
+        return {
+            type: 'JSXElement',
+            openingElement: {
+                type: 'JSXOpeningElement',
+                name: jsxId(transformation.componentName),
+                attributes: [],
+                selfClosing: true,
+            },
+            closingElement: null,
+            children: [],
+        };
+    }
     return {
         type: 'JSXElement',
         openingElement: {

package/dist/codemods/reorder-sequence.js

@@ -101,7 +101,7 @@ const reorderSequence = async ({ input, sourceNodePath, targetNodePath, position
         input: finalFile,
         prettierConfigOverride,
     });
-    const nodePathRemappings = (0, get_node_path_remappings_1.getNodePathRemappings)({
+    const { nodePathRemappings } = (0, get_node_path_remappings_1.getNodePathRemappings)({
         ast,
         captured: capturedNodePaths,
         output,

package/dist/codemods/split-jsx-sequence.js

@@ -342,7 +342,7 @@ const splitJsxSequence = async ({ input, nodePath, splitFrame, prettierConfigOve
         input: finalFile,
         prettierConfigOverride,
     });
-    const nodePathRemappings = (0, get_node_path_remappings_1.getNodePathRemappings)({
+    const { nodePathRemappings } = (0, get_node_path_remappings_1.getNodePathRemappings)({
         ast,
         captured: capturedNodePaths,
         output,

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

@@ -334,18 +334,16 @@ const getInlineOptionsFromExtraArgs = (extraArgs) => {
     }
     return existingOptions;
 };
-const normalizeEasingAfterAddingKeyframe = ({ extraArgs, previousSegmentCount, nextSegmentCount, insertedKeyframeIndex, nextKeyframeCount, }) => {
-    const options = getInlineOptionsFromExtraArgs(extraArgs);
+const normalizeEasingAfterAddingKeyframe = ({ extraArgs, previousSegmentCount, nextSegmentCount, insertedKeyframeIndex, nextKeyframeCount, defaultEasing, }) => {
+    var _a, _b;
+    const options = (_a = getInlineOptionsFromExtraArgs(extraArgs)) !== null && _a !== void 0 ? _a : (extraArgs.length === 0 ? createEmptyOptionsExpression() : null);
     if (!options) {
         return { extraArgs, needsEasingImport: false };
     }
-    const easing = getExistingEasingArrayOrNull({
+    const easing = (_b = getExistingEasingArrayOrNull({
         options,
         segmentCount: previousSegmentCount,
-    });
-    if (easing === null) {
-        return { extraArgs, needsEasingImport: false };
-    }
+    })) !== null && _b !== void 0 ? _b : Array.from({ length: previousSegmentCount }, () => defaultEasing);
     if (easing.length < nextSegmentCount) {
         const isSplittingExistingSegment = insertedKeyframeIndex > 0 &&
             insertedKeyframeIndex < nextKeyframeCount - 1;
@@ -353,15 +351,16 @@ const normalizeEasingAfterAddingKeyframe = ({ extraArgs, previousSegmentCount, n
             ? Math.min(insertedKeyframeIndex - 1, easing.length - 1)
             : null;
         easing.splice(insertedKeyframeIndex, 0, easingIndexToDuplicate === null
-            ? studio_shared_1.LINEAR_KEYFRAME_EASING
+            ? defaultEasing
             : easing[easingIndexToDuplicate]);
     }
     while (easing.length < nextSegmentCount) {
-        easing.push(studio_shared_1.LINEAR_KEYFRAME_EASING);
+        easing.push(defaultEasing);
     }
+    const needsEasingImport = setEasingOption({ options, easing });
     return {
         extraArgs: getExtraArgsWithOptions({ extraArgs, options }),
-        needsEasingImport: setEasingOption({ options, easing }),
+        needsEasingImport,
     };
 };
 const getEasingIndexToRemove = ({ removedKeyframeIndex, keyframeCountBeforeRemoval, }) => {
@@ -586,6 +585,9 @@ const addKeyframe = ({ expression, key, frame, value, schema, videoConfigValues,
     const existing = getInterpolationExpression(expression, videoConfigValues);
     const newOutput = (0, update_nested_prop_1.parseValueExpression)(value);
     if (existing) {
+        const defaultEasing = (0, studio_shared_1.isSchemaFieldHoldOnly)({ schema, key })
+            ? studio_shared_1.HOLD_KEYFRAME_EASING
+            : studio_shared_1.LINEAR_KEYFRAME_EASING;
         const existingCalleeName = existing.callee.type === 'Identifier'
             ? existing.callee.name
             : 'interpolate';
@@ -619,6 +621,7 @@ const addKeyframe = ({ expression, key, frame, value, schema, videoConfigValues,
                     .sort((first, second) => first.frame - second.frame)
                     .findIndex((keyframe) => keyframe.frame === frame),
                 nextKeyframeCount: nextKeyframes.length,
+                defaultEasing,
             })
             : { extraArgs: existing.extraArgs, needsEasingImport: false };
         return {
@@ -804,6 +807,10 @@ const applyKeyframeOperation = ({ expression, key, operation, schema, videoConfi
         };
     }
     if (operation.type === 'easing') {
+        if ((0, studio_shared_1.isSchemaFieldHoldOnly)({ schema, key }) &&
+            operation.easing.type !== 'step1') {
+            throw new Error(`Cannot update easing: "${key}" only supports Easing.step1`);
+        }
         const updated = updateKeyframeEasing({
             expression,
             segmentIndex: operation.segmentIndex,

package/dist/helpers/resolve-composition-component.d.ts

@@ -1,4 +1,5 @@
 import { type InsertableCompositionElement, type InsertableCompositionElementPosition, type SequenceNodePathRemapping } from '@remotion/studio-shared';
+import type { SequenceNodePath } from 'remotion';
 export type ResolvedCompositionComponent = {
     source: string;
     line: number;
@@ -44,4 +45,5 @@ export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositi
     formatted: boolean;
     logLine: number;
     nodePathRemappings: SequenceNodePathRemapping[];
+    insertedNodePath: SequenceNodePath | null;
 }>;

package/dist/helpers/resolve-composition-component.js

@@ -1427,7 +1427,7 @@ const createInsertableJsxElement = ({ addPositionStyleToComponent, ast, destinat
     throw new Error('Unsupported element type');
 };
 const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile, compositionId, element, from, prettierConfigOverride, wrapInSequence = null, }) => {
-    var _a;
+    var _a, _b;
     const location = await (0, exports.resolveCompositionComponentWithFile)({
         remotionRoot,
         compositionFile,
@@ -1495,17 +1495,19 @@ const insertJsxElementIntoComposition = async ({ remotionRoot, compositionFile,
         input: finalFile,
         prettierConfigOverride,
     });
-    const nodePathRemappings = (0, get_node_path_remappings_1.getNodePathRemappings)({
+    const { finalNodePathByNode, nodePathRemappings } = (0, get_node_path_remappings_1.getNodePathRemappings)({
         ast,
         captured: capturedNodePaths,
         output,
     });
+    const insertedNodePath = (_b = finalNodePathByNode.get(finalElementToInsert.openingElement)) !== null && _b !== void 0 ? _b : null;
     return {
         fileName: location.fileName,
         source: location.source,
         oldContents: input,
         output,
         formatted,
+        insertedNodePath,
         logLine,
         nodePathRemappings,
     };

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export type { RemotionSkillsScope, RemotionSkillsStatus, } from './detect-outdat
 export type { RemotionSkillName } from './remotion-skill-names';
 export { detectOutdatedRemotionSkills, parseRemotionSkillVersion, remotionSkillNames, };
 export declare const StudioServerInternals: {
-    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, remotionRoot, relativePublicDir, bundlerOverride, rspackOverride, webpackOverride, poll, getRenderDefaults, getRenderQueue, getNumberOfAudioTags, queueMethods, previewEntry, gitSource, binariesDirectory, forceIPv4, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, forceNew, rspack, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }: {
+    startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, remotionRoot, relativePublicDir, bundlerOverride, rspackOverride, webpackOverride, poll, getRenderDefaults, getRenderQueue, getNumberOfAudioTags, queueMethods, previewEntry, gitSource, binariesDirectory, forceIPv4, getAudioLatencyHint, getExperimentalKeepAudioContextAlive, getPreviewSampleRate, enableCrossSiteIsolation, forceNew, rspack, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }: {
         browserArgs: string;
         browserFlag: string;
         logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -26,6 +26,7 @@ export declare const StudioServerInternals: {
         getRenderQueue: () => import("@remotion/studio-shared").RenderJob[];
         getNumberOfAudioTags: () => number;
         getAudioLatencyHint: () => AudioContextLatencyCategory | null;
+        getExperimentalKeepAudioContextAlive: () => boolean;
         getPreviewSampleRate: () => number | null;
         enableCrossSiteIsolation: boolean;
         queueMethods: import("./preview-server/api-types").QueueMethods;

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

@@ -7,6 +7,7 @@ exports.applyCodemodHandler = exports.getCodemodLogMessage = void 0;
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const renderer_1 = require("@remotion/renderer");
+const generate_canvas_capture_composition_1 = require("../../canvas-capture/generate-canvas-capture-composition");
 const apply_codemod_to_file_1 = require("../../codemods/apply-codemod-to-file");
 const duplicate_composition_1 = require("../../codemods/duplicate-composition");
 const simple_diff_1 = require("../../codemods/simple-diff");
@@ -16,10 +17,25 @@ 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 formatNewCompositionFile = (componentName) => {
+const formatNewCompositionFile = (codemod) => {
+    if (codemod.canvasCapture !== null) {
+        return (0, generate_canvas_capture_composition_1.generateCanvasCaptureComposition)({
+            componentName: codemod.componentName,
+            compositionId: codemod.newId,
+            data: codemod.canvasCapture.data,
+            durationInFrames: codemod.newDurationInFrames,
+            fps: codemod.newFps,
+            height: codemod.newHeight,
+            keyframeFps: codemod.canvasCapture.keyframeFps,
+            videoFileName: codemod.canvasCapture.videoFileName,
+            videoHeight: codemod.canvasCapture.videoHeight,
+            videoWidth: codemod.canvasCapture.videoWidth,
+            width: codemod.newWidth,
+        });
+    }
     return (0, duplicate_composition_1.formatOutput)(`import React from 'react';
 
-export const ${componentName}: React.FC = () => {
+export const ${codemod.componentName}: React.FC = () => {
 	return null;
 };
 `);
@@ -200,7 +216,7 @@ const applyCodemodHandler = ({ input: { codemod, dryRun, symbolicatedStack }, lo
                     if (componentFilePath === null) {
                         throw new Error('Could not determine the new component file path');
                     }
-                    componentFileContents = await formatNewCompositionFile(codemod.componentName);
+                    componentFileContents = await formatNewCompositionFile(codemod);
                     snapshots.push({
                         filePath: componentFilePath,
                         oldContents: null,

package/dist/preview-server/routes/insert-jsx-element.js

@@ -159,7 +159,7 @@ const insertJsxElementHandler = ({ input: { compositionFile, compositionId, elem
         }
         const elementLabel = getElementLabel(element);
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-jsx-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.type}"`);
-        const { fileName, source, oldContents, output, formatted, logLine, nodePathRemappings, } = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
+        const { fileName, source, oldContents, output, formatted, insertedNodePath, logLine, nodePathRemappings, } = await (0, resolve_composition_component_1.insertJsxElementIntoComposition)({
             remotionRoot,
             compositionFile,
             compositionId,
@@ -174,6 +174,9 @@ const insertJsxElementHandler = ({ input: { compositionFile, compositionId, elem
                 restoredNodePaths: [],
             },
         ]);
+        if (insertedNodePath === null) {
+            renderer_1.RenderInternals.Log.warn({ indent: false, logLevel }, 'Could not determine the inserted JSX element node path. Skipping automatic selection.');
+        }
         (0, undo_stack_1.pushToUndoStack)({
             filePath: fileName,
             oldContents,
@@ -209,6 +212,9 @@ const insertJsxElementHandler = ({ input: { compositionFile, compositionId, elem
         (0, undo_stack_1.printUndoHint)(logLevel);
         return {
             success: true,
+            insertedNodePath: insertedNodePath === null
+                ? null
+                : { absolutePath: fileName, nodePath: insertedNodePath },
             nodePathMutation,
         };
     }

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

@@ -27,6 +27,15 @@ const stringifySequencePropEditValue = (value) => {
     }
     return JSON.stringify(value);
 };
+const stringifySequencePropSourceEdit = (sourceEdit, fallbackValue) => {
+    if ((sourceEdit === null || sourceEdit === void 0 ? void 0 : sourceEdit.type) !== 'clipboard-param') {
+        return stringifySequencePropEditValue(fallbackValue);
+    }
+    if (sourceEdit.param.type === 'static') {
+        return stringifySequencePropEditValue(sourceEdit.param.value);
+    }
+    return `${sourceEdit.param.interpolationFunction}(frame, ${JSON.stringify(sourceEdit.param.keyframes.map((keyframe) => keyframe.frame))}, ${JSON.stringify(sourceEdit.param.keyframes.map((keyframe) => keyframe.value))})`;
+};
 const groupBy = (items, getKey) => {
     var _a;
     const groups = new Map();
@@ -39,7 +48,7 @@ const groupBy = (items, getKey) => {
     return [...groups.values()];
 };
 const convertSequencePropEditToCodemodChange = (edit) => {
-    var _a;
+    var _a, _b;
     return {
         nodePath: edit.nodePath.nodePath,
         updates: [
@@ -48,6 +57,9 @@ const convertSequencePropEditToCodemodChange = (edit) => {
                 value: edit.value,
                 defaultValue: edit.defaultValue,
                 googleFont: ((_a = edit.sourceEdit) === null || _a === void 0 ? void 0 : _a.type) === 'google-font' ? edit.sourceEdit.font : null,
+                clipboardParam: ((_b = edit.sourceEdit) === null || _b === void 0 ? void 0 : _b.type) === 'clipboard-param'
+                    ? edit.sourceEdit.param
+                    : null,
             },
         ],
         schema: edit.schema,
@@ -98,7 +110,7 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
             nodePath: edit.nodePath,
             key: edit.key,
             value: parsedValue,
-            valueString: stringifySequencePropEditValue(parsedValue),
+            valueString: stringifySequencePropSourceEdit(edit.sourceEdit, parsedValue),
             defaultValue: parsedDefaultValue,
             defaultValueString: parsedDefaultValue !== null
                 ? JSON.stringify(parsedDefaultValue)
@@ -179,6 +191,7 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     const snapshots = [];
     const outputByPath = new Map();
     const resultByIndex = new Map();
+    const updatedNodePaths = new Map();
     const sequenceKeyframeLogs = [];
     const captionPatchLogs = [];
     const effectKeyframeLogs = [];
@@ -204,7 +217,9 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
                     logLine: result.logLine,
                     removedProps: result.removedProps,
                     formatted,
+                    newNodePath: result.newNodePath,
                 });
+                updatedNodePaths.set(`${absolutePath}:${JSON.stringify(edit.nodePath.nodePath)}`, result.newNodePath);
             }
         }
         for (const captionPatchRequest of group.captionPatches) {
@@ -456,6 +471,7 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
         ])).values(),
     ];
     const results = statusTargets.map((target) => {
+        var _a;
         const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
             fileName: target.fileName,
@@ -469,7 +485,7 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
             fileContents: output,
             keys: (0, studio_shared_1.getAllSchemaKeys)(target.schema),
             assetKeys: (0, studio_shared_1.getAssetSchemaKeys)(target.schema),
-            nodePath: target.nodePath.nodePath,
+            nodePath: (_a = updatedNodePaths.get(`${absolutePath}:${JSON.stringify(target.nodePath.nodePath)}`)) !== null && _a !== void 0 ? _a : target.nodePath.nodePath,
             componentIdentity: null,
             effects: [],
             videoConfigValues: target.nodePath.videoConfigValues,

package/dist/preview-server/start-server.d.ts

@@ -37,6 +37,7 @@ export declare const startServer: (options: {
     binariesDirectory: string | null;
     forceIPv4: boolean;
     getAudioLatencyHint: () => AudioContextLatencyCategory | null;
+    getExperimentalKeepAudioContextAlive: () => boolean;
     getPreviewSampleRate: () => number | null;
     enableCrossSiteIsolation: boolean;
     forceNew: boolean;

package/dist/preview-server/start-server.js

@@ -99,6 +99,7 @@ const startServer = async (options) => {
                 gitSource: options.gitSource,
                 binariesDirectory: options.binariesDirectory,
                 getAudioLatencyHint: options.getAudioLatencyHint,
+                getExperimentalKeepAudioContextAlive: options.getExperimentalKeepAudioContextAlive,
                 getPreviewSampleRate: options.getPreviewSampleRate,
                 enableCrossSiteIsolation: options.enableCrossSiteIsolation,
                 getStudioRuntimeConfig: options.getStudioRuntimeConfig,

package/dist/routes.d.ts

@@ -3,7 +3,7 @@ import type { DefaultEditor } from '@remotion/renderer';
 import type { GitSource, RenderDefaults, RenderJob, StudioRuntimeConfig } from '@remotion/studio-shared';
 import type { QueueMethods } from './preview-server/api-types';
 import type { LiveEventsServer } from './preview-server/live-events';
-export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }: {
+export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getExperimentalKeepAudioContextAlive, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }: {
     staticHash: string;
     staticHashPrefix: string;
     outputHash: string;
@@ -24,6 +24,7 @@ export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash,
     gitSource: GitSource | null;
     binariesDirectory: string | null;
     getAudioLatencyHint: () => AudioContextLatencyCategory | null;
+    getExperimentalKeepAudioContextAlive: () => boolean;
     getPreviewSampleRate: () => number | null;
     enableCrossSiteIsolation: boolean;
     getStudioRuntimeConfig: () => StudioRuntimeConfig;

package/dist/routes.js

@@ -84,7 +84,7 @@ const handleRemotionConfig = (response, remotionRoot) => {
     response.end(JSON.stringify(body));
     return Promise.resolve();
 };
-const handleFallback = async ({ remotionRoot, hash, response, request, getCurrentInputProps, getEnvVariables, publicDir, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, getAudioLatencyHint, getPreviewSampleRate, gitSource, logLevel, enableCrossSiteIsolation, getStudioRuntimeConfig, getDefaultEditor, }) => {
+const handleFallback = async ({ remotionRoot, hash, response, request, getCurrentInputProps, getEnvVariables, publicDir, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, getAudioLatencyHint, getExperimentalKeepAudioContextAlive, getPreviewSampleRate, gitSource, logLevel, enableCrossSiteIsolation, getStudioRuntimeConfig, getDefaultEditor, }) => {
     var _a, _b;
     const acceptsHtml = ((_a = request.headers.accept) !== null && _a !== void 0 ? _a : '').includes('text/html');
     if (request.method === 'GET' && acceptsHtml) {
@@ -149,6 +149,7 @@ const handleFallback = async ({ remotionRoot, hash, response, request, getCurren
         logLevel,
         mode: 'dev',
         audioLatencyHint: (_b = getAudioLatencyHint()) !== null && _b !== void 0 ? _b : 'playback',
+        experimentalKeepAudioContextAlive: getExperimentalKeepAudioContextAlive(),
         sampleRate: getPreviewSampleRate(),
         studioRuntimeConfig: getStudioRuntimeConfig(),
     }));
@@ -253,7 +254,7 @@ const handleBeep = (_, response) => {
     readStream.pipe(response);
     return Promise.resolve();
 };
-const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }) => {
+const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getExperimentalKeepAudioContextAlive, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }) => {
     const url = new URL(request.url, 'http://localhost');
     if (url.pathname === '/api/file-source') {
         return handleFileSource({
@@ -397,6 +398,7 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
         gitSource,
         logLevel,
         getAudioLatencyHint,
+        getExperimentalKeepAudioContextAlive,
         getPreviewSampleRate,
         enableCrossSiteIsolation,
         getStudioRuntimeConfig,

package/dist/start-studio.d.ts

@@ -7,7 +7,7 @@ export type StartStudioResult = {
 } | {
     type: 'already-running';
 };
-export declare const startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, remotionRoot, relativePublicDir, bundlerOverride, rspackOverride, webpackOverride, poll, getRenderDefaults, getRenderQueue, getNumberOfAudioTags, queueMethods, previewEntry, gitSource, binariesDirectory, forceIPv4, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, forceNew, rspack, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }: {
+export declare const startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, remotionRoot, relativePublicDir, bundlerOverride, rspackOverride, webpackOverride, poll, getRenderDefaults, getRenderQueue, getNumberOfAudioTags, queueMethods, previewEntry, gitSource, binariesDirectory, forceIPv4, getAudioLatencyHint, getExperimentalKeepAudioContextAlive, getPreviewSampleRate, enableCrossSiteIsolation, forceNew, rspack, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }: {
     browserArgs: string;
     browserFlag: string;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -26,6 +26,7 @@ export declare const startStudio: ({ browserArgs, browserFlag, shouldOpenBrowser
     getRenderQueue: () => RenderJob[];
     getNumberOfAudioTags: () => number;
     getAudioLatencyHint: () => AudioContextLatencyCategory | null;
+    getExperimentalKeepAudioContextAlive: () => boolean;
     getPreviewSampleRate: () => number | null;
     enableCrossSiteIsolation: boolean;
     queueMethods: QueueMethods;

package/dist/start-studio.js

@@ -19,7 +19,7 @@ const public_folder_1 = require("./preview-server/public-folder");
 const start_server_1 = require("./preview-server/start-server");
 const server_ready_1 = require("./server-ready");
 const watch_root_file_1 = require("./watch-root-file");
-const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, remotionRoot, relativePublicDir, bundlerOverride, rspackOverride, webpackOverride, poll, getRenderDefaults, getRenderQueue, getNumberOfAudioTags, queueMethods, previewEntry, gitSource, binariesDirectory, forceIPv4, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, forceNew, rspack, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }) => {
+const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEntryPath, logLevel, getCurrentInputProps, getEnvVariables, desiredPort, remotionRoot, relativePublicDir, bundlerOverride, rspackOverride, webpackOverride, poll, getRenderDefaults, getRenderQueue, getNumberOfAudioTags, queueMethods, previewEntry, gitSource, binariesDirectory, forceIPv4, getAudioLatencyHint, getExperimentalKeepAudioContextAlive, getPreviewSampleRate, enableCrossSiteIsolation, forceNew, rspack, getStudioRuntimeConfig, getDefaultCodingAgent, getDefaultEditor, configFile, }) => {
     try {
         if (typeof Bun === 'undefined') {
             process.title = 'node (npx remotion studio)';
@@ -88,6 +88,7 @@ const startStudio = async ({ browserArgs, browserFlag, shouldOpenBrowser, fullEn
         binariesDirectory,
         forceIPv4,
         getAudioLatencyHint,
+        getExperimentalKeepAudioContextAlive,
         getPreviewSampleRate,
         enableCrossSiteIsolation,
         forceNew,

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.508",
+	"version": "4.0.509",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -23,7 +23,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.508",
+		"@remotion/studio-protocol": "4.0.509",
 		"@babel/types": "7.24.0",
 		"@babel/parser": "7.24.1",
 		"@svgr/core": "8.1.0",
@@ -32,12 +32,12 @@
 		"semver": "7.5.3",
 		"zod": "4.4.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.508",
+		"remotion": "4.0.509",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.508",
-		"@remotion/renderer": "4.0.508",
-		"@remotion/studio-codemods": "4.0.508",
-		"@remotion/studio-shared": "4.0.508",
+		"@remotion/bundler": "4.0.509",
+		"@remotion/renderer": "4.0.509",
+		"@remotion/studio-codemods": "4.0.509",
+		"@remotion/studio-shared": "4.0.509",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -45,7 +45,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.508",
+		"@remotion/eslint-config-internal": "4.0.509",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"