@remotion/cli 3.3.28 → 3.3.32

package/dist/config/concurrency.d.ts

@@ -1,3 +1,3 @@
-export declare type Concurrency = number | null;
+export declare type Concurrency = number | string | null;
 export declare const setConcurrency: (newConcurrency: Concurrency) => void;
-export declare const getConcurrency: () => number | null;
+export declare const getConcurrency: () => string | number | null;

package/dist/config/index.d.ts

@@ -24,7 +24,7 @@ export declare const ConfigInternals: {
     getChromiumHeadlessMode: () => boolean;
     getChromiumOpenGlRenderer: () => "swangle" | "angle" | "egl" | "swiftshader" | null;
     getEveryNthFrame: () => number;
-    getConcurrency: () => number | null;
+    getConcurrency: () => string | number | null;
     getCurrentPuppeteerTimeout: () => number;
     getQuality: () => number | undefined;
     getStillFrame: () => number;

package/dist/config/log.d.ts

@@ -1,3 +1,3 @@
 import type { LogLevel } from '@remotion/renderer';
-export declare const getLogLevel: () => "error" | "verbose" | "info" | "warn";
+export declare const getLogLevel: () => "verbose" | "error" | "info" | "warn";
 export declare const setLogLevel: (newLogLevel: LogLevel) => void;

package/dist/editor/components/PlayPause.js

@@ -100,7 +100,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
                 direction: 'fit-right',
                 durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                frame: (0, imperative_state_1.getCurrentFrame)() + 1,
+                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, (0, imperative_state_1.getCurrentFrame)() + 1),
             });
         }
         e.preventDefault();

package/dist/get-cli-options.d.ts

