@remotion/studio-server 4.0.500 → 4.0.502

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

@@ -4,6 +4,7 @@ exports.saveSequencePropsHandler = exports.shouldSuppressHmrForSequencePropEdits
 const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const studio_shared_1 = require("@remotion/studio-shared");
+const update_inline_caption_patches_1 = require("../../codemods/update-inline-caption-patches");
 const update_keyframes_1 = require("../../codemods/update-keyframes/update-keyframes");
 const update_sequence_props_1 = require("../../codemods/update-sequence-props/update-sequence-props");
 const file_watcher_1 = require("../../file-watcher");
@@ -59,8 +60,8 @@ const shouldSuppressHmrForSequencePropEdits = (edits) => {
         (edit.sourceEdit === null || edit.sourceEdit === undefined));
 };
 exports.shouldSuppressHmrForSequencePropEdits = shouldSuppressHmrForSequencePropEdits;
-const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyframes, clientId, undoLabel, redoLabel, }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
-    var _a, _b, _c, _d;
+const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyframes, captionPatches = [], clientId, undoLabel, redoLabel, }, remotionRoot, logLevel, }) => (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
+    var _a, _b, _c, _d, _e;
     const keyframesToAdd = addedKeyframes === null ? [] : addedKeyframes;
     const keyframesToMove = movedKeyframes === null
         ? { sequenceKeyframes: [], effectKeyframes: [] }
@@ -68,11 +69,12 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     const totalKeyframeMoves = keyframesToMove.sequenceKeyframes.length +
         keyframesToMove.effectKeyframes.length;
     if (edits.length === 0 &&
+        captionPatches.length === 0 &&
         keyframesToAdd.length === 0 &&
         totalKeyframeMoves === 0) {
         throw new Error('No sequence prop edits to save');
     }
-    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-sequence-props] Received request with ${edits.length} edit(s), ${keyframesToAdd.length} added keyframe(s), and ${totalKeyframeMoves} moved keyframe(s)`);
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[save-sequence-props] Received request with ${edits.length} edit(s), ${captionPatches.length} caption patch request(s), ${keyframesToAdd.length} added keyframe(s), and ${totalKeyframeMoves} moved keyframe(s)`);
     const editGroups = new Map();
     for (const [index, edit] of edits.entries()) {
         const parsedValue = parseSequencePropEditValue(edit.value);
@@ -85,6 +87,7 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
         const group = (_a = editGroups.get(absolutePath)) !== null && _a !== void 0 ? _a : {
             fileRelativeToRoot,
             edits: [],
+            captionPatches: [],
             addedKeyframes: [],
             movedSequenceKeyframes: [],
             effectKeyframes: [],
@@ -105,15 +108,33 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
         });
         editGroups.set(absolutePath, group);
     }
+    for (const captionPatch of captionPatches) {
+        const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+            remotionRoot,
+            fileName: captionPatch.fileName,
+            action: 'modify',
+        });
+        const group = (_b = editGroups.get(absolutePath)) !== null && _b !== void 0 ? _b : {
+            fileRelativeToRoot,
+            edits: [],
+            captionPatches: [],
+            addedKeyframes: [],
+            movedSequenceKeyframes: [],
+            effectKeyframes: [],
+        };
+        group.captionPatches.push(captionPatch);
+        editGroups.set(absolutePath, group);
+    }
     for (const keyframe of keyframesToAdd) {
         const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
             remotionRoot,
             fileName: keyframe.fileName,
             action: 'modify',
         });
-        const group = (_b = editGroups.get(absolutePath)) !== null && _b !== void 0 ? _b : {
+        const group = (_c = editGroups.get(absolutePath)) !== null && _c !== void 0 ? _c : {
             fileRelativeToRoot,
             edits: [],
+            captionPatches: [],
             addedKeyframes: [],
             movedSequenceKeyframes: [],
             effectKeyframes: [],
@@ -127,9 +148,10 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
             fileName: keyframe.fileName,
             action: 'modify',
         });
-        const group = (_c = editGroups.get(absolutePath)) !== null && _c !== void 0 ? _c : {
+        const group = (_d = editGroups.get(absolutePath)) !== null && _d !== void 0 ? _d : {
             fileRelativeToRoot,
             edits: [],
+            captionPatches: [],
             addedKeyframes: [],
             movedSequenceKeyframes: [],
             effectKeyframes: [],
@@ -143,9 +165,10 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
             fileName: keyframe.fileName,
             action: 'modify',
         });
