@remotion/cli 4.0.0-alpha6 → 4.0.0-alpha8

package/dist/benchmark.js

@@ -16,6 +16,7 @@ const parse_command_line_1 = require("./parse-command-line");
 const progress_bar_1 = require("./progress-bar");
 const select_composition_1 = require("./select-composition");
 const setup_cache_1 = require("./setup-cache");
+const should_use_non_overlaying_logger_1 = require("./should-use-non-overlaying-logger");
 const truthy_1 = require("./truthy");
 const DEFAULT_RUNS = 3;
 const getValidConcurrency = (cliConcurrency) => {
@@ -104,6 +105,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
         shouldDumpIo: renderer_1.RenderInternals.isEqualOrBelowLogLevel(config_1.ConfigInternals.Logging.getLogLevel(), 'verbose'),
         chromiumOptions,
         forceDeviceScaleFactor: scale,
+        indent: false,
     });
     const { urlOrBundle: bundleLocation, cleanup: cleanupBundle } = await (0, setup_cache_1.bundleOnCliOrTakeServeUrl)({
         fullPath: fullEntryPoint,
@@ -117,6 +119,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
         onDirectoryCreated: (dir) => {
             (0, cleanup_before_quit_1.registerCleanupJob)(() => renderer_1.RenderInternals.deleteDirectory(dir));
         },
+        quietProgress: false,
     });
     (0, cleanup_before_quit_1.registerCleanupJob)(() => cleanupBundle());
     const puppeteerInstance = await browserInstance;
@@ -154,7 +157,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
         uiCodec: null,
     });
     for (const composition of compositions) {
-        const { proResProfile, frameRange: defaultFrameRange, overwrite, jpegQuality, crf: configFileCrf, pixelFormat, scale: configFileScale, numberOfGifLoops, everyNthFrame, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, height, width, concurrency: unparsedConcurrency, } = await (0, get_cli_options_1.getCliOptions)({
+        const { proResProfile, frameRange: defaultFrameRange, overwrite, jpegQuality, crf: configFileCrf, pixelFormat, scale: configFileScale, numberOfGifLoops, everyNthFrame, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, height, width, concurrency: unparsedConcurrency, logLevel, } = await (0, get_cli_options_1.getCliOptions)({
             isLambda: false,
             type: 'series',
             remotionRoot,
@@ -165,6 +168,8 @@ const benchmarkCommand = async (remotionRoot, args) => {
             const benchmarkProgress = (0, progress_bar_1.createOverwriteableCliOutput)({
                 quiet: (0, parse_command_line_1.quietFlagProvided)(),
                 cancelSignal: null,
+                updatesDontOverwrite: (0, should_use_non_overlaying_logger_1.shouldUseNonOverlayingLogger)({ logLevel }),
+                indent: false,
             });
             log_1.Log.info();
             log_1.Log.info(`${chalk_1.chalk.bold(`Benchmark #${count++}:`)} ${chalk_1.chalk.gray(`composition=${composition.id} concurrency=${con} codec=${codec} (${codecReason})`)}`);
@@ -211,10 +216,10 @@ const benchmarkCommand = async (remotionRoot, args) => {
                     run,
                     doneIn: null,
                     progress,
-                }));
+                }), false);
             });
-            benchmarkProgress.update('');
-            benchmarkProgress.update(getResults(timeTaken, runs));
+            benchmarkProgress.update('', false);
+            benchmarkProgress.update(getResults(timeTaken, runs), false);
             benchmark[composition.id][`${con}`] = timeTaken;
         }
     }

package/dist/chalk/index.d.ts

