@remotion/studio-server 4.0.489 → 4.0.491

package/dist/preview-server/routes/can-update-sequence-props.d.ts

@@ -1,12 +1,13 @@
 import type { Expression, File, JSXElement, JSXOpeningElement } from '@babel/types';
 import type { SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
-import type { CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, SequenceNodePath } from 'remotion';
+import type { CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, SequenceNodePath, VideoConfigValues } from 'remotion';
+import { type VideoConfigIdentifierValues } from '../../helpers/video-config-values';
 type StaticValueOptions = {
     allowSpecialValues: boolean;
 };
 export declare const isStaticValue: (node: Expression, options?: StaticValueOptions) => boolean;
 export declare const extractStaticValue: (node: Expression, options?: StaticValueOptions) => unknown;
-export declare const getComputedStatus: (node: Expression, ast: File) => CanUpdateSequencePropStatus;
+export declare const getComputedStatus: (node: Expression, ast: File, videoConfigValues: VideoConfigIdentifierValues) => CanUpdateSequencePropStatus;
 export declare const findJsxElementPathAtNodePath: (ast: File, nodePath: SequenceNodePath) => import("ast-types/lib/node-path").NodePath<N, V> | null;
 export declare const findJsxElementAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXOpeningElement | null;
 export declare const findJsxElementNodeAtNodePath: (ast: File, nodePath: SequenceNodePath) => JSXElement | null;
@@ -22,22 +23,24 @@ export declare const hasJsxChildrenAttribute: (jsxElement: JSXOpeningElement) =>
 export declare const getStaticJsxTextContent: (jsxElement: JSXElement) => StaticJsxTextContent | null;
 export declare const findNodePathForJsxElement: (ast: File, target: JSXOpeningElement) => SequenceNodePath | null;
 export declare const lineColumnToNodePath: (ast: File, targetLine: number) => SequenceNodePath | null;
-export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, componentIdentity, keys, effects, }: {
+export declare const computeSequencePropsStatusFromContent: ({ fileContents, nodePath, componentIdentity, keys, effects, videoConfigValues, }: {
     fileContents: string;
     nodePath: SequenceNodePath;
     componentIdentity: string | null;
     keys: string[];
     effects: string[][];
+    videoConfigValues: VideoConfigValues | null;
 }) => CanUpdateSequencePropsResponseTrue;
-export declare const computeSequencePropsStatus: ({ fileName, nodePath, componentIdentity, keys, effects, remotionRoot, }: {
+export declare const computeSequencePropsStatus: ({ fileName, nodePath, componentIdentity, keys, effects, remotionRoot, videoConfigValues, }: {
     fileName: string;
     nodePath: SequenceNodePath;
     componentIdentity: string | null;
     keys: string[];
     effects: string[][];
     remotionRoot: string;
+    videoConfigValues: VideoConfigValues | null;
 }) => CanUpdateSequencePropsResponseTrue;
-export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName, line, componentIdentity, keys, effects, remotionRoot, logLevel, }: {
+export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName, line, componentIdentity, keys, effects, remotionRoot, logLevel, videoConfigValues, }: {
     fileName: string;
     line: number;
     componentIdentity: string | null;
@@ -45,5 +48,6 @@ export declare const computeSequencePropsStatusFromFilenameByLine: ({ fileName,
     effects: string[][];
     remotionRoot: string;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    videoConfigValues: VideoConfigValues;
 }) => SubscribeToSequencePropsResponse;
 export {};

package/dist/preview-server/routes/can-update-sequence-props.js

@@ -44,12 +44,17 @@ const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
 const import_agnostic_node_path_1 = require("../../helpers/import-agnostic-node-path");
 const parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const video_config_numeric_expression_1 = require("../../helpers/video-config-numeric-expression");
+const video_config_values_1 = require("../../helpers/video-config-values");
 const jsx_component_identity_1 = require("../jsx-component-identity");
 const jsx_element_not_found_at_location_error_1 = require("../jsx-element-not-found-at-location-error");
 const can_update_effect_props_1 = require("./can-update-effect-props");
-const staticStatus = (codeValue) => ({
+const staticStatus = (codeValue, numericExpression) => ({
     status: 'static',
     codeValue,
+    ...(numericExpression === null || numericExpression.type === 'literal'
+        ? {}
+        : { numericExpression }),
 });
 const computedStatus = () => ({
     status: 'computed',
@@ -201,6 +206,18 @@ const getExtrapolateType = (node) => {
     }
     return null;
 };
+const getInterpolateOutputOption = (node) => {
+    if (node.type === 'StringLiteral') {
+        if (node.value === 'linear' || node.value === 'perceptual-scale') {
+            return node.value;
+        }
+        return null;
+    }
+    if (node.type === 'TSAsExpression') {
+        return getInterpolateOutputOption(node.expression);
+    }
+    return null;
+};
 const getKeyframeEasing = (node) => (0, parse_keyframe_easing_expression_1.parseKeyframeEasingExpression)(node);
 const getKeyframeEasingArray = ({ easingNode, segments, }) => {
     if (segments === 0) {
@@ -248,6 +265,7 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
         easing: Array.from({ length: segments }, () => studio_shared_1.LINEAR_KEYFRAME_EASING),
         clamping: defaultClamping,
         posterize: undefined,
+        output: undefined,
     };
     const optionsArg = callExpression.arguments[3];
     if (!optionsArg) {
@@ -259,6 +277,7 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
     let { easing } = defaults;
     let { clamping } = defaults;
     let posterize;
+    let { output } = defaults;
     for (const property of optionsArg.properties) {
         if (property.type !== 'ObjectProperty' || property.computed) {
             return null;
@@ -307,17 +326,29 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
             posterize = parsedPosterize;
             continue;
         }
+        if (key === 'output') {
+            if (interpolationFunction === 'interpolateColors') {
+                return null;
+            }
+            const parsedOutput = getInterpolateOutputOption(value);
+            if (!parsedOutput) {
+                return null;
+            }
+            output = parsedOutput;
+            continue;
+        }
         return null;
     }
     return {
         easing,
         clamping,
         posterize,
+        output,
     };
 };
-const getInterpolationKeyframes = (node, ast) => {
+const getInterpolationKeyframes = (node, ast, videoConfigValues) => {
     if (node.type === 'TSAsExpression') {
-        return getInterpolationKeyframes(node.expression, ast);
+        return getInterpolationKeyframes(node.expression, ast, videoConfigValues);
     }
     if (node.type === 'CallExpression' &&
         node.callee.type === 'Identifier' &&
@@ -326,7 +357,7 @@ const getInterpolationKeyframes = (node, ast) => {
         node.arguments[0].type !== 'ArgumentPlaceholder' &&
         node.arguments[0].type !== 'JSXNamespacedName' &&
         node.arguments[0].type !== 'SpreadElement') {
-        const interpolation = getInterpolationKeyframes(node.arguments[0], ast);
+        const interpolation = getInterpolationKeyframes(node.arguments[0], ast, videoConfigValues);
         if (!interpolation) {
             return undefined;
         }
@@ -372,13 +403,17 @@ const getInterpolationKeyframes = (node, ast) => {
             outputElement.type === 'SpreadElement') {
             return undefined;
         }
-        const frame = getNumericValue(inputElement);
-        if (frame === null || !(0, exports.isStaticValue)(outputElement)) {
+        const frameExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
+            node: inputElement,
+            videoConfigValues,
+        });
+        if (frameExpression === null || !(0, exports.isStaticValue)(outputElement)) {
             return undefined;
         }
         keyframes.push({
-            frame,
+            frame: frameExpression.value,
             value: (0, exports.extractStaticValue)(outputElement),
+            ...(frameExpression.type === 'literal' ? {} : { frameExpression }),
         });
     }
     if (keyframes.length === 0) {
@@ -394,6 +429,7 @@ const getInterpolationKeyframes = (node, ast) => {
         easing: metadata.easing,
         clamping: metadata.clamping,
         posterize: metadata.posterize,
+        output: metadata.output,
     };
 };
 const isUseCurrentFrameCall = (node) => {
@@ -428,8 +464,8 @@ const isCurrentFrameIdentifier = (node, ast) => {
     });
     return hasUseCurrentFrameDeclaration && !hasOtherDeclaration;
 };
-const getComputedStatus = (node, ast) => {
-    const interpolation = getInterpolationKeyframes(node, ast);
+const getComputedStatus = (node, ast, videoConfigValues) => {
+    const interpolation = getInterpolationKeyframes(node, ast, videoConfigValues);
     if (!interpolation) {
         return computedStatus();
     }
@@ -440,10 +476,11 @@ const getComputedStatus = (node, ast) => {
         easing: interpolation.easing,
         clamping: interpolation.clamping,
         posterize: interpolation.posterize,
+        output: interpolation.output,
     };
 };
 exports.getComputedStatus = getComputedStatus;
-const getPropsStatus = (jsxElement, ast) => {
+const getPropsStatus = (jsxElement, ast, videoConfigValues) => {
     const props = {};
     for (const attr of jsxElement.attributes) {
         if (attr.type === 'JSXSpreadAttribute') {
@@ -458,11 +495,11 @@ const getPropsStatus = (jsxElement, ast) => {
         }
         const { value } = attr;
         if (!value) {
-            props[name] = staticStatus(true);
+            props[name] = staticStatus(true, null);
             continue;
         }
         if (value.type === 'StringLiteral') {
-            props[name] = staticStatus(value.value);
+            props[name] = staticStatus(value.value, null);
             continue;
         }
         if (value.type === 'JSXExpressionContainer') {
@@ -472,10 +509,16 @@ const getPropsStatus = (jsxElement, ast) => {
                 continue;
             }
             if (!(0, exports.isStaticValue)(expression)) {
-                props[name] = (0, exports.getComputedStatus)(expression, ast);
+                const numericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
+                    node: expression,
+                    videoConfigValues,
+                });
+                props[name] = numericExpression
+                    ? staticStatus(numericExpression.value, numericExpression)
+                    : (0, exports.getComputedStatus)(expression, ast, videoConfigValues);
                 continue;
             }
-            props[name] = staticStatus((0, exports.extractStaticValue)(expression));
+            props[name] = staticStatus((0, exports.extractStaticValue)(expression), null);
             continue;
         }
         props[name] = computedStatus();
@@ -623,13 +666,13 @@ const validateStyleValue = (childKey, value) => {
     }
     return true;
 };
-const getNestedPropStatus = (jsxElement, ast, parentKey, childKey) => {
+const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfigValues, }) => {
     const attr = jsxElement.attributes.find((a) => a.type !== 'JSXSpreadAttribute' &&
         a.name.type !== 'JSXNamespacedName' &&
         a.name.name === parentKey);
     if (!attr || !attr.value) {
         // Parent attribute doesn't exist, nested prop can be added
-        return staticStatus(undefined);
+        return staticStatus(undefined, null);
     }
     if (attr.value.type !== 'JSXExpressionContainer') {
         return computedStatus();
@@ -646,34 +689,41 @@ const getNestedPropStatus = (jsxElement, ast, parentKey, childKey) => {
             (p.key.type === 'StringLiteral' && p.key.value === childKey)));
     if (!prop) {
         // Property not set in the object, can be added
-        return staticStatus(undefined);
+        return staticStatus(undefined, null);
     }
     const propValue = prop.value;
     if (!(0, exports.isStaticValue)(propValue)) {
-        return (0, exports.getComputedStatus)(propValue, ast);
+        const numericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
+            node: propValue,
+            videoConfigValues,
+        });
+        return numericExpression
+            ? staticStatus(numericExpression.value, numericExpression)
+            : (0, exports.getComputedStatus)(propValue, ast, videoConfigValues);
     }
     const propStatus = (0, exports.extractStaticValue)(propValue);
     if (!validateStyleValue(childKey, propStatus)) {
         return computedStatus();
     }
-    return staticStatus(propStatus);
+    return staticStatus(propStatus, null);
 };
-const computeEffectsForJsx = ({ ast, jsxElement, effects, }) => {
+const computeEffectsForJsx = ({ ast, jsxElement, effects, videoConfigValues, }) => {
     return effects.map((effect, effectIndex) => (0, can_update_effect_props_1.computeEffectPropStatus)({
         ast,
         jsx: jsxElement,
         effectIndex,
         keys: effect,
+        videoConfigValues,
     }));
 };
-const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys, }) => {
-    const allProps = getPropsStatus(jsxElement, ast);
+const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys, videoConfigValues, }) => {
+    const allProps = getPropsStatus(jsxElement, ast, videoConfigValues);
     const filteredProps = {};
     for (const key of keys) {
         if (key === 'children') {
             const staticChildrenAttribute = (0, exports.getStaticJsxChildrenAttribute)(jsxElement);
             if (staticChildrenAttribute) {
-                filteredProps[key] = staticStatus(staticChildrenAttribute.value);
+                filteredProps[key] = staticStatus(staticChildrenAttribute.value, null);
                 continue;
             }
             if ((0, exports.hasJsxChildrenAttribute)(jsxElement)) {
@@ -682,26 +732,36 @@ const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys,
             }
             const staticTextContent = (0, exports.getStaticJsxTextContent)(jsxElementNode);
             filteredProps[key] = staticTextContent
-                ? staticStatus(staticTextContent.value)
+                ? staticStatus(staticTextContent.value, null)
                 : computedStatus();
             continue;
         }
         const dotIndex = key.indexOf('.');
         if (dotIndex !== -1) {
-            filteredProps[key] = getNestedPropStatus(jsxElement, ast, key.slice(0, dotIndex), key.slice(dotIndex + 1));
+            filteredProps[key] = getNestedPropStatus({
+                jsxElement,
+                ast,
+                parentKey: key.slice(0, dotIndex),
+                childKey: key.slice(dotIndex + 1),
+                videoConfigValues,
+            });
         }
         else if (key in allProps) {
             filteredProps[key] = allProps[key];
         }
         else {
-            filteredProps[key] = staticStatus(undefined);
+            filteredProps[key] = staticStatus(undefined, null);
         }
     }
     return filteredProps;
 };
-const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, componentIdentity, keys, effects, }) => {
+const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, componentIdentity, keys, effects, videoConfigValues, }) => {
     var _a;
     const ast = (0, parse_ast_1.parseAst)(fileContents);
+    const videoConfigIdentifierValues = (0, video_config_values_1.getVideoConfigIdentifierValues)({
+        ast,
+        videoConfigValues,
+    });
     const jsxElementNode = (0, exports.findJsxElementNodeAtNodePath)(ast, nodePath);
     const jsxElement = (_a = jsxElementNode === null || jsxElementNode === void 0 ? void 0 : jsxElementNode.openingElement) !== null && _a !== void 0 ? _a : null;
     if (!jsxElement || !jsxElementNode) {
@@ -718,8 +778,14 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, compone
         jsxElementNode,
         ast,
         keys,
+        videoConfigValues: videoConfigIdentifierValues,
+    });
+    const effectsStatuses = computeEffectsForJsx({
+        ast,
+        jsxElement,
+        effects,
+        videoConfigValues: videoConfigIdentifierValues,
     });
-    const effectsStatuses = computeEffectsForJsx({ ast, jsxElement, effects });
     return {
         canUpdate: true,
         props: filteredProps,
@@ -727,7 +793,7 @@ const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, compone
     };
 };
 exports.computeSequencePropsStatusFromContent = computeSequencePropsStatusFromContent;
-const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, keys, effects, remotionRoot, }) => {
+const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, keys, effects, remotionRoot, videoConfigValues, }) => {
     const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
         remotionRoot,
         fileName,
@@ -740,10 +806,11 @@ const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, key
         componentIdentity,
         keys,
         effects,
+        videoConfigValues,
     });
 };
 exports.computeSequencePropsStatus = computeSequencePropsStatus;
