@remotion/studio-server 4.0.523 → 4.0.524

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

@@ -11,4 +11,4 @@ export declare const generateCanvasCaptureComposition: ({ componentName, composi
     readonly videoHeight: number;
     readonly videoWidth: number;
     readonly width: number;
-}) => Promise<string>;
+}) => string;

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

@@ -1,7 +1,40 @@
 "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.generateCanvasCaptureComposition = void 0;
-const duplicate_composition_1 = require("../codemods/duplicate-composition");
+const recast = __importStar(require("recast"));
 const customCursorRegex = /^\s*url\(/;
 const collapseMouseMovementsByFrame = ({ data, keyframeFps, }) => {
     const movements = [];
@@ -30,7 +63,39 @@ const getCursorName = (cursor) => {
     }
     return ((_a = cursor.split(',').at(-1)) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase()) || 'default';
 };
-const serialize = (value) => JSON.stringify(value);
+const serialize = (value) => {
+    if (typeof value === 'string') {
+        return recast.prettyPrint(recast.types.builders.stringLiteral(value), {
+            quote: 'single',
+        }).code;
+    }
+    return JSON.stringify(value);
+};
+const serializeArray = (values, indentation) => {
+    const items = values.map(serialize);
+    const inline = `[${items.join(', ')}]`;
+    if (indentation * 2 + inline.length + 1 <= 80) {
+        return inline;
+    }
+    const lines = [];
+    const numeric = values.every((value) => typeof value === 'number');
+    for (const item of items) {
+        const previous = lines.at(-1);
+        if (numeric &&
+            previous &&
+            (indentation + 1) * 2 + previous.length + item.length + 2 <= 80) {
+            lines[lines.length - 1] = `${previous} ${item},`;
+        }
+        else {
+            lines.push(`${item},`);
+        }
+    }
+    return [
+        '[',
+        ...lines.map((line) => `${'\t'.repeat(indentation + 1)}${line}`),
+        `${'\t'.repeat(indentation)}]`,
+    ].join('\n');
+};
 const generateCanvasCaptureComposition = ({ componentName, compositionId, data, durationInFrames, fps, height, keyframeFps, videoFileName, videoHeight, videoWidth, width, }) => {
     var _a;
     const movements = collapseMouseMovementsByFrame({ data, keyframeFps });
@@ -79,11 +144,11 @@ const generateCanvasCaptureComposition = ({ componentName, compositionId, data,
     }, []);
     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={${serialize(cursorKeyframes[0].value)}}`
         : `cursor={interpolate(
 					frame,
-					${serialize(cursorKeyframes.map((keyframe) => keyframe.frame))},
-					${serialize(cursorKeyframes.map((keyframe) => keyframe.value))},
+					${serializeArray(cursorKeyframes.map((keyframe) => keyframe.frame), 5)},
+					${serializeArray(cursorKeyframes.map((keyframe) => keyframe.value), 5)},
 					{
 						easing: Easing.step1,
 						extrapolateLeft: 'clamp',
@@ -94,8 +159,8 @@ const generateCanvasCaptureComposition = ({ componentName, compositionId, data,
         ? serialize(scaleKeyframes[0].value)
         : `interpolate(
 						frame,
-						${serialize(scaleKeyframes.map((keyframe) => keyframe.frame))},
-						${serialize(scaleKeyframes.map((keyframe) => keyframe.value))},
+						${serializeArray(scaleKeyframes.map((keyframe) => keyframe.frame), 6)},
+						${serializeArray(scaleKeyframes.map((keyframe) => keyframe.value), 6)},
 						{
 							easing: Easing.step1,
 							extrapolateLeft: 'clamp',
@@ -106,8 +171,8 @@ const generateCanvasCaptureComposition = ({ componentName, compositionId, data,
         ? serialize(positionKeyframes[0].value)
         : `interpolate(
 						frame,
-						${serialize(positionKeyframes.map((keyframe) => keyframe.frame))},
-						${serialize(positionKeyframes.map((keyframe) => keyframe.value))},
+						${serializeArray(positionKeyframes.map((keyframe) => keyframe.frame), 6)},
+						${serializeArray(positionKeyframes.map((keyframe) => keyframe.value), 6)},
 						{
 							extrapolateLeft: 'clamp',
 							extrapolateRight: 'clamp',
@@ -116,7 +181,7 @@ const generateCanvasCaptureComposition = ({ componentName, compositionId, data,
     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';
+    return `import {MacOSCursor} from '@remotion/mac-cursors';
 import {Video} from '@remotion/media';
 import {
 	AbsoluteFill,
@@ -160,7 +225,7 @@ ${customCursor === undefined ? '' : `\t\t\t\tcustomCursor={${serialize(customCur
 export const ${componentName} = () => {
 	return (
 		<Composition
-			id=${serialize(compositionId)}
+			id={${serialize(compositionId)}}
 			component={${previewComponentName}}
 			width={${width}}
 			height={${height}}
@@ -169,6 +234,6 @@ export const ${componentName} = () => {
 		/>
 	);
 };
-`);
+`;
 };
 exports.generateCanvasCaptureComposition = generateCanvasCaptureComposition;

package/dist/codemods/apply-codemod-to-file.js

@@ -27,6 +27,13 @@ const applyCodemodToFile = async ({ filePath, codeMod, }) => {
         codeMod,
         input,
     });
-    return (0, duplicate_composition_1.formatOutput)(newContents);
+    if (codeMod.type === 'new-composition' ||
+        codeMod.type === 'duplicate-composition' ||
+        codeMod.type === 'rename-composition' ||
+        codeMod.type === 'delete-composition') {
+        return newContents;
+    }
+    const formatted = await (0, duplicate_composition_1.formatOutput)(newContents);
+    return formatted;
 };
 exports.applyCodemodToFile = applyCodemodToFile;

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

@@ -10,7 +10,6 @@ const renderer_1 = require("@remotion/renderer");
 const studio_codemods_1 = require("@remotion/studio-codemods");
 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 file_watcher_1 = require("../../file-watcher");
 const format_log_file_location_1 = require("../format-log-file-location");
 const project_info_1 = require("../project-info");
@@ -33,12 +32,12 @@ const formatNewCompositionFile = (codemod) => {
             width: codemod.newWidth,
         });
     }
-    return (0, duplicate_composition_1.formatOutput)(`import React from 'react';
+    return `import React from 'react';
 
 export const ${codemod.componentName}: React.FC = () => {
 	return null;
 };
-`);
+`;
 };
 const getFolderPath = (parentName, folderName) => {
     return parentName ? `${parentName}/${folderName}` : folderName;

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

@@ -22,6 +22,8 @@ const hasExpectedFileState = ({ expected, actual, }) => {
     return actual.sourceHash === expected.sourceHash;
 };
 const insertElementHandler = ({ input: { compositionFile, compositionId, element, installationName, expectedFileState, from, position, overwriteExisting, }, entryPoint, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a;
+    var _b;
     try {
         (0, element_install_plan_1.validateElementInstallPosition)(position);
         if (from !== null &&
@@ -32,6 +34,21 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
             ? 'wrapped'
             : element.installationMode;
         const componentOwnsSequence = installationMode === 'component-owned-sequence';
+        if (componentOwnsSequence &&
+            element.initialProps !== null &&
+            ['from', 'durationInFrames', 'name'].some((prop) => {
+                var _a;
+                return Object.hasOwn((_a = element.initialProps) !== null && _a !== void 0 ? _a : {}, prop);
+            })) {
+            throw new Error('Component-owned Element initial props must not override from, durationInFrames, or name');
+        }
+        if (componentOwnsSequence &&
+            ((_a = element.initialProps) === null || _a === void 0 ? void 0 : _a.style) !== undefined &&
+            (element.initialProps.style === null ||
+                typeof element.initialProps.style !== 'object' ||
+                Array.isArray(element.initialProps.style))) {
+            throw new Error('Component-owned Element initial style must be an object');
+        }
         renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[insert-element] Received request for compositionFile="${compositionFile}" compositionId="${compositionId}" element="${element.slug}"`);
         const plan = await (0, element_install_plan_1.getElementInstallPlan)({
             installationName,
@@ -86,19 +103,20 @@ const insertElementHandler = ({ input: { compositionFile, compositionId, element
                 componentName: plan.componentName,
                 importName: plan.componentName,
                 importPath: plan.importPath,
-                props: componentOwnsSequence
-                    ? [
-                        ...(element.durationInFrames === null
-                            ? []
-                            : [
-                                {
-                                    name: 'durationInFrames',
-                                    value: element.durationInFrames,
-                                },
-                            ]),
-                        { name: 'name', value: element.displayName },
-                    ]
-                    : [],
+                props: [
+                    ...Object.entries((_b = element.initialProps) !== null && _b !== void 0 ? _b : {}).map(([name, value]) => ({ name, value })),
+                    ...(componentOwnsSequence && element.durationInFrames !== null
+                        ? [
+                            {
+                                name: 'durationInFrames',
+                                value: element.durationInFrames,
+                            },
+                        ]
+                        : []),
+                    ...(componentOwnsSequence
+                        ? [{ name: 'name', value: element.displayName }]
+                        : []),
+                ],
                 position: componentOwnsSequence ? position : null,
             },
             from: componentOwnsSequence ? from : null,

package/dist/preview-server/studio-protocol/handle-discovery.js

@@ -43,7 +43,7 @@ const getProject = ({ gitSource, remotionRoot, }) => (0, studio_shared_1.getProj
 });
 const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRoot, request, response, }) => {
     (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
-    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request);
     if (requestOrigin === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'unsupported-origin',

package/dist/preview-server/studio-protocol/handle-element-library.js

@@ -11,7 +11,7 @@ const handleStudioProtocolElementLibrary = async ({ configFile, focusStudioTab,
     var _a;
     var _b;
     (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
-    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request);
     if (requestOrigin === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'unsupported-origin',

package/dist/preview-server/studio-protocol/handle-install.js

@@ -10,7 +10,7 @@ const protocol_response_1 = require("./protocol-response");
 // UTF-8 representation and the protocol envelope while keeping memory bounded.
 const MAX_STUDIO_PROTOCOL_INSTALL_BODY_SIZE = 1000000;
 const deliverElementInstall = ({ element, focusStudioTab, liveEventsServer, origin, target, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (target.compositionFile === null || target.compositionId === null) {
         return false;
     }
@@ -23,7 +23,8 @@ const deliverElementInstall = ({ element, focusStudioTab, liveEventsServer, orig
         element: {
             ...element,
             durationInFrames: (_a = element.durationInFrames) !== null && _a !== void 0 ? _a : null,
-            installationMode: (_b = element.installationMode) !== null && _b !== void 0 ? _b : null,
+            initialProps: (_b = element.initialProps) !== null && _b !== void 0 ? _b : null,
+            installationMode: (_c = element.installationMode) !== null && _c !== void 0 ? _c : null,
         },
         from: null,
         position: null,
@@ -43,7 +44,7 @@ const deliverElementInstall = ({ element, focusStudioTab, liveEventsServer, orig
 };
 const handleStudioProtocolInstall = async ({ focusStudioTab, liveEventsServer, request, response, }) => {
     (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
-    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request);
     if (requestOrigin === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'unsupported-origin',

package/dist/preview-server/studio-protocol/handle-license-key.js

@@ -9,7 +9,7 @@ const protocol_response_1 = require("./protocol-response");
 const MAX_STUDIO_PROTOCOL_LICENSE_KEY_BODY_SIZE = 4096;
 const handleStudioProtocolLicenseKey = async ({ configFile, focusStudioTab, liveEventsServer, request, response, }) => {
     (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
-    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request);
     if (requestOrigin === null) {
         (0, protocol_response_1.writeStudioProtocolError)({
             code: 'unsupported-origin',

package/dist/preview-server/studio-protocol/origin-policy.d.ts

@@ -1,5 +1,5 @@
 import type { IncomingMessage, ServerResponse } from 'node:http';
-export declare const getAllowedStudioProtocolOrigin: (origin: string | undefined) => string | null;
+export declare const getAllowedStudioProtocolOrigin: (request: IncomingMessage) => string | null;
 export declare const setStudioProtocolCorsHeaders: ({ request, response, }: {
     readonly request: IncomingMessage;
     readonly response: ServerResponse<IncomingMessage>;

package/dist/preview-server/studio-protocol/origin-policy.js

@@ -3,11 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleStudioProtocolOptions = exports.setStudioProtocolCorsHeaders = exports.getAllowedStudioProtocolOrigin = void 0;
 const isLoopbackHttp = (url) => url.protocol === 'http:' &&
     (url.hostname === 'localhost' || url.hostname === '127.0.0.1');
-const getAllowedStudioProtocolOrigin = (origin) => {
-    if (!origin) {
-        return null;
-    }
+const getAllowedStudioProtocolOrigin = (request) => {
     try {
+        const { origin, referer, host } = request.headers;
+        if (origin === undefined) {
+            // Browsers omit Origin on same-origin GET requests. Only trust a
+            // Referer matching this local HTTP Studio, never an arbitrary site.
+            const refererUrl = new URL(referer !== null && referer !== void 0 ? referer : '');
+            return isLoopbackHttp(refererUrl) &&
+                refererUrl.origin === `http://${host}`
+                ? refererUrl.origin
+                : null;
+        }
         const url = new URL(origin);
         if (url.protocol !== 'https:' && !isLoopbackHttp(url)) {
             return null;
@@ -20,7 +27,7 @@ const getAllowedStudioProtocolOrigin = (origin) => {
 };
 exports.getAllowedStudioProtocolOrigin = getAllowedStudioProtocolOrigin;
 const setStudioProtocolCorsHeaders = ({ request, response, }) => {
-    const origin = (0, exports.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const origin = (0, exports.getAllowedStudioProtocolOrigin)(request);
     if (origin === null) {
         return;
     }
@@ -34,7 +41,7 @@ const setStudioProtocolCorsHeaders = ({ request, response, }) => {
 exports.setStudioProtocolCorsHeaders = setStudioProtocolCorsHeaders;
 const handleStudioProtocolOptions = ({ request, response, }) => {
     (0, exports.setStudioProtocolCorsHeaders)({ request, response });
-    const origin = (0, exports.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    const origin = (0, exports.getAllowedStudioProtocolOrigin)(request);
     response.writeHead(origin === null ? 403 : 204);
     response.end();
     return Promise.resolve();

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.523",
+	"version": "4.0.524",
 	"description": "Run a Remotion Studio with a server backend",
 	"main": "dist",
 	"scripts": {
@@ -23,7 +23,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@remotion/studio-protocol": "4.0.523",
+		"@remotion/studio-protocol": "4.0.524",
 		"@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.5.4",
 		"prettier": "3.8.1",
-		"remotion": "4.0.523",
+		"remotion": "4.0.524",
 		"recast": "0.23.21",
-		"@remotion/bundler": "4.0.523",
-		"@remotion/renderer": "4.0.523",
-		"@remotion/studio-codemods": "4.0.523",
-		"@remotion/studio-shared": "4.0.523",
+		"@remotion/bundler": "4.0.524",
+		"@remotion/renderer": "4.0.524",
+		"@remotion/studio-codemods": "4.0.524",
+		"@remotion/studio-shared": "4.0.524",
 		"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.523",
+		"@remotion/eslint-config-internal": "4.0.524",
 		"eslint": "9.19.0",
 		"@types/node": "20.12.14",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"