@@ -1,58 +1,49 @@
-declare type Style = {
-    codes: [number, number];
-    name: string;
-    wrap?: (input: string, newline: boolean) => string;
-};
-declare type Method = (str: string) => string;
-declare type Colors = {
+export declare const chalk: {
     enabled: boolean;
     visible: boolean;
-    styles: Record<string, Style>;
+    styles: Record<string, {
+        codes: [number, number];
+        name: string;
+        wrap?: ((input: string, newline: boolean) => string) | undefined;
+    }>;
     keys: Record<string, string[]>;
-    alias?: (name: string, col: string) => void;
-};
-declare type ColorsWithMethods = Colors & {
-    reset: Method;
-    bold: Method;
-    dim: Method;
-    italic: Method;
-    underline: Method;
-    inverse: Method;
-    hidden: Method;
-    strikethrough: Method;
-    black: Method;
-    red: Method;
-    green: Method;
-    yellow: Method;
-    blue: Method;
-    magenta: Method;
-    cyan: Method;
-    white: Method;
-    gray: Method;
-    bgBlack: Method;
-    bgRed: Method;
-    bgGreen: Method;
-    bgYellow: Method;
-    bgBlue: Method;
-    bgMagenta: Method;
-    bgCyan: Method;
-    bgWhite: Method;
-    blackBright: Method;
-    redBright: Method;
-    greenBright: Method;
-    yellowBright: Method;
-    blueBright: Method;
-    magentaBright: Method;
-    cyanBright: Method;
-    whiteBright: Method;
-    bgBlackBright: Method;
-    bgRedBright: Method;
-    bgGreenBright: Method;
-    bgYellowBright: Method;
-    bgBlueBright: Method;
-    bgMagentaBright: Method;
-    bgCyanBright: Method;
-    bgWhiteBright: Method;
+    alias?: ((name: string, col: string) => void) | undefined;
+} & {
+    reset: (str: string) => string;
+    bold: (str: string) => string;
+    dim: (str: string) => string;
+    italic: (str: string) => string;
+    underline: (str: string) => string;
+    inverse: (str: string) => string;
+    hidden: (str: string) => string;
+    strikethrough: (str: string) => string;
+    black: (str: string) => string;
+    red: (str: string) => string;
+    green: (str: string) => string;
+    yellow: (str: string) => string;
+    blue: (str: string) => string;
+    magenta: (str: string) => string;
+    white: (str: string) => string;
+    gray: (str: string) => string;
+    bgBlack: (str: string) => string;
+    bgRed: (str: string) => string;
+    bgGreen: (str: string) => string;
+    bgYellow: (str: string) => string;
+    bgBlue: (str: string) => string;
+    bgMagenta: (str: string) => string;
+    bgWhite: (str: string) => string;
+    blackBright: (str: string) => string;
+    redBright: (str: string) => string;
+    greenBright: (str: string) => string;
+    yellowBright: (str: string) => string;
+    blueBright: (str: string) => string;
+    magentaBright: (str: string) => string;
+    whiteBright: (str: string) => string;
+    bgBlackBright: (str: string) => string;
+    bgRedBright: (str: string) => string;
+    bgGreenBright: (str: string) => string;
+    bgYellowBright: (str: string) => string;
+    bgBlueBright: (str: string) => string;
+    bgMagentaBright: (str: string) => string;
+    bgWhiteBright: (str: string) => string;
 };
-export declare const chalk: ColorsWithMethods;
-export {};

package/dist/chalk/index.js

@@ -1,138 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.chalk = void 0;
-const hasColor = () => {
-    if (typeof process !== 'undefined') {
-        return process.env.FORCE_COLOR !== '0';
-    }
-    return false;
-};
-exports.chalk = (() => {
-    const colors = {
-        enabled: hasColor(),
-        visible: true,
-        styles: {},
-        keys: {},
-    };
-    const ansi = (st) => {
-        const open = `\u001b[${st.codes[0]}m`;
-        const close = `\u001b[${st.codes[1]}m`;
-        const regex = new RegExp(`\\u001b\\[${st.codes[1]}m`, 'g');
-        st.wrap = (input, newline) => {
-            if (input.includes(close))
-                input = input.replace(regex, close + open);
-            const output = open + input + close;
-            // see https://github.com/chalk/chalk/pull/92, thanks to the
-            // chalk contributors for this fix. However, we've confirmed that
-            // this issue is also present in Windows terminals
-            return newline ? output.replace(/\r*\n/g, `${close}$&${open}`) : output;
-        };
-        return st;
-    };
-    const wrap = (sty, input, newline) => {
-        var _a;
-        return (_a = sty.wrap) === null || _a === void 0 ? void 0 : _a.call(sty, input, newline);
-    };
-    const style = (input, stack) => {
-        if (input === '' || input === null || input === undefined)
-            return '';
-        if (colors.enabled === false)
-            return input;
-        if (colors.visible === false)
-            return '';
-        let str = String(input);
-        const nl = str.includes('\n');
-        let n = stack.length;
-        while (n-- > 0)
-            str = wrap(colors.styles[stack[n]], str, nl);
-        return str;
-    };
-    const define = (name, codes, type) => {
-        colors.styles[name] = ansi({ name, codes });
-        const keys = colors.keys[type] || (colors.keys[type] = []);
-        keys.push(name);
-        Reflect.defineProperty(colors, name, {
-            configurable: true,
-            enumerable: true,
-            set(value) {
-                var _a;
-                (_a = colors.alias) === null || _a === void 0 ? void 0 : _a.call(colors, name, value);
-            },
-            get() {
-                const color = (input) => style(input, color.stack);
-                Reflect.setPrototypeOf(color, colors);
-                color.stack = this.stack ? this.stack.concat(name) : [name];
-                return color;
-            },
-        });
-    };
-    define('reset', [0, 0], 'modifier');
-    define('bold', [1, 22], 'modifier');
-    define('dim', [2, 22], 'modifier');
-    define('italic', [3, 23], 'modifier');
-    define('underline', [4, 24], 'modifier');
-    define('inverse', [7, 27], 'modifier');
-    define('hidden', [8, 28], 'modifier');
-    define('strikethrough', [9, 29], 'modifier');
-    define('black', [30, 39], 'color');
-    define('red', [31, 39], 'color');
-    define('green', [32, 39], 'color');
-    define('yellow', [33, 39], 'color');
-    define('blue', [34, 39], 'color');
-    define('magenta', [35, 39], 'color');
-    define('cyan', [36, 39], 'color');
-    define('white', [37, 39], 'color');
-    define('gray', [90, 39], 'color');
-    define('grey', [90, 39], 'color');
-    define('bgBlack', [40, 49], 'bg');
-    define('bgRed', [41, 49], 'bg');
-    define('bgGreen', [42, 49], 'bg');
-    define('bgYellow', [43, 49], 'bg');
-    define('bgBlue', [44, 49], 'bg');
-    define('bgMagenta', [45, 49], 'bg');
-    define('bgCyan', [46, 49], 'bg');
-    define('bgWhite', [47, 49], 'bg');
-    define('blackBright', [90, 39], 'bright');
-    define('redBright', [91, 39], 'bright');
-    define('greenBright', [92, 39], 'bright');
-    define('yellowBright', [93, 39], 'bright');
-    define('blueBright', [94, 39], 'bright');
-    define('magentaBright', [95, 39], 'bright');
-    define('cyanBright', [96, 39], 'bright');
-    define('whiteBright', [97, 39], 'bright');
-    define('bgBlackBright', [100, 49], 'bgBright');
-    define('bgRedBright', [101, 49], 'bgBright');
-    define('bgGreenBright', [102, 49], 'bgBright');
-    define('bgYellowBright', [103, 49], 'bgBright');
-    define('bgBlueBright', [104, 49], 'bgBright');
-    define('bgMagentaBright', [105, 49], 'bgBright');
-    define('bgCyanBright', [106, 49], 'bgBright');
-    define('bgWhiteBright', [107, 49], 'bgBright');
-    colors.alias = (name, color) => {
-        // @ts-expect-error
-        const fn = colors[color];
-        if (typeof fn !== 'function') {
-            throw new TypeError('Expected alias to be the name of an existing color (string) or a function');
-        }
-        if (!fn.stack) {
-            Reflect.defineProperty(fn, 'name', { value: name });
-            colors.styles[name] = fn;
-            fn.stack = [name];
-        }
-        Reflect.defineProperty(colors, name, {
-            configurable: true,
-            enumerable: true,
-            set(value) {
-                var _a;
-                (_a = colors.alias) === null || _a === void 0 ? void 0 : _a.call(colors, name, value);
-            },
-            get() {
-                const col = (input) => style(input, col.stack);
-                Reflect.setPrototypeOf(col, colors);
-                col.stack = this.stack ? this.stack.concat(fn.stack) : fn.stack;
-                return col;
-            },
-        });
-    };
-    return colors;
-})();
+const renderer_1 = require("@remotion/renderer");
+exports.chalk = renderer_1.RenderInternals.chalk;

package/dist/codemods/stringify-with-path.d.ts

@@ -0,0 +1,5 @@
+import type { EnumPath } from '../editor/components/RenderModal/SchemaEditor/extract-enum-json-paths';
+export declare const stringifyDefaultProps: ({ props, enumPaths, }: {
+    props: unknown;
+    enumPaths: EnumPath[];
+}) => string;

package/dist/codemods/stringify-with-path.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringifyDefaultProps = void 0;
+const input_props_serialization_1 = require("../editor/components/RenderModal/SchemaEditor/input-props-serialization");
+const doesMatchPath = (path1, enumPaths) => {
+    return enumPaths.some((p) => path1.every((item, index) => {
+        if (p[index] === '[]' && !Number.isNaN(Number(item))) {
+            return true;
+        }
+        if (p[index] === '{}' && typeof item === 'string') {
+            return true;
+        }
+        return item === p[index];
+    }));
+};
+const stringifyDefaultProps = ({ props, enumPaths, }) => JSON.stringify(props, replacerWithPath(function (key, value, path) {
+    /* Don't replace with arrow function */ const item = this[key];
+    if (item instanceof Date) {
+        return `__REMOVEQUOTE__new Date('${item.toISOString()}')__REMOVEQUOTE__`;
+    }
+    if (typeof item === 'string' && doesMatchPath(path, enumPaths)) {
+        return `${item}__ADD_AS_CONST__`;
+    }
+    if (typeof item === 'string' && item.startsWith(input_props_serialization_1.FILE_TOKEN)) {
+        return `__REMOVEQUOTE____WRAP_IN_STATIC_FILE_START__${decodeURIComponent(item.replace(input_props_serialization_1.FILE_TOKEN, ''))}__WRAP_IN_STATIC_FILE_END____REMOVEQUOTE__`;
+    }
+    return value;
+}))
+    .replace(/"__REMOVEQUOTE__/g, '')
+    .replace(/__REMOVEQUOTE__"/g, '')
+    .replace(/__ADD_AS_CONST__"/g, '" as const')
+    .replace(/__WRAP_IN_STATIC_FILE_START__/g, 'staticFile("')
+    .replace(/__WRAP_IN_STATIC_FILE_END__/g, '")');
+exports.stringifyDefaultProps = stringifyDefaultProps;
+function replacerWithPath(replacer) {
+    const m = new Map();
+    return function (field, value) {
+        const path = [m.get(this), field].flat(1);
+        if (value === Object(value)) {
+            m.set(value, path);
+        }
+        return replacer.call(this, field, value, path.filter((item) => typeof item !== 'undefined' && item !== ''));
+    };
+}

package/dist/codemods/update-default-props.d.ts

@@ -1,5 +1,7 @@
-export declare const updateDefaultProps: ({ input, compositionId, newDefaultProps, }: {
+import type { EnumPath } from '../editor/components/RenderModal/SchemaEditor/extract-enum-json-paths';
+export declare const updateDefaultProps: ({ input, compositionId, newDefaultProps, enumPaths, }: {
     input: string;
     compositionId: string;
     newDefaultProps: unknown;
+    enumPaths: EnumPath[];
 }) => Promise<string>;

package/dist/codemods/update-default-props.js

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateDefaultProps = void 0;
+const stringify_with_path_1 = require("./stringify-with-path");
 const findStarter = ({ input, compositionId, }) => {
     const format1 = input.indexOf(`id="${compositionId}"`);
     if (format1 > -1) {
@@ -85,23 +86,8 @@ const findTerminators = (input, position) => {
     }
     return Infinity;
 };
-const stringifyDefaultProps = (props) => {
-    // Don't replace with arrow function
-    return JSON.stringify(props, function (key, value) {
-        if (this[key] instanceof Date) {
-            return `__REMOVEQUOTE__new Date('${new Date(this[key]).toISOString()}')__REMOVEQUOTE__`;
-        }
-        if (typeof this[key] === 'string') {
-            return `${this[key]}__ADD_AS_CONST__`;
-        }
-        return value;
-    })
-        .replace(/"__REMOVEQUOTE__/g, '')
-        .replace(/__REMOVEQUOTE__"/g, '')
-        .replace(/__ADD_AS_CONST__"/g, '" as const');
-};
 // TODO: Add more sanity checks
-const updateDefaultProps = async ({ input, compositionId, newDefaultProps, }) => {
+const updateDefaultProps = async ({ input, compositionId, newDefaultProps, enumPaths, }) => {
     const starter = findStarter({ input, compositionId });
     const START_TOKEN = 'defaultProps={';
     const start = input.indexOf(START_TOKEN, starter);
@@ -120,7 +106,7 @@ const updateDefaultProps = async ({ input, compositionId, newDefaultProps, }) =>
     }
     const { format, resolveConfig, resolveConfigFile } = prettier;
     const newFile = input.substring(0, startPos) +
-        stringifyDefaultProps(newDefaultProps) +
+        (0, stringify_with_path_1.stringifyDefaultProps)({ props: newDefaultProps, enumPaths }) +
         input.substring(endPos);
     const configFilePath = await resolveConfigFile();
     if (!configFilePath) {

package/dist/compositions.js

@@ -39,6 +39,7 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         onDirectoryCreated: (dir) => {
             (0, cleanup_before_quit_1.registerCleanupJob)(() => renderer_1.RenderInternals.deleteDirectory(dir));
         },
+        quietProgress: false,
     });
     (0, cleanup_before_quit_1.registerCleanupJob)(() => cleanupBundle());
     const compositions = await (0, renderer_1.getCompositions)(bundled, {

package/dist/config/log.d.ts

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

package/dist/config/log.js

@@ -1,12 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setLogLevel = exports.getLogLevel = void 0;
-let logLevel = 'info';
-const getLogLevel = () => {
-    return logLevel;
-};
-exports.getLogLevel = getLogLevel;
-const setLogLevel = (newLogLevel) => {
-    logLevel = newLogLevel;
-};
-exports.setLogLevel = setLogLevel;
+const renderer_1 = require("@remotion/renderer");
+exports.getLogLevel = renderer_1.RenderInternals.getLogLevel, exports.setLogLevel = renderer_1.RenderInternals.setLogLevel;

package/dist/download-progress.d.ts

@@ -1,3 +1,3 @@
 import type { DownloadProgress } from './progress-types';
 export declare const getFileSizeDownloadBar: (downloaded: number) => string;
-export declare const makeMultiDownloadProgress: (progresses: DownloadProgress[], indent: boolean) => string | null;
+export declare const makeMultiDownloadProgress: (progresses: DownloadProgress[]) => string | null;

package/dist/download-progress.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeMultiDownloadProgress = exports.getFileSizeDownloadBar = void 0;
 const format_bytes_1 = require("./format-bytes");
-const log_1 = require("./log");
 const make_progress_bar_1 = require("./make-progress-bar");
 const truthy_1 = require("./truthy");
 const getFileSizeDownloadBar = (downloaded) => {
@@ -10,7 +9,7 @@ const getFileSizeDownloadBar = (downloaded) => {
     return `[${(0, format_bytes_1.formatBytes)(downloaded).padEnd(desiredLength - 2, ' ')}]`;
 };
 exports.getFileSizeDownloadBar = getFileSizeDownloadBar;
-const makeMultiDownloadProgress = (progresses, indent) => {
+const makeMultiDownloadProgress = (progresses) => {
     if (progresses.length === 0) {
         return null;
     }
@@ -20,7 +19,6 @@ const makeMultiDownloadProgress = (progresses, indent) => {
             ? progress.name.substring(0, 57) + '...'
             : progress.name;
         return [
-            indent ? log_1.INDENT_TOKEN : null,
             `    +`,
             progress.progress
                 ? (0, make_progress_bar_1.makeProgressBar)(progress.progress)
@@ -32,8 +30,6 @@ const makeMultiDownloadProgress = (progresses, indent) => {
     }
     const everyFileHasContentLength = progresses.every((p) => p.totalBytes !== null);
     return [
-        indent ? log_1.INDENT_TOKEN : null,
-        // TODO: Shifted 1 character to the right in v4
         `    +`,
         everyFileHasContentLength
             ? (0, make_progress_bar_1.makeProgressBar)(progresses.reduce((a, b) => a + b.progress, 0) /

package/dist/editor/components/MenuBuildIndicator.js

@@ -3,12 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuBuildIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
+const layout_1 = require("./layout");
+const OpenEditorButton_1 = require("./OpenEditorButton");
+const Spinner_1 = require("./Spinner");
 const cwd = {
     fontSize: 13,
     opacity: 0.8,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const spinnerSize = 14;
+const spinner = {
+    position: 'relative',
+    width: spinnerSize,
+    marginTop: 4,
+};
+const noSpinner = {
+    position: 'relative',
+    width: spinnerSize,
 };
 const MenuBuildIndicator = () => {
     const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
+    const ctx = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const showButton = window.remotion_editorName && ctx.type === 'connected';
     (0, react_1.useEffect)(() => {
         window.remotion_isBuilding = () => {
             setIsBuilding(true);
@@ -21,6 +40,6 @@ const MenuBuildIndicator = () => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { style: cwd, title: window.remotion_cwd, children: isBuilding ? 'Building...' : window.remotion_projectName }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }) : null, isBuilding ? ((0, jsx_runtime_1.jsx)("div", { style: spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: spinnerSize }) })) : ((0, jsx_runtime_1.jsx)("div", { style: noSpinner })), showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? (0, jsx_runtime_1.jsx)(OpenEditorButton_1.OpenEditorButton, {}) : null] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/editor/components/Modals.js

@@ -16,7 +16,7 @@ const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = () => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type === 'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModal, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

package/dist/editor/components/NewComposition/ComboBox.js

@@ -137,8 +137,8 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
         };
     }, [customStyle, hovered, opened]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [(0, jsx_runtime_1.jsx)("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: label, children: selected === null || selected === void 0 ? void 0 : selected.label }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? ((0, jsx_runtime_1.jsx)("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: label, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.fullScreenOverlay, children: (0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.Combobox = Combobox;

package/dist/editor/components/NewComposition/MenuContent.js

@@ -28,7 +28,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
     if (values[0].type === 'divider') {
         throw new Error('first value cant be divide');
     }
-    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number'
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(typeof preselectIndex === 'number' && preselectIndex >= 0
         ? values[preselectIndex].id
         : null);
     const onEscape = (0, react_1.useCallback)(() => {

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -13,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     isFocused: boolean;
     isHovered: boolean;
 }) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -3,5 +3,5 @@ import type { RemInputStatus } from './RemInput';
 declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     status: RemInputStatus;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/NewComposition/RemTextarea.d.ts

@@ -3,5 +3,5 @@ declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextA
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const OpenEditorButton: React.FC<{}>;

package/dist/editor/components/OpenEditorButton.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenEditorButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const svgStyle = {
+    width: '11px',
+    height: '11px',
+};
+const buttonStyle = {
+    border: 'none',
+    width: '25px',
+    height: '25px',
+};
+const OpenEditorButton = () => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const svgFillColor = (0, react_1.useMemo)(() => {
+        return hovered ? 'white' : colors_1.LIGHT_TEXT;
+    }, [hovered]);
+    const handleClick = async () => {
+        await (0, open_in_editor_1.openInEditor)({
+            originalFileName: `${window.remotion_cwd}`,
+            originalLineNumber: 1,
+            originalColumnNumber: 1,
+            originalFunctionName: null,
+            originalScriptCode: null,
+        })
+            .then((res) => res.json())
+            .then(({ success }) => {
+            if (!success) {
+                (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+            }
+        })
+            .catch((err) => {
+            console.error(err);
+            (0, NotificationCenter_1.sendErrorNotification)(`Could not open ${window.remotion_editorName}`);
+        });
+    };
+    const buttonTooltip = `Open in ${window.remotion_editorName}`;
+    const openInEditorSvg = ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: svgStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: svgFillColor, d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" }) }));
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("button", { title: buttonTooltip, type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: buttonStyle, onClick: handleClick, children: openInEditorSvg }));
+};
+exports.OpenEditorButton = OpenEditorButton;