@remotion/renderer 4.1.0-alpha1 → 4.1.0-alpha11

package/dist/set-props-and-env.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setPropsAndEnv = void 0;
 const version_1 = require("remotion/version");
 const TimeoutSettings_1 = require("./browser/TimeoutSettings");
+const logger_1 = require("./logger");
 const normalize_serve_url_1 = require("./normalize-serve-url");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const redirect_status_codes_1 = require("./redirect-status-codes");
 const validate_puppeteer_timeout_1 = require("./validate-puppeteer-timeout");
-const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, proxyPort, retriesRemaining, audioEnabled, videoEnabled, }) => {
+const innerSetPropsAndEnv = async ({ serializedInputPropsWithCustomSchema, envVariables, page, serveUrl, initialFrame, timeoutInMilliseconds, proxyPort, retriesRemaining, audioEnabled, videoEnabled, indent, logLevel, }) => {
     (0, validate_puppeteer_timeout_1.validatePuppeteerTimeout)(timeoutInMilliseconds);
     const actualTimeout = timeoutInMilliseconds !== null && timeoutInMilliseconds !== void 0 ? timeoutInMilliseconds : TimeoutSettings_1.DEFAULT_TIMEOUT;
     page.setDefaultTimeout(actualTimeout);
@@ -16,14 +17,9 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
     await page.evaluateOnNewDocument((timeout) => {
         window.remotion_puppeteerTimeout = timeout;
     }, actualTimeout);
-    if (typeof inputProps === 'string') {
-        throw new Error('Input props should be an object, not a string.');
-    }
-    if (inputProps) {
-        await page.evaluateOnNewDocument((input) => {
-            window.remotion_inputProps = input;
-        }, JSON.stringify(inputProps));
-    }
+    await page.evaluateOnNewDocument((input) => {
+        window.remotion_inputProps = input;
+    }, serializedInputPropsWithCustomSchema);
     if (envVariables) {
         await page.evaluateOnNewDocument((input) => {
             window.remotion_envVariables = input;
@@ -41,7 +37,7 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
     await page.evaluateOnNewDocument((enabled) => {
         window.remotion_videoEnabled = enabled;
     }, videoEnabled);
-    const pageRes = await page.goto(urlToVisit);
+    const pageRes = await page.goto({ url: urlToVisit, timeout: actualTimeout });
     if (pageRes === null) {
         throw new Error(`Visited "${urlToVisit}" but got no response.`);
     }
@@ -57,7 +53,7 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
         return innerSetPropsAndEnv({
             envVariables,
             initialFrame,
-            inputProps,
+            serializedInputPropsWithCustomSchema,
             page,
             proxyPort,
             retriesRemaining: retriesRemaining - 1,
@@ -65,12 +61,14 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
             timeoutInMilliseconds,
             audioEnabled,
             videoEnabled,
+            indent,
+            logLevel,
         });
     }
     if (!redirect_status_codes_1.redirectStatusCodes.every((code) => code !== status)) {
         throw new Error(`Error while getting compositions: Tried to go to ${urlToVisit} but the status code was ${status} instead of 200. Does the site you specified exist?`);
     }
-    const isRemotionFn = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+    const { value: isRemotionFn } = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         pageFunction: () => {
             return window.getStaticCompositions;
         },
@@ -78,10 +76,25 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
         frame: null,
         page,
     });
-    if (isRemotionFn === undefined) {
-        throw new Error(`Error while getting compositions: Tried to go to ${urlToVisit} and verify that it is a Remotion project by checking if window.getStaticCompositions is defined. However, the function was undefined, which indicates that this is not a valid Remotion project. Please check the URL you passed.`);
+    if (typeof isRemotionFn === 'undefined') {
+        const { value: body } = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+            pageFunction: () => {
+                return document.body.innerHTML;
+            },
+            args: [],
+            frame: null,
+            page,
+        });
+        const errorMessage = [
+            `Error while getting compositions: Tried to go to ${urlToVisit} and verify that it is a Remotion project by checking if window.getStaticCompositions is defined.`,
+            'However, the function was undefined, which indicates that this is not a valid Remotion project. Please check the URL you passed.',
+            'The page loaded contained the following markup:',
+            body.substring(0, 500) + (body.length > 500 ? '...' : ''),
+            'Does this look like a foreign page? If so, try to stop this server.',
+        ].join('\n');
+        throw new Error(errorMessage);
     }
-    const siteVersion = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+    const { value: siteVersion } = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         pageFunction: () => {
             return window.siteVersion;
         },
@@ -89,7 +102,7 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
         frame: null,
         page,
     });
