@remotion/cli 4.0.0-4x.2 → 4.0.0-alpha.111

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateDefaultPropsHandler = void 0;
+const fs_1 = require("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 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 Roo.tsx file in project');
+    }
+    // TODO: Pass error to frontend
+    const updated = await (0, update_default_props_1.updateDefaultProps)({
+        compositionId,
+        input: (0, fs_1.readFileSync)(projectInfo.videoFile, 'utf-8'),
+        newDefaultProps: (0, date_serialization_1.deserializeJSONWithDate)(defaultProps),
+    });
+    (0, fs_1.writeFileSync)(projectInfo.videoFile, updated);
+};
+exports.updateDefaultPropsHandler = updateDefaultPropsHandler;

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

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

package/dist/preview-server/routes.js

@@ -5,16 +5,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleRoutes = void 0;
 const bundler_1 = require("@remotion/bundler");
+const renderer_1 = require("@remotion/renderer");
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const url_1 = require("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 (_, response) => {
-    const data = await (0, update_available_1.isUpdateAvailableWithTimeout)();
+const handleUpdate = async (remotionRoot, _, response) => {
+    const data = await (0, update_available_1.isUpdateAvailableWithTimeout)(remotionRoot);
     response.setHeader('content-type', 'application/json');
     response.writeHead(200);
     response.end(JSON.stringify(data));
@@ -24,20 +34,89 @@ const static404 = (response) => {
     response.writeHead(404);
     response.end('The static/ prefix has been changed, this URL is no longer valid.');
 };
-const handleFallback = async (hash, _, response) => {
-    const edit = await editorGuess;
-    const displayName = (0, open_in_editor_1.getDisplayNameForEditor)(edit[0]);
+const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputProps, getEnvVariables, publicDir, }) => {
+    var _a, _b;
+    const [edit] = await editorGuess;
+    const displayName = (0, open_in_editor_1.getDisplayNameForEditor)(edit ? edit.command : null);
+    const defaultQuality = config_1.ConfigInternals.getQuality();
+    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);
-    response.end(bundler_1.BundlerInternals.indexHtml(hash, '/', displayName));
+    const packageManager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
+    (0, public_folder_1.fetchFolder)({ publicDir, staticHash: hash });
+    response.end(bundler_1.BundlerInternals.indexHtml({
+        staticHash: hash,
+        baseDir: '/',
+        editorName: displayName,
+        envVariables: getEnvVariables(),
+        inputProps: getCurrentInputProps(),
+        remotionRoot,
+        previewServerCommand: packageManager === 'unknown' ? null : packageManager.startCommand,
+        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: {
+            quality: defaultQuality !== null && defaultQuality !== void 0 ? defaultQuality : 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 (_, response) => {
-    const data = await (0, project_info_1.getProjectInfo)();
+const handleProjectInfo = async (remotionRoot, _, response) => {
+    const data = await (0, project_info_1.getProjectInfo)(remotionRoot);
     response.setHeader('content-type', 'application/json');
     response.writeHead(200);
     response.end(JSON.stringify(data));
 };
-const handleFileSource = async (search, _, response) => {
+const handleFileSource = async ({ method, remotionRoot, search, response, }) => {
+    if (method === 'OPTIONS') {
+        response.writeHead(200);
+        response.end();
+        return;
+    }
     if (!search.startsWith('?')) {
         throw new Error('query must start with ?');
     }
@@ -46,23 +125,19 @@ const handleFileSource = async (search, _, response) => {
     if (typeof f !== 'string') {
         throw new Error('must pass `f` parameter');
     }
-    const data = await (0, get_file_source_1.getFileSource)(decodeURIComponent(f));
+    const data = await (0, get_file_source_1.getFileSource)(remotionRoot, decodeURIComponent(f));
     response.writeHead(200);
     response.write(data);
     return response.end();
 };
-const handleOpenInEditor = async (req, res) => {
+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');
         }
@@ -71,7 +146,7 @@ const handleOpenInEditor = async (req, res) => {
         const didOpen = await (0, open_in_editor_1.launchEditor)({
             colNumber: stack.originalColumnNumber,
             editor: guess[0],
-            fileName: path_1.default.resolve(process.cwd(), stack.originalFileName),
+            fileName: path_1.default.resolve(remotionRoot, stack.originalFileName),
             lineNumber: stack.originalLineNumber,
             vsCodeNewWindow: false,
         });
@@ -99,30 +174,55 @@ const handleFavicon = (_, response) => {
     const readStream = (0, fs_1.createReadStream)(filePath);
     readStream.pipe(response);
 };
-const handleRoutes = ({ hash, hashPrefix, request, response, }) => {
+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(request, response);
+        return handleUpdate(remotionRoot, request, response);
     }
     if (url.pathname === '/api/project-info') {
-        return handleProjectInfo(request, response);
+        return handleProjectInfo(remotionRoot, request, response);
     }
     if (url.pathname === '/api/file-source') {
-        return handleFileSource(url.search, request, response);
+        return handleFileSource({
+            remotionRoot,
+            search: url.search,
+            method: request.method,
+            response,
+        });
     }
     if (url.pathname === '/api/open-in-editor') {
-        return handleOpenInEditor(request, response);
+        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);
     }
+    if (url.pathname === '/events') {
+        return liveEventsServer.router(request, response);
+    }
     if (url.pathname.startsWith(hash)) {
-        const root = path_1.default.join(process.cwd(), 'public');
-        return (0, serve_static_1.serveStatic)(root, hash, request, response);
+        return (0, serve_static_1.serveStatic)(publicDir, hash, request, response);
     }
     if (url.pathname.startsWith(hashPrefix)) {
         return static404(response);
     }
-    return handleFallback(hash, request, response);
+    return handleFallback({
+        remotionRoot,
+        hash,
+        response,
+        getCurrentInputProps,
+        getEnvVariables,
+        publicDir,
+    });
 };
 exports.handleRoutes = handleRoutes;

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

@@ -22,7 +22,8 @@ const serveStatic = async function (root, hash, req, res) {
         res.end();
         return;
     }
-    const path = (0, path_1.join)(root, new URL(req.url, 'http://localhost').pathname.replace(new RegExp(`^${hash}`), ''));
+    const filename = new URL(req.url, 'http://localhost').pathname.replace(new RegExp(`^${hash}`), '');
+    const path = (0, path_1.join)(root, decodeURIComponent(filename));
     if (!renderer_1.RenderInternals.isPathInside(path, root)) {
         res.writeHead(500);
         res.write('Not allowed to read');
@@ -47,7 +48,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);
-        res.setHeader('content-type', renderer_1.RenderInternals.mime.lookup(path) || 'application/octet-stream');
+        res.setHeader('content-type', renderer_1.RenderInternals.mimeLookup(path) || 'application/octet-stream');
         res.setHeader('content-length', lstat.size);
         res.writeHead(200);
         readStream.pipe(res);
@@ -56,7 +57,7 @@ const serveStatic = async function (root, hash, req, res) {
     const range = (0, range_parser_1.parseRange)(lstat.size, req.headers.range);
     if (typeof range === 'object' && range.type === 'bytes') {
         const { start, end } = range[0];
-        res.setHeader('content-type', renderer_1.RenderInternals.mime.lookup(path) || 'application/octet-stream');
+        res.setHeader('content-type', renderer_1.RenderInternals.mimeLookup(path) || 'application/octet-stream');
         res.setHeader('content-range', (0, middleware_1.getValueContentRangeHeader)('bytes', lstat.size, {
             end,
             start,

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

@@ -1,8 +1,21 @@
-import type { WebpackOverrideFn } from 'remotion';
-export declare const startServer: (entry: string, userDefinedComponent: string, options?: {
-    webpackOverride?: WebpackOverrideFn;
-    inputProps?: object;
-    envVariables?: Record<string, string>;
+import type { WebpackOverrideFn } from '@remotion/bundler';
+import type { LiveEventsServer } from './live-events';
+export declare const startServer: (options: {
+    entry: string;
+    userDefinedComponent: string;
+    webpackOverride: WebpackOverrideFn;
+    getCurrentInputProps: () => object;
+    getEnvVariables: () => Record<string, string>;
     port: number | null;
     maxTimelineTracks?: number;
-}) => Promise<number>;
+    remotionRoot: string;
+    keyboardShortcutsEnabled: boolean;
+    publicDir: string;
+    userPassedPublicDir: string | null;
+    poll: number | null;
+    hash: string;
+    hashPrefix: string;
+}) => Promise<{
+    port: number;
+    liveEventsServer: LiveEventsServer;
+}>;

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

@@ -6,37 +6,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.startServer = void 0;
 const bundler_1 = require("@remotion/bundler");
 const renderer_1 = require("@remotion/renderer");
-const crypto_1 = __importDefault(require("crypto"));
-const fs_1 = __importDefault(require("fs"));
 const http_1 = __importDefault(require("http"));
-const os_1 = __importDefault(require("os"));
-const path_1 = __importDefault(require("path"));
-const remotion_1 = require("remotion");
+const config_1 = require("../config");
+const log_1 = require("../log");
 const dev_middleware_1 = require("./dev-middleware");
 const hot_middleware_1 = require("./hot-middleware");
+const live_events_1 = require("./live-events");
 const routes_1 = require("./routes");
-const startServer = async (entry, userDefinedComponent, options) => {
-    var _a, _b, _c, _d, _e;
-    const tmpDir = await fs_1.default.promises.mkdtemp(path_1.default.join(os_1.default.tmpdir(), 'react-motion-graphics'));
-    const config = bundler_1.BundlerInternals.webpackConfig({
-        entry,
-        userDefinedComponent,
-        outDir: tmpDir,
+const startServer = async (options) => {
+    var _a, _b, _c, _d;
+    const [, config] = bundler_1.BundlerInternals.webpackConfig({
+        entry: options.entry,
+        userDefinedComponent: options.userDefinedComponent,
+        outDir: null,
         environment: 'development',
-        webpackOverride: (_a = options === null || options === void 0 ? void 0 : options.webpackOverride) !== null && _a !== void 0 ? _a : remotion_1.Internals.getWebpackOverrideFn(),
-        inputProps: (_b = options === null || options === void 0 ? void 0 : options.inputProps) !== null && _b !== void 0 ? _b : {},
-        envVariables: (_c = options === null || options === void 0 ? void 0 : options.envVariables) !== null && _c !== void 0 ? _c : {},
-        maxTimelineTracks: (_d = options === null || options === void 0 ? void 0 : options.maxTimelineTracks) !== null && _d !== void 0 ? _d : 15,
+        webpackOverride: (_a = options === null || options === void 0 ? void 0 : options.webpackOverride) !== null && _a !== void 0 ? _a : config_1.ConfigInternals.getWebpackOverrideFn(),
+        envVariables: (_b = options === null || options === void 0 ? void 0 : options.getEnvVariables()) !== null && _b !== void 0 ? _b : {},
+        maxTimelineTracks: (_c = options === null || options === void 0 ? void 0 : options.maxTimelineTracks) !== null && _c !== void 0 ? _c : 15,
         entryPoints: [
             require.resolve('./hot-middleware/client'),
             require.resolve('./error-overlay/entry-basic.js'),
         ],
+        remotionRoot: options.remotionRoot,
+        keyboardShortcutsEnabled: options.keyboardShortcutsEnabled,
+        poll: options.poll,
     });
     const compiler = (0, bundler_1.webpack)(config);
-    const hashPrefix = '/static-';
-    const hash = `${hashPrefix}${crypto_1.default.randomBytes(6).toString('hex')}`;
     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) => {
         new Promise((resolve) => {
             wdmMiddleware(request, response, () => {
@@ -51,19 +49,65 @@ const startServer = async (entry, userDefinedComponent, options) => {
             });
         })
             .then(() => {
-            (0, routes_1.handleRoutes)({ hash, hashPrefix, request, response });
+            return (0, routes_1.handleRoutes)({
+                hash: options.hash,
+                hashPrefix: options.hashPrefix,
+                request,
+                response,
+                liveEventsServer,
+                getCurrentInputProps: options.getCurrentInputProps,
+                getEnvVariables: options.getEnvVariables,
+                remotionRoot: options.remotionRoot,
+                entryPoint: options.userDefinedComponent,
+                publicDir: options.publicDir,
+            });
         })
             .catch((err) => {
-            response.setHeader('content-type', 'application/json');
-            response.writeHead(500);
-            response.end(JSON.stringify({
-                err: err.message,
-            }));
+            log_1.Log.error(`Error while calling ${request.url}`, err);
+            if (!response.headersSent) {
+                response.setHeader('content-type', 'application/json');
+                response.writeHead(500);
+            }
+            if (!response.writableEnded) {
+                response.end(JSON.stringify({
+                    err: err.message,
+                }));
+            }
         });
     });
-    const desiredPort = (_e = options === null || options === void 0 ? void 0 : options.port) !== null && _e !== void 0 ? _e : undefined;
-    const port = await renderer_1.RenderInternals.getDesiredPort(desiredPort, 3000, 3100);
-    server.listen(port);
-    return port;
+    const desiredPort = (_d = options === null || options === void 0 ? void 0 : options.port) !== null && _d !== void 0 ? _d : undefined;
+    const maxTries = 5;
+    for (let i = 0; i < maxTries; i++) {
+        try {
+            const selectedPort = await new Promise((resolve, reject) => {
+                renderer_1.RenderInternals.getDesiredPort(desiredPort, 3000, 3100)
+                    .then(({ port, didUsePort }) => {
+                    server.listen(port);
+                    server.on('listening', () => {
+                        resolve(port);
+                        return didUsePort();
+                    });
+                    server.on('error', (err) => {
+                        reject(err);
+                    });
+                })
+                    .catch((err) => reject(err));
+            });
+            return { port: selectedPort, liveEventsServer };
+        }
+        catch (err) {
+            if (!(err instanceof Error)) {
+                throw err;
+            }
+            const codedError = err;
+            if (codedError.code === 'EADDRINUSE') {
+                log_1.Log.error(`Port ${codedError.port} is already in use. Trying another port...`);
+            }
+            else {
+                throw err;
+            }
+        }
+    }
+    throw new Error(`Tried ${maxTries} times to find a free port. Giving up.`);
 };
 exports.startServer = startServer;

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

@@ -7,5 +7,5 @@ declare type Info = {
     packageManager: PackageManager | 'unknown';
 };
 export declare const getRemotionVersion: () => any;
-export declare const isUpdateAvailableWithTimeout: () => Promise<Info>;
+export declare const isUpdateAvailableWithTimeout: (remotionRoot: string) => Promise<Info>;
 export {};

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

@@ -7,9 +7,9 @@ exports.isUpdateAvailableWithTimeout = exports.getRemotionVersion = void 0;
 const semver_1 = __importDefault(require("semver"));
 const get_latest_remotion_version_1 = require("../get-latest-remotion-version");
 const get_package_manager_1 = require("./get-package-manager");
-const isUpdateAvailable = async (currentVersion) => {
+const isUpdateAvailable = async ({ remotionRoot, currentVersion, }) => {
     const latest = await (0, get_latest_remotion_version_1.getLatestRemotionVersion)();
-    const pkgManager = (0, get_package_manager_1.getPackageManager)();
+    const pkgManager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
     return {
         updateAvailable: semver_1.default.lt(currentVersion, latest),
         currentVersion,
@@ -25,10 +25,10 @@ const getRemotionVersion = () => {
     return version;
 };
 exports.getRemotionVersion = getRemotionVersion;
-const isUpdateAvailableWithTimeout = () => {
+const isUpdateAvailableWithTimeout = (remotionRoot) => {
     const version = (0, exports.getRemotionVersion)();
     const threeSecTimeout = new Promise((resolve) => {
-        const pkgManager = (0, get_package_manager_1.getPackageManager)();
+        const pkgManager = (0, get_package_manager_1.getPackageManager)(remotionRoot, undefined);
         setTimeout(() => {
             resolve({
                 currentVersion: version,
@@ -39,6 +39,9 @@ const isUpdateAvailableWithTimeout = () => {
             });
         }, 3000);
     });
-    return Promise.race([threeSecTimeout, isUpdateAvailable(version)]);
+    return Promise.race([
+        threeSecTimeout,
+        isUpdateAvailable({ remotionRoot, currentVersion: version }),
+    ]);
 };
 exports.isUpdateAvailableWithTimeout = isUpdateAvailableWithTimeout;

package/dist/preview.d.ts

@@ -1 +1 @@
-export declare const previewCommand: () => Promise<void>;
+export declare const previewCommand: (remotionRoot: string, args: string[]) => Promise<void>;