-const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, componentIdentity, keys, effects, remotionRoot, logLevel, }) => {
+const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, componentIdentity, keys, effects, remotionRoot, logLevel, videoConfigValues, }) => {
     try {
         const { absolutePath } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
@@ -770,12 +837,14 @@ const computeSequencePropsStatusFromFilenameByLine = ({ fileName, line, componen
                 keys,
                 effects,
                 remotionRoot,
+                videoConfigValues,
             }),
             nodePath: {
                 absolutePath,
                 nodePath: resolvedNodePath,
                 sequenceKeys: keys,
                 effectKeys: effects,
+                videoConfigValues,
             },
             success: true,
         };

package/dist/preview-server/routes/delete-keyframes.js

@@ -8,6 +8,7 @@ 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 video_config_values_1 = require("../../helpers/video-config-values");
 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");
@@ -95,6 +96,7 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
             const result = await (0, update_keyframes_1.updateSequenceKeyframes)({
                 input: output,
                 nodePath: firstSequenceKeyframe.nodePath.nodePath,
+                videoConfigValues: firstSequenceKeyframe.nodePath.videoConfigValues,
                 updates: keyframeGroup.map((keyframe) => ({
                     key: keyframe.key,
                     operation: {
@@ -125,6 +127,7 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
                 input: output,
                 sequenceNodePath: firstEffectKeyframe.sequenceNodePath.nodePath,
                 effectIndex: firstEffectKeyframe.effectIndex,
+                videoConfigValues: firstEffectKeyframe.sequenceNodePath.videoConfigValues,
                 updates: keyframeGroup.map((keyframe) => ({
                     key: keyframe.key,
                     operation: {
@@ -217,6 +220,7 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
             nodePath: keyframe.nodePath.nodePath,
             componentIdentity: null,
             effects: [],
+            videoConfigValues: keyframe.nodePath.videoConfigValues,
         });
         return {
             fileName: keyframe.fileName,
@@ -246,6 +250,10 @@ const deleteKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, r
             jsx,
             effectIndex: keyframe.effectIndex,
             keys: (0, studio_shared_1.getAllSchemaKeys)(keyframe.schema),
+            videoConfigValues: (0, video_config_values_1.getVideoConfigIdentifierValues)({
+                ast,
+                videoConfigValues: keyframe.sequenceNodePath.videoConfigValues,
+            }),
         });
     });
     return { sequenceResults, effectResults };

package/dist/preview-server/routes/install-dependency.d.ts

@@ -1,3 +1,4 @@
 import { type InstallPackageRequest, type InstallPackageResponse } from '@remotion/studio-shared';
 import type { ApiHandler } from '../api-types';
+export declare const getPackageInstallSpec: (packageName: string) => string;
 export declare const handleInstallPackage: ApiHandler<InstallPackageRequest, InstallPackageResponse>;

package/dist/preview-server/routes/install-dependency.js

@@ -1,24 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleInstallPackage = void 0;
+exports.handleInstallPackage = exports.getPackageInstallSpec = void 0;
 const node_child_process_1 = require("node:child_process");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
 const version_1 = require("remotion/version");
 const install_command_1 = require("../../helpers/install-command");
 const get_package_manager_1 = require("../get-package-manager");
-const extraPackageNames = studio_shared_1.extraPackages.map((pkg) => pkg.name);
-const isExtraPackage = (packageName) => {
-    return extraPackageNames.includes(packageName);
-};
 const getExtraPackageVersion = (packageName) => {
     const pkg = studio_shared_1.extraPackages.find((p) => p.name === packageName);
     return pkg ? pkg.version : null;
 };
+const getPackageInstallSpec = (packageName) => {
+    const extraVersion = getExtraPackageVersion(packageName);
+    if (extraVersion) {
+        return `${packageName}@${extraVersion}`;
+    }
+    if (packageName === 'remotion' || packageName.startsWith('@remotion/')) {
+        return `${packageName}@${version_1.VERSION}`;
+    }
+    return packageName;
+};
+exports.getPackageInstallSpec = getPackageInstallSpec;
 const handleInstallPackage = async ({ logLevel, remotionRoot, input: { packageNames } }) => {
     for (const packageName of packageNames) {
-        if (!packageName.startsWith('@remotion/') && !isExtraPackage(packageName)) {
-            return Promise.reject(new Error(`Package ${packageName} is not allowed to be installed.`));
+        if (!(0, studio_shared_1.isValidPackageName)(packageName)) {
+            return Promise.reject(new Error(`Package name ${JSON.stringify(packageName)} is invalid.`));
         }
     }
     const manager = (0, get_package_manager_1.getPackageManager)({
@@ -32,14 +39,9 @@ const handleInstallPackage = async ({ logLevel, remotionRoot, input: { packageNa
             .map((p) => p.path)
             .join(', ')}). Install dependencies using your favorite manager!`);
     }
-    // Build packages with appropriate versions
-    const packagesWithVersions = packageNames.map((pkg) => {
-        const extraVersion = getExtraPackageVersion(pkg);
-        if (extraVersion) {
-            return `${pkg}@${extraVersion}`;
-        }
-        return `${pkg}@${version_1.VERSION}`;
-    });
+    // Remotion packages must match the Studio version and catalogued extra
+    // packages use their supported version. Other packages resolve normally.
+    const packagesWithVersions = packageNames.map(exports.getPackageInstallSpec);
     const command = (0, install_command_1.getInstallCommand)({
         manager: manager.manager,
         packages: packagesWithVersions,

package/dist/preview-server/routes/move-keyframes.js

@@ -111,6 +111,7 @@ const moveKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, rem
                 input: output,
                 nodePath: firstSequenceKeyframe.nodePath.nodePath,
                 schema: firstSequenceKeyframe.schema,
+                videoConfigValues: firstSequenceKeyframe.nodePath.videoConfigValues,
                 updates,
             });
             output = result.output;
@@ -152,6 +153,7 @@ const moveKeyframes = async ({ sequenceKeyframes, effectKeyframes, clientId, rem
                 sequenceNodePath: firstEffectKeyframe.sequenceNodePath.nodePath,
                 effectIndex: firstEffectKeyframe.effectIndex,
                 schema: firstEffectKeyframe.schema,
+                videoConfigValues: firstEffectKeyframe.sequenceNodePath.videoConfigValues,
                 updates,
             });
             output = result.output;

package/dist/preview-server/routes/paste-effects.js

@@ -17,7 +17,7 @@ const getPastedEffectDescription = (effectLabels) => {
     }
     return `${effectLabels.length} effects`;
 };
-const pasteEffectsHandler = ({ input: { targetFileName, targetSequenceNodePath, type, effects, clientId }, remotionRoot, logLevel, }) => {
+const pasteEffectsHandler = ({ input: { targetFileName, targetSequenceNodePath, type, effects, clientId, insertAtIndices, }, remotionRoot, logLevel, }) => {
     return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
         try {
             if (effects.length === 0 && type !== 'effects-replacing') {
@@ -36,6 +36,7 @@ const pasteEffectsHandler = ({ input: { targetFileName, targetSequenceNodePath,
                 targetSequenceNodePath: targetSequenceNodePath.nodePath,
                 type,
                 effects,
+                insertAtIndices,
             });
             const effectDescription = getPastedEffectDescription(effectLabels);
             (0, undo_stack_1.pushToUndoStack)({

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

@@ -8,6 +8,7 @@ const parse_ast_1 = require("../../codemods/parse-ast");
 const update_effect_props_1 = require("../../codemods/update-effect-props/update-effect-props");
 const file_watcher_1 = require("../../file-watcher");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
+const video_config_values_1 = require("../../helpers/video-config-values");
 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");
@@ -122,6 +123,10 @@ const saveEffectPropsHandler = ({ input, remotionRoot, logLevel }) => (0, source
         jsx,
         effectIndex,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+        videoConfigValues: (0, video_config_values_1.getVideoConfigIdentifierValues)({
+            ast,
+            videoConfigValues: sequenceNodePath.videoConfigValues,
+        }),
     });
 });
 exports.saveEffectPropsHandler = saveEffectPropsHandler;

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

@@ -50,6 +50,7 @@ const convertSequencePropEditToCodemodChange = (edit) => {
             },
         ],
         schema: edit.schema,
+        videoConfigValues: edit.nodePath.videoConfigValues,
     };
 };
 exports.convertSequencePropEditToCodemodChange = convertSequencePropEditToCodemodChange;
@@ -182,6 +183,7 @@ const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceK
                 input: output,
                 nodePath: firstSequenceKeyframe.nodePath.nodePath,
                 schema: firstSequenceKeyframe.schema,
+                videoConfigValues: firstSequenceKeyframe.nodePath.videoConfigValues,
                 updates,
             });
             output = result.output;
@@ -223,6 +225,7 @@ const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceK
                 sequenceNodePath: firstEffectKeyframe.sequenceNodePath.nodePath,
                 effectIndex: firstEffectKeyframe.effectIndex,
                 schema: firstEffectKeyframe.schema,
+                videoConfigValues: firstEffectKeyframe.sequenceNodePath.videoConfigValues,
                 updates,
             });
             output = result.output;
@@ -331,6 +334,7 @@ const saveSequencePropsHandler = ({ input: { edits, movedKeyframes = { sequenceK
             nodePath: edit.nodePath.nodePath,
             componentIdentity: null,
             effects: [],
+            videoConfigValues: edit.nodePath.videoConfigValues,
         });
         return {
             fileName: edit.fileName,

package/dist/preview-server/routes/subscribe-to-sequence-props.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.subscribeToSequenceProps = void 0;
 const sequence_props_watchers_1 = require("../sequence-props-watchers");
-const subscribeToSequenceProps = ({ input: { fileName, line, column, nodePath, componentIdentity, keys, effects, clientId, }, remotionRoot, logLevel, }) => {
+const subscribeToSequenceProps = ({ input: { fileName, line, column, nodePath, componentIdentity, keys, effects, clientId, videoConfigValues, }, remotionRoot, logLevel, }) => {
     const result = (0, sequence_props_watchers_1.subscribeToSequencePropsWatchers)({
         fileName,
         line,
@@ -13,6 +13,7 @@ const subscribeToSequenceProps = ({ input: { fileName, line, column, nodePath, c
         effects,
         remotionRoot,
         clientId,
+        videoConfigValues,
         logLevel,
     });
     return Promise.resolve(result);

package/dist/preview-server/routes/unsubscribe-from-sequence-props.js

@@ -10,6 +10,7 @@ const unsubscribeFromSequenceProps = ({ input: { fileName, nodePath, clientId, s
         clientId,
         sequenceKeys,
         effectKeys,
+        videoConfigValues: nodePath.videoConfigValues,
     });
     return Promise.resolve(undefined);
 };

package/dist/preview-server/routes/update-effect-keyframe-settings.js

@@ -8,6 +8,7 @@ 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 video_config_values_1 = require("../../helpers/video-config-values");
 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");
@@ -27,6 +28,7 @@ const updateEffectKeyframeSettingsHandler = ({ input: { fileName, sequenceNodePa
         sequenceNodePath: sequenceNodePath.nodePath,
         effectIndex,
         schema,
+        videoConfigValues: sequenceNodePath.videoConfigValues,
         updates: [
             {
                 key,
@@ -35,6 +37,7 @@ const updateEffectKeyframeSettingsHandler = ({ input: { fileName, sequenceNodePa
                         type: 'settings',
                         clamping: settings.clamping,
                         posterize: settings.posterize,
+                        output: settings.output,
                     }
                     : {
                         type: 'easing',
@@ -91,6 +94,10 @@ const updateEffectKeyframeSettingsHandler = ({ input: { fileName, sequenceNodePa
         jsx,
         effectIndex,
         keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+        videoConfigValues: (0, video_config_values_1.getVideoConfigIdentifierValues)({
+            ast,
+            videoConfigValues: sequenceNodePath.videoConfigValues,
+        }),
     });
 });
 exports.updateEffectKeyframeSettingsHandler = updateEffectKeyframeSettingsHandler;