-    const remotionVersion = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+    const { value: remotionVersion } = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
         pageFunction: () => {
             return window.remotion_version;
         },
@@ -97,16 +110,33 @@ const innerSetPropsAndEnv = async ({ inputProps, envVariables, page, serveUrl, i
         frame: null,
         page,
     });
-    const requiredVersion = '5';
+    const requiredVersion = '9';
     if (siteVersion !== requiredVersion) {
-        throw new Error(`Incompatible site: When visiting ${urlToVisit}, a bundle was found, but one that is not compatible with this version of Remotion. Found version: ${siteVersion} - Required version: ${requiredVersion}. To resolve this error, please bundle and deploy again.`);
+        throw new Error([
+            `Incompatible site: When visiting ${urlToVisit}, a bundle was found, but one that is not compatible with this version of Remotion. Found version: ${siteVersion} - Required version: ${requiredVersion}. To resolve this error:`,
+            '▸ Use `npx remotion lambda sites create` to redeploy the site with the latest version.',
+            '  ℹ Use --site-name with the same name as before to overwrite your site.',
+            '▸ Use `deploySite()` if you are using the Node.JS APIs.',
+        ].join('\n'));
     }
     if (remotionVersion !== version_1.VERSION && process.env.NODE_ENV !== 'test') {
         if (remotionVersion) {
-            console.warn(`The site was bundled with version ${remotionVersion} of @remotion/bundler, while @remotion/renderer is on version ${version_1.VERSION}. You may not have the newest bugfixes and features. Re-bundle the site to fix this issue.`);
+            logger_1.Log.warnAdvanced({
+                indent,
+                logLevel,
+            }, [
+                `The site was bundled with version ${remotionVersion} of @remotion/bundler, while @remotion/renderer is on version ${version_1.VERSION}. You may not have the newest bugfixes and features.`,
+                `To resolve this warning:`,
+                '▸ Use `npx remotion lambda sites create` to redeploy the site with the latest version.',
+                '  ℹ Use --site-name with the same name as before to overwrite your site.',
+                '▸ Use `deploySite()` if you are using the Node.JS APIs.',
+            ].join('\n'));
         }
         else {
-            console.warn(`The site was bundled with an old version of Remotion, while @remotion/renderer is on version ${version_1.VERSION}. You may not have the newest bugfixes and features. Re-bundle the site to fix this issue.`);
+            logger_1.Log.warnAdvanced({
+                indent,
+                logLevel,
+            }, `The site was bundled with an old version of Remotion, while @remotion/renderer is on version ${version_1.VERSION}. You may not have the newest bugfixes and features. Re-bundle the site to fix this issue.`);
         }
     }
 };
@@ -115,8 +145,8 @@ const setPropsAndEnv = (params) => {
         innerSetPropsAndEnv(params),
         new Promise((_, reject) => {
             setTimeout(() => {
-                reject(new Error('Timed out while setting up the headless browser - the browser seems to not respond. This error is thrown to trigger a retry.'));
-            }, 10000);
+                reject(new Error(`Timed out after ${params.timeoutInMilliseconds} while setting up the headless browser. This could be because the you specified takes a long time to load (or network resources that it includes like fonts) or because the browser is not responding. Optimize the site or increase the browser timeout.`));
+            }, params.timeoutInMilliseconds);
         }),
     ]);
 };

package/dist/stitch-frames-to-video.d.ts

@@ -4,6 +4,7 @@ import type { RenderAssetInfo } from './assets/download-map';
 import type { AudioCodec } from './audio-codec';
 import type { Codec } from './codec';
 import type { FfmpegOverrideFn } from './ffmpeg-override';
+import type { LogLevel } from './log-level';
 import type { CancelSignal } from './make-cancel-signal';
 import type { PixelFormat } from './pixel-format';
 import type { ProResProfile } from './prores-profile';