@@ -14,7 +14,7 @@ export declare const getCliOptions: (options: {
     remotionRoot: string;
 }) => Promise<{
     puppeteerTimeout: number;
-    concurrency: number | null;
+    concurrency: string | number | null;
     frameRange: FrameRange | null;
     shouldOutputImageSequence: boolean;
     inputProps: object;
@@ -30,7 +30,7 @@ export declare const getCliOptions: (options: {
     browserExecutable: BrowserExecutable;
     ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
     ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-    logLevel: "error" | "verbose" | "info" | "warn";
+    logLevel: "verbose" | "error" | "info" | "warn";
     scale: number;
     chromiumOptions: ChromiumOptions;
     overwrite: boolean;

package/dist/get-filename.js

@@ -9,6 +9,7 @@ const getOutputFilename = ({ codec, imageSequence, compositionName, defaultExten
         compositionId: compositionName,
         defaultExtension,
         args,
+        type: imageSequence ? 'sequence' : 'asset',
     });
     let extension = renderer_1.RenderInternals.getExtensionOfFilename(filename);
     if (imageSequence) {

package/dist/index.d.ts

@@ -72,7 +72,7 @@ export declare const CliInternals: {
         remotionRoot: string;
     }) => Promise<{
         puppeteerTimeout: number;
-        concurrency: number | null;
+        concurrency: string | number | null;
         frameRange: import("@remotion/renderer").FrameRange | null;
         shouldOutputImageSequence: boolean;
         inputProps: object;
@@ -88,7 +88,7 @@ export declare const CliInternals: {
         browserExecutable: import("@remotion/renderer").BrowserExecutable;
         ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
         ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
-        logLevel: "error" | "verbose" | "info" | "warn";
+        logLevel: "verbose" | "error" | "info" | "warn";
         scale: number;
         chromiumOptions: import("@remotion/renderer").ChromiumOptions;
         overwrite: boolean;
@@ -135,7 +135,7 @@ export declare const CliInternals: {
         source: string;
     };
     minimist: typeof minimist;
-    selectComposition: (validCompositions: import("remotion/.").TCompMetadata[]) => Promise<{
+    selectComposition: (validCompositions: import("remotion").TCompMetadata[]) => Promise<{
         compositionId: string;
         reason: string;
     }>;
@@ -145,5 +145,5 @@ export declare const CliInternals: {
         reason: string;
     };
     getImageFormat: (codec: import("@remotion/renderer").CodecOrUndefined) => "png" | "jpeg" | "none";
-    printCompositions: (compositions: import("remotion/.").TCompMetadata[]) => void;
+    printCompositions: (compositions: import("remotion").TCompMetadata[]) => void;
 };

package/dist/list-of-remotion-packages.js

@@ -20,5 +20,6 @@ exports.listOfRemotionPackages = [
     '@remotion/preload',
     '@remotion/three',
     '@remotion/gif',
+    '@remotion/shapes',
     'remotion',
 ];

package/dist/preview-server/error-overlay/react-overlay/utils/get-stack-frames.js

@@ -17,9 +17,7 @@ const getStackFrames = async (error, contextSize) => {
     const enhancedFrames = await (0, unmapper_1.unmap)(parsedFrames, contextSize);
     if (enhancedFrames
         .map((f) => f.originalFileName)
-        .filter((f_1) => f_1 !== null &&
-        f_1 !== undefined &&
-        f_1.indexOf('node_modules') === -1).length === 0) {
+        .filter((f_1) => f_1 !== null && f_1 !== undefined).length === 0) {
         return null;
     }
     return enhancedFrames;

package/dist/preview-server/error-overlay/remotion-overlay/get-help-link.js

@@ -38,6 +38,12 @@ const getHelpLink = (message) => {
             url: 'https://remotion.dev/docs/media-playback-error',
         };
     }
+    if (message.includes('Div is not part of the THREE')) {
+        return {
+            title: '<Sequence> inside <ThreeCanvas>',
+            url: 'https://remotion.dev/docs/sequence#note-for-remotionthree',
+        };
+    }
     return null;
 };
 exports.getHelpLink = getHelpLink;

package/dist/preview.js

@@ -53,6 +53,16 @@ const getShouldOpenBrowser = () => {
     }
     return { shouldOpenBrowser: true, reasonForBrowserDecision: 'default' };
 };
+const getPort = () => {
+    if (parse_command_line_1.parsedCli.port) {
+        return parse_command_line_1.parsedCli.port;
+    }
+    const serverPort = config_1.ConfigInternals.getServerPort();
+    if (serverPort) {
+        return serverPort;
+    }
+    return null;
+};
 const previewCommand = async (remotionRoot, args) => {
     const { file, reason } = (0, entry_point_1.findEntryPoint)(args, remotionRoot);
     log_1.Log.verbose('Entry point:', file, 'reason:', reason);
@@ -62,7 +72,7 @@ const previewCommand = async (remotionRoot, args) => {
         log_1.Log.error('See https://www.remotion.dev/docs/register-root for more information.');
         process.exit(1);
     }
-    const { port: desiredPort } = parse_command_line_1.parsedCli;
+    const desiredPort = getPort();
     const fullPath = path_1.default.join(process.cwd(), file);
     let inputProps = (0, get_input_props_1.getInputProps)((newProps) => {
         waitForLiveEventsListener().then((listener) => {

package/dist/still.js

@@ -84,6 +84,7 @@ const still = async (remotionRoot, args) => {
         compositionId,
         defaultExtension: imageFormat,
         args: argsAfterComposition,
+        type: 'asset',
     });
     const absoluteOutputLocation = (0, get_cli_options_1.getAndValidateAbsoluteOutputFile)(relativeOutputLocation, overwrite);
     (0, fs_1.mkdirSync)(path_1.default.join(absoluteOutputLocation, '..'), {

package/dist/user-passed-output-location.d.ts

@@ -1,6 +1,7 @@
 export declare const getUserPassedOutputLocation: (args: string[]) => string;
-export declare const getOutputLocation: ({ compositionId, defaultExtension, args, }: {
+export declare const getOutputLocation: ({ compositionId, defaultExtension, args, type, }: {
     compositionId: string;
     defaultExtension: string;
     args: string[];
+    type: 'asset' | 'sequence';
 }) => string;

package/dist/user-passed-output-location.js

@@ -8,12 +8,18 @@ const getUserPassedOutputLocation = (args) => {
     return filename;
 };
 exports.getUserPassedOutputLocation = getUserPassedOutputLocation;
-const getDefaultOutLocation = ({ compositionName, defaultExtension, }) => {
-    const defaultName = `out/${compositionName}.${defaultExtension}`;
-    return defaultName;
+const getDefaultOutLocation = ({ compositionName, defaultExtension, type, }) => {
+    if (type === 'sequence') {
+        return `out/${compositionName}`;
+    }
+    return `out/${compositionName}.${defaultExtension}`;
 };
-const getOutputLocation = ({ compositionId, defaultExtension, args, }) => {
+const getOutputLocation = ({ compositionId, defaultExtension, args, type, }) => {
     var _a;
-    return ((_a = (0, exports.getUserPassedOutputLocation)(args)) !== null && _a !== void 0 ? _a : getDefaultOutLocation({ compositionName: compositionId, defaultExtension }));
+    return ((_a = (0, exports.getUserPassedOutputLocation)(args)) !== null && _a !== void 0 ? _a : getDefaultOutLocation({
+        compositionName: compositionId,
+        defaultExtension,
+        type,
+    }));
 };
 exports.getOutputLocation = getOutputLocation;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/cli",
-	"version": "3.3.28",
+	"version": "3.3.32",
 	"description": "CLI for Remotion",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -22,16 +22,16 @@
 	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@remotion/bundler": "3.3.28",
-		"@remotion/media-utils": "3.3.28",
-		"@remotion/player": "3.3.28",
-		"@remotion/renderer": "3.3.28",
+		"@remotion/bundler": "3.3.32",
+		"@remotion/media-utils": "3.3.32",
+		"@remotion/player": "3.3.32",
+		"@remotion/renderer": "3.3.32",
 		"better-opn": "2.1.1",
 		"dotenv": "9.0.2",
 		"memfs": "3.4.3",
 		"minimist": "1.2.6",
 		"prompts": "2.4.1",
-		"remotion": "3.3.28",
+		"remotion": "3.3.32",
 		"semver": "7.3.5",
 		"source-map": "0.6.1"
 	},
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0caa0bec583b5e4c2b12b7375c365e02c2378eeb"
+	"gitHead": "6b4f3514c801ddf2e7f957dd2e633271fbbc75f6"
 }

package/.prettierrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-	singleQuote: true,
-	bracketSpacing: false,
-	useTabs: true,
-	overrides: [
-		{
-			files: ['*.yml'],
-			options: {
-				singleQuote: false,
-			},
-		},
-	],
-	plugins: [require.resolve('prettier-plugin-organize-imports')],
-};

package/dist/convert-entry-point-to-serve-url.d.ts

@@ -1 +0,0 @@
-export declare const convertEntryPointToServeUrl: (entryPoint: string) => string;

package/dist/convert-entry-point-to-serve-url.js

@@ -1,15 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertEntryPointToServeUrl = void 0;
-const renderer_1 = require("@remotion/renderer");
-const path_1 = __importDefault(require("path"));
-const convertEntryPointToServeUrl = (entryPoint) => {
-    const fullPath = renderer_1.RenderInternals.isServeUrl(entryPoint)
-        ? entryPoint
-        : path_1.default.resolve(process.cwd(), entryPoint);
-    return fullPath;
-};
-exports.convertEntryPointToServeUrl = convertEntryPointToServeUrl;

package/dist/editor/components/CollapsableOptions.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const CollapsableOptions: React.FC<{
-    children: React.ReactNode;
-    showLabel: string;
-    hideLabel: string;
-}>;

package/dist/editor/components/CollapsableOptions.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsableOptions = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const z_index_1 = require("../state/z-index");
-const layout_1 = require("./layout");
-const TimelineCollapseToggle_1 = require("./Timeline/TimelineCollapseToggle");
-const container = {
-    marginLeft: 16,
-    height: 40,
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-};
-const buttonStyle = {
-    border: 'none',
-    padding: 0,
-    appearance: 'none',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    fontSize: 14,
-    color: colors_1.LIGHT_TEXT,
-};
-const CollapsableOptions = ({ children, showLabel, hideLabel }) => {
-    const [show, setShow] = (0, react_1.useState)(false);
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const onClick = (0, react_1.useCallback)(() => {
-        setShow((s) => !s);
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)("button", { style: buttonStyle, tabIndex: tabIndex, onClick: onClick, type: "button", children: [(0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { color: colors_1.LIGHT_TEXT, collapsed: !show }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, x: 1 }), show ? hideLabel : showLabel] }) }), show ? children : null] }));
-};
-exports.CollapsableOptions = CollapsableOptions;

package/dist/editor/components/InlineAction.d.ts

@@ -1,5 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import React from 'react';
-export declare const InlineAction: React.FC<PropsWithChildren<{
-    onClick: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-}>>;

package/dist/editor/components/InlineAction.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InlineAction = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
-const z_index_1 = require("../state/z-index");
-const InlineAction = ({ children, onClick }) => {
-    const { tabIndex } = (0, z_index_1.useZIndex)();
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            border: 'none',
-            background: hovered ? colors_1.CLEAR_HOVER : 'transparent',
-            height: 24,
-            width: 24,
-            display: 'inline-flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            borderRadius: 3,
-            opacity: hovered ? 1 : 0.6,
-        };
-    }, [hovered]);
-    return (
-    // <div> because cannot use button inside a button
-    (0, jsx_runtime_1.jsx)("a", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, children: children }));
-};
-exports.InlineAction = InlineAction;

