@remotion/studio-server 4.0.501 → 4.0.503

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,106 @@
+"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 });
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    if (requestOrigin === null) {
+        (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,
+                    origin: requestOrigin,
+                    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,147 @@
+"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, origin, 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,
+        from: null,
+        position: null,
+        source: {
+            type: 'studio-protocol',
+            origin,
+        },
+    };
+    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 });
+    const requestOrigin = (0, origin_policy_1.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    if (requestOrigin === null) {
+        (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(),
+        origin: requestOrigin,
+        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,
+        origin: requestOrigin,
+        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,11 @@
+import type { IncomingMessage, ServerResponse } from 'node:http';
+export declare const getAllowedStudioProtocolOrigin: (origin: string | undefined) => string | null;
+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,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleStudioProtocolOptions = exports.setStudioProtocolCorsHeaders = exports.isAllowedStudioProtocolOrigin = exports.getAllowedStudioProtocolOrigin = void 0;
+const getAllowedStudioProtocolOrigin = (origin) => {
+    if (!origin) {
+        return null;
+    }
+    try {
+        const url = new URL(origin);
+        const isLoopbackHttp = url.protocol === 'http:' &&
+            (url.hostname === 'localhost' || url.hostname === '127.0.0.1');
+        if (url.protocol !== 'https:' && !isLoopbackHttp) {
+            return null;
+        }
+        return url.origin;
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.getAllowedStudioProtocolOrigin = getAllowedStudioProtocolOrigin;
+const isAllowedStudioProtocolOrigin = (origin) => (0, exports.getAllowedStudioProtocolOrigin)(origin) !== null;
+exports.isAllowedStudioProtocolOrigin = isAllowedStudioProtocolOrigin;
+const setStudioProtocolCorsHeaders = ({ request, response, }) => {
+    const origin = (0, exports.getAllowedStudioProtocolOrigin)(request.headers.origin);
+    if (origin === null) {
+        return;
+    }
+    response.setHeader('Access-Control-Allow-Origin', origin);
+    response.setHeader('Vary', 'Origin, Access-Control-Request-Headers, Access-Control-Request-Private-Network');
+    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.getAllowedStudioProtocolOrigin)(request.headers.origin) === null ? 403 : 204);
+    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;

package/dist/preview-server/update-available.d.ts

@@ -1,3 +1,9 @@
 import type { UpdateAvailableResponse } from '@remotion/studio-shared';
+export declare const isUpdateAvailable: ({ remotionRoot, currentVersion, logLevel, getLatestVersion, }: {
+    remotionRoot: string;
+    currentVersion: string;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    getLatestVersion: (() => Promise<string>) | null;
+}) => Promise<UpdateAvailableResponse>;
 export declare const getRemotionVersion: () => any;
 export declare const isUpdateAvailableWithTimeout: (remotionRoot: string, logLevel: "error" | "info" | "trace" | "verbose" | "warn") => Promise<UpdateAvailableResponse>;

package/dist/preview-server/update-available.js

@@ -3,12 +3,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isUpdateAvailableWithTimeout = exports.getRemotionVersion = void 0;
+exports.isUpdateAvailableWithTimeout = exports.getRemotionVersion = exports.isUpdateAvailable = void 0;
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
 const semver_1 = __importDefault(require("semver"));
+const detect_outdated_remotion_skills_1 = require("../detect-outdated-remotion-skills");
 const get_latest_remotion_version_1 = require("../get-latest-remotion-version");
 const get_package_manager_1 = require("./get-package-manager");
-const isUpdateAvailable = async ({ remotionRoot, currentVersion, logLevel, }) => {
-    const latest = await (0, get_latest_remotion_version_1.getLatestRemotionVersion)();
+const getSkillsUpdateInfo = ({ remotionRoot, currentVersion, }) => {
+    const projectSkills = (0, detect_outdated_remotion_skills_1.detectOutdatedRemotionSkills)({
+        cwd: remotionRoot,
+        currentVersion,
+    }).project;
+    return {
+        skillsUpdateAvailable: projectSkills.type === 'outdated',
+        remotionUpgradeSkillAvailable: (0, node_fs_1.existsSync)(node_path_1.default.join(remotionRoot, '.agents', 'skills', 'remotion-upgrade', 'SKILL.md')),
+    };
+};
+const isUpdateAvailable = async ({ remotionRoot, currentVersion, logLevel, getLatestVersion, }) => {
+    const latest = await (getLatestVersion !== null && getLatestVersion !== void 0 ? getLatestVersion : get_latest_remotion_version_1.getLatestRemotionVersion)();
+    const skillsUpdateInfo = getSkillsUpdateInfo({ remotionRoot, currentVersion });
     const pkgManager = (0, get_package_manager_1.getPackageManager)({
         remotionRoot,
         packageManager: undefined,
@@ -17,12 +31,14 @@ const isUpdateAvailable = async ({ remotionRoot, currentVersion, logLevel, }) =>
     });
     return {
         updateAvailable: semver_1.default.lt(currentVersion, latest),
+        ...skillsUpdateInfo,
         currentVersion,
         latestVersion: latest,
         timedOut: false,
         packageManager: pkgManager === 'unknown' ? 'unknown' : pkgManager.manager,
     };
 };
+exports.isUpdateAvailable = isUpdateAvailable;
 const getRemotionVersion = () => {
     // careful when refactoring this file, path must be adjusted
     const packageJson = require('../../package.json');
@@ -32,6 +48,10 @@ const getRemotionVersion = () => {
 exports.getRemotionVersion = getRemotionVersion;
 const isUpdateAvailableWithTimeout = (remotionRoot, logLevel) => {
     const version = (0, exports.getRemotionVersion)();
+    const skillsUpdateInfo = getSkillsUpdateInfo({
+        remotionRoot,
+        currentVersion: version,
+    });
     const threeSecTimeout = new Promise((resolve) => {
         const pkgManager = (0, get_package_manager_1.getPackageManager)({
             remotionRoot,
@@ -44,6 +64,7 @@ const isUpdateAvailableWithTimeout = (remotionRoot, logLevel) => {
                 currentVersion: version,
                 latestVersion: version,
                 updateAvailable: false,
+                ...skillsUpdateInfo,
                 timedOut: true,
                 packageManager: pkgManager === 'unknown' ? 'unknown' : pkgManager.manager,
             });
@@ -51,7 +72,12 @@ const isUpdateAvailableWithTimeout = (remotionRoot, logLevel) => {
     });
     return Promise.race([
         threeSecTimeout,
-        isUpdateAvailable({ remotionRoot, currentVersion: version, logLevel }),
+        (0, exports.isUpdateAvailable)({
+            remotionRoot,
+            currentVersion: version,
+            logLevel,
+            getLatestVersion: null,
+        }),
     ]);
 };
 exports.isUpdateAvailableWithTimeout = isUpdateAvailableWithTimeout;

package/dist/remotion-skill-names.d.ts

@@ -0,0 +1,2 @@
+export declare const remotionSkillNames: readonly ["remotion-best-practices", "remotion-captions", "remotion-create", "remotion-docs", "remotion-interactivity", "remotion-maps", "remotion-markup", "remotion-multimedia", "remotion-render", "remotion-saas", "remotion-upgrade"];
+export type RemotionSkillName = (typeof remotionSkillNames)[number];

package/dist/remotion-skill-names.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.remotionSkillNames = void 0;
+exports.remotionSkillNames = [
+    'remotion-best-practices',
+    'remotion-captions',
+    'remotion-create',
+    'remotion-docs',
+    'remotion-interactivity',
+    'remotion-maps',
+    'remotion-markup',
+    'remotion-multimedia',
+    'remotion-render',
+    'remotion-saas',
+    'remotion-upgrade',
+];

package/dist/routes.d.ts

@@ -1,8 +1,9 @@
 import type { IncomingMessage, ServerResponse } from 'node:http';
+import type { DefaultEditor } from '@remotion/renderer';
 import type { GitSource, RenderDefaults, RenderJob, StudioRuntimeConfig } from '@remotion/studio-shared';
 import type { QueueMethods } from './preview-server/api-types';
 import type { LiveEventsServer } from './preview-server/live-events';
-export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, configFile, }: {
+export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash, outputHashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, logLevel, getRenderQueue, getRenderDefaults, getNumberOfAudioTags, queueMethods: methods, gitSource, binariesDirectory, getAudioLatencyHint, getPreviewSampleRate, enableCrossSiteIsolation, getStudioRuntimeConfig, getDefaultEditor, configFile, }: {
     staticHash: string;
     staticHashPrefix: string;
     outputHash: string;
@@ -26,5 +27,6 @@ export declare const handleRoutes: ({ staticHash, staticHashPrefix, outputHash,
     getPreviewSampleRate: () => number | null;
     enableCrossSiteIsolation: boolean;
     getStudioRuntimeConfig: () => StudioRuntimeConfig;
+    getDefaultEditor: () => DefaultEditor | null;
     configFile: string | null;
 }) => Promise<void>;