@remotion/studio-server 4.0.486 → 4.0.487

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

@@ -37,6 +37,7 @@ exports.updateEffectKeyframes = exports.updateEffectKeyframesAst = exports.updat
 const studio_shared_1 = require("@remotion/studio-shared");
 const recast = __importStar(require("recast"));
 const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
+const parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
 const can_update_sequence_props_1 = require("../../preview-server/routes/can-update-sequence-props");
 const format_file_content_1 = require("../format-file-content");
 const parse_ast_1 = require("../parse-ast");
@@ -225,55 +226,7 @@ const setOptionsProperty = ({ options, propertyName, value, }) => {
     options.properties.push(b.objectProperty(b.identifier(propertyName), value));
 };
 const isLinearEasing = (easing) => easing.type === 'linear';
-const getKeyframeEasing = (node) => {
-    if (node.type === 'TSAsExpression') {
-        return getKeyframeEasing(node.expression);
-    }
-    if (node.type === 'MemberExpression' &&
-        node.object.type === 'Identifier' &&
-        node.object.name === 'Easing' &&
-        node.property.type === 'Identifier' &&
-        node.property.name === 'linear' &&
-        node.computed === false) {
-        return { type: 'linear' };
-    }
-    if (node.type !== 'CallExpression' ||
-        node.callee.type !== 'MemberExpression' ||
-        node.callee.object.type !== 'Identifier' ||
-        node.callee.object.name !== 'Easing' ||
-        node.callee.property.type !== 'Identifier' ||
-        node.callee.computed) {
-        return null;
-    }
-    if (node.callee.property.name === 'spring') {
-        if (node.arguments.length > 1) {
-            return null;
-        }
-        const springConfig = node.arguments[0];
-        if ((springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'ArgumentPlaceholder' ||
-            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'JSXNamespacedName' ||
-            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'SpreadElement') {
-            return null;
-        }
-        return (0, studio_shared_1.parseSpringEasingConfig)(springConfig);
-    }
-    if (node.callee.property.name !== 'bezier' || node.arguments.length !== 4) {
-        return null;
-    }
-    const values = node.arguments.map((arg) => {
-        if (arg.type === 'ArgumentPlaceholder' ||
-            arg.type === 'JSXNamespacedName' ||
-            arg.type === 'SpreadElement') {
-            return null;
-        }
-        return getNumericValue(arg);
-    });
-    if (values.some((value) => value === null)) {
-        return null;
-    }
-    const [x1, y1, x2, y2] = values;
-    return { type: 'bezier', x1, y1, x2, y2 };
-};
+const getKeyframeEasing = (node) => (0, parse_keyframe_easing_expression_1.parseKeyframeEasingExpression)(node);
 const getKeyframeEasingArray = ({ easingNode, segmentCount, }) => {
     if (segmentCount === 0) {
         return [];

package/dist/helpers/parse-keyframe-easing-expression.d.ts

@@ -0,0 +1,3 @@
+import type { Expression } from '@babel/types';
+import type { CanUpdateSequencePropStatusEasing } from 'remotion';
+export declare const parseKeyframeEasingExpression: (node: Expression) => CanUpdateSequencePropStatusEasing | null;

package/dist/helpers/parse-keyframe-easing-expression.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseKeyframeEasingExpression = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const getNumericValue = (node) => {
+    if (node.type === 'NumericLiteral') {
+        return node.value;
+    }
+    if (node.type === 'UnaryExpression' &&
+        (node.operator === '-' || node.operator === '+') &&
+        node.argument.type === 'NumericLiteral') {
+        return node.operator === '-' ? -node.argument.value : node.argument.value;
+    }
+    if (node.type === 'TSAsExpression') {
+        return getNumericValue(node.expression);
+    }
+    return null;
+};
+const getExpressionArgument = (arg) => {
+    if (arg === undefined ||
+        arg.type === 'ArgumentPlaceholder' ||
+        arg.type === 'JSXNamespacedName' ||
+        arg.type === 'SpreadElement') {
+        return null;
+    }
+    return arg;
+};
+const getMemberExpressionKeyframeEasing = (name) => {
+    if (name === 'linear') {
+        return studio_shared_1.LINEAR_KEYFRAME_EASING;
+    }
+    if (name === 'ease') {
+        return studio_shared_1.EASE_KEYFRAME_EASING;
+    }
+    if (name === 'quad') {
+        return studio_shared_1.QUAD_KEYFRAME_EASING;
+    }
+    if (name === 'cubic') {
+        return studio_shared_1.CUBIC_KEYFRAME_EASING;
+    }
+    return null;
+};
+const parseKeyframeEasingExpression = (node) => {
+    if (node.type === 'TSAsExpression') {
+        return (0, exports.parseKeyframeEasingExpression)(node.expression);
+    }
+    if (node.type === 'MemberExpression' &&
+        node.object.type === 'Identifier' &&
+        node.object.name === 'Easing' &&
+        node.property.type === 'Identifier' &&
+        node.computed === false) {
+        return getMemberExpressionKeyframeEasing(node.property.name);
+    }
+    if (node.type !== 'CallExpression' ||
+        node.callee.type !== 'MemberExpression' ||
+        node.callee.object.type !== 'Identifier' ||
+        node.callee.object.name !== 'Easing' ||
+        node.callee.property.type !== 'Identifier' ||
+        node.callee.computed) {
+        return null;
+    }
+    const propertyName = node.callee.property.name;
+    if (propertyName === 'spring') {
+        if (node.arguments.length > 1) {
+            return null;
+        }
+        if (node.arguments.length === 0) {
+            return (0, studio_shared_1.parseSpringEasingConfig)(undefined);
+        }
+        const springConfig = getExpressionArgument(node.arguments[0]);
+        return springConfig ? (0, studio_shared_1.parseSpringEasingConfig)(springConfig) : null;
+    }
+    if (propertyName === 'bezier') {
+        if (node.arguments.length !== 4) {
+            return null;
+        }
+        const values = node.arguments.map((arg) => {
+            const expression = getExpressionArgument(arg);
+            return expression ? getNumericValue(expression) : null;
+        });
+        if (values.some((value) => value === null)) {
+            return null;
+        }
+        const [x1, y1, x2, y2] = values;
+        return { type: 'bezier', x1, y1, x2, y2 };
+    }
+    if (propertyName === 'back') {
+        if (node.arguments.length > 1) {
+            return null;
+        }
+        if (node.arguments.length === 0) {
+            return (0, studio_shared_1.getBackKeyframeEasing)();
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        if (!expression) {
+            return null;
+        }
+        const s = getNumericValue(expression);
+        if (s === null) {
+            return null;
+        }
+        return (0, studio_shared_1.getBackKeyframeEasing)(s);
+    }
+    if (propertyName === 'poly') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        const n = expression ? getNumericValue(expression) : null;
+        return n === null ? null : (0, studio_shared_1.getPolyKeyframeEasing)(n);
+    }
+    if (propertyName === 'in') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        return expression ? (0, exports.parseKeyframeEasingExpression)(expression) : null;
+    }
+    if (propertyName === 'out') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        const easing = expression
+            ? (0, exports.parseKeyframeEasingExpression)(expression)
+            : null;
+        return easing ? (0, studio_shared_1.getOutKeyframeEasing)(easing) : null;
+    }
+    if (propertyName === 'inOut') {
+        if (node.arguments.length !== 1) {
+            return null;
+        }
+        const expression = getExpressionArgument(node.arguments[0]);
+        const easing = expression
+            ? (0, exports.parseKeyframeEasingExpression)(expression)
+            : null;
+        return (easing === null || easing === void 0 ? void 0 : easing.type) === 'linear' ? easing : null;
+    }
+    return null;
+};
+exports.parseKeyframeEasingExpression = parseKeyframeEasingExpression;

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

@@ -29,7 +29,7 @@ export declare const insertJsxElementIntoComposition: ({ remotionRoot, compositi
         dimensions: {
             width: number;
             height: number;
-        };
+        } | null;
         durationInFrames?: number | null | undefined;
         name: string | null;
         position: InsertableCompositionElementPosition | null;

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

@@ -583,8 +583,12 @@ const createComponentElement = ({ addPositionStyle, localName, props, position,
 const createSequenceWrappedElement = ({ child, dimensions, durationInFrames, name, position, sequenceLocalName, }) => {
     return recast.types.builders.jsxElement(recast.types.builders.jsxOpeningElement(recast.types.builders.jsxIdentifier(sequenceLocalName), [
         ...(name === null ? [] : [createStringAttribute('name', name)]),
-        createNumberAttribute('width', dimensions.width),
-        createNumberAttribute('height', dimensions.height),
+        ...(dimensions !== null
+            ? [
+                createNumberAttribute('width', dimensions.width),
+                createNumberAttribute('height', dimensions.height),
+            ]
+            : []),
         ...(durationInFrames === null
             ? []
             : [createNumberAttribute('durationInFrames', durationInFrames)]),

package/dist/open-browser-shortcut.d.ts

@@ -0,0 +1,9 @@
+export declare const registerOpenBrowserShortcut: ({ browserArgs, browserFlag, url, logLevel, }: {
+    browserArgs: string;
+    browserFlag: string;
+    url: string;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+}) => {
+    registered: boolean;
+    cleanup: () => void;
+};

package/dist/open-browser-shortcut.js

@@ -0,0 +1,111 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerOpenBrowserShortcut = void 0;
+const readline = __importStar(require("node:readline"));
+const renderer_1 = require("@remotion/renderer");
+const maybe_open_browser_1 = require("./maybe-open-browser");
+const live_events_1 = require("./preview-server/live-events");
+const registerOpenBrowserShortcut = ({ browserArgs, browserFlag, url, logLevel, }) => {
+    if (!process.stdin.isTTY) {
+        return { registered: false, cleanup: () => undefined };
+    }
+    if (typeof process.stdin.setRawMode !== 'function') {
+        return { registered: false, cleanup: () => undefined };
+    }
+    const wasRaw = process.stdin.isRaw;
+    const shouldPauseAfterCleanup = process.stdin.isPaused();
+    let cleanedUp = false;
+    let isOpeningBrowser = false;
+    const cleanup = () => {
+        if (cleanedUp) {
+            return;
+        }
+        cleanedUp = true;
+        process.stdin.removeListener('keypress', onKeypress);
+        process.removeListener('SIGINT', cleanup);
+        process.removeListener('exit', cleanup);
+        if (!wasRaw && process.stdin.isTTY) {
+            process.stdin.setRawMode(false);
+        }
+        if (shouldPauseAfterCleanup) {
+            process.stdin.pause();
+        }
+    };
+    const openStudio = () => {
+        if (isOpeningBrowser) {
+            return;
+        }
+        isOpeningBrowser = true;
+        (0, live_events_1.clearPrintPortMessageTimeout)();
+        (0, maybe_open_browser_1.maybeOpenBrowser)({
+            browserArgs,
+            browserFlag,
+            shouldOpenBrowser: true,
+            url,
+            logLevel,
+        })
+            .then((result) => {
+            if (result.didOpenBrowser) {
+                renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, `Opened ${url} in browser`);
+            }
+        })
+            .catch((err) => {
+            renderer_1.RenderInternals.Log.error({ indent: false, logLevel }, 'Could not open browser:', err);
+        })
+            .finally(() => {
+            isOpeningBrowser = false;
+        });
+    };
+    function onKeypress(_str, key) {
+        if ((key === null || key === void 0 ? void 0 : key.ctrl) && key.name === 'c') {
+            cleanup();
+            process.kill(process.pid, 'SIGINT');
+            return;
+        }
+        if ((key === null || key === void 0 ? void 0 : key.meta) || (key === null || key === void 0 ? void 0 : key.ctrl) || (key === null || key === void 0 ? void 0 : key.name) !== 's') {
+            return;
+        }
+        openStudio();
+    }
+    readline.emitKeypressEvents(process.stdin);
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.on('keypress', onKeypress);
+    process.once('SIGINT', cleanup);
+    process.once('exit', cleanup);
+    return { registered: true, cleanup };
+};
+exports.registerOpenBrowserShortcut = registerOpenBrowserShortcut;

package/dist/preview-server/live-events.d.ts

@@ -7,6 +7,7 @@ export type LiveEventsServer = {
     closeConnections: () => Promise<void>;
     addNewClientListener: (cb: () => void) => () => void;
 };
+export declare const clearPrintPortMessageTimeout: () => void;
 export type InitialUndoRedoState = {
     undoFile: string | null;
     redoFile: string | null;

package/dist/preview-server/live-events.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setLiveEventsListener = exports.waitForLiveEventsListener = exports.makeLiveEventsRouter = void 0;
+exports.setLiveEventsListener = exports.waitForLiveEventsListener = exports.makeLiveEventsRouter = exports.clearPrintPortMessageTimeout = void 0;
 const server_ready_1 = require("../server-ready");
 const default_props_watchers_1 = require("./default-props-watchers");
 const file_existence_watchers_1 = require("./file-existence-watchers");
@@ -9,6 +9,13 @@ const serializeMessage = (message) => {
     return `data: ${JSON.stringify(message)}\n\n`;
 };
 let printPortMessageTimeout = null;
+const clearPrintPortMessageTimeout = () => {
+    if (printPortMessageTimeout) {
+        clearTimeout(printPortMessageTimeout);
+        printPortMessageTimeout = null;
+    }
+};
+exports.clearPrintPortMessageTimeout = clearPrintPortMessageTimeout;
 const makeLiveEventsRouter = (logLevel, getInitialUndoRedoState) => {
     let clients = [];
     let newClientListeners = [];
@@ -33,9 +40,7 @@ const makeLiveEventsRouter = (logLevel, getInitialUndoRedoState) => {
         };
         clients.push(newClient);
         newClientListeners.forEach((cb) => cb());
-        if (printPortMessageTimeout) {
-            clearTimeout(printPortMessageTimeout);
-        }
+        (0, exports.clearPrintPortMessageTimeout)();
         request.on('close', () => {
             (0, default_props_watchers_1.unsubscribeClientDefaultPropsWatchers)(clientId);
             (0, file_existence_watchers_1.unsubscribeClientFileExistenceWatchers)(clientId);
@@ -43,9 +48,7 @@ const makeLiveEventsRouter = (logLevel, getInitialUndoRedoState) => {
             clients = clients.filter((client) => client.id !== clientId);
             // If all clients disconnected, print a comment so user can easily restart it.
             if (clients.length === 0) {
-                if (printPortMessageTimeout) {
-                    clearTimeout(printPortMessageTimeout);
-                }
+                (0, exports.clearPrintPortMessageTimeout)();
                 printPortMessageTimeout = setTimeout(() => {
                     (0, server_ready_1.printServerReadyComment)('To restart', logLevel);
                 }, 2500);

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

@@ -42,6 +42,7 @@ const no_react_1 = require("remotion/no-react");
 const parse_ast_1 = require("../../codemods/parse-ast");
 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 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");
@@ -200,55 +201,7 @@ const getExtrapolateType = (node) => {
     }
     return null;
 };
-const getKeyframeEasing = (node) => {
-    if (node.type === 'TSAsExpression') {
-        return getKeyframeEasing(node.expression);
-    }
-    if (node.type === 'MemberExpression' &&
-        node.object.type === 'Identifier' &&
-        node.object.name === 'Easing' &&
-        node.property.type === 'Identifier' &&
-        node.property.name === 'linear' &&
-        node.computed === false) {
-        return { type: 'linear' };
-    }
-    if (node.type !== 'CallExpression' ||
-        node.callee.type !== 'MemberExpression' ||
-        node.callee.object.type !== 'Identifier' ||
-        node.callee.object.name !== 'Easing' ||
-        node.callee.property.type !== 'Identifier' ||
-        node.callee.computed) {
-        return null;
-    }
-    if (node.callee.property.name === 'spring') {
-        if (node.arguments.length > 1) {
-            return null;
-        }
-        const springConfig = node.arguments[0];
-        if ((springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'ArgumentPlaceholder' ||
-            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'JSXNamespacedName' ||
-            (springConfig === null || springConfig === void 0 ? void 0 : springConfig.type) === 'SpreadElement') {
-            return null;
-        }
-        return (0, studio_shared_1.parseSpringEasingConfig)(springConfig);
-    }
-    if (node.callee.property.name !== 'bezier' || node.arguments.length !== 4) {
-        return null;
-    }
-    const values = node.arguments.map((arg) => {
-        if (arg.type === 'ArgumentPlaceholder' ||
-            arg.type === 'JSXNamespacedName' ||
-            arg.type === 'SpreadElement') {
-            return null;
-        }
-        return getNumericValue(arg);
-    });
-    if (values.some((v) => v === null)) {
-        return null;
-    }
-    const [x1, y1, x2, y2] = values;
-    return { type: 'bezier', x1, y1, x2, y2 };
-};
+const getKeyframeEasing = (node) => (0, parse_keyframe_easing_expression_1.parseKeyframeEasingExpression)(node);
 const getKeyframeEasingArray = ({ easingNode, segments, }) => {
     if (segments === 0) {
         return [];

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

@@ -45,6 +45,9 @@ const makeRelativeImportPath = ({ fromFile, toFile, }) => {
     return relative;
 };
 const validateDimensions = (dimensions) => {
+    if (dimensions === null) {
+        return;
+    }
     if (!Number.isFinite(dimensions.width) ||
         !Number.isFinite(dimensions.height) ||
         dimensions.width <= 0 ||

package/dist/start-studio.js

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

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio-server"
 	},
 	"name": "@remotion/studio-server",
-	"version": "4.0.486",
+	"version": "4.0.487",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -27,11 +27,11 @@
 		"@babel/parser": "7.24.1",
 		"semver": "7.5.3",
 		"prettier": "3.8.1",
-		"remotion": "4.0.486",
+		"remotion": "4.0.487",
 		"recast": "0.23.11",
-		"@remotion/bundler": "4.0.486",
-		"@remotion/renderer": "4.0.486",
-		"@remotion/studio-shared": "4.0.486",
+		"@remotion/bundler": "4.0.487",
+		"@remotion/renderer": "4.0.487",
+		"@remotion/studio-shared": "4.0.487",
 		"memfs": "3.4.3",
 		"open": "8.4.2"
 	},
@@ -39,7 +39,7 @@
 		"ast-types": "0.16.1",
 		"react": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.486",
+		"@remotion/eslint-config-internal": "4.0.487",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"