-        const group = (_d = editGroups.get(absolutePath)) !== null && _d !== void 0 ? _d : {
+        const group = (_e = editGroups.get(absolutePath)) !== null && _e !== void 0 ? _e : {
             fileRelativeToRoot,
             edits: [],
+            captionPatches: [],
             addedKeyframes: [],
             movedSequenceKeyframes: [],
             effectKeyframes: [],
@@ -157,6 +180,7 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     const outputByPath = new Map();
     const resultByIndex = new Map();
     const sequenceKeyframeLogs = [];
+    const captionPatchLogs = [];
     const effectKeyframeLogs = [];
     for (const [absolutePath, group] of editGroups) {
         const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
@@ -183,6 +207,32 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
                 });
             }
         }
+        for (const captionPatchRequest of group.captionPatches) {
+            const result = (0, update_inline_caption_patches_1.updateInlineCaptionPatches)({
+                input: output,
+                nodePath: captionPatchRequest.nodePath.nodePath,
+                patches: captionPatchRequest.patches,
+            });
+            output = result.output;
+            firstLogLine = Math.min(firstLogLine, result.logLine);
+            for (const [index, patch] of captionPatchRequest.patches.entries()) {
+                const changedFields = result.changedFields[index];
+                if (!changedFields) {
+                    throw new Error('Could not determine changed caption fields');
+                }
+                captionPatchLogs.push({
+                    fileRelativeToRoot: group.fileRelativeToRoot,
+                    line: result.logLine,
+                    index: patch.index,
+                    oldValueString: changedFields
+                        .map((field) => `${field}: ${patch.before[field]}`)
+                        .join(', '),
+                    newValueString: changedFields
+                        .map((field) => `${field}: ${patch.changes[field]}`)
+                        .join(', '),
+                });
+            }
+        }
         for (const keyframeGroup of groupBy(group.addedKeyframes, (keyframe) => JSON.stringify(keyframe.nodePath.nodePath))) {
             const [firstSequenceKeyframe] = keyframeGroup;
             if (!firstSequenceKeyframe) {
@@ -310,7 +360,8 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     }
     const undoMessage = `↩️  ${undoLabel}`;
     const redoMessage = `↪️  ${redoLabel}`;
-    const suppressHmr = (0, exports.shouldSuppressHmrForSequencePropEdits)(edits);
+    const suppressHmr = captionPatches.length === 0 &&
+        (0, exports.shouldSuppressHmrForSequencePropEdits)(edits);
     (0, undo_stack_1.pushTransactionToUndoStack)({
         snapshots,
         logLevel,
@@ -346,6 +397,20 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
             });
         }
     }