@@ -24,7 +25,7 @@ type InternalStitchFramesToVideoOptions = {
     onProgress?: null | ((progress: number) => void);
     onDownload: undefined | RenderMediaOnDownload;
     proResProfile: undefined | ProResProfile;
-    verbose: boolean;
+    logLevel: LogLevel;
     dir: string;
     cancelSignal: CancelSignal | null;
     preEncodedFileLocation: string | null;

package/dist/stitch-frames-to-video.js

@@ -59,7 +59,7 @@ const packageJsonPath = node_path_1.default.join(__dirname, '..', 'package.json'
 const packageJson = node_fs_1.default.existsSync(packageJsonPath)
     ? JSON.parse(node_fs_1.default.readFileSync(packageJsonPath, 'utf-8'))
     : null;
-const getAssetsData = async ({ assets, onDownload, fps, expectedFrames, verbose, onProgress, downloadMap, remotionRoot, indent, }) => {
+const getAssetsData = async ({ assets, onDownload, fps, expectedFrames, logLevel, onProgress, downloadMap, remotionRoot, indent, }) => {
     const fileUrlAssets = await (0, convert_assets_to_file_urls_1.convertAssetsToFileUrls)({
         assets,
         onDownload: onDownload !== null && onDownload !== void 0 ? onDownload : (() => () => undefined),
@@ -67,7 +67,7 @@ const getAssetsData = async ({ assets, onDownload, fps, expectedFrames, verbose,
     });
     (0, download_and_map_assets_to_file_1.markAllAssetsAsDownloaded)(downloadMap);
     const assetPositions = (0, calculate_asset_positions_1.calculateAssetPositions)(fileUrlAssets);
-    logger_1.Log.verboseAdvanced({ indent, logLevel: verbose ? 'verbose' : 'info', tag: 'audio' }, 'asset positions', JSON.stringify(assetPositions));
+    logger_1.Log.verboseAdvanced({ indent, logLevel, tag: 'audio' }, 'asset positions', JSON.stringify(assetPositions));
     const preprocessProgress = new Array(assetPositions.length).fill(0);
     const updateProgress = () => {
         onProgress(preprocessProgress.reduce((a, b) => a + b, 0) / assetPositions.length);
@@ -100,7 +100,7 @@ const getAssetsData = async ({ assets, onDownload, fps, expectedFrames, verbose,
     });
     return outName;
 };
-const innerStitchFramesToVideo = async ({ assetsInfo, audioBitrate, audioCodec, cancelSignal, codec, crf, dir, enforceAudioTrack, ffmpegOverride, force, fps, height, indent, muted, onDownload, outputLocation, pixelFormat, preEncodedFileLocation, preferLossless, proResProfile, verbose, videoBitrate, width, numberOfGifLoops, onProgress, }, remotionRoot) => {
+const innerStitchFramesToVideo = async ({ assetsInfo, audioBitrate, audioCodec, cancelSignal, codec, crf, dir, enforceAudioTrack, ffmpegOverride, force, fps, height, indent, muted, onDownload, outputLocation, pixelFormat, preEncodedFileLocation, preferLossless, proResProfile, logLevel, videoBitrate, width, numberOfGifLoops, onProgress, }, remotionRoot) => {
     var _a;
     remotion_1.Internals.validateDimension(height, 'height', 'passed to `stitchFramesToVideo()`');
     remotion_1.Internals.validateDimension(width, 'width', 'passed to `stitchFramesToVideo()`');
@@ -136,39 +136,29 @@ const innerStitchFramesToVideo = async ({ assetsInfo, audioBitrate, audioCodec,
         : node_path_1.default.join(assetsInfo.downloadMap.stitchFrames, `out.${(0, get_extension_from_codec_1.getFileExtensionFromCodec)(codec, resolvedAudioCodec)}`);
     logger_1.Log.verboseAdvanced({
         indent,
-        logLevel: verbose ? 'verbose' : 'info',
-        tag: 'stitchFramesToVideo()',
-    }, 'encoder', encoderName);
-    logger_1.Log.verboseAdvanced({
-        indent,
-        logLevel: verbose ? 'verbose' : 'info',
+        logLevel,
         tag: 'stitchFramesToVideo()',
     }, 'audioCodec', resolvedAudioCodec);
     logger_1.Log.verboseAdvanced({
         indent,
-        logLevel: verbose ? 'verbose' : 'info',
+        logLevel,
         tag: 'stitchFramesToVideo()',
     }, 'pixelFormat', pixelFormat);
     logger_1.Log.verboseAdvanced({
         indent,
-        logLevel: verbose ? 'verbose' : 'info',
+        logLevel,
         tag: 'stitchFramesToVideo()',
     }, 'codec', codec);
     logger_1.Log.verboseAdvanced({
         indent,
-        logLevel: verbose ? 'verbose' : 'info',
+        logLevel,
         tag: 'stitchFramesToVideo()',
     }, 'shouldRenderAudio', shouldRenderAudio);
     logger_1.Log.verboseAdvanced({
         indent,
-        logLevel: verbose ? 'verbose' : 'info',
+        logLevel,
         tag: 'stitchFramesToVideo()',
     }, 'shouldRenderVideo', shouldRenderVideo);
-    logger_1.Log.verboseAdvanced({
-        indent,
-        logLevel: verbose ? 'verbose' : 'info',
-        tag: 'stitchFramesToVideo()',
-    }, 'proResProfileName', proResProfileName);
     (0, crf_1.validateQualitySettings)({
         crf,
         codec,
@@ -186,7 +176,7 @@ const innerStitchFramesToVideo = async ({ assetsInfo, audioBitrate, audioCodec,
             onDownload,
             fps,
             expectedFrames,
-            verbose,
+            logLevel,
             onProgress: (prog) => updateProgress(prog, 0),
             downloadMap: assetsInfo.downloadMap,
             remotionRoot,
@@ -288,12 +278,12 @@ const innerStitchFramesToVideo = async ({ assetsInfo, audioBitrate, audioCodec,
         : ffmpegString;
     logger_1.Log.verboseAdvanced({
         indent: indent !== null && indent !== void 0 ? indent : false,
-        logLevel: verbose ? 'verbose' : 'info',
+        logLevel,
         tag: 'stitchFramesToVideo()',
     }, 'Generated final FFMPEG command:');
     logger_1.Log.verboseAdvanced({
         indent,
-        logLevel: verbose ? 'verbose' : 'info',
+        logLevel,
         tag: 'stitchFramesToVideo()',
     }, finalFfmpegString.join(' '));
     const task = (0, call_ffmpeg_1.callFf)('ffmpeg', finalFfmpegString, {
@@ -391,7 +381,7 @@ const stitchFramesToVideo = ({ assetsInfo, force, fps, height, width, audioBitra
         outputLocation: outputLocation !== null && outputLocation !== void 0 ? outputLocation : null,
         pixelFormat: pixelFormat !== null && pixelFormat !== void 0 ? pixelFormat : pixel_format_1.DEFAULT_PIXEL_FORMAT,
         proResProfile,
-        verbose: verbose !== null && verbose !== void 0 ? verbose : false,
+        logLevel: verbose ? 'verbose' : 'info',
         videoBitrate: videoBitrate !== null && videoBitrate !== void 0 ? videoBitrate : null,
         width,
         preEncodedFileLocation: null,

package/dist/symbolicate-stacktrace.d.ts

@@ -1,6 +1,7 @@
 import type { BasicSourceMapConsumer, IndexedSourceMapConsumer } from 'source-map';
 import { SourceMapConsumer } from 'source-map';
 import type { UnsymbolicatedStackFrame } from './parse-browser-error-stack';
+export declare const getSourceMapFromRemoteUrl: (url: string) => Promise<BasicSourceMapConsumer | IndexedSourceMapConsumer>;
 type ScriptLine = {
     lineNumber: number;
     content: string;
@@ -22,7 +23,7 @@ export declare const symbolicateStackFrame: (frame: UnsymbolicatedStackFrame, ma
     originalLineNumber: number | null;
     originalScriptCode: ScriptLine[] | null;
 };
-export declare const getSourceMapFromRemoteFile: (fileName: string) => Promise<IndexedSourceMapConsumer | null>;
-export declare const getSourceMapFromLocalFile: (fileName: string) => Promise<IndexedSourceMapConsumer | null>;
+export declare const getSourceMapFromRemoteFile: (fileName: string) => Promise<AnySourceMapConsumer | null>;
+export declare const getSourceMapFromLocalFile: (fileName: string) => Promise<AnySourceMapConsumer | null>;
 export type AnySourceMapConsumer = BasicSourceMapConsumer | IndexedSourceMapConsumer;
 export {};

package/dist/symbolicate-stacktrace.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSourceMapFromLocalFile = exports.getSourceMapFromRemoteFile = exports.symbolicateStackFrame = exports.symbolicateFromSources = exports.symbolicateStackTraceFromRemoteFrames = void 0;
+exports.getSourceMapFromLocalFile = exports.getSourceMapFromRemoteFile = exports.symbolicateStackFrame = exports.symbolicateFromSources = exports.symbolicateStackTraceFromRemoteFrames = exports.getSourceMapFromRemoteUrl = void 0;
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const source_map_1 = require("source-map");
@@ -24,10 +24,18 @@ function extractSourceMapUrl(fileContents) {
     }
     return match[1].toString();
 }
-const getSourceMap = async (filePath, fileContents, type) => {
+const getSourceMapFromRemoteUrl = async (url) => {
+    if (!url.endsWith('.js.map')) {
+        throw new Error(`The URL ${url} does not seem to be a valid source map URL.`);
+    }
+    const obj = await fetchUrl(url);
+    return new source_map_1.SourceMapConsumer(obj);
+};
+exports.getSourceMapFromRemoteUrl = getSourceMapFromRemoteUrl;
+const getSourceMap = (filePath, fileContents, type) => {
     const sm = extractSourceMapUrl(fileContents);
     if (sm === null) {
-        return null;
+        return Promise.resolve(null);
     }
     if (sm.indexOf('data:') === 0) {
         const base64 = /^data:application\/json;([\w=:"-]+;)*base64,/;
@@ -36,17 +44,22 @@ const getSourceMap = async (filePath, fileContents, type) => {
             throw new Error('Sorry, non-base64 inline source-map encoding is not supported.');
         }
         const converted = window.atob(sm.substring(match2[0].length));
-        return new source_map_1.SourceMapConsumer(JSON.parse(converted));
+        try {
+            const sourceMapConsumer = new source_map_1.SourceMapConsumer(JSON.parse(converted));
+            return Promise.resolve(sourceMapConsumer);
+        }
+        catch (_a) {
+            return Promise.resolve(null);
+        }
     }
     if (type === 'local') {
         // Find adjacent file: bundle.js -> bundle.js.map
         const newFilePath = path_1.default.join(path_1.default.dirname(filePath), sm);
-        return new source_map_1.SourceMapConsumer((0, fs_1.readFileSync)(newFilePath, 'utf8'));
+        return Promise.resolve(new source_map_1.SourceMapConsumer((0, fs_1.readFileSync)(newFilePath, 'utf8')));
     }
     const index = filePath.lastIndexOf('/');
     const url = filePath.substring(0, index + 1) + sm;
-    const obj = await fetchUrl(url);
-    return new source_map_1.SourceMapConsumer(obj);
+    return (0, exports.getSourceMapFromRemoteUrl)(url);
 };
 const fetchUrl = async (url) => {
     const res = await (0, read_file_1.readFile)(url);

package/dist/take-frame-and-compose.js

@@ -12,7 +12,7 @@ const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const truthy_1 = require("./truthy");
 const takeFrameAndCompose = async ({ freePage, imageFormat, jpegQuality, frame, width, height, output, scale, downloadMap, wantsBuffer, compositor, }) => {
     var _a;
-    const [clipRegion, collectedAssets] = await Promise.all([
+    const [{ value: clipRegion }, { value: collectedAssets }] = await Promise.all([
         (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
             pageFunction: () => {
                 if (typeof window.remotion_getClipRegion === 'undefined') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/renderer",
-  "version": "4.1.0-alpha1",
+  "version": "4.1.0-alpha11",
   "description": "Renderer for Remotion",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,7 @@
     "extract-zip": "2.0.1",
     "source-map": "^0.8.0-beta.0",
     "ws": "8.7.0",
-    "remotion": "4.1.0-alpha1"
+    "remotion": "4.1.0-alpha11"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -34,7 +34,7 @@
     "@types/react-dom": "18.0.10",
     "eslint": "8.42.0",
     "prettier": "^2.7.1",
-    "prettier-plugin-organize-imports": "^2.3.4",
+    "prettier-plugin-organize-imports": "^3.2.2",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "typescript": "4.9.5",
@@ -42,13 +42,13 @@
     "zod": "^3.21.4"
   },
   "optionalDependencies": {
-    "@remotion/compositor-darwin-x64": "4.1.0-alpha1",
-    "@remotion/compositor-darwin-arm64": "4.1.0-alpha1",
-    "@remotion/compositor-linux-x64-musl": "4.1.0-alpha1",
-    "@remotion/compositor-linux-x64-gnu": "4.1.0-alpha1",
-    "@remotion/compositor-win32-x64-msvc": "4.1.0-alpha1",
-    "@remotion/compositor-linux-arm64-musl": "4.1.0-alpha1",
-    "@remotion/compositor-linux-arm64-gnu": "4.1.0-alpha1"
+    "@remotion/compositor-darwin-arm64": "4.1.0-alpha11",
+    "@remotion/compositor-darwin-x64": "4.1.0-alpha11",
+    "@remotion/compositor-linux-arm64-gnu": "4.1.0-alpha11",
+    "@remotion/compositor-linux-arm64-musl": "4.1.0-alpha11",
+    "@remotion/compositor-linux-x64-gnu": "4.1.0-alpha11",
+    "@remotion/compositor-linux-x64-musl": "4.1.0-alpha11",
+    "@remotion/compositor-win32-x64-msvc": "4.1.0-alpha11"
   },
   "keywords": [
     "remotion",