@remotion/cli 4.0.0-alpha4 → 4.0.0-alpha6

package/dist/preview-server/routes/add-render.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleAddRender = void 0;
+const renderer_1 = require("@remotion/renderer");
+const queue_1 = require("../render-queue/queue");
+const handleAddRender = ({ input, entryPoint, remotionRoot, }) => {
+    const id = String(Math.random()).replace('0.', '');
+    if (input.type === 'video') {
+        (0, queue_1.addJob)({
+            entryPoint,
+            remotionRoot,
+            job: {
+                cleanup: [],
+                codec: input.codec,
+                audioCodec: input.audioCodec,
+                compositionId: input.compositionId,
+                deletedOutputLocation: false,
+                type: 'video',
+                status: 'idle',
+                id,
+                imageFormat: input.imageFormat,
+                outName: input.outName,
+                jpegQuality: input.jpegQuality,
+                scale: input.scale,
+                startedAt: Date.now(),
+                verbose: input.verbose,
+                cancelToken: (0, renderer_1.makeCancelSignal)(),
+                concurrency: input.concurrency,
+                crf: input.crf,
+                endFrame: input.endFrame,
+                startFrame: input.startFrame,
+                muted: input.muted,
+                enforceAudioTrack: input.enforceAudioTrack,
+                proResProfile: input.proResProfile,
+                pixelFormat: input.pixelFormat,
+                audioBitrate: input.audioBitrate,
+                videoBitrate: input.videoBitrate,
+                everyNthFrame: input.everyNthFrame,
+                numberOfGifLoops: input.numberOfGifLoops,
+                delayRenderTimeout: input.delayRenderTimeout,
+                disallowParallelEncoding: input.disallowParallelEncoding,
+                chromiumOptions: input.chromiumOptions,
+                envVariables: input.envVariables,
+                inputProps: input.inputProps,
+            },
+        });
+    }
+    if (input.type === 'still') {
+        (0, queue_1.addJob)({
+            job: {
+                compositionId: input.compositionId,
+                id: String(Math.random()).replace('0.', ''),
+                startedAt: Date.now(),
+                type: 'still',
+                outName: input.outName,
+                status: 'idle',
+                imageFormat: input.imageFormat,
+                jpegQuality: input.jpegQuality,
+                frame: input.frame,
+                scale: input.scale,
+                cleanup: [],
+                deletedOutputLocation: false,
+                verbose: input.verbose,
+                cancelToken: (0, renderer_1.makeCancelSignal)(),
+                chromiumOptions: input.chromiumOptions,
+                delayRenderTimeout: input.delayRenderTimeout,
+                envVariables: input.envVariables,
+                inputProps: input.inputProps,
+            },
+            entryPoint,
+            remotionRoot,
+        });
+    }
+    return Promise.resolve(undefined);
+};
+exports.handleAddRender = handleAddRender;

package/dist/preview-server/routes/can-update-default-props.d.ts