+    for (const log of captionPatchLogs) {
+        (0, log_update_1.logUpdate)({
+            fileRelativeToRoot: log.fileRelativeToRoot,
+            line: log.line,
+            key: `captions[${log.index}]`,
+            oldValueString: log.oldValueString,
+            newValueString: log.newValueString,
+            defaultValueString: null,
+            formatted: true,
+            logLevel,
+            removedProps: [],
+            addedProps: [],
+        });
+    }
     for (const log of sequenceKeyframeLogs) {
         (0, log_update_1.logUpdate)({
             fileRelativeToRoot: log.fileRelativeToRoot,
@@ -377,7 +442,7 @@ const saveSequencePropsHandler = ({ input: { edits, addedKeyframes, movedKeyfram
     }
     (0, undo_stack_1.printUndoHint)(logLevel);
     const statusTargets = [
-        ...new Map([...edits, ...keyframesToAdd].map((target) => [
+        ...new Map([...edits, ...captionPatches, ...keyframesToAdd].map((target) => [
             JSON.stringify(target.nodePath),
             target,
         ])).values(),

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

@@ -85,9 +85,10 @@ const getSequencePropsStatus = ({ fileName, line, column, preferredNodePath, com
             };
         }
     }
-    const status = (0, can_update_sequence_props_1.computeSequencePropsStatusFromFilenameByLine)({
+    const status = (0, can_update_sequence_props_1.computeSequencePropsStatusFromFilenameByLocation)({
         fileName,
         line,
+        column,
         componentIdentity,
         keys,
         assetKeys,

package/dist/preview-server/studio-protocol/handle-discovery.d.ts

@@ -0,0 +1,11 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { GitSource } from '@remotion/studio-shared';
+import type { LiveEventsServer } from '../live-events';
+export declare const ELEMENT_INSTALL_TARGET_RESPONSE_WAIT = 250;
+export declare const handleStudioProtocolDiscovery: ({ gitSource, liveEventsServer, remotionRoot, request, response, }: {
+    readonly gitSource: GitSource | null;
+    readonly liveEventsServer: LiveEventsServer;
+    readonly remotionRoot: string;
+    readonly request: IncomingMessage;
+    readonly response: ServerResponse<IncomingMessage>;
+}) => Promise<void>;

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

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleStudioProtocolDiscovery = exports.ELEMENT_INSTALL_TARGET_RESPONSE_WAIT = void 0;
+const node_path_1 = __importDefault(require("node:path"));
+const studio_shared_1 = require("@remotion/studio-shared");
+const version_1 = require("remotion/version");
+const element_install_state_1 = require("../element-install-state");
+const origin_policy_1 = require("./origin-policy");
+const protocol_response_1 = require("./protocol-response");
+const ELEMENT_INSTALL_FOCUS_MAX_AGE = 5 * 60 * 1000;
+exports.ELEMENT_INSTALL_TARGET_RESPONSE_WAIT = 250;
+const requestInstallTarget = ({ liveEventsServer, }) => {
+    const requestId = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+    liveEventsServer.sendEventToClient({
+        type: 'request-element-install-target',
+        requestId,
+    });
+    return requestId;
+};
+const getLiveInstallableTarget = (requestId) => {
+    const target = (0, element_install_state_1.getElementInstallTarget)(requestId);
+    const now = Date.now();
+    if (target === null ||
+        now - target.updatedAt >= element_install_state_1.ELEMENT_INSTALL_TARGET_MAX_AGE ||
+        target.lastFocusedAt === null ||
+        now - target.lastFocusedAt >= ELEMENT_INSTALL_FOCUS_MAX_AGE ||
+        !target.canInstall ||
+        target.readOnly ||
+        target.compositionFile === null ||
+        target.compositionId === null) {
+        return null;
+    }
+    return target;
+};
+const getProject = ({ gitSource, remotionRoot, }) => (0, studio_shared_1.getProjectName)({
+    basename: node_path_1.default.basename,
+    gitSource,
+    resolvedRemotionRoot: remotionRoot,
+});
+const handleStudioProtocolDiscovery = ({ gitSource, liveEventsServer, remotionRoot, request, response, }) => {
+    (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
+    if (!(0, origin_policy_1.isAllowedStudioProtocolOrigin)(request.headers.origin)) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'unsupported-origin',
+            message: 'Origin not allowed',
+            response,
+            status: 403,
+        });
+        return Promise.resolve();
+    }
+    if (request.method !== 'GET') {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'method-not-allowed',
+            message: 'Use GET for Studio Protocol discovery.',
+            response,
+            status: 405,
+        });
+        return Promise.resolve();
+    }
+    const requestId = requestInstallTarget({ liveEventsServer });
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            const now = Date.now();
+            const target = getLiveInstallableTarget(requestId);
+            const issued = target === null ? null : (0, element_install_state_1.issueStudioProtocolTarget)({ now, target });
+            response.writeHead(200, {
+                'Cache-Control': 'no-store',
+                'Content-Type': 'application/json',
+            });
+            response.end(JSON.stringify({
+                protocol: 'remotion-studio-protocol',
+                protocolVersion: 1,
+                studioVersion: version_1.VERSION,
+                capabilities: {
+                    install: [
+                        {
+                            payloadType: 'remotion-element',
+                            payloadVersions: [1],
+                        },
+                    ],
+                },
+                projectName: getProject({ gitSource, remotionRoot }),
+                installTarget: issued === null || target === null
+                    ? null
+                    : {
+                        id: issued.id,
+                        expiresAt: issued.expiresAt,
+                        compositionId: target.compositionId,
+                        lastFocusedAt: target.lastFocusedAt,
+                    },
+            }));
+            resolve();
+        }, exports.ELEMENT_INSTALL_TARGET_RESPONSE_WAIT);
+    });
+};
+exports.handleStudioProtocolDiscovery = handleStudioProtocolDiscovery;

package/dist/preview-server/studio-protocol/handle-install.d.ts

@@ -0,0 +1,10 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { LiveEventsServer } from '../live-events';
+type FocusStudioTab = (studioUrl: string) => void;
+export declare const handleStudioProtocolInstall: ({ focusStudioTab, liveEventsServer, request, response, }: {
+    readonly focusStudioTab: FocusStudioTab;
+    readonly liveEventsServer: LiveEventsServer;
+    readonly request: IncomingMessage;
+    readonly response: ServerResponse<IncomingMessage>;
+}) => Promise<void>;
+export {};

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

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleStudioProtocolInstall = void 0;
+const studio_protocol_1 = require("@remotion/studio-protocol");
+const zod_1 = require("zod");
+const element_install_state_1 = require("../element-install-state");
+const parse_body_1 = require("../parse-body");
+const origin_policy_1 = require("./origin-policy");
+const protocol_response_1 = require("./protocol-response");
+const studioProtocolInstallRequestSchema = zod_1.z.object({
+    protocol: zod_1.z.literal('remotion-studio-protocol'),
+    protocolVersion: zod_1.z.literal(1),
+    targetId: zod_1.z.string(),
+    payload: zod_1.z.unknown(),
+});
+// A valid payload may contain 250,000 JSON characters. Allow room for its
+// UTF-8 representation and the protocol envelope while keeping memory bounded.
+const MAX_STUDIO_PROTOCOL_INSTALL_BODY_SIZE = 1000000;
+const deliverElementInstall = ({ element, focusStudioTab, liveEventsServer, target, }) => {
+    if (target.compositionFile === null || target.compositionId === null) {
+        return false;
+    }
+    const installRequest = {
+        id: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+        clientId: target.clientId,
+        createdAt: Date.now(),
+        compositionFile: target.compositionFile,
+        compositionId: target.compositionId,
+        element,
+        position: null,
+    };
+    const delivered = liveEventsServer.sendEventToClientId(target.clientId, {
+        type: 'element-install-request',
+        request: installRequest,
+    });
+    if (delivered) {
+        focusStudioTab(target.studioUrl);
+    }
+    return delivered;
+};
+const handleStudioProtocolInstall = async ({ focusStudioTab, liveEventsServer, request, response, }) => {
+    (0, origin_policy_1.setStudioProtocolCorsHeaders)({ request, response });
+    if (!(0, origin_policy_1.isAllowedStudioProtocolOrigin)(request.headers.origin)) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'unsupported-origin',
+            message: 'Origin not allowed',
+            response,
+            status: 403,
+        });
+        return;
+    }
+    if (request.method !== 'POST') {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'method-not-allowed',
+            message: 'Use POST to request an Element installation.',
+            response,
+            status: 405,
+        });
+        return;
+    }
+    let body;
+    try {
+        body = await (0, parse_body_1.parseRequestBody)(request, {
+            maxBytes: MAX_STUDIO_PROTOCOL_INSTALL_BODY_SIZE,
+        });
+    }
+    catch (error) {
+        if (error instanceof parse_body_1.RequestBodyTooLargeError) {
+            (0, protocol_response_1.writeStudioProtocolError)({
+                code: 'request-too-large',
+                message: 'The request body is too large.',
+                response,
+                status: 413,
+            });
+            return;
+        }
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'invalid-request',
+            message: 'The request body is not valid JSON.',
+            response,
+            status: 400,
+        });
+        return;
+    }
+    const parsedRequest = studioProtocolInstallRequestSchema.safeParse(body);
+    if (!parsedRequest.success) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'unsupported-protocol',
+            message: 'Invalid Remotion Studio Protocol request.',
+            response,
+            status: 400,
+        });
+        return;
+    }
+    const payload = studio_protocol_1.StudioProtocolInternals.parseStudioElementPayload(parsedRequest.data.payload);
+    if (payload === null) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'invalid-payload',
+            message: 'Invalid Element payload.',
+            response,
+            status: 400,
+        });
+        return;
+    }
+    const target = (0, element_install_state_1.consumeStudioProtocolTarget)({
+        now: Date.now(),
+        targetId: parsedRequest.data.targetId,
+    });
+    if (target === null) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'target-expired',
+            message: 'The selected Studio target is no longer available.',
+            response,
+            status: 409,
+        });
+        return;
+    }
+    if (!deliverElementInstall({
+        element: payload.element,
+        focusStudioTab,
+        liveEventsServer,
+        target,
+    })) {
+        (0, protocol_response_1.writeStudioProtocolError)({
+            code: 'target-expired',
+            message: 'The selected Remotion Studio tab is no longer connected.',
+            response,
+            status: 409,
+        });
+        return;
+    }
+    response.writeHead(200, { 'Content-Type': 'application/json' });
+    response.end(JSON.stringify({
+        protocol: 'remotion-studio-protocol',
+        protocolVersion: 1,
+        status: 'awaiting-confirmation',
+    }));
+};
+exports.handleStudioProtocolInstall = handleStudioProtocolInstall;

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