package/dist/editor/components/RenderButton.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { TCompMetadata } from 'remotion';
-export declare const RenderButton: React.FC<{
-    composition: TCompMetadata;
-    visible: boolean;
-}>;

package/dist/editor/components/RenderButton.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const get_default_out_name_1 = require("../../get-default-out-name");
-const render_1 = require("../icons/render");
-const modals_1 = require("../state/modals");
-const InlineAction_1 = require("./InlineAction");
-const RenderButton = ({ composition, visible }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const iconStyle = (0, react_1.useMemo)(() => {
-        return {
-            style: {
-                height: 12,
-            },
-        };
-    }, []);
-    const onClick = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d, _e;
-        e.stopPropagation();
-        setSelectedModal({
-            type: 'render',
-            compositionId: composition.id,
-            initialFrame: 0,
-            // TODO: JPEG for video, PNG for image
-            initialImageFormat: 'png',
-            // TODO: Determine defaults from config file
-            initialQuality: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.quality) !== null && _b !== void 0 ? _b : 80,
-            initialScale: (_d = (_c = window.remotion_renderDefaults) === null || _c === void 0 ? void 0 : _c.scale) !== null && _d !== void 0 ? _d : 1,
-            initialVerbose: ((_e = window.remotion_renderDefaults) === null || _e === void 0 ? void 0 : _e.logLevel) === 'verbose',
-            initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
-                compositionName: composition.id,
-                defaultExtension: 'png',
-            }),
-        });
-    }, [composition, setSelectedModal]);
-    if (!visible) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }) }));
-};
-exports.RenderButton = RenderButton;