@@ -0,0 +1,4 @@
+import type { ApiHandler } from '../api-types';
+import type { CanUpdateDefaultPropsRequest, CanUpdateDefaultPropsResponse } from '../render-queue/job';
+export declare const checkIfTypeScriptFile: (file: string) => void;
+export declare const canUpdateDefaultPropsHandler: ApiHandler<CanUpdateDefaultPropsRequest, CanUpdateDefaultPropsResponse>;

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canUpdateDefaultPropsHandler = exports.checkIfTypeScriptFile = void 0;
+const node_fs_1 = require("node:fs");
+const update_default_props_1 = require("../../codemods/update-default-props");
+const project_info_1 = require("../project-info");
+const checkIfTypeScriptFile = (file) => {
+    if (!file.endsWith('.tsx') &&
+        !file.endsWith('.ts') &&
+        !file.endsWith('.mtsx') &&
+        !file.endsWith('.mts')) {
+        throw new Error('Cannot update default props for non-TypeScript files');
+    }
+};
+exports.checkIfTypeScriptFile = checkIfTypeScriptFile;
+const canUpdateDefaultPropsHandler = async ({ input: { compositionId }, remotionRoot }) => {
+    try {
+        const projectInfo = await (0, project_info_1.getProjectInfo)(remotionRoot);
+        if (!projectInfo.videoFile) {
+            throw new Error('Cannot find root file in project');
+        }
+        (0, exports.checkIfTypeScriptFile)(projectInfo.videoFile);
+        await (0, update_default_props_1.updateDefaultProps)({
+            compositionId,
+            input: (0, node_fs_1.readFileSync)(projectInfo.videoFile, 'utf-8'),
+            newDefaultProps: {},
+        });
+        return {
+            canUpdate: true,
+        };
+    }
+    catch (err) {
+        return {
+            canUpdate: false,
+            reason: err.message,
+        };
+    }
+};
+exports.canUpdateDefaultPropsHandler = canUpdateDefaultPropsHandler;

package/dist/preview-server/routes/cancel-render.d.ts

@@ -0,0 +1,3 @@
+import type { ApiHandler } from '../api-types';
+import type { CancelRenderRequest, CancelRenderResponse } from '../render-queue/job';
+export declare const handleCancelRender: ApiHandler<CancelRenderRequest, CancelRenderResponse>;

package/dist/preview-server/routes/cancel-render.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleCancelRender = void 0;
+const queue_1 = require("../render-queue/queue");
+const handleCancelRender = ({ input: { jobId } }) => {
+    (0, queue_1.cancelJob)(jobId);
+    return Promise.resolve({});
+};
+exports.handleCancelRender = handleCancelRender;

package/dist/preview-server/routes/open-in-file-explorer.d.ts

@@ -0,0 +1,3 @@
+import type { ApiHandler } from '../api-types';
+import type { OpenInFileExplorerRequest } from '../render-queue/job';
+export declare const handleOpenInFileExplorer: ApiHandler<OpenInFileExplorerRequest, void>;

package/dist/preview-server/routes/open-in-file-explorer.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleOpenInFileExplorer = void 0;
+const open_directory_in_finder_1 = require("../render-queue/open-directory-in-finder");
+const handleOpenInFileExplorer = ({ input: { directory }, remotionRoot }) => {
+    return (0, open_directory_in_finder_1.openDirectoryInFinder)(directory, remotionRoot);
+};
+exports.handleOpenInFileExplorer = handleOpenInFileExplorer;

package/dist/preview-server/routes/remove-render.d.ts

@@ -0,0 +1,3 @@
+import type { ApiHandler } from '../api-types';
+import type { RemoveRenderRequest } from '../render-queue/job';
+export declare const handleRemoveRender: ApiHandler<RemoveRenderRequest, undefined>;

package/dist/preview-server/routes/remove-render.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleRemoveRender = void 0;
+const queue_1 = require("../render-queue/queue");
+const handleRemoveRender = ({ input: { jobId }, }) => {
+    (0, queue_1.removeJob)(jobId);
+    return Promise.resolve(undefined);
+};
+exports.handleRemoveRender = handleRemoveRender;

package/dist/preview-server/routes/subscribe-to-file-existence.d.ts

@@ -0,0 +1,3 @@
+import type { ApiHandler } from '../api-types';
+import type { SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse } from '../render-queue/job';
+export declare const subscribeToFileExistence: ApiHandler<SubscribeToFileExistenceRequest, SubscribeToFileExistenceResponse>;

package/dist/preview-server/routes/subscribe-to-file-existence.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToFileExistence = void 0;
+const file_existence_watchers_1 = require("../file-existence-watchers");
+const subscribeToFileExistence = ({ input: { file, clientId }, remotionRoot }) => {
+    const { exists } = (0, file_existence_watchers_1.subscribeToFileExistenceWatchers)({
+        file,
+        remotionRoot,
+        clientId,
+    });
+    return Promise.resolve({ exists });
+};
+exports.subscribeToFileExistence = subscribeToFileExistence;

