@remotion/cli 4.0.0-alpha4 → 4.0.0-alpha5

package/dist/editor/state/sidebar.js

@@ -1,11 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarContextProvider = exports.SidebarContext = exports.getSavedCollapsedState = void 0;
+exports.SidebarContextProvider = exports.SidebarContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const storageKey = 'remotion.sidebarCollapsing';
-const getSavedCollapsedState = () => {
-    const state = window.localStorage.getItem(storageKey);
+const storageKey = (sidebar) => {
+    if (sidebar === 'right') {
+        return 'remotion.sidebarRightCollapsing';
+    }
+    return 'remotion.sidebarCollapsing';
+};
+const getSavedCollapsedStateLeft = () => {
+    const state = window.localStorage.getItem(storageKey('left'));
     if (state === 'collapsed') {
         return 'collapsed';
     }
@@ -14,25 +19,49 @@ const getSavedCollapsedState = () => {
     }
     return 'responsive';
 };
-exports.getSavedCollapsedState = getSavedCollapsedState;
-const setSavedCollapsedState = (type) => {
-    window.localStorage.setItem(storageKey, type);
+const getSavedCollapsedStateRight = () => {
+    const state = window.localStorage.getItem(storageKey('right'));
+    if (state === 'expanded') {
+        return 'expanded';
+    }
+    return 'collapsed';
+};
+const saveCollapsedState = (type, sidebar) => {
+    window.localStorage.setItem(storageKey(sidebar), type);
 };
 exports.SidebarContext = (0, react_1.createContext)({
-    sidebarCollapsedState: 'collapsed',
+    sidebarCollapsedStateLeft: 'collapsed',
     setSidebarCollapsedState: () => {
         throw new Error('sidebar collapsed state');
     },
+    sidebarCollapsedStateRight: 'collapsed',
 });
 const SidebarContextProvider = ({ children }) => {
-    const [sidebarCollapsedState, setSidebarCollapsedState] = (0, react_1.useState)(() => (0, exports.getSavedCollapsedState)());
+    const [sidebarCollapsedState, setSidebarCollapsedState] = (0, react_1.useState)(() => ({
+        left: getSavedCollapsedStateLeft(),
+        right: getSavedCollapsedStateRight(),
+    }));
     const value = (0, react_1.useMemo)(() => {
         return {
-            setSidebarCollapsedState: (state) => {
-                setSidebarCollapsedState(state);
-                setSavedCollapsedState(state);
+            sidebarCollapsedStateLeft: sidebarCollapsedState.left,
+            sidebarCollapsedStateRight: sidebarCollapsedState.right,
+            setSidebarCollapsedState: (options) => {
+                const { left, right } = options;
+                setSidebarCollapsedState((f) => {
+                    const copied = { ...f };
+                    if (left) {
+                        const updatedLeft = typeof left === 'function' ? left(f.left) : left;
+                        saveCollapsedState(updatedLeft, 'left');
+                        copied.left = updatedLeft;
+                    }
+                    if (right) {
+                        const updatedRight = typeof right === 'function' ? right(f.right) : right;
+                        saveCollapsedState(updatedRight, 'right');
+                        copied.right = updatedRight;
+                    }
+                    return copied;
+                });
             },
-            sidebarCollapsedState,
         };
     }, [sidebarCollapsedState]);
     return ((0, jsx_runtime_1.jsx)(exports.SidebarContext.Provider, { value: value, children: children }));

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-export declare type TimelineRef = {
+declare type TimelineRef = {
     collapseAll: () => void;
     expandAll: () => void;
 };
 export declare const timelineRef: import("react").RefObject<TimelineRef>;
+export {};

package/dist/editor/state/z-index.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-declare type ZIndex = {
-    currentIndex: number;
-};
-export declare const ZIndexContext: React.Context<ZIndex>;
 export declare const HigherZIndex: React.FC<{
     onEscape: () => void;
     onOutsideClick: () => void;
@@ -14,4 +10,3 @@ export declare const useZIndex: () => {
     isHighestContext: boolean;
     tabIndex: number;
 };
-export {};

package/dist/editor/state/z-index.js

@@ -1,14 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useZIndex = exports.HigherZIndex = exports.ZIndexContext = void 0;
+exports.useZIndex = exports.HigherZIndex = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const highest_z_index_1 = require("./highest-z-index");
 const input_dragger_click_lock_1 = require("./input-dragger-click-lock");
-exports.ZIndexContext = (0, react_1.createContext)({
+const ZIndexContext = (0, react_1.createContext)({
     currentIndex: 0,
 });
+const margin = {
+    margin: 'auto',
+};
 const EscapeHook = ({ onEscape }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
@@ -18,6 +21,8 @@ const EscapeHook = ({ onEscape }) => {
             callback: onEscape,
             commandCtrlKey: false,
             preventDefault: true,
+            // To dismiss the Quick Switcher menu if input is focused
+            triggerIfInputFieldFocused: true,
         });
         return () => {
             escape.unregister();
@@ -26,7 +31,7 @@ const EscapeHook = ({ onEscape }) => {
     return null;
 };
 const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
-    const context = (0, react_1.useContext)(exports.ZIndexContext);
+    const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
     const containerRef = (0, react_1.useRef)(null);
     const currentIndex = context.currentIndex + 1;
@@ -54,8 +59,13 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
             };
             window.addEventListener('pointerup', onUp, { once: true });
         };
-        window.addEventListener('pointerdown', listener);
+        // If a menu is opened, then this component will also still receive the pointerdown event.
+        // However we may not interpret it as a outside click, so we need to wait for the next tick
+        requestAnimationFrame(() => {
+            window.addEventListener('pointerdown', listener);
+        });
         return () => {
+            onUp = null;
             if (onUp) {
                 // @ts-expect-error
                 window.removeEventListener('pointerup', onUp, { once: true });
@@ -68,11 +78,11 @@ const HigherZIndex = ({ children, onEscape, onOutsideClick }) => {
             currentIndex,
         };
     }, [currentIndex]);
-    return ((0, jsx_runtime_1.jsxs)(exports.ZIndexContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(ZIndexContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(EscapeHook, { onEscape: onEscape }), (0, jsx_runtime_1.jsx)("div", { ref: containerRef, style: margin, children: children })] }));
 };
 exports.HigherZIndex = HigherZIndex;
 const useZIndex = () => {
-    const context = (0, react_1.useContext)(exports.ZIndexContext);
+    const context = (0, react_1.useContext)(ZIndexContext);
     const highestContext = (0, react_1.useContext)(highest_z_index_1.HighestZIndexContext);
     const isHighestContext = highestContext.highestIndex === context.currentIndex;
     return (0, react_1.useMemo)(() => ({

package/dist/event-source-events.d.ts

@@ -1,12 +1,27 @@
 import type { StaticFile } from 'remotion';
+import type { RenderJob } from './preview-server/render-queue/job';
 export declare type EventSourceEvent = {
     type: 'new-input-props';
     newProps: object;
 } | {
     type: 'init';
+    clientId: string;
 } | {
     type: 'new-env-variables';
     newEnvVariables: Record<string, string>;
+} | {
+    type: 'render-queue-updated';
+    queue: RenderJob[];
+} | {
+    type: 'render-job-failed';
+    compositionId: string;
+    error: Error;
+} | {
+    type: 'watched-file-undeleted';
+    file: string;
+} | {
+    type: 'watched-file-deleted';
+    file: string;
 } | {
     type: 'new-public-folder';
     files: StaticFile[];

package/dist/event-source.d.ts

@@ -1 +1,3 @@
+import type { EventSourceEvent } from './event-source-events';
+export declare const subscribeToEvent: (type: EventSourceEvent['type'], listener: (event: EventSourceEvent) => void) => () => void;
 export declare const openEventSource: () => void;

package/dist/event-source.js

@@ -1,27 +1,53 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.openEventSource = void 0;
-const ServerDisconnected_1 = require("./editor/components/Notifications/ServerDisconnected");
+exports.openEventSource = exports.subscribeToEvent = void 0;
+const NotificationCenter_1 = require("./editor/components/Notifications/NotificationCenter");
+const context_1 = require("./editor/components/RenderQueue/context");
+const client_id_1 = require("./editor/helpers/client-id");
 let source = null;
+let listeners = [];
+const subscribeToEvent = (type, listener) => {
+    listeners.push({ type, listener });
+    return () => {
+        listeners = listeners.filter((l) => l.type !== type || l.listener !== listener);
+    };
+};
+exports.subscribeToEvent = subscribeToEvent;
 const openEventSource = () => {
     source = new EventSource('/events');
     source.addEventListener('message', (event) => {
+        var _a, _b;
         const newEvent = JSON.parse(event.data);
         if (newEvent.type === 'new-input-props' ||
             newEvent.type === 'new-env-variables') {
             window.location.reload();
         }
+        if (newEvent.type === 'init') {
+            (_a = client_id_1.previewServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({
+                type: 'connected',
+                clientId: newEvent.clientId,
+            });
+        }
+        if (newEvent.type === 'render-queue-updated') {
+            (_b = context_1.renderJobsRef.current) === null || _b === void 0 ? void 0 : _b.updateRenderJobs(newEvent.queue);
+        }
+        if (newEvent.type === 'render-job-failed') {
+            (0, NotificationCenter_1.sendErrorNotification)(`Rendering "${newEvent.compositionId}" failed`);
+        }
         if (newEvent.type === 'new-public-folder') {
             window.remotion_staticFiles = newEvent.files;
         }
+        listeners.forEach((l) => {
+            if (l.type === newEvent.type) {
+                l.listener(newEvent);
+            }
+        });
     });
     source.addEventListener('open', () => {
-        var _a;
-        (_a = ServerDisconnected_1.serverDisconnectedRef.current) === null || _a === void 0 ? void 0 : _a.setServerConnected();
         source.addEventListener('error', () => {
             var _a;
+            (_a = client_id_1.previewServerConnectionRef.current) === null || _a === void 0 ? void 0 : _a.set({ type: 'disconnected' });
             // Display an error message that the preview server has disconnected.
-            (_a = ServerDisconnected_1.serverDisconnectedRef.current) === null || _a === void 0 ? void 0 : _a.setServerDisconnected();
             source === null || source === void 0 ? void 0 : source.close();
             // Retry later
             setTimeout(() => {

package/dist/ffmpeg.d.ts

@@ -0,0 +1,2 @@
+export declare const ffmpegCommand: (_root: string, args: string[]) => never;
+export declare const ffprobeCommand: (_root: string, args: string[]) => never;

package/dist/ffmpeg.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ffprobeCommand = exports.ffmpegCommand = void 0;
+const renderer_1 = require("@remotion/renderer");
+const child_process_1 = require("child_process");
+const ffmpegCommand = (_root, args) => {
+    const done = (0, child_process_1.spawnSync)(renderer_1.RenderInternals.getExecutablePath('ffmpeg'), args, {
+        ...renderer_1.RenderInternals.dynamicLibraryPathOptions(),
+        stdio: 'inherit',
+    });
+    process.exit(done.status);
+};
+exports.ffmpegCommand = ffmpegCommand;
+const ffprobeCommand = (_root, args) => {
+    const done = (0, child_process_1.spawnSync)(renderer_1.RenderInternals.getExecutablePath('ffprobe'), args, {
+        ...renderer_1.RenderInternals.dynamicLibraryPathOptions(),
+        stdio: 'inherit',
+    });
+    process.exit(done.status);
+};
+exports.ffprobeCommand = ffprobeCommand;

package/dist/file-watcher.d.ts

@@ -0,0 +1,9 @@
+declare type FileChangeType = 'created' | 'deleted' | 'changed';
+export declare const installFileWatcher: ({ file, onChange, }: {
+    file: string;
+    onChange: (type: FileChangeType) => void;
+}) => {
+    exists: boolean;
+    unwatch: () => void;
+};
+export {};

package/dist/file-watcher.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installFileWatcher = void 0;
+const fs_1 = __importDefault(require("fs"));
+const installFileWatcher = ({ file, onChange, }) => {
+    const existedAtBeginning = fs_1.default.existsSync(file);
+    let existedBefore = existedAtBeginning;
+    const listener = () => {
+        const existsNow = fs_1.default.existsSync(file);
+        if (!existedBefore && existsNow) {
+            onChange('created');
+            existedBefore = true;
+            return;
+        }
+        if (existedBefore && !existsNow) {
+            onChange('deleted');
+            existedBefore = false;
+            return;
+        }
+        if (existsNow) {
+            onChange('changed');
+        }
+    };
+    fs_1.default.watchFile(file, { interval: 100 }, listener);
+    return {
+        exists: existedAtBeginning,
+        unwatch: () => {
+            fs_1.default.unwatchFile(file, listener);
+        },
+    };
+};
+exports.installFileWatcher = installFileWatcher;

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

@@ -1,12 +1,4 @@
-import type { BrowserExecutable, ChromiumOptions, Codec, FrameRange } from '@remotion/renderer';
-export declare const validateFfmpegCanUseCodec: (codec: Codec, remotionRoot: string) => Promise<void>;
-export declare const getFinalCodec: (options: {
-    downloadName: string | null;
-    outName: string | null;
-}) => {
-    codec: Codec;
-    reason: string;
-};
+import type { BrowserExecutable, ChromiumOptions, FrameRange } from '@remotion/renderer';
 export declare const getAndValidateAbsoluteOutputFile: (relativeOutputLocation: string, overwrite: boolean) => string;
 export declare const getCliOptions: (options: {
     isLambda: boolean;
@@ -19,7 +11,7 @@ export declare const getCliOptions: (options: {
     shouldOutputImageSequence: boolean;
     inputProps: object;
     envVariables: Record<string, string>;
-    quality: number | undefined;
+    jpegQuality: number | undefined;
     browser: import("@remotion/renderer").Browser;
     crf: import("@remotion/renderer").Crf | null;
     pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
@@ -28,8 +20,6 @@ export declare const getCliOptions: (options: {
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
     browserExecutable: BrowserExecutable;
-    ffmpegExecutable: import("@remotion/renderer").FfmpegExecutable;
-    ffprobeExecutable: import("@remotion/renderer").FfmpegExecutable;
     logLevel: "verbose" | "info" | "warn" | "error";
     scale: number;
     chromiumOptions: ChromiumOptions;
@@ -43,4 +33,5 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
+    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
 }>;

package/dist/get-cli-options.js

@@ -3,16 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCliOptions = exports.getAndValidateAbsoluteOutputFile = exports.getFinalCodec = exports.validateFfmpegCanUseCodec = void 0;
+exports.getCliOptions = exports.getAndValidateAbsoluteOutputFile = void 0;
 const renderer_1 = require("@remotion/renderer");
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const config_1 = require("./config");
 const get_env_1 = require("./get-env");
-const get_final_output_codec_1 = require("./get-final-output-codec");
 const get_input_props_1 = require("./get-input-props");
 const log_1 = require("./log");
-const parse_command_line_1 = require("./parse-command-line");
 const getAndValidateFrameRange = () => {
     const frameRange = config_1.ConfigInternals.getRange();
     if (typeof frameRange === 'number') {
@@ -22,48 +20,6 @@ const getAndValidateFrameRange = () => {
     }
     return frameRange;
 };
-const validateFfmpegCanUseCodec = async (codec, remotionRoot) => {
-    const ffmpegExecutable = config_1.ConfigInternals.getCustomFfmpegExecutable();
-    if (codec === 'vp8' &&
-        !(await renderer_1.RenderInternals.ffmpegHasFeature({
-            feature: 'enable-libvpx',
-            ffmpegExecutable,
-            remotionRoot,
-        }))) {
-        log_1.Log.error("The Vp8 codec has been selected, but your FFMPEG binary wasn't compiled with the --enable-lipvpx flag.");
-        log_1.Log.error('This does not work, please switch out your FFMPEG binary or choose a different codec.');
-    }
-    if (codec === 'h265' &&
-        !(await renderer_1.RenderInternals.ffmpegHasFeature({
-            feature: 'enable-gpl',
-            ffmpegExecutable,
-            remotionRoot,
-        }))) {
-        log_1.Log.error("The H265 codec has been selected, but your FFMPEG binary wasn't compiled with the --enable-gpl flag.");
-        log_1.Log.error('This does not work, please recompile your FFMPEG binary with --enable-gpl --enable-libx265 or choose a different codec.');
-    }
-    if (codec === 'h265' &&
-        !(await renderer_1.RenderInternals.ffmpegHasFeature({
-            feature: 'enable-libx265',
-            ffmpegExecutable,
-            remotionRoot,
-        }))) {
-        log_1.Log.error("The H265 codec has been selected, but your FFMPEG binary wasn't compiled with the --enable-libx265 flag.");
-        log_1.Log.error('This does not work, please recompile your FFMPEG binary with --enable-gpl --enable-libx265 or choose a different codec.');
-    }
-};
-exports.validateFfmpegCanUseCodec = validateFfmpegCanUseCodec;
-const getFinalCodec = (options) => {
-    var _a;
-    const { codec, reason } = (0, get_final_output_codec_1.getFinalOutputCodec)({
-        cliFlag: parse_command_line_1.parsedCli.codec,
-        configFile: (_a = config_1.ConfigInternals.getOutputCodecOrUndefined()) !== null && _a !== void 0 ? _a : null,
-        downloadName: options.downloadName,
-        outName: options.outName,
-    });
-    return { codec, reason };
-};
-exports.getFinalCodec = getFinalCodec;
 const getBrowser = () => { var _a; return (_a = config_1.ConfigInternals.getBrowser()) !== null && _a !== void 0 ? _a : renderer_1.RenderInternals.DEFAULT_BROWSER; };
 const getAndValidateAbsoluteOutputFile = (relativeOutputLocation, overwrite) => {
     const absoluteOutputFile = path_1.default.resolve(process.cwd(), relativeOutputLocation);
@@ -74,12 +30,8 @@ const getAndValidateAbsoluteOutputFile = (relativeOutputLocation, overwrite) =>
     return absoluteOutputFile;
 };
 exports.getAndValidateAbsoluteOutputFile = getAndValidateAbsoluteOutputFile;
-const getAndValidateShouldOutputImageSequence = async ({ frameRange, isLambda, remotionRoot, }) => {
+const getAndValidateShouldOutputImageSequence = ({ frameRange, }) => {
     const shouldOutputImageSequence = config_1.ConfigInternals.getShouldOutputImageSequence(frameRange);
-    // When parsing options locally, we don't need FFMPEG because the render will happen on Lambda
-    if (!shouldOutputImageSequence && !isLambda) {
-        await renderer_1.RenderInternals.validateFfmpeg(config_1.ConfigInternals.getCustomFfmpegExecutable(), remotionRoot, 'ffmpeg');
-    }
     return shouldOutputImageSequence;
 };
 const getCrf = (shouldOutputImageSequence) => {
@@ -109,10 +61,8 @@ const getCliOptions = async (options) => {
     const frameRange = getAndValidateFrameRange();
     const shouldOutputImageSequence = options.type === 'still'
         ? true
-        : await getAndValidateShouldOutputImageSequence({
+        : getAndValidateShouldOutputImageSequence({
             frameRange,
-            isLambda: options.isLambda,
-            remotionRoot: options.remotionRoot,
         });
     const overwrite = config_1.ConfigInternals.getShouldOverwrite({
         defaultValue: !options.isLambda,
@@ -122,8 +72,6 @@ const getCliOptions = async (options) => {
     const pixelFormat = config_1.ConfigInternals.getPixelFormat();
     const proResProfile = getProResProfile();
     const browserExecutable = config_1.ConfigInternals.getBrowserExecutable();
-    const ffmpegExecutable = config_1.ConfigInternals.getCustomFfmpegExecutable();
-    const ffprobeExecutable = config_1.ConfigInternals.getCustomFfprobeExecutable();
     const scale = config_1.ConfigInternals.getScale();
     const port = config_1.ConfigInternals.getServerPort();
     const chromiumOptions = {
@@ -144,9 +92,9 @@ const getCliOptions = async (options) => {
         concurrency,
         frameRange,
         shouldOutputImageSequence,
-        inputProps: (0, get_input_props_1.getInputProps)(() => undefined),
-        envVariables: await (0, get_env_1.getEnvironmentVariables)(() => undefined),
-        quality: config_1.ConfigInternals.getQuality(),
+        inputProps: (0, get_input_props_1.getInputProps)(null),
+        envVariables: await (0, get_env_1.getEnvironmentVariables)(null),
+        jpegQuality: config_1.ConfigInternals.getJpegQuality(),
         browser: await getAndValidateBrowser(browserExecutable),
         crf,
         pixelFormat,
@@ -155,8 +103,6 @@ const getCliOptions = async (options) => {
         numberOfGifLoops,
         stillFrame: config_1.ConfigInternals.getStillFrame(),
         browserExecutable,
-        ffmpegExecutable,
-        ffprobeExecutable,
         logLevel: config_1.ConfigInternals.Logging.getLogLevel(),
         scale,
         chromiumOptions,
@@ -170,6 +116,7 @@ const getCliOptions = async (options) => {
         videoBitrate,
         height,
         width,
+        configFileImageFormat: config_1.ConfigInternals.getUserPreferredVideoImageFormat(),
     };
 };
 exports.getCliOptions = getCliOptions;

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

@@ -1,7 +1,11 @@
-import type { TCompMetadata } from 'remotion';
-export declare const getCompositionId: (validCompositions: TCompMetadata[], args: string[]) => Promise<{
+import type { AnyCompMetadata } from 'remotion';
+export declare const getCompositionId: ({ validCompositions, args, compositionIdFromUi, }: {
+    validCompositions: AnyCompMetadata[];
+    args: string[];
+    compositionIdFromUi: string | null;
+}) => Promise<{
     compositionId: string;
     reason: string;
-    config: TCompMetadata;
+    config: AnyCompMetadata;
     argsAfterComposition: string[];
 }>;

package/dist/get-composition-id.js

@@ -3,8 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositionId = void 0;
 const log_1 = require("./log");
 const select_composition_1 = require("./select-composition");
-const getCompositionId = async (validCompositions, args) => {
-    const [compName, ...remainingArgs] = args;
+const getCompName = ({ cliArgs, compositionIdFromUi, }) => {
+    if (compositionIdFromUi) {
+        return {
+            compName: compositionIdFromUi,
+            remainingArgs: [],
+            reason: 'via UI',
+        };
+    }
+    const [compName, ...remainingArgs] = cliArgs;
+    return { compName, remainingArgs, reason: 'Passed as argument' };
+};
+const getCompositionId = async ({ validCompositions, args, compositionIdFromUi, }) => {
+    const { compName, remainingArgs, reason: compReason, } = getCompName({
+        cliArgs: args,
+        compositionIdFromUi,
+    });
     if (compName) {
         const config = validCompositions.find((c) => c.id === compName);
         if (!config) {
@@ -14,7 +28,7 @@ const getCompositionId = async (validCompositions, args) => {
         }
         return {
             compositionId: compName,
-            reason: 'Passed as argument',
+            reason: compReason,
             config,
             argsAfterComposition: remainingArgs,
         };

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

@@ -1,12 +1,13 @@
-import type { TCompMetadata } from 'remotion';
-export declare const getCompositionWithDimensionOverride: ({ validCompositions, height, width, args, }: {
-    validCompositions: TCompMetadata[];
+import type { AnyCompMetadata } from 'remotion';
+export declare const getCompositionWithDimensionOverride: ({ validCompositions, height, width, args, compositionIdFromUi, }: {
+    validCompositions: AnyCompMetadata[];
     height: number | null;
     width: number | null;
     args: string[];
+    compositionIdFromUi: string | null;
 }) => Promise<{
     compositionId: string;
     reason: string;
-    config: TCompMetadata;
+    config: AnyCompMetadata;
     argsAfterComposition: string[];
 }>;

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

@@ -2,8 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCompositionWithDimensionOverride = void 0;
 const get_composition_id_1 = require("./get-composition-id");
-const getCompositionWithDimensionOverride = async ({ validCompositions, height, width, args, }) => {
-    const returnValue = await (0, get_composition_id_1.getCompositionId)(validCompositions, args);
+const getCompositionWithDimensionOverride = async ({ validCompositions, height, width, args, compositionIdFromUi, }) => {
+    const returnValue = await (0, get_composition_id_1.getCompositionId)({
+        validCompositions,
+        args,
+        compositionIdFromUi,
+    });
     return {
         ...returnValue,
         config: {

package/dist/get-config-file-name.d.ts

@@ -1,3 +1 @@
-export declare const defaultConfigFileJavascript = "remotion.config.js";
-export declare const defaultConfigFileTypescript = "remotion.config.ts";
 export declare const loadConfig: (remotionRoot: string) => Promise<string | null>;

package/dist/get-config-file-name.js

@@ -3,14 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadConfig = exports.defaultConfigFileTypescript = exports.defaultConfigFileJavascript = void 0;
+exports.loadConfig = void 0;
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const load_config_1 = require("./load-config");
 const log_1 = require("./log");
 const parse_command_line_1 = require("./parse-command-line");
-exports.defaultConfigFileJavascript = 'remotion.config.js';
-exports.defaultConfigFileTypescript = 'remotion.config.ts';
+const defaultConfigFileJavascript = 'remotion.config.js';
+const defaultConfigFileTypescript = 'remotion.config.ts';
 const loadConfig = (remotionRoot) => {
     if (parse_command_line_1.parsedCli.config) {
         const fullPath = path_1.default.resolve(process.cwd(), parse_command_line_1.parsedCli.config);
@@ -23,11 +23,11 @@ const loadConfig = (remotionRoot) => {
     if (remotionRoot === null) {
         return Promise.resolve(null);
     }
-    if ((0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, exports.defaultConfigFileTypescript))) {
-        return (0, load_config_1.loadConfigFile)(remotionRoot, exports.defaultConfigFileTypescript, false);
+    if ((0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, defaultConfigFileTypescript))) {
+        return (0, load_config_1.loadConfigFile)(remotionRoot, defaultConfigFileTypescript, false);
     }
-    if ((0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, exports.defaultConfigFileJavascript))) {
-        return (0, load_config_1.loadConfigFile)(remotionRoot, exports.defaultConfigFileJavascript, true);
+    if ((0, fs_1.existsSync)(path_1.default.resolve(remotionRoot, defaultConfigFileJavascript))) {
+        return (0, load_config_1.loadConfigFile)(remotionRoot, defaultConfigFileJavascript, true);
     }
     return Promise.resolve(null);
 };

package/dist/get-default-out-name.d.ts

@@ -0,0 +1,5 @@
+export declare const getDefaultOutLocation: ({ compositionName, defaultExtension, type, }: {
+    compositionName: string;
+    defaultExtension: string;
+    type: 'asset' | 'sequence';
+}) => string;

package/dist/get-default-out-name.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultOutLocation = void 0;
+const getDefaultOutLocation = ({ compositionName, defaultExtension, type, }) => {
+    if (type === 'sequence') {
+        return `out/${compositionName}`;
+    }
+    return `out/${compositionName}.${defaultExtension}`;
+};
+exports.getDefaultOutLocation = getDefaultOutLocation;

package/dist/get-env.d.ts

@@ -1 +1 @@
-export declare const getEnvironmentVariables: (onUpdate: (newProps: Record<string, string>) => void) => Promise<Record<string, string>>;
+export declare const getEnvironmentVariables: (onUpdate: ((newProps: Record<string, string>) => void) | null) => Promise<Record<string, string>>;