package/dist/editor/components/RenderModal/RenderErrorModal.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { RenderJob } from '../../../preview-server/render-queue/job';
-export declare const RenderErrorModal: React.FC<{
-    job: RenderJob;
-}>;

package/dist/editor/components/RenderModal/RenderErrorModal.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderErrorModal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
-const make_retry_payload_1 = require("../../../preview-server/render-queue/make-retry-payload");
-const modals_1 = require("../../state/modals");
-const layout_1 = require("../layout");
-const ModalContainer_1 = require("../ModalContainer");
-const ModalHeader_1 = require("../ModalHeader");
-const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const actions_1 = require("../RenderQueue/actions");
-const container = {
-    padding: 20,
-    maxWidth: 1200,
-    paddingTop: 0,
-};
-const codeBlock = {
-    backgroundColor: 'black',
-    whiteSpace: 'pre',
-    padding: 12,
-    borderRadius: 4,
-    fontFamily: 'monospace',
-    overflow: 'auto',
-    maxHeight: 300,
-};
-const spacer = {
-    height: layout_1.SPACING_UNIT,
-    width: layout_1.SPACING_UNIT,
-};
-const buttonRow = {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-};
-const RenderErrorModal = ({ job }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const onQuit = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-    }, [setSelectedModal]);
-    const onRetry = (0, react_1.useCallback)(() => {
-        const retryPayload = (0, make_retry_payload_1.makeRetryPayload)(job);
-        setSelectedModal(retryPayload);
-    }, [job, setSelectedModal]);
-    const onClickOnRemove = (0, react_1.useCallback)(() => {
-        setSelectedModal(null);
-        (0, actions_1.removeRenderJob)(job).catch((err) => {
-            var _a;
-            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
-                content: 'Failed to remove render job: ' + err.message,
-                created: Date.now(),
-                duration: 2000,
-                id: String(Math.random()),
-            });
-            console.log(err);
-        });
-    }, [job, setSelectedModal]);
-    if (job.status !== 'failed') {
-        throw new Error('should not have rendered this modal');
-    }
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${job.compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "The render failed because of the following error:" }), (0, jsx_runtime_1.jsx)("div", { style: codeBlock, children: job.error.stack }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "Retry" }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onQuit, children: "Close" })] })] })] }));
-};
-exports.RenderErrorModal = RenderErrorModal;

package/dist/editor/components/RenderModal/RenderModal.d.ts

@@ -1,11 +0,0 @@
-import type { StillImageFormat } from '@remotion/renderer';
-import React from 'react';
-export declare const RenderModal: React.FC<{
-    compositionId: string;
-    initialFrame: number;
-    initialImageFormat: StillImageFormat;
-    initialQuality: number | null;
-    initialScale: number;
-    initialVerbose: boolean;
-    initialOutName: string;
-}>;