package/dist/preview-server/routes/unsubscribe-from-file-existence.d.ts

@@ -0,0 +1,3 @@
+import type { ApiHandler } from '../api-types';
+import type { UnsubscribeFromFileExistenceRequest } from '../render-queue/job';
+export declare const unsubscribeFromFileExistence: ApiHandler<UnsubscribeFromFileExistenceRequest, undefined>;

package/dist/preview-server/routes/unsubscribe-from-file-existence.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unsubscribeFromFileExistence = void 0;
+const file_existence_watchers_1 = require("../file-existence-watchers");
+const unsubscribeFromFileExistence = ({ input, remotionRoot }) => {
+    (0, file_existence_watchers_1.unsubscribeFromFileExistenceWatchers)({
+        file: input.file,
+        clientId: input.clientId,
+        remotionRoot,
+    });
+    return Promise.resolve(undefined);
+};
+exports.unsubscribeFromFileExistence = unsubscribeFromFileExistence;

package/dist/preview-server/routes/update-default-props.d.ts

@@ -0,0 +1,3 @@
+import type { ApiHandler } from '../api-types';
+import type { UpdateDefaultPropsRequest } from '../render-queue/job';
+export declare const updateDefaultPropsHandler: ApiHandler<UpdateDefaultPropsRequest, void>;

package/dist/preview-server/routes/update-default-props.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateDefaultPropsHandler = void 0;
+const node_fs_1 = require("node:fs");
+const update_default_props_1 = require("../../codemods/update-default-props");
+const date_serialization_1 = require("../../editor/components/RenderModal/SchemaEditor/date-serialization");
+const project_info_1 = require("../project-info");
+const can_update_default_props_1 = require("./can-update-default-props");
+const updateDefaultPropsHandler = async ({ input: { compositionId, defaultProps }, remotionRoot }) => {
+    const projectInfo = await (0, project_info_1.getProjectInfo)(remotionRoot);
+    // TODO: What happens if this error is thrown? Handle in frontend
+    if (!projectInfo.videoFile) {
+        throw new Error('Cannot find root file in project');
+    }
+    (0, can_update_default_props_1.checkIfTypeScriptFile)(projectInfo.videoFile);
+    // TODO: Pass error to frontend
+    const updated = await (0, update_default_props_1.updateDefaultProps)({
+        compositionId,
+        input: (0, node_fs_1.readFileSync)(projectInfo.videoFile, 'utf-8'),
+        newDefaultProps: (0, date_serialization_1.deserializeJSONWithDate)(defaultProps),
+    });
+    (0, node_fs_1.writeFileSync)(projectInfo.videoFile, updated);
+};
+exports.updateDefaultPropsHandler = updateDefaultPropsHandler;

package/dist/preview-server/routes.d.ts

@@ -1,6 +1,6 @@
-import type { IncomingMessage, ServerResponse } from 'http';
+import type { IncomingMessage, ServerResponse } from 'node:http';
 import type { LiveEventsServer } from './live-events';
