@remotion/studio-server 4.0.514 → 4.0.516

package/dist/preview-server/routes/delete-effect-keyframe.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteEffectKeyframeHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const studio_shared_1 = require("@remotion/studio-shared");
+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 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");
+const can_update_sequence_props_1 = require("./can-update-sequence-props");
+const log_effect_update_1 = require("./log-updates/log-effect-update");
+const save_props_mutex_1 = require("./save-props-mutex");
+const deleteEffectKeyframeHandler = ({ input: { fileName, sequenceNodePath, effectIndex, key, frame, schema, clientId, }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-effect-keyframe] Received request for fileName="${fileName}" effectIndex=${effectIndex} key="${key}" frame=${frame}`);
+    const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+        remotionRoot,
+        fileName,
+        action: 'modify',
+    });
+    const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+    const { output, oldValueStrings, newValueStrings, formatted, logLine, effectCallee, } = await (0, update_keyframes_1.updateEffectKeyframes)({
+        input: fileContents,
+        sequenceNodePath: sequenceNodePath.nodePath,
+        effectIndex,
+        updates: [
+            {
+                key,
+                operation: {
+                    type: 'remove',
+                    frame,
+                },
+            },
+        ],
+    });
+    const oldValueString = oldValueStrings[0];
+    const newValueString = newValueStrings[0];
+    const undoPropChange = `${key} keyframe restored at frame ${frame}`;
+    const redoPropChange = `${key} keyframe deleted at frame ${frame}`;
+    (0, undo_stack_1.pushToUndoStack)({
+        filePath: absolutePath,
+        oldContents: fileContents,
+        newContents: null,
+        logLevel,
+        remotionRoot,
+        logLine,
+        description: {
+            undoMessage: `↩️  ${undoPropChange}`,
+            redoMessage: `↪️  ${redoPropChange}`,
+        },
+        entryType: 'effect-props',
+        suppressHmrOnFileRestore: true,
+    });
+    (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
+    (0, log_effect_update_1.logEffectUpdate)({
+        fileRelativeToRoot,
+        line: logLine,
+        effectName: effectCallee,
+        propKey: key,
+        oldValueString,
+        newValueString,
+        defaultValueString: null,
+        formatted,
+        logLevel,
+        removedProps: [],
+        addedProps: [],
+    });
+    (0, undo_stack_1.printUndoHint)(logLevel);
+    const ast = (0, parse_ast_1.parseAst)((0, node_fs_1.readFileSync)(absolutePath, 'utf-8'));
+    const jsx = (0, can_update_sequence_props_1.findJsxElementAtNodePath)(ast, sequenceNodePath.nodePath);
+    if (!jsx) {
+        return {
+            canUpdate: false,
+            effectIndex,
+            reason: 'not-found',
+        };
+    }
+    return (0, can_update_effect_props_1.computeEffectPropStatus)({
+        jsx,
+        effectIndex,
+        keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+    });
+});
+exports.deleteEffectKeyframeHandler = deleteEffectKeyframeHandler;

package/dist/preview-server/routes/delete-jsx-node.js

@@ -7,6 +7,7 @@ const delete_jsx_node_1 = require("../../codemods/delete-jsx-node");
 const file_watcher_1 = require("../../file-watcher");
 const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
 const format_log_file_location_1 = require("../format-log-file-location");
+const hmr_timing_1 = require("../hmr-timing");
 const sequence_node_path_mutation_1 = require("../sequence-node-path-mutation");
 const undo_stack_1 = require("../undo-stack");
 const log_update_1 = require("./log-updates/log-update");
@@ -21,6 +22,11 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
     return (0, source_file_write_queue_1.withSourceFileWriteQueue)(async () => {
         var _a;
         try {
+            (0, hmr_timing_1.logHmrTiming)({
+                detail: null,
+                logLevel,
+                stage: 'delete-jsx-node-request-start',
+            });
             if (nodes.length === 0) {
                 throw new Error('No JSX nodes were specified for deletion');
             }
@@ -41,6 +47,13 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
                 const { output, formatted, nodeLabels, logLines, nodePathRemappings } = await (0, delete_jsx_node_1.deleteJsxNodes)({
                     input: fileContents,
                     nodePaths: fileItems.map((item) => item.nodePath),
+                    onFormatFile: (stage) => {
+                        (0, hmr_timing_1.logHmrTiming)({
+                            detail: `file=${fileRelativeToRoot}`,
+                            logLevel,
+                            stage: `source-file-format-${stage}`,
+                        });
+                    },
                 });
                 return {
                     absolutePath,
@@ -53,6 +66,11 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
                     logLine: Math.min(...logLines),
                 };
             }));
+            (0, hmr_timing_1.logHmrTiming)({
+                detail: `files=${updates.length}`,
+                logLevel,
+                stage: 'delete-jsx-node-codemod-complete',
+            });
             const nodePathMutation = (0, sequence_node_path_mutation_1.broadcastSequenceNodePathMutation)(updates.map((update) => ({
                 absolutePath: update.absolutePath,
                 remappings: update.nodePathRemappings,
@@ -76,12 +94,22 @@ const deleteJsxNodeHandler = ({ input: { nodes }, remotionRoot, logLevel }) => {
                     nodePathRemappings: update.nodePathRemappings,
                 });
                 (0, undo_stack_1.suppressUndoStackInvalidation)(update.absolutePath);
+                (0, hmr_timing_1.logHmrTiming)({
+                    detail: `file=${update.fileRelativeToRoot}`,
+                    logLevel,
+                    stage: 'source-file-write-start',
+                });
                 (0, file_watcher_1.writeFileAndNotifyFileWatchers)({
                     file: update.absolutePath,
                     content: update.output,
                     originatorClientId: undefined,
                     metadata: { skipSequencePropsUpdate: true },
                 });
+                (0, hmr_timing_1.logHmrTiming)({
+                    detail: `file=${update.fileRelativeToRoot}`,
+                    logLevel,
+                    stage: 'source-file-write-complete',
+                });
                 const locationLabel = (0, format_log_file_location_1.formatLogFileLocation)({
                     remotionRoot,
                     absolutePath: update.absolutePath,

package/dist/preview-server/routes/delete-sequence-keyframe.d.ts

@@ -0,0 +1,3 @@
+import type { DeleteSequenceKeyframeRequest, DeleteSequenceKeyframeResponse } from '@remotion/studio-shared';
+import type { ApiHandler } from '../api-types';
+export declare const deleteSequenceKeyframeHandler: ApiHandler<DeleteSequenceKeyframeRequest, DeleteSequenceKeyframeResponse>;

package/dist/preview-server/routes/delete-sequence-keyframe.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteSequenceKeyframeHandler = void 0;
+const node_fs_1 = require("node:fs");
+const renderer_1 = require("@remotion/renderer");
+const studio_shared_1 = require("@remotion/studio-shared");
+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 undo_stack_1 = require("../undo-stack");
+const watch_ignore_next_change_1 = require("../watch-ignore-next-change");
+const can_update_sequence_props_1 = require("./can-update-sequence-props");
+const log_update_1 = require("./log-updates/log-update");
+const save_props_mutex_1 = require("./save-props-mutex");
+const deleteSequenceKeyframeHandler = ({ input: { fileName, nodePath, key, frame, schema, clientId }, remotionRoot, logLevel, }) => (0, save_props_mutex_1.withSavePropsLock)(async () => {
+    renderer_1.RenderInternals.Log.trace({ indent: false, logLevel }, `[delete-sequence-keyframe] Received request for fileName="${fileName}" key="${key}" frame=${frame}`);
+    const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
+        remotionRoot,
+        fileName,
+        action: 'modify',
+    });
+    const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
+    const { output, oldValueStrings, newValueStrings, formatted, logLine } = await (0, update_keyframes_1.updateSequenceKeyframes)({
+        input: fileContents,
+        nodePath: nodePath.nodePath,
+        updates: [
+            {
+                key,
+                operation: {
+                    type: 'remove',
+                    frame,
+                },
+            },
+        ],
+    });
+    const oldValueString = oldValueStrings[0];
+    const newValueString = newValueStrings[0];
+    const undoPropChange = `${key} keyframe restored at frame ${frame}`;
+    const redoPropChange = `${key} keyframe deleted at frame ${frame}`;
+    (0, undo_stack_1.pushToUndoStack)({
+        filePath: absolutePath,
+        oldContents: fileContents,
+        newContents: null,
+        logLevel,
+        remotionRoot,
+        logLine,
+        description: {
+            undoMessage: `↩️  ${undoPropChange}`,
+            redoMessage: `↪️  ${redoPropChange}`,
+        },
+        entryType: 'sequence-props',
+        suppressHmrOnFileRestore: true,
+    });
+    (0, undo_stack_1.suppressUndoStackInvalidation)(absolutePath);
+    (0, watch_ignore_next_change_1.suppressBundlerUpdateForFile)(absolutePath);
+    (0, file_watcher_1.writeFileAndNotifyFileWatchers)(absolutePath, output, clientId);
+    (0, log_update_1.logUpdate)({
+        fileRelativeToRoot,
+        line: logLine,
+        key,
+        oldValueString,
+        newValueString,
+        defaultValueString: null,
+        formatted,
+        logLevel,
+        removedProps: [],
+        addedProps: [],
+    });
+    (0, undo_stack_1.printUndoHint)(logLevel);
+    const status = (0, can_update_sequence_props_1.computeSequencePropsStatusFromContent)({
+        fileContents: output,
+        keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
+        nodePath: nodePath.nodePath,
+        effects: [],
+    });
+    return {
+        canUpdate: true,
+        props: status.props,
+        results: [{ fileName, nodePath, props: status.props }],
+    };
+});
+exports.deleteSequenceKeyframeHandler = deleteSequenceKeyframeHandler;

package/dist/preview-server/routes/download-remote-asset.d.ts

@@ -1,7 +1,4 @@
-import { type DownloadRemoteAssetRequest, type DownloadRemoteAssetResponse, type ImageFileType } from '@remotion/studio-shared';
+import { getRemoteAssetFilename, type DownloadRemoteAssetRequest, type DownloadRemoteAssetResponse } from '@remotion/studio-shared';
 import type { ApiHandler } from '../api-types';
-export declare const getRemoteAssetFilename: ({ fileType, url, }: {
-    fileType: ImageFileType;
-    url: URL;
-}) => string;
+export { getRemoteAssetFilename };
 export declare const downloadRemoteAssetHandler: ApiHandler<DownloadRemoteAssetRequest, DownloadRemoteAssetResponse>;

package/dist/preview-server/routes/download-remote-asset.js

@@ -9,58 +9,9 @@ const node_fs_1 = require("node:fs");
 const node_net_1 = require("node:net");
 const node_path_1 = __importDefault(require("node:path"));
 const studio_shared_1 = require("@remotion/studio-shared");
+Object.defineProperty(exports, "getRemoteAssetFilename", { enumerable: true, get: function () { return studio_shared_1.getRemoteAssetFilename; } });
 const validate_same_origin_1 = require("../validate-same-origin");
-const maxRemoteAssetSize = 50 * 1024 * 1024;
-const remoteAssetDownloadTimeout = 15000;
 const maxRemoteAssetRedirects = 5;
-const remoteAssetAcceptHeader = 'image/png,image/apng,image/jpeg,image/webp,image/bmp,image/gif';
-const extensionsForFileType = {
-    png: ['png'],
-    apng: ['png', 'apng'],
-    jpeg: ['jpg', 'jpeg'],
-    webp: ['webp'],
-    bmp: ['bmp'],
-    gif: ['gif'],
-};
-const safeDecodeURIComponent = (value) => {
-    try {
-        return decodeURIComponent(value);
-    }
-    catch (_a) {
-        return value;
-    }
-};
-const sanitizeAssetFilename = (filename) => {
-    return Array.from(filename)
-        .map((character) => {
-        const charCode = character.charCodeAt(0);
-        return charCode <= 31 || '<>:"/\\|?*'.includes(character)
-            ? '-'
-            : character;
-    })
-        .join('')
-        .trim()
-        .replace(/^[. ]+|[. ]+$/g, '');
-};
-const getRemoteAssetFilename = ({ fileType, url, }) => {
-    const basename = safeDecodeURIComponent(node_path_1.default.posix.basename(url.pathname));
-    const sanitized = sanitizeAssetFilename(basename);
-    const filenameWithoutFallback = sanitized === '' ? 'image' : sanitized;
-    const extensions = extensionsForFileType[fileType.type];
-    const extension = node_path_1.default
-        .extname(filenameWithoutFallback)
-        .slice(1)
-        .toLowerCase();
-    if (extensions.includes(extension)) {
-        return filenameWithoutFallback;
-    }
-    const withoutExtension = extension
-        ? filenameWithoutFallback.slice(0, -(extension.length + 1))
-        : filenameWithoutFallback;
-    const safeName = withoutExtension === '' ? 'image' : withoutExtension;
-    return `${safeName}.${extensions[0]}`;
-};
-exports.getRemoteAssetFilename = getRemoteAssetFilename;
 const isForbiddenIpv4Address = (address) => {
     const parts = address.split('.').map((part) => Number(part));
     if (parts.length !== 4 ||
@@ -131,7 +82,7 @@ const fetchRemoteAsset = async ({ signal, url, }) => {
         await ensureRemoteUrlIsAllowed(currentUrl);
         const response = await fetch(currentUrl, {
             headers: {
-                accept: remoteAssetAcceptHeader,
+                accept: studio_shared_1.remoteAssetAcceptHeader,
             },
             redirect: 'manual',
             signal,
@@ -153,13 +104,13 @@ const fetchRemoteAsset = async ({ signal, url, }) => {
 };
 const readRemoteAsset = async ({ response, abort, }) => {
     const contentLength = response.headers.get('content-length');
-    if (contentLength !== null && Number(contentLength) > maxRemoteAssetSize) {
+    if (contentLength !== null && Number(contentLength) > studio_shared_1.maxRemoteAssetSize) {
         abort();
         throw new Error('Remote asset exceeds the 50MB size limit');
     }
     if (!response.body) {
         const buffer = await response.arrayBuffer();
-        if (buffer.byteLength > maxRemoteAssetSize) {
+        if (buffer.byteLength > studio_shared_1.maxRemoteAssetSize) {
             throw new Error('Remote asset exceeds the 50MB size limit');
         }
         return new Uint8Array(buffer);
@@ -176,7 +127,7 @@ const readRemoteAsset = async ({ response, abort, }) => {
             continue;
         }
         size += value.byteLength;
-        if (size > maxRemoteAssetSize) {
+        if (size > studio_shared_1.maxRemoteAssetSize) {
             abort();
             await reader.cancel();
             throw new Error('Remote asset exceeds the 50MB size limit');
@@ -203,7 +154,7 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
     const controller = new AbortController();
     const timeout = setTimeout(() => {
         controller.abort();
-    }, remoteAssetDownloadTimeout);
+    }, studio_shared_1.remoteAssetDownloadTimeout);
     let contents;
     try {
         const response = await fetchRemoteAsset({
@@ -231,7 +182,7 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
     if (!(0, studio_shared_1.isImageFileType)(fileType)) {
         throw new Error('Remote asset is not a supported image');
     }
-    const assetPath = (0, exports.getRemoteAssetFilename)({ fileType, url });
+    const assetPath = (0, studio_shared_1.getRemoteAssetFilename)({ fileType, url });
     const absolutePath = node_path_1.default.join(publicDir, assetPath);
     const relativeToPublicDir = node_path_1.default.relative(publicDir, absolutePath);
     if (relativeToPublicDir.startsWith('..') ||
@@ -252,20 +203,7 @@ const downloadRemoteAssetHandler = async ({ input, publicDir, request }) => {
         (0, node_fs_1.mkdirSync)(node_path_1.default.dirname(absolutePath), { recursive: true });
         (0, node_fs_1.writeFileSync)(absolutePath, contents);
     }
-    const element = {
-        type: 'asset',
-        assetType: fileType.type === 'gif'
-            ? 'gif'
-            : fileType.type === 'apng' ||
-                (fileType.type === 'webp' && fileType.animated)
-                ? 'animated-image'
-                : 'image',
-        src: assetPath,
-        srcType: 'static',
-        dimensions: fileType.dimensions,
-        durationInFrames: null,
-        position: null,
-    };
+    const element = (0, studio_shared_1.getRemoteAssetElement)({ assetPath, fileType });
     return {
         assetPath,
         sizeInBytes: contents.byteLength,

package/dist/preview-server/routes/install-dependency.js

@@ -46,13 +46,19 @@ const handleInstallPackage = async ({ logLevel, remotionRoot, input: { dependenc
         manager: manager.manager,
         packages: packagesWithVersions,
         version: '',
-        additionalArgs: [],
+        additionalArgs: manager.manager === 'yarn' ? [] : ['--ignore-scripts'],
     });
     renderer_1.RenderInternals.Log.info({ indent: false, logLevel }, renderer_1.RenderInternals.chalk.gray(`╭─  ${manager.manager} ${command.join(' ')}`));
     const time = Date.now();
     try {
         await new Promise((resolve, reject) => {
-            const cmd = (0, node_child_process_1.spawn)(manager.manager, command, (0, package_manager_spawn_options_1.getPackageManagerSpawnOptions)());
+            const cmd = (0, node_child_process_1.spawn)(manager.manager, command, {
+                ...(0, package_manager_spawn_options_1.getPackageManagerSpawnOptions)(),
+                env: {
+                    ...process.env,
+                    YARN_ENABLE_SCRIPTS: 'false',
+                },
+            });
             cmd.on('error', reject);
             cmd.stdout.on('data', (d) => d
                 .toString()

package/dist/preview-server/routes/remotion-skills-info.js

@@ -8,15 +8,25 @@ const node_fs_1 = require("node:fs");
 const node_os_1 = require("node:os");
 const node_path_1 = __importDefault(require("node:path"));
 const detect_outdated_remotion_skills_1 = require("../../detect-outdated-remotion-skills");
+const remotion_skill_names_1 = require("../../remotion-skill-names");
 const getRemotionSkillsInfo = ({ remotionRoot, homeDirectory = (0, node_os_1.homedir)(), }) => {
     const skillsDirectories = (0, detect_outdated_remotion_skills_1.getRemotionSkillsDirectories)({
         cwd: remotionRoot,
         homeDirectory,
     });
-    const isSkillAvailable = (skillName) => Object.values(skillsDirectories).some((skillsDirectory) => (0, node_fs_1.existsSync)(node_path_1.default.join(skillsDirectory, skillName, 'SKILL.md')));
+    const skills = remotion_skill_names_1.remotionSkillNames.map((name) => ({
+        name,
+        installedInProject: (0, node_fs_1.existsSync)(node_path_1.default.join(skillsDirectories.project, name, 'SKILL.md')),
+        installedGlobally: (0, node_fs_1.existsSync)(node_path_1.default.join(skillsDirectories.global, name, 'SKILL.md')),
+    }));
+    const isSkillAvailable = (skillName) => {
+        const skill = skills.find(({ name }) => name === skillName);
+        return Boolean((skill === null || skill === void 0 ? void 0 : skill.installedInProject) || (skill === null || skill === void 0 ? void 0 : skill.installedGlobally));
+    };
     return {
         remotionUpgradeSkillAvailable: isSkillAvailable('remotion-upgrade'),
         remotionInteractivitySkillAvailable: isSkillAvailable('remotion-interactivity'),
+        skills,
     };
 };
 exports.getRemotionSkillsInfo = getRemotionSkillsInfo;

package/dist/preview-server/routes/save-props-mutex.d.ts

@@ -0,0 +1 @@
+export declare const withSavePropsLock: <T>(fn: () => Promise<T>) => Promise<T>;

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withSavePropsLock = void 0;
+let chain = Promise.resolve();
+const withSavePropsLock = (fn) => {
+    const run = () => fn();
+    const next = chain.then(run, run);
+    chain = next.then(() => undefined, () => undefined);
+    return next;
+};
+exports.withSavePropsLock = withSavePropsLock;

package/dist/preview-server/serve-static.d.ts

@@ -6,10 +6,11 @@
  * MIT Licensed
  */
 import type { IncomingMessage, ServerResponse } from 'node:http';
-export declare const serveStatic: ({ root, path, req, res, allowOutsidePublicFolder, }: {
+export declare const serveStatic: ({ root, path, req, res, allowOutsidePublicFolder, allowRemotionConvertCors, }: {
     root: string;
     path: string;
     req: IncomingMessage;
     res: ServerResponse<IncomingMessage>;
     allowOutsidePublicFolder: boolean;
+    allowRemotionConvertCors: boolean;
 }) => Promise<void>;

package/dist/preview-server/serve-static.js

@@ -12,7 +12,36 @@ const node_fs_1 = require("node:fs");
 const renderer_1 = require("@remotion/renderer");
 const middleware_1 = require("./dev-middleware/middleware");
 const range_parser_1 = require("./dev-middleware/range-parser");
-const serveStatic = async function ({ root, path, req, res, allowOutsidePublicFolder, }) {
+const remotionConvertOrigins = [
+    'https://remotion.dev',
+    'https://www.remotion.dev',
+    'https://convert.remotion.dev',
+];
+const applyRemotionConvertCorsHeaders = ({ req, res, }) => {
+    const { origin } = req.headers;
+    if (!origin || !remotionConvertOrigins.includes(origin)) {
+        return false;
+    }
+    res.setHeader('Access-Control-Allow-Origin', origin);
+    res.setHeader('Vary', 'Origin, Access-Control-Request-Headers, Access-Control-Request-Private-Network');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, HEAD, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Range, Content-Type');
+    res.setHeader('Access-Control-Expose-Headers', 'Accept-Ranges, Content-Length, Content-Range');
+    res.setHeader('Access-Control-Max-Age', '600');
+    if (req.headers['access-control-request-private-network']) {
+        res.setHeader('Access-Control-Allow-Private-Network', 'true');
+    }
+    return true;
+};
+const serveStatic = async function ({ root, path, req, res, allowOutsidePublicFolder, allowRemotionConvertCors, }) {
+    const remotionConvertCorsAllowed = allowRemotionConvertCors
+        ? applyRemotionConvertCorsHeaders({ req, res })
+        : false;
+    if (req.method === 'OPTIONS' && remotionConvertCorsAllowed) {
+        res.statusCode = 204;
+        res.end();
+        return;
+    }
     if (req.method !== 'GET' && req.method !== 'HEAD') {
         // method not allowed
         res.statusCode = 405;
@@ -43,6 +72,7 @@ const serveStatic = async function ({ root, path, req, res, allowOutsidePublicFo
             req,
             res,
             allowOutsidePublicFolder: true,
+            allowRemotionConvertCors,
         });
     }
     const isDirectory = lstat.isDirectory();

package/dist/routes.js

@@ -34,7 +34,6 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleRoutes = void 0;
-const fs_1 = __importStar(require("fs"));
 const node_fs_1 = require("node:fs");
 const node_path_1 = __importStar(require("node:path"));
 const node_url_1 = require("node:url");
@@ -45,6 +44,7 @@ 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");
+const open_file_for_writing_without_symlinks_1 = require("./helpers/open-file-for-writing-without-symlinks");
 const resolve_output_path_1 = require("./helpers/resolve-output-path");
 const api_routes_1 = require("./preview-server/api-routes");
 const get_package_manager_1 = require("./preview-server/get-package-manager");
@@ -61,6 +61,21 @@ const origin_policy_1 = require("./preview-server/studio-protocol/origin-policy"
 const validate_same_origin_1 = require("./preview-server/validate-same-origin");
 const watch_ignore_next_change_1 = require("./preview-server/watch-ignore-next-change");
 const loggedStaticFileHints = new Set();
+const clientRenderOutputExtensions = new Set([
+    'aac',
+    'flac',
+    'jpeg',
+    'jpg',
+    'mkv',
+    'mov',
+    'mp3',
+    'mp4',
+    'ogg',
+    'png',
+    'wav',
+    'webm',
+    'webp',
+]);
 const static404 = (response) => {
     response.writeHead(404);
     response.end('The static/ prefix has been changed, this URL is no longer valid.');
@@ -188,8 +203,14 @@ const handleAddAsset = ({ req, res, search, publicDir, }) => {
         if (relativeToPublicDir.startsWith('..')) {
             throw new Error(`Not allowed to write to ${relativeToPublicDir}`);
         }
-        fs_1.default.mkdirSync(node_path_1.default.dirname(absolutePath), { recursive: true });
-        const writeStream = (0, fs_1.createWriteStream)(absolutePath);
+        const fileDescriptor = (0, open_file_for_writing_without_symlinks_1.openFileForWritingWithoutSymlinks)({
+            rootDirectory: publicDir,
+            absolutePath,
+        });
+        const writeStream = (0, node_fs_1.createWriteStream)(absolutePath, {
+            fd: fileDescriptor,
+            autoClose: true,
+        });
         writeStream.on('close', () => {
             res.end(JSON.stringify({ success: true }));
         });
@@ -210,8 +231,18 @@ const handleUploadOutput = ({ req, res, search, remotionRoot, }) => {
             throw new Error('No `filePath` provided');
         }
         const absolutePath = (0, resolve_output_path_1.resolveOutputPath)(remotionRoot, filePath);
-        fs_1.default.mkdirSync(node_path_1.default.dirname(absolutePath), { recursive: true });
-        const writeStream = (0, fs_1.createWriteStream)(absolutePath);
+        const extension = node_path_1.default.extname(absolutePath).slice(1).toLowerCase();
+        if (!clientRenderOutputExtensions.has(extension)) {
+            throw new Error(`Not allowed to upload a .${extension || 'unknown'} file`);
+        }
+        const fileDescriptor = (0, open_file_for_writing_without_symlinks_1.openFileForWritingWithoutSymlinks)({
+            rootDirectory: remotionRoot,
+            absolutePath,
+        });
+        const writeStream = (0, node_fs_1.createWriteStream)(absolutePath, {
+            fd: fileDescriptor,
+            autoClose: true,
+        });
         writeStream.on('close', () => {
             res.end(JSON.stringify({ success: true }));
         });
@@ -365,6 +396,7 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
             req: request,
             res: response,
             allowOutsidePublicFolder: false,
+            allowRemotionConvertCors: true,
         });
     }
     if (url.pathname.startsWith(staticHashPrefix)) {
@@ -379,6 +411,7 @@ const handleRoutes = ({ staticHash, staticHashPrefix, outputHash, outputHashPref
             req: request,
             res: response,
             allowOutsidePublicFolder: false,
+            allowRemotionConvertCors: false,
         });
     }
     if (url.pathname.startsWith(outputHashPrefix)) {

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