@@ -0,0 +1,10 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+export declare const isAllowedStudioProtocolOrigin: (origin: string | undefined) => boolean;
+export declare const setStudioProtocolCorsHeaders: ({ request, response, }: {
+    readonly request: IncomingMessage;
+    readonly response: ServerResponse<IncomingMessage>;
+}) => void;
+export declare const handleStudioProtocolOptions: ({ request, response, }: {
+    readonly request: IncomingMessage;
+    readonly response: ServerResponse<IncomingMessage>;
+}) => Promise<void>;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleStudioProtocolOptions = exports.setStudioProtocolCorsHeaders = exports.isAllowedStudioProtocolOrigin = void 0;
+const isAllowedStudioProtocolOrigin = (origin) => {
+    if (!origin) {
+        return false;
+    }
+    try {
+        const url = new URL(origin);
+        return ((url.protocol === 'https:' &&
+            (url.hostname === 'remotion.dev' ||
+                url.hostname === 'www.remotion.dev')) ||
+            (url.protocol === 'http:' &&
+                (url.hostname === 'localhost' || url.hostname === '127.0.0.1')));
+    }
+    catch (_a) {
+        return false;
+    }
+};
+exports.isAllowedStudioProtocolOrigin = isAllowedStudioProtocolOrigin;
+const setStudioProtocolCorsHeaders = ({ request, response, }) => {
+    const { origin } = request.headers;
+    if (typeof origin !== 'string' || !(0, exports.isAllowedStudioProtocolOrigin)(origin)) {
+        return;
+    }
+    response.setHeader('Access-Control-Allow-Origin', origin);
+    response.setHeader('Vary', 'Origin');
+    response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+    response.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+    response.setHeader('Access-Control-Max-Age', '600');
+    response.setHeader('Access-Control-Allow-Private-Network', 'true');
+};
+exports.setStudioProtocolCorsHeaders = setStudioProtocolCorsHeaders;
+const handleStudioProtocolOptions = ({ request, response, }) => {
+    (0, exports.setStudioProtocolCorsHeaders)({ request, response });
+    response.writeHead((0, exports.isAllowedStudioProtocolOrigin)(request.headers.origin) ? 204 : 403);
+    response.end();
+    return Promise.resolve();
+};
+exports.handleStudioProtocolOptions = handleStudioProtocolOptions;

package/dist/preview-server/studio-protocol/protocol-response.d.ts

@@ -0,0 +1,7 @@
+import type { ServerResponse } from 'node:http';
+export declare const writeStudioProtocolError: ({ code, message, response, status, }: {
+    readonly code: string;
+    readonly message: string;
+    readonly response: ServerResponse<import("http").IncomingMessage>;
+    readonly status: number;
+}) => void;

package/dist/preview-server/studio-protocol/protocol-response.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.writeStudioProtocolError = void 0;
+const writeStudioProtocolError = ({ code, message, response, status, }) => {
+    response.writeHead(status, { 'Content-Type': 'application/json' });
+    response.end(JSON.stringify({
+        protocol: 'remotion-studio-protocol',
+        protocolVersion: 1,
+        status: 'error',
+        error: { code, message },
+    }));
+};
+exports.writeStudioProtocolError = writeStudioProtocolError;