-export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, publicDir, }: {
+export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, }: {
     hash: string;
     hashPrefix: string;
     request: IncomingMessage;
@@ -9,5 +9,6 @@ export declare const handleRoutes: ({ hash, hashPrefix, request, response, liveE
     getCurrentInputProps: () => object;
     getEnvVariables: () => Record<string, string>;
     remotionRoot: string;
+    entryPoint: string;
     publicDir: string;
 }) => void | Promise<void>;

package/dist/preview-server/routes.js

@@ -5,16 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleRoutes = void 0;
 const bundler_1 = require("@remotion/bundler");
-const fs_1 = require("fs");
-const path_1 = __importDefault(require("path"));
-const url_1 = require("url");
+const renderer_1 = require("@remotion/renderer");
+const node_fs_1 = require("node:fs");
+const node_path_1 = __importDefault(require("node:path"));
+const node_url_1 = require("node:url");
+const config_1 = require("../config");
 const number_of_shared_audio_tags_1 = require("../config/number-of-shared-audio-tags");
 const parse_command_line_1 = require("../parse-command-line");
+const api_routes_1 = require("./api-routes");
 const get_file_source_1 = require("./error-overlay/react-overlay/utils/get-file-source");
 const open_in_editor_1 = require("./error-overlay/react-overlay/utils/open-in-editor");
 const get_package_manager_1 = require("./get-package-manager");
+const handler_1 = require("./handler");
+const parse_body_1 = require("./parse-body");
 const project_info_1 = require("./project-info");
 const public_folder_1 = require("./public-folder");
+const queue_1 = require("./render-queue/queue");
 const serve_static_1 = require("./serve-static");
 const update_available_1 = require("./update-available");
 const handleUpdate = async (remotionRoot, _, response) => {
@@ -29,9 +35,32 @@ const static404 = (response) => {
     response.end('The static/ prefix has been changed, this URL is no longer valid.');
 };
 const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputProps, getEnvVariables, publicDir, }) => {
-    var _a;
+    var _a, _b;
     const [edit] = await editorGuess;
     const displayName = (0, open_in_editor_1.getDisplayNameForEditor)(edit ? edit.command : null);
+    const defaultJpegQuality = config_1.ConfigInternals.getJpegQuality();
+    const defaultScale = config_1.ConfigInternals.getScale();
+    const logLevel = config_1.ConfigInternals.Logging.getLogLevel();
+    const defaultCodec = config_1.ConfigInternals.getOutputCodecOrUndefined();
+    const concurrency = renderer_1.RenderInternals.getActualConcurrency(config_1.ConfigInternals.getConcurrency());
+    const muted = config_1.ConfigInternals.getMuted();
+    const enforceAudioTrack = config_1.ConfigInternals.getEnforceAudioTrack();
+    const pixelFormat = config_1.ConfigInternals.getPixelFormat();
+    const proResProfile = (_a = config_1.ConfigInternals.getProResProfile()) !== null && _a !== void 0 ? _a : 'hq';
+    const audioBitrate = config_1.ConfigInternals.getAudioBitrate();
+    const videoBitrate = config_1.ConfigInternals.getVideoBitrate();
+    const everyNthFrame = config_1.ConfigInternals.getEveryNthFrame();
+    const numberOfGifLoops = config_1.ConfigInternals.getNumberOfGifLoops();
+    const delayRenderTimeout = config_1.ConfigInternals.getCurrentPuppeteerTimeout();
+    const audioCodec = config_1.ConfigInternals.getAudioCodec();
+    const stillImageFormat = config_1.ConfigInternals.getUserPreferredStillImageFormat();
+    const videoImageFormat = config_1.ConfigInternals.getUserPreferredVideoImageFormat();
+    const disableWebSecurity = config_1.ConfigInternals.getChromiumDisableWebSecurity();
+    const headless = config_1.ConfigInternals.getChromiumHeadlessMode();
+    const ignoreCertificateErrors = config_1.ConfigInternals.getIgnoreCertificateErrors();
+    const openGlRenderer = config_1.ConfigInternals.getChromiumOpenGlRenderer();
+    const maxConcurrency = renderer_1.RenderInternals.getMaxConcurrency();
+    const minConcurrency = renderer_1.RenderInternals.getMinConcurrency();
     response.setHeader('content-type', 'text/html');
     response.writeHead(200);
     const packageManager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
@@ -44,10 +73,36 @@ const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputPro
         inputProps: getCurrentInputProps(),
         remotionRoot,
         previewServerCommand: packageManager === 'unknown' ? null : packageManager.startCommand,
-        numberOfAudioTags: (_a = parse_command_line_1.parsedCli['number-of-shared-audio-tags']) !== null && _a !== void 0 ? _a : (0, number_of_shared_audio_tags_1.getNumberOfSharedAudioTags)(),
+        renderQueue: (0, queue_1.getRenderQueue)(),
+        numberOfAudioTags: (_b = parse_command_line_1.parsedCli['number-of-shared-audio-tags']) !== null && _b !== void 0 ? _b : (0, number_of_shared_audio_tags_1.getNumberOfSharedAudioTags)(),
         publicFiles: (0, public_folder_1.getFiles)(),
         includeFavicon: true,
         title: 'Remotion Preview',
+        renderDefaults: {
+            jpegQuality: defaultJpegQuality !== null && defaultJpegQuality !== void 0 ? defaultJpegQuality : 80,
+            scale: defaultScale !== null && defaultScale !== void 0 ? defaultScale : 1,
+            logLevel,
+            codec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : 'h264',
+            concurrency,
+            maxConcurrency,
+            minConcurrency,
+            stillImageFormat: stillImageFormat !== null && stillImageFormat !== void 0 ? stillImageFormat : renderer_1.RenderInternals.DEFAULT_STILL_IMAGE_FORMAT,
+            videoImageFormat: videoImageFormat !== null && videoImageFormat !== void 0 ? videoImageFormat : renderer_1.RenderInternals.DEFAULT_VIDEO_IMAGE_FORMAT,
+            muted,
+            enforceAudioTrack,
+            proResProfile,
+            pixelFormat,
+            audioBitrate,
+            videoBitrate,
+            everyNthFrame,
+            numberOfGifLoops,
+            delayRenderTimeout,
+            audioCodec,
+            disableWebSecurity,
+            headless,
+            ignoreCertificateErrors,
+            openGlRenderer,
+        },
     }));
 };
 const handleProjectInfo = async (remotionRoot, _, response) => {
@@ -65,7 +120,7 @@ const handleFileSource = async ({ method, remotionRoot, search, response, }) =>
     if (!search.startsWith('?')) {
         throw new Error('query must start with ?');
     }
-    const query = new url_1.URLSearchParams(search);
+    const query = new node_url_1.URLSearchParams(search);
     const f = query.get('f');
     if (typeof f !== 'string') {
         throw new Error('must pass `f` parameter');
@@ -79,18 +134,10 @@ const handleOpenInEditor = async (remotionRoot, req, res) => {
     if (req.method === 'OPTIONS') {
         res.statusCode = 200;
         res.end();
+        return;
     }
     try {
-        const b = await new Promise((_resolve) => {
-            let data = '';
-            req.on('data', (chunk) => {
-                data += chunk;
-            });
-            req.on('end', () => {
-                _resolve(data.toString());
-            });
-        });
-        const body = JSON.parse(b);
+        const body = (await (0, parse_body_1.parseRequestBody)(req));
         if (!('stack' in body)) {
             throw new TypeError('Need to pass stack');
         }
@@ -99,7 +146,7 @@ const handleOpenInEditor = async (remotionRoot, req, res) => {
         const didOpen = await (0, open_in_editor_1.launchEditor)({
             colNumber: stack.originalColumnNumber,
             editor: guess[0],
-            fileName: path_1.default.resolve(remotionRoot, stack.originalFileName),
+            fileName: node_path_1.default.resolve(remotionRoot, stack.originalFileName),
             lineNumber: stack.originalLineNumber,
             vsCodeNewWindow: false,
         });
@@ -118,16 +165,16 @@ const handleOpenInEditor = async (remotionRoot, req, res) => {
     }
 };
 const handleFavicon = (_, response) => {
-    const filePath = path_1.default.join(__dirname, '..', '..', 'web', 'favicon.png');
-    const stat = (0, fs_1.statSync)(filePath);
+    const filePath = node_path_1.default.join(__dirname, '..', '..', 'web', 'favicon.png');
+    const stat = (0, node_fs_1.statSync)(filePath);
     response.writeHead(200, {
         'Content-Type': 'image/png',
         'Content-Length': stat.size,
     });
-    const readStream = (0, fs_1.createReadStream)(filePath);
+    const readStream = (0, node_fs_1.createReadStream)(filePath);
     readStream.pipe(response);
 };
-const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, publicDir, }) => {
+const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, getCurrentInputProps, getEnvVariables, remotionRoot, entryPoint, publicDir, }) => {
     const url = new URL(request.url, 'http://localhost');
     if (url.pathname === '/api/update') {
         return handleUpdate(remotionRoot, request, response);
@@ -146,6 +193,17 @@ const handleRoutes = ({ hash, hashPrefix, request, response, liveEventsServer, g
     if (url.pathname === '/api/open-in-editor') {
         return handleOpenInEditor(remotionRoot, request, response);
     }
+    for (const [key, value] of Object.entries(api_routes_1.allApiRoutes)) {
+        if (url.pathname === key) {
+            return (0, handler_1.handleRequest)({
+                remotionRoot,
+                entryPoint,
+                handler: value,
+                request,
+                response,
+            });
+        }
+    }
     if (url.pathname === '/remotion.png') {
         return handleFavicon(request, response);
     }

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

@@ -5,5 +5,5 @@
  * Copyright(c) 2014-2016 Douglas Christopher Wilson
  * MIT Licensed
  */
-import type { IncomingMessage, ServerResponse } from 'http';
+import type { IncomingMessage, ServerResponse } from 'node:http';
 export declare const serveStatic: (root: string, hash: string, req: IncomingMessage, res: ServerResponse) => Promise<void>;

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

@@ -9,8 +9,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serveStatic = void 0;
 const renderer_1 = require("@remotion/renderer");
-const fs_1 = require("fs");
-const path_1 = require("path");
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
 const middleware_1 = require("./dev-middleware/middleware");
 const range_parser_1 = require("./dev-middleware/range-parser");
 const serveStatic = async function (root, hash, req, res) {
@@ -23,21 +23,21 @@ const serveStatic = async function (root, hash, req, res) {
         return;
     }
     const filename = new URL(req.url, 'http://localhost').pathname.replace(new RegExp(`^${hash}`), '');
-    const path = (0, path_1.join)(root, decodeURIComponent(filename));
+    const path = (0, node_path_1.join)(root, decodeURIComponent(filename));
     if (!renderer_1.RenderInternals.isPathInside(path, root)) {
         res.writeHead(500);
         res.write('Not allowed to read');
         res.end();
         return;
     }
-    const exists = (0, fs_1.existsSync)(path);
+    const exists = (0, node_fs_1.existsSync)(path);
     if (!exists) {
         res.writeHead(404);
         res.write(`${path} does not exist`);
         res.end();
         return;
     }
-    const lstat = await fs_1.promises.lstat(path);
+    const lstat = await node_fs_1.promises.lstat(path);
     const isDirectory = lstat.isDirectory();
     if (isDirectory) {
         res.writeHead(500);
@@ -47,7 +47,7 @@ const serveStatic = async function (root, hash, req, res) {
     }
     const hasRange = req.headers.range && lstat.size;
     if (!hasRange) {
-        const readStream = (0, fs_1.createReadStream)(path);
+        const readStream = (0, node_fs_1.createReadStream)(path);
         res.setHeader('content-type', renderer_1.RenderInternals.mimeLookup(path) || 'application/octet-stream');
         res.setHeader('content-length', lstat.size);
         res.writeHead(200);
@@ -64,7 +64,7 @@ const serveStatic = async function (root, hash, req, res) {
         }));
         res.setHeader('content-length', end - start + 1);
         res.writeHead(206);
-        const readStream = (0, fs_1.createReadStream)(path, {
+        const readStream = (0, node_fs_1.createReadStream)(path, {
             start,
             end,
         });

package/dist/preview-server/start-server.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.startServer = void 0;
 const bundler_1 = require("@remotion/bundler");
 const renderer_1 = require("@remotion/renderer");
-const http_1 = __importDefault(require("http"));
+const node_http_1 = __importDefault(require("node:http"));
 const config_1 = require("../config");
 const log_1 = require("../log");
 const dev_middleware_1 = require("./dev-middleware");
@@ -35,7 +35,7 @@ const startServer = async (options) => {
     const wdmMiddleware = (0, dev_middleware_1.wdm)(compiler);
     const whm = (0, hot_middleware_1.webpackHotMiddleware)(compiler);
     const liveEventsServer = (0, live_events_1.makeLiveEventsRouter)();
-    const server = http_1.default.createServer((request, response) => {
+    const server = node_http_1.default.createServer((request, response) => {
         new Promise((resolve) => {
             wdmMiddleware(request, response, () => {
                 resolve();
@@ -58,6 +58,7 @@ const startServer = async (options) => {
                 getCurrentInputProps: options.getCurrentInputProps,
                 getEnvVariables: options.getEnvVariables,
                 remotionRoot: options.remotionRoot,
+                entryPoint: options.userDefinedComponent,
                 publicDir: options.publicDir,
             });
         })

package/dist/preview.js

@@ -4,11 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.previewCommand = void 0;
-const crypto_1 = __importDefault(require("crypto"));
-const path_1 = __importDefault(require("path"));
+const node_crypto_1 = __importDefault(require("node:crypto"));
+const node_path_1 = __importDefault(require("node:path"));
 const better_opn_1 = require("./better-opn");
 const chalk_1 = require("./chalk");
 const config_1 = require("./config");
+const convert_entry_point_to_serve_url_1 = require("./convert-entry-point-to-serve-url");
 const entry_point_1 = require("./entry-point");
 const get_env_1 = require("./get-env");
 const get_input_props_1 = require("./get-input-props");
@@ -16,25 +17,10 @@ const get_network_address_1 = require("./get-network-address");
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
 const get_absolute_public_dir_1 = require("./preview-server/get-absolute-public-dir");
+const live_events_1 = require("./preview-server/live-events");
 const public_folder_1 = require("./preview-server/public-folder");
 const start_server_1 = require("./preview-server/start-server");
 const noop = () => undefined;
-let liveEventsListener = null;
-const waiters = [];
-const setLiveEventsListener = (listener) => {
-    liveEventsListener = listener;
-    waiters.forEach((w) => w(listener));
-};
-const waitForLiveEventsListener = () => {
-    if (liveEventsListener) {
-        return Promise.resolve(liveEventsListener);
-    }
-    return new Promise((resolve) => {
-        waiters.push((list) => {
-            resolve(list);
-        });
-    });
-};
 const getShouldOpenBrowser = () => {
     var _a;
     if (parse_command_line_1.parsedCli['no-open']) {
@@ -74,8 +60,9 @@ const previewCommand = async (remotionRoot, args) => {
         process.exit(1);
     }
     const desiredPort = getPort();
+    const fullEntryPath = (0, convert_entry_point_to_serve_url_1.convertEntryPointToServeUrl)(file);
     let inputProps = (0, get_input_props_1.getInputProps)((newProps) => {
-        waitForLiveEventsListener().then((listener) => {
+        (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
             inputProps = newProps;
             listener.sendEventToClient({
                 type: 'new-input-props',
@@ -84,7 +71,7 @@ const previewCommand = async (remotionRoot, args) => {
         });
     });
     let envVariables = await (0, get_env_1.getEnvironmentVariables)((newEnvVariables) => {
-        waitForLiveEventsListener().then((listener) => {
+        (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
             envVariables = newEnvVariables;
             listener.sendEventToClient({
                 type: 'new-env-variables',
@@ -97,12 +84,12 @@ const previewCommand = async (remotionRoot, args) => {
         remotionRoot,
     });
     const hashPrefix = '/static-';
-    const staticHash = `${hashPrefix}${crypto_1.default.randomBytes(6).toString('hex')}`;
+    const staticHash = `${hashPrefix}${node_crypto_1.default.randomBytes(6).toString('hex')}`;
     (0, public_folder_1.initPublicFolderWatch)({
         publicDir,
         remotionRoot,
         onUpdate: () => {
-            waitForLiveEventsListener().then((listener) => {
+            (0, live_events_1.waitForLiveEventsListener)().then((listener) => {
                 listener.sendEventToClient({
                     type: 'new-public-folder',
                     files: (0, public_folder_1.getFiles)(),
@@ -112,8 +99,8 @@ const previewCommand = async (remotionRoot, args) => {
         staticHash,
     });
     const { port, liveEventsServer } = await (0, start_server_1.startServer)({
-        entry: path_1.default.resolve(__dirname, 'previewEntry.js'),
-        userDefinedComponent: file,
+        entry: node_path_1.default.resolve(__dirname, 'previewEntry.js'),
+        userDefinedComponent: fullEntryPath,
         getCurrentInputProps: () => inputProps,
         getEnvVariables: () => envVariables,
         port: desiredPort,
@@ -127,7 +114,7 @@ const previewCommand = async (remotionRoot, args) => {
         hash: staticHash,
         hashPrefix,
     });
-    setLiveEventsListener(liveEventsServer);
+    (0, live_events_1.setLiveEventsListener)(liveEventsServer);
     const networkAddress = (0, get_network_address_1.getNetworkAddress)();
     if (networkAddress) {
         log_1.Log.info(`Server ready - Local: ${chalk_1.chalk.underline(`http://localhost:${port}`)}, Network: ${chalk_1.chalk.underline(`http://${networkAddress}:${port}`)}`);

package/dist/previewEntry.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = require("react-dom");
 const client_1 = __importDefault(require("react-dom/client"));
 const remotion_1 = require("remotion");
 require("../styles/styles.css");
@@ -15,13 +16,11 @@ remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaul
 const getServerDisconnectedDomElement = () => {
     return document.getElementById('server-disconnected-overlay');
 };
-const content = ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { numberOfAudioTags: window.remotion_numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(EditorContexts_1.EditorContexts, { children: (0, jsx_runtime_1.jsx)(Editor_1.Editor, {}) }) }));
+const content = ((0, jsx_runtime_1.jsx)(remotion_1.Internals.RemotionRoot, { numberOfAudioTags: window.remotion_numberOfAudioTags, children: (0, jsx_runtime_1.jsxs)(EditorContexts_1.EditorContexts, { children: [(0, jsx_runtime_1.jsx)(Editor_1.Editor, {}), (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement())] }) }));
 if (client_1.default.createRoot) {
     client_1.default.createRoot(remotion_1.Internals.getPreviewDomElement()).render(content);
-    client_1.default.createRoot(getServerDisconnectedDomElement()).render((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}));
 }
 else {
     client_1.default.render(content, remotion_1.Internals.getPreviewDomElement());
-    client_1.default.render((0, jsx_runtime_1.jsx)(ServerDisconnected_1.ServerDisconnected, {}), getServerDisconnectedDomElement());
 }
 (0, event_source_1.openEventSource)();

package/dist/print-compositions.d.ts

@@ -1,2 +1,2 @@
-import type { TCompMetadata } from 'remotion';
-export declare const printCompositions: (compositions: TCompMetadata[]) => void;
+import type { AnyCompMetadata } from 'remotion';
+export declare const printCompositions: (compositions: AnyCompMetadata[]) => void;