@remotion/studio-server 4.0.490 → 4.0.491

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',
@@ -341,9 +346,9 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
         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' &&
@@ -352,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;
         }
@@ -398,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) {
@@ -455,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();
     }
@@ -471,7 +480,7 @@ const getComputedStatus = (node, ast) => {
     };
 };
 exports.getComputedStatus = getComputedStatus;
-const getPropsStatus = (jsxElement, ast) => {
+const getPropsStatus = (jsxElement, ast, videoConfigValues) => {
     const props = {};
     for (const attr of jsxElement.attributes) {
         if (attr.type === 'JSXSpreadAttribute') {
@@ -486,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') {
@@ -500,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();
@@ -651,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();
@@ -674,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)) {
@@ -710,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) {
@@ -746,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,
@@ -755,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,
@@ -768,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,
@@ -798,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/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,
@@ -92,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;

package/dist/preview-server/routes/update-element-install-target.js

@@ -5,7 +5,7 @@ const element_install_state_1 = require("../element-install-state");
 const isFiniteTimestamp = (value) => {
     return value === null || (Number.isFinite(value) && value > 0);
 };
-const updateElementInstallTargetHandler = ({ input }) => {
+const updateElementInstallTargetHandler = ({ input, request }) => {
     if (typeof input.clientId !== 'string' || input.clientId.length === 0) {
         throw new Error('Invalid client ID');
     }
@@ -22,6 +22,20 @@ const updateElementInstallTargetHandler = ({ input }) => {
     if (input.compositionId !== null && typeof input.compositionId !== 'string') {
         throw new Error('Invalid composition ID');
     }
+    if (typeof input.studioUrl !== 'string') {
+        throw new Error('Invalid Studio URL');
+    }
+    let studioUrl;
+    try {
+        studioUrl = new URL(input.studioUrl);
+    }
+    catch (_a) {
+        throw new Error('Invalid Studio URL');
+    }
+    if (typeof request.headers.origin !== 'string' ||
+        studioUrl.origin !== request.headers.origin) {
+        throw new Error('Studio URL must match the request origin');
+    }
     (0, element_install_state_1.updateElementInstallTarget)(input);
     return Promise.resolve({});
 };

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

@@ -24,6 +24,7 @@ const updateSequenceKeyframeSettingsHandler = ({ input: { fileName, nodePath, ke
         input: fileContents,
         nodePath: nodePath.nodePath,
         schema,
+        videoConfigValues: nodePath.videoConfigValues,
         updates: [
             {
                 key,
@@ -80,6 +81,7 @@ const updateSequenceKeyframeSettingsHandler = ({ input: { fileName, nodePath, ke
         nodePath: updatedNodePath,
         componentIdentity: null,
         effects: [],
+        videoConfigValues: nodePath.videoConfigValues,
     });
     const updatedSubscriptionKey = { ...nodePath, nodePath: updatedNodePath };
     return {

package/dist/preview-server/sequence-props-watchers.d.ts

@@ -1,6 +1,6 @@
 import { type SubscribeToSequencePropsResponse } from '@remotion/studio-shared';
-import type { SequenceNodePath } from 'remotion';
-export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, nodePath: preferredNodePath, componentIdentity, keys, effects, remotionRoot, clientId, logLevel, }: {
+import type { SequenceNodePath, VideoConfigValues } from 'remotion';
+export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column, nodePath: preferredNodePath, componentIdentity, keys, effects, remotionRoot, clientId, logLevel, videoConfigValues, }: {
     fileName: string;
     line: number;
     column: number;
@@ -11,13 +11,15 @@ export declare const subscribeToSequencePropsWatchers: ({ fileName, line, column
     remotionRoot: string;
     clientId: string;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    videoConfigValues: VideoConfigValues;
 }) => SubscribeToSequencePropsResponse;
-export declare const unsubscribeFromSequencePropsWatchers: ({ fileName, nodePath, remotionRoot, clientId, sequenceKeys, effectKeys, }: {
+export declare const unsubscribeFromSequencePropsWatchers: ({ fileName, nodePath, remotionRoot, clientId, sequenceKeys, effectKeys, videoConfigValues, }: {
     fileName: string;
     nodePath: SequenceNodePath;
     remotionRoot: string;
     clientId: string;
     sequenceKeys: string[];
     effectKeys: string[][];
+    videoConfigValues: VideoConfigValues | null;
 }) => void;
 export declare const unsubscribeClientSequencePropsWatchers: (clientId: string) => void;

package/dist/preview-server/sequence-props-watchers.js

@@ -14,7 +14,8 @@ const live_events_1 = require("./live-events");
 const node_path_cache_1 = require("./node-path-cache");
 const can_update_sequence_props_1 = require("./routes/can-update-sequence-props");
 const sequencePropsWatchers = {};
-const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, componentIdentity, keys, effects, remotionRoot, logLevel, }) => {
+const getWatcherKey = (nodePath) => `${(0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath)}:${JSON.stringify(nodePath.videoConfigValues)}`;
+const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, componentIdentity, keys, effects, remotionRoot, logLevel, videoConfigValues, }) => {
     if (preferredNodePath) {
         try {
             const fromNodePath = (0, can_update_sequence_props_1.computeSequencePropsStatus)({
@@ -24,6 +25,7 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, com
                 keys,
                 effects,
                 remotionRoot,
+                videoConfigValues,
             });
             return {
                 status: fromNodePath,
@@ -32,6 +34,7 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, com
                     nodePath: preferredNodePath,
                     sequenceKeys: keys,
                     effectKeys: effects,
+                    videoConfigValues,
                 },
                 success: true,
             };
@@ -55,6 +58,7 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, com
                     keys,
                     effects,
                     remotionRoot,
+                    videoConfigValues,
                 });
             }
             catch (error) {
@@ -73,6 +77,7 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, com
                     nodePath: cachedNodePath,
                     sequenceKeys: keys,
                     effectKeys: effects,
+                    videoConfigValues,
                 },
                 success: true,
             };
@@ -86,10 +91,11 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, com
         effects,
         remotionRoot,
         logLevel,
+        videoConfigValues,
     });
     return status;
 };
-const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: preferredNodePath, componentIdentity, keys, effects, remotionRoot, clientId, logLevel, }) => {
+const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: preferredNodePath, componentIdentity, keys, effects, remotionRoot, clientId, logLevel, videoConfigValues, }) => {
     var _a;
     const initialResult = getSequencePropsStatus({
         fileName,
@@ -101,6 +107,7 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: pr
         effects,
         remotionRoot,
         logLevel,
+        videoConfigValues,
     });
     if (!initialResult.success) {
         return initialResult;
@@ -109,7 +116,7 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: pr
     // Cache the resolved nodePath for future lookups with stale source maps
     (0, node_path_cache_1.setCachedNodePath)(fileName, line, column, initialResult.nodePath.nodePath);
     const { nodePath } = initialResult;
-    const watcherKey = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
+    const watcherKey = getWatcherKey(nodePath);
     // If a watcher already exists for this key, just bump the ref count
     if ((_a = sequencePropsWatchers[clientId]) === null || _a === void 0 ? void 0 : _a[watcherKey]) {
         sequencePropsWatchers[clientId][watcherKey].refCount++;
@@ -132,6 +139,7 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: pr
                     componentIdentity,
                     keys,
                     effects,
+                    videoConfigValues,
                 });
                 const previousEffectChain = result.effects.map((effect) => effect.canUpdate && effect.callee);
                 const newEffectChain = initialResult.success &&
@@ -173,13 +181,14 @@ const subscribeToSequencePropsWatchers = ({ fileName, line, column, nodePath: pr
     return initialResult;
 };
 exports.subscribeToSequencePropsWatchers = subscribeToSequencePropsWatchers;
-const unsubscribeFromSequencePropsWatchers = ({ fileName, nodePath, remotionRoot, clientId, sequenceKeys, effectKeys, }) => {
+const unsubscribeFromSequencePropsWatchers = ({ fileName, nodePath, remotionRoot, clientId, sequenceKeys, effectKeys, videoConfigValues, }) => {
     const absolutePath = node_path_1.default.resolve(remotionRoot, fileName);
-    const watcherKey = (0, studio_shared_1.stringifySequenceSubscriptionKey)({
+    const watcherKey = getWatcherKey({
         absolutePath,
         nodePath,
         sequenceKeys,
         effectKeys,
+        videoConfigValues,
     });
     if (!sequencePropsWatchers[clientId] ||
         !sequencePropsWatchers[clientId][watcherKey]) {

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

@@ -22,7 +22,6 @@ export declare const startServer: (options: {
     bufferStateDelayInMilliseconds: number | null;
     remotionRoot: string;
     keyboardShortcutsEnabled: boolean;
-    experimentalClientSideRenderingEnabled: boolean;
     publicDir: string;
     poll: number | null;
     staticHash: string;

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

@@ -41,7 +41,6 @@ const startServer = async (options) => {
         maxTimelineTracks: (_c = options === null || options === void 0 ? void 0 : options.maxTimelineTracks) !== null && _c !== void 0 ? _c : null,
         remotionRoot: options.remotionRoot,
         keyboardShortcutsEnabled: options.keyboardShortcutsEnabled,
-        experimentalClientSideRenderingEnabled: options.experimentalClientSideRenderingEnabled,
         poll: options.poll,
         bufferStateDelayInMilliseconds: options.bufferStateDelayInMilliseconds,
         askAIEnabled: options.askAIEnabled,

package/dist/routes.js

@@ -41,6 +41,7 @@ const node_url_1 = require("node:url");
 const bundler_1 = require("@remotion/bundler");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
+const better_opn_1 = require("./better-opn");
 const client_render_queue_1 = require("./client-render-queue");
 const get_file_source_1 = require("./helpers/get-file-source");
 const get_installed_installable_packages_1 = require("./helpers/get-installed-installable-packages");
@@ -215,6 +216,7 @@ const handleRequestElementInstall = async ({ liveEventsServer, request, response
             }));
             return;
         }
+        (0, better_opn_1.focusBrowserTab)({ url: target.studioUrl }).catch(() => undefined);
         response.writeHead(200);
         response.end(JSON.stringify({ success: true, status: 'sent' }));
     }