@remotion/cli 4.1.0-alpha1 → 4.1.0-alpha11

package/dist/editor/components/TimelineInOutToggle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineInOutPointToggle = exports.inOutHandles = void 0;
+exports.TimelineInOutPointToggle = exports.defaultInOutValue = exports.inOutHandles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -10,7 +10,6 @@ const is_current_selected_still_1 = require("../helpers/is-current-selected-stil
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const timelineInOutPointer_1 = require("../icons/timelineInOutPointer");
 const in_out_1 = require("../state/in-out");
-const marks_1 = require("../state/marks");
 const ControlButton_1 = require("./ControlButton");
 const getTooltipText = (pointType, key) => [
     `Mark ${pointType}`,
@@ -24,19 +23,22 @@ const style = {
     height: 16,
 };
 exports.inOutHandles = (0, react_1.createRef)();
+exports.defaultInOutValue = { inFrame: null, outFrame: null };
 const TimelineInOutPointToggle = () => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const { setInAndOutFrames } = (0, in_out_1.useTimelineSetInOutFramePosition)();
-    const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const onInOutClear = (0, react_1.useCallback)(() => {
-        setInAndOutFrames(() => {
+    const onInOutClear = (0, react_1.useCallback)((composition) => {
+        setInAndOutFrames((prev) => {
             return {
-                inFrame: null,
-                outFrame: null,
+                ...prev,
+                [composition]: {
+                    inFrame: null,
+                    outFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames]);
@@ -45,35 +47,51 @@ const TimelineInOutPointToggle = () => {
             return null;
         }
         if (e === null || e === void 0 ? void 0 : e.shiftKey) {
-            setInAndOutFrames((f) => {
+            setInAndOutFrames((prev) => {
+                var _a;
                 return {
-                    ...f,
-                    inFrame: null,
+                    ...prev,
+                    [videoConfig.id]: {
+                        ...((_a = prev[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
                 };
             });
             return null;
         }
         setInAndOutFrames((prev) => {
-            const biggestPossible = prev.outFrame === null ? Infinity : prev.outFrame - 1;
+            var _a, _b, _c, _d, _e;
+            const prevOut = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.outFrame;
+            const biggestPossible = prevOut === undefined || prevOut === null ? Infinity : prevOut - 1;
             const selected = Math.min(timelinePosition, biggestPossible);
             if (selected === 0) {
                 return {
                     ...prev,
-                    inFrame: null,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        inFrame: null,
+                    },
                 };
             }
-            if (prev.inFrame !== null) {
+            const prevIn = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.inFrame;
+            if (prevIn !== null && prevIn !== undefined) {
                 // Disable if already at this position
-                if (prev.inFrame === selected) {
+                if (prevIn === selected) {
                     return {
                         ...prev,
-                        inFrame: null,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            inFrame: null,
+                        },
                     };
                 }
             }
             return {
                 ...prev,
-                inFrame: selected,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    inFrame: selected,
+                },
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
@@ -83,9 +101,13 @@ const TimelineInOutPointToggle = () => {
         }
         e.preventDefault();
         setInAndOutFrames((f) => {
+            var _a;
             return {
                 ...f,
-                inFrame: null,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    inFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames, videoConfig]);
@@ -95,9 +117,13 @@ const TimelineInOutPointToggle = () => {
         }
         e === null || e === void 0 ? void 0 : e.preventDefault();
         setInAndOutFrames((f) => {
+            var _a;
             return {
                 ...f,
-                outFrame: null,
+                [videoConfig.id]: {
+                    ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                    outFrame: null,
+                },
             };
         });
     }, [setInAndOutFrames, videoConfig]);
@@ -107,37 +133,59 @@ const TimelineInOutPointToggle = () => {
         }
         if (e === null || e === void 0 ? void 0 : e.shiftKey) {
             setInAndOutFrames((f) => {
+                var _a;
                 return {
                     ...f,
-                    outFrame: null,
+                    [videoConfig.id]: {
+                        ...((_a = f[videoConfig.id]) !== null && _a !== void 0 ? _a : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
                 };
             });
             return;
         }
         setInAndOutFrames((prev) => {
-            const smallestPossible = prev.inFrame === null ? -Infinity : prev.inFrame + 1;
+            var _a, _b, _c, _d, _e;
+            const prevInFrame = (_a = prev[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.inFrame;
+            const smallestPossible = prevInFrame === null || prevInFrame === undefined
+                ? -Infinity
+                : prevInFrame + 1;
             const selected = Math.max(timelinePosition, smallestPossible);
             if (selected === videoConfig.durationInFrames - 1) {
                 return {
                     ...prev,
-                    outFrame: null,
+                    [videoConfig.id]: {
+                        ...((_b = prev[videoConfig.id]) !== null && _b !== void 0 ? _b : exports.defaultInOutValue),
+                        outFrame: null,
+                    },
                 };
             }
-            if (prev.outFrame !== null) {
-                if (prev.outFrame === selected) {
+            const prevOut = (_c = prev[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.outFrame;
+            if (prevOut !== null && prevOut !== undefined) {
+                if (prevOut === selected) {
                     return {
                         ...prev,
-                        outFrame: null,
+                        [videoConfig.id]: {
+                            ...((_d = prev[videoConfig.id]) !== null && _d !== void 0 ? _d : exports.defaultInOutValue),
+                            outFrame: null,
+                        },
                     };
                 }
             }
             return {
                 ...prev,
-                outFrame: selected,
+                [videoConfig.id]: {
+                    ...((_e = prev[videoConfig.id]) !== null && _e !== void 0 ? _e : exports.defaultInOutValue),
+                    outFrame: selected,
+                },
             };
         });
     }, [setInAndOutFrames, timelinePosition, videoConfig]);
+    const confId = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.id;
     (0, react_1.useEffect)(() => {
+        if (!confId) {
+            return;
+        }
         const iKey = keybindings.registerKeybinding({
             event: 'keypress',
             key: 'i',
@@ -162,7 +210,7 @@ const TimelineInOutPointToggle = () => {
             event: 'keypress',
             key: 'x',
             callback: () => {
-                onInOutClear();
+                onInOutClear(confId);
             },
             commandCtrlKey: false,
             preventDefault: true,
@@ -173,52 +221,19 @@ const TimelineInOutPointToggle = () => {
             iKey.unregister();
             xKey.unregister();
         };
-    }, [keybindings, onInMark, onInOutClear, onOutMark]);
-    (0, react_1.useEffect)(() => {
-        if (!currentComposition || !videoConfig) {
-            return;
-        }
-        (0, marks_1.persistMarks)(currentComposition, videoConfig.durationInFrames, [
-            inFrame,
-            outFrame,
-        ]);
-    }, [currentComposition, inFrame, outFrame, videoConfig]);
-    // If duration changes and it goes out of range, we reset
-    (0, react_1.useEffect)(() => {
-        if (outFrame === null) {
-            return;
-        }
-        if (!videoConfig) {
-            return;
-        }
-        if (outFrame >= videoConfig.durationInFrames - 1) {
-            onInOutClear();
-        }
-    }, [onInOutClear, outFrame, videoConfig]);
-    (0, react_1.useEffect)(() => {
-        if (inFrame === null) {
-            return;
-        }
-        if (!videoConfig) {
-            return;
-        }
-        if (inFrame >= videoConfig.durationInFrames - 1) {
-            onInOutClear();
-        }
-    }, [onInOutClear, inFrame, videoConfig]);
+    }, [confId, keybindings, onInMark, onInOutClear, onOutMark]);
     (0, react_1.useImperativeHandle)(exports.inOutHandles, () => {
         return {
-            clearMarks: onInOutClear,
+            clearMarks: () => {
+                if (!confId) {
+                    return;
+                }
+                onInOutClear(confId);
+            },
             inMarkClick: onInMark,
             outMarkClick: onOutMark,
-            setMarks: ([newInFrame, newOutFrame]) => {
-                setInAndOutFrames({
-                    inFrame: newInFrame,
-                    outFrame: newOutFrame,
-                });
-            },
         };
-    }, [onInMark, onInOutClear, onOutMark, setInAndOutFrames]);
+    }, [confId, onInMark, onInOutClear, onOutMark]);
     if (isStill) {
         return null;
     }

package/dist/editor/helpers/colors.d.ts

@@ -16,4 +16,4 @@ export declare const BLUE_DISABLED = "#284f73";
 export declare const getBackgroundFromHoverState: ({ selected, hovered, }: {
     selected: boolean;
     hovered: boolean;
-}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "hsla(0, 0%, 100%, 0.25)" | "rgba(255, 255, 255, 0.06)";
+}) => "transparent" | "hsla(0, 0%, 100%, 0.15)" | "rgba(255, 255, 255, 0.06)" | "hsla(0, 0%, 100%, 0.25)";

package/dist/editor/helpers/is-composition-still.d.ts

@@ -1,3 +1,3 @@
 export declare const isCompositionStill: (comp: {
-    durationInFrames: number;
+    durationInFrames: number | undefined;
 } | null) => boolean;

package/dist/editor/helpers/is-current-selected-still.js

@@ -13,16 +13,15 @@ const useIsStill = () => {
 };
 exports.useIsStill = useIsStill;
 const useDimensions = () => {
-    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const selected = (0, react_1.useMemo)(() => compositions.find((c) => c.id === currentComposition), [compositions, currentComposition]);
+    const config = remotion_1.Internals.useUnsafeVideoConfig();
     return (0, react_1.useMemo)(() => {
-        if (!selected) {
+        if (!config) {
             return null;
         }
         return {
-            width: selected.width,
-            height: selected.height,
+            width: config.width,
+            height: config.height,
         };
-    }, [selected]);
+    }, [config]);
 };
 exports.useDimensions = useDimensions;

package/dist/editor/helpers/use-menu-structure.js

@@ -11,6 +11,7 @@ const NotificationCenter_1 = require("../components/Notifications/NotificationCe
 const SizeSelector_1 = require("../components/SizeSelector");
 const TimelineInOutToggle_1 = require("../components/TimelineInOutToggle");
 const Checkmark_1 = require("../icons/Checkmark");
+const canvas_ref_1 = require("../state/canvas-ref");
 const checkerboard_1 = require("../state/checkerboard");
 const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
 const modals_1 = require("../state/modals");
@@ -36,6 +37,7 @@ const useMenuStructure = (closeMenu) => {
     const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSidebarCollapsedState, sidebarCollapsedStateLeft, sidebarCollapsedStateRight, } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const sizes = (0, SizeSelector_1.getUniqueSizes)(size);
+    const isFullscreenSupported = document.fullscreenEnabled || document.webkitFullscreenEnabled;
     const structure = (0, react_1.useMemo)(() => {
         const struct = [
             {
@@ -474,7 +476,28 @@ const useMenuStructure = (closeMenu) => {
                         value: 'clear-marks',
                         quickSwitcherLabel: 'Timeline: Clear In and Out Mark',
                     },
-                ],
+                    {
+                        id: 'fullscreen-divider',
+                        type: 'divider',
+                    },
+                    isFullscreenSupported
+                        ? {
+                            id: 'fullscreen',
+                            keyHint: null,
+                            label: 'Fullscreen',
+                            leftItem: null,
+                            onClick: () => {
+                                var _a;
+                                closeMenu();
+                                (_a = canvas_ref_1.canvasRef.current) === null || _a === void 0 ? void 0 : _a.requestFullscreen();
+                            },
+                            subMenu: null,
+                            type: 'item',
+                            value: 'fullscreen',
+                            quickSwitcherLabel: 'Go Fullscreen',
+                        }
+                        : null,
+                ].filter(remotion_1.Internals.truthy),
             },
             'EyeDropper' in window
                 ? {
@@ -639,6 +662,7 @@ const useMenuStructure = (closeMenu) => {
         sidebarCollapsedStateLeft,
         sidebarCollapsedStateRight,
         checkerboard,
+        isFullscreenSupported,
         closeMenu,
         setSelectedModal,
         type,

package/dist/editor/icons/keys.js

@@ -4,6 +4,7 @@ exports.ArrowRight = exports.ArrowLeft = exports.ShiftIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const iconStyle = {
     width: 10,
+    display: 'inline',
 };
 const ShiftIcon = () => {
     return ((0, jsx_runtime_1.jsx)("svg", { style: iconStyle, viewBox: "0 0 448 512", children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M48.048 304h73.798v128c0 26.51 21.49 48 48 48h108.308c26.51 0 48-21.49 48-48V304h73.789c42.638 0 64.151-51.731 33.941-81.941l-175.943-176c-18.745-18.745-49.137-18.746-67.882 0l-175.952 176C-16.042 252.208 5.325 304 48.048 304zM224 80l176 176H278.154v176H169.846V256H48L224 80z" }) }));

package/dist/editor/state/canvas-ref.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const canvasRef: import("react").RefObject<HTMLDivElement>;

package/dist/editor/state/canvas-ref.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.canvasRef = void 0;
+const react_1 = require("react");
+exports.canvasRef = (0, react_1.createRef)();

package/dist/editor/state/in-out.d.ts

@@ -1,12 +1,13 @@
 import type React from 'react';
-export type TimelineInOutContextValue = {
+export type InOutValue = {
     inFrame: number | null;
     outFrame: number | null;
 };
+export type TimelineInOutContextValue = Record<string, InOutValue>;
 export type SetTimelineInOutContextValue = {
     setInAndOutFrames: (u: React.SetStateAction<TimelineInOutContextValue>) => void;
 };
 export declare const TimelineInOutContext: React.Context<TimelineInOutContextValue>;
 export declare const SetTimelineInOutContext: React.Context<SetTimelineInOutContextValue>;
-export declare const useTimelineInOutFramePosition: () => TimelineInOutContextValue;
+export declare const useTimelineInOutFramePosition: () => InOutValue;
 export declare const useTimelineSetInOutFramePosition: () => SetTimelineInOutContextValue;

package/dist/editor/state/in-out.js

@@ -2,18 +2,35 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTimelineSetInOutFramePosition = exports.useTimelineInOutFramePosition = exports.SetTimelineInOutContext = exports.TimelineInOutContext = void 0;
 const react_1 = require("react");
-exports.TimelineInOutContext = (0, react_1.createContext)({
-    inFrame: null,
-    outFrame: null,
-});
+const remotion_1 = require("remotion");
+exports.TimelineInOutContext = (0, react_1.createContext)({});
 exports.SetTimelineInOutContext = (0, react_1.createContext)({
     setInAndOutFrames: () => {
         throw new Error('default');
     },
 });
 const useTimelineInOutFramePosition = () => {
+    var _a, _b, _c, _d;
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const state = (0, react_1.useContext)(exports.TimelineInOutContext);
-    return state;
+    if (!videoConfig) {
+        return { inFrame: null, outFrame: null };
+    }
+    const maxFrame = videoConfig.durationInFrames - 1;
+    const actualInFrame = (_b = (_a = state[videoConfig.id]) === null || _a === void 0 ? void 0 : _a.inFrame) !== null && _b !== void 0 ? _b : null;
+    const actualOutFrame = (_d = (_c = state[videoConfig.id]) === null || _c === void 0 ? void 0 : _c.outFrame) !== null && _d !== void 0 ? _d : null;
+    return {
+        inFrame: actualInFrame === null
+            ? null
+            : actualInFrame >= maxFrame
+                ? null
+                : actualInFrame,
+        outFrame: actualOutFrame === null
+            ? null
+            : actualOutFrame >= maxFrame
+                ? null
+                : actualOutFrame,
+    };
 };
 exports.useTimelineInOutFramePosition = useTimelineInOutFramePosition;
 const useTimelineSetInOutFramePosition = () => {

package/dist/editor/state/marks.d.ts

@@ -1,2 +1,3 @@
-export declare const persistMarks: (comp: string, durationInFrames: number, marks: [number | null, number | null]) => void;
-export declare const loadMarks: (comp: string, durationInFrames: number) => [number | null, number | null];
+import type { TimelineInOutContextValue } from './in-out';
+export declare const persistMarks: (marks: TimelineInOutContextValue) => void;
+export declare const loadMarks: () => TimelineInOutContextValue;

package/dist/editor/state/marks.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadMarks = exports.persistMarks = void 0;
-const localStorageKey = (comp, durationInFrames) => `remotion.editor.marks.${comp}.${durationInFrames}`;
-const persistMarks = (comp, durationInFrames, marks) => {
-    localStorage.setItem(localStorageKey(comp, durationInFrames), JSON.stringify(marks));
+const localStorageKey = () => `remotion.editor.marksv2`;
+const persistMarks = (marks) => {
+    localStorage.setItem(localStorageKey(), JSON.stringify(marks));
 };
 exports.persistMarks = persistMarks;
-const loadMarks = (comp, durationInFrames) => {
-    const item = localStorage.getItem(localStorageKey(comp, durationInFrames));
+const loadMarks = () => {
+    const item = localStorage.getItem(localStorageKey());
     if (item === null) {
-        return [null, null];
+        return {};
     }
     return JSON.parse(item);
 };

package/dist/get-composition-id.d.ts

@@ -1,9 +1,9 @@
-import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, RemotionServer } from '@remotion/renderer';
-import type { AnyCompMetadata } from 'remotion';
-export declare const getCompositionId: ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, verbose, indent, server, }: {
+import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, LogLevel, RemotionServer } from '@remotion/renderer';
+import type { VideoConfig } from 'remotion';
+export declare const getCompositionId: ({ args, compositionIdFromUi, serializedInputPropsWithCustomSchema, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, }: {
     args: string[];
     compositionIdFromUi: string | null;
-    inputProps: Record<string, unknown>;
+    serializedInputPropsWithCustomSchema: string;
     puppeteerInstance: HeadlessBrowser | undefined;
     envVariables: Record<string, string>;
     timeoutInMilliseconds: number;
@@ -11,12 +11,12 @@ export declare const getCompositionId: ({ args, compositionIdFromUi, inputProps,
     port: number | null;
     browserExecutable: BrowserExecutable;
     serveUrlOrWebpackUrl: string;
-    verbose: boolean;
+    logLevel: LogLevel;
     indent: boolean;
     server: RemotionServer;
 }) => Promise<{
     compositionId: string;
     reason: string;
-    config: AnyCompMetadata;
+    config: VideoConfig;
     argsAfterComposition: string[];
 }>;

package/dist/get-composition-id.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositionId = void 0;
 const renderer_1 = require("@remotion/renderer");
+const format_bytes_1 = require("./format-bytes");
 const log_1 = require("./log");
 const show_compositions_picker_1 = require("./show-compositions-picker");
 const getCompName = ({ cliArgs, compositionIdFromUi, }) => {
@@ -15,15 +16,15 @@ const getCompName = ({ cliArgs, compositionIdFromUi, }) => {
     const [compName, ...remainingArgs] = cliArgs;
     return { compName, remainingArgs, reason: 'Passed as argument' };
 };
-const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, verbose, indent, server, }) => {
+const getCompositionId = async ({ args, compositionIdFromUi, serializedInputPropsWithCustomSchema, puppeteerInstance, envVariables, timeoutInMilliseconds, chromiumOptions, port, browserExecutable, serveUrlOrWebpackUrl, logLevel, indent, server, }) => {
     const { compName, remainingArgs, reason: compReason, } = getCompName({
         cliArgs: args,
         compositionIdFromUi,
     });
     if (compName) {
-        const config = await renderer_1.RenderInternals.internalSelectComposition({
+        const { metadata: config, propsSize } = await renderer_1.RenderInternals.internalSelectComposition({
             id: compName,
-            inputProps,
+            serializedInputPropsWithCustomSchema,
             puppeteerInstance,
             envVariables,
             timeoutInMilliseconds,
@@ -31,11 +32,17 @@ const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppete
             browserExecutable,
             chromiumOptions,
             port,
-            verbose,
+            logLevel,
             server,
             indent,
             onBrowserLog: null,
         });
+        if (propsSize > 10000000) {
+            log_1.Log.warnAdvanced({
+                indent,
+                logLevel,
+            }, `The props of your composition are large (${(0, format_bytes_1.formatBytes)(propsSize)}). This may cause slowdown.`);
+        }
         if (!config) {
             throw new Error(`Cannot find composition with ID "${compName}"`);
         }
@@ -48,18 +55,18 @@ const getCompositionId = async ({ args, compositionIdFromUi, inputProps, puppete
     }
     if (!process.env.CI) {
         const comps = await renderer_1.RenderInternals.internalGetCompositions({
-            inputProps,
             puppeteerInstance,
             envVariables,
             timeoutInMilliseconds,
             chromiumOptions,
             port,
             browserExecutable,
-            verbose,
+            logLevel,
             indent,
             server,
             serveUrlOrWebpackUrl,
             onBrowserLog: null,
+            serializedInputPropsWithCustomSchema,
         });
         const { compositionId, reason } = await (0, show_compositions_picker_1.showSingleCompositionsPicker)(comps);
         if (compositionId && typeof compositionId === 'string') {

package/dist/get-composition-with-dimension-override.d.ts

@@ -1,6 +1,6 @@
-import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, RemotionServer } from '@remotion/renderer';
-import type { AnyCompMetadata } from 'remotion';
-export declare const getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, verbose, server, }: {
+import type { BrowserExecutable, ChromiumOptions, HeadlessBrowser, LogLevel, RemotionServer } from '@remotion/renderer';
+import type { VideoConfig } from 'remotion';
+export declare const getCompositionWithDimensionOverride: ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, serializedInputPropsWithCustomSchema, logLevel, server, }: {
     height: number | null;
     width: number | null;
     args: string[];
@@ -13,12 +13,12 @@ export declare const getCompositionWithDimensionOverride: ({ height, width, args
     browserExecutable: BrowserExecutable | null;
     serveUrlOrWebpackUrl: string;
     indent: boolean;
-    verbose: boolean;
-    inputProps: Record<string, unknown>;
+    logLevel: LogLevel;
+    serializedInputPropsWithCustomSchema: string;
     server: RemotionServer;
 }) => Promise<{
     compositionId: string;
     reason: string;
-    config: AnyCompMetadata;
+    config: VideoConfig;
     argsAfterComposition: string[];
 }>;

package/dist/get-composition-with-dimension-override.js

@@ -2,17 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositionWithDimensionOverride = void 0;
 const get_composition_id_1 = require("./get-composition-id");
-const getCompositionWithDimensionOverride = async ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, inputProps, verbose, server, }) => {
+const getCompositionWithDimensionOverride = async ({ height, width, args, compositionIdFromUi, chromiumOptions, envVariables, port, puppeteerInstance, timeoutInMilliseconds, browserExecutable, serveUrlOrWebpackUrl, indent, serializedInputPropsWithCustomSchema, logLevel, server, }) => {
     const returnValue = await (0, get_composition_id_1.getCompositionId)({
         args,
         compositionIdFromUi,
         indent,
         serveUrlOrWebpackUrl,
-        verbose,
+        logLevel,
         browserExecutable,
         chromiumOptions,
         envVariables,
-        inputProps,
+        serializedInputPropsWithCustomSchema,
         port,
         puppeteerInstance,
         timeoutInMilliseconds,

package/dist/handle-common-errors.js

@@ -48,5 +48,13 @@ const handleCommonError = async (err, logLevel) => {
         log_1.Log.info('   Oftentimes, this happens if the component is missing the `export` keyword');
         log_1.Log.info('   or if the component was renamed and the import statement not properly adjusted.');
     }
+    if (err.message.includes('GLIBC_')) {
+        log_1.Log.info('💡 Remotion requires at least Libc 2.35.');
+        log_1.Log.info('💡 Get help for this issue: https://github.com/remotion-dev/remotion/issues/2439');
+    }
+    if (err.message.includes('EBADF')) {
+        log_1.Log.info('💡 This error might be fixed by changing your Node version:');
+        log_1.Log.info('   https://github.com/remotion-dev/remotion/issues/2452');
+    }
 };
 exports.handleCommonError = handleCommonError;