@remotion/cli 3.3.78 → 3.3.80

package/dist/better-opn/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="node" />
+export declare const openBrowser: ({ url, browserFlag, browserArgs, }: {
+    url: string;
+    browserFlag: string | undefined;
+    browserArgs: string | undefined;
+}) => Promise<boolean | import("child_process").ChildProcess>;

package/dist/better-opn/index.js

@@ -0,0 +1,202 @@
+"use strict";
+// Copied from https://github.com/michaellzc/better-opn#readme
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openBrowser = void 0;
+const child_process_1 = require("child_process");
+const open = require("open");
+const normalizeURLToMatch = (target) => {
+    // We may encounter URL parse error but want to fallback to default behavior
+    try {
+        // Url module is deprecated on newer version of NodeJS, only use it when URL class is not supported (like Node 8)
+        const URL = typeof global.URL === 'undefined' ? require('url').URL : global.URL;
+        const url = new URL(target);
+        return url.origin;
+    }
+    catch (_a) {
+        return target;
+    }
+};
+// Copy from
+// https://github.com/facebook/create-react-app/blob/master/packages/react-dev-utils/openBrowser.js#L64
+const startBrowserProcess = async ({ browser, url, args, }) => {
+    const tryNewInstance = args.length > 0;
+    const shouldTryOpenChromiumWithAppleScript = process.platform === 'darwin' &&
+        !tryNewInstance &&
+        (typeof browser !== 'string' ||
+            browser === 'google chrome' ||
+            browser === 'chrome');
+    if (shouldTryOpenChromiumWithAppleScript) {
+        let appleScriptDenied = false;
+        // Will use the first open browser found from list
+        const supportedChromiumBrowsers = [
+            'Google Chrome',
+            'Google Chrome Canary',
+            'Microsoft Edge',
+            'Brave Browser',
+            'Vivaldi',
+            'Chromium',
+            'Arc',
+        ];
+        const processes = await new Promise((resolve, reject) => {
+            (0, child_process_1.exec)('ps cax', (err, stdout) => {
+                if (err) {
+                    reject(err);
+                }
+                else {
+                    resolve(stdout);
+                }
+            });
+        });
+        const browsersToTry = supportedChromiumBrowsers.filter((b) => processes.includes(b));
+        for (const chromiumBrowser of browsersToTry) {
+            if (appleScriptDenied) {
+                continue;
+            }
+            try {
+                // Try our best to reuse existing tab
+                // on OSX Chromium-based browser with AppleScript
+                const appleScript = `
+(*
+  Copyright (c) 2015-present, Facebook, Inc.
+  This source code is licensed under the MIT license found in the
+  LICENSE file in the root directory of this source tree.
+  *)
+  
+  property targetTab: null
+  property targetTabIndex: -1
+  property targetWindow: null
+  property theProgram: "${chromiumBrowser}"
+  
+  on run argv
+    set theURL to "${encodeURI(url)}"
+    set matchURL to "${process.env.OPEN_MATCH_HOST_ONLY === 'true'
+                    ? encodeURI(normalizeURLToMatch(url))
+                    : encodeURI(url)}"
+    
+    using terms from application "Google Chrome"
+      tell application theProgram
+  
+        if (count every window) = 0 then
+          make new window
+        end if
+  
+        -- 1: Looking for tab running debugger
+        -- then, Reload debugging tab if found
+        -- then return
+        set found to my lookupTabWithUrl(matchURL)
+        if found then
+          set targetWindow's active tab index to targetTabIndex
+          tell targetTab to reload
+          tell targetWindow to activate
+          set index of targetWindow to 1
+          return
+        end if
+  
+        -- 2: Looking for Empty tab
+        -- In case debugging tab was not found
+        -- We try to find an empty tab instead
+        set found to my lookupTabWithUrl("chrome://newtab/")
+        if found then
+          set targetWindow's active tab index to targetTabIndex
+          set URL of targetTab to theURL
+          tell targetWindow to activate
+          return
+        end if
+  
+        -- 3: Create new tab
+        -- both debugging and empty tab were not found
+        -- make a new tab with url
+        tell window 1
+          activate
+          make new tab with properties {URL:theURL}
+        end tell
+      end tell
+    end using terms from
+  end run
+  
+  -- Function:
+  -- Lookup tab with given url
+  -- if found, store tab, index, and window in properties
+  -- (properties were declared on top of file)
+  on lookupTabWithUrl(lookupUrl)
+    using terms from application "Google Chrome"
+      tell application theProgram
+        -- Find a tab with the given url
+        set found to false
+        set theTabIndex to -1
+        repeat with theWindow in every window
+          set theTabIndex to 0
+          repeat with theTab in every tab of theWindow
+            set theTabIndex to theTabIndex + 1
+            if (theTab's URL as string) contains lookupUrl then
+              -- assign tab, tab index, and window to properties
+              set targetTab to theTab
+              set targetTabIndex to theTabIndex
+              set targetWindow to theWindow
+              set found to true
+              exit repeat
+            end if
+          end repeat
+  
+          if found then
+            exit repeat
+          end if
+        end repeat
+      end tell
+    end using terms from
+    return found
+  end lookupTabWithUrl
+`.trim();
+                await new Promise((resolve, reject) => {
+                    const proc = (0, child_process_1.exec)(`osascript -`, (error) => {
+                        if (error) {
+                            reject(error);
+                        }
+                        else {
+                            // Ignore errors.
+                            // It it breaks, it will fallback to `opn` anyway
+                            resolve();
+                        }
+                    });
+                    proc.stdin.write(appleScript);
+                    proc.stdin.end();
+                });
+                return Promise.resolve(true);
+            }
+            catch (error) {
+                const appleScriptError = error.message;
+                if (appleScriptError
+                    .toLowerCase()
+                    .includes('not authorised to send apple events')) {
+                    appleScriptDenied = true;
+                }
+                // Ignore errors.
+                // It it breaks, it will fallback to `opn` anyway
+            }
+        }
+    }
+    // Fallback to opn
+    // (It will always open new tab)
+    return open(url, {
+        ...(browser ? { app: { name: browser, arguments: args } } : {}),
+        newInstance: tryNewInstance,
+        wait: false,
+    });
+};
+const getBrowserArgs = (browserArgs) => {
+    if (browserArgs) {
+        return browserArgs.split(' ');
+    }
+    if (process.env.BROWSER_ARGS) {
+        return process.env.BROWSER_ARGS.split(' ');
+    }
+    return [];
+};
+const openBrowser = ({ url, browserFlag, browserArgs, }) => {
+    return startBrowserProcess({
+        browser: browserFlag !== null && browserFlag !== void 0 ? browserFlag : process.env.BROWSER,
+        url,
+        args: getBrowserArgs(browserArgs),
+    });
+};
+exports.openBrowser = openBrowser;

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

@@ -0,0 +1,5 @@
+export declare const updateDefaultProps: ({ input, compositionId, newDefaultProps, }: {
+    input: string;
+    compositionId: string;
+    newDefaultProps: unknown;
+}) => Promise<string>;

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

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateDefaultProps = void 0;
+const prettier_1 = require("prettier");
+const findStarter = ({ input, compositionId, }) => {
+    const format1 = input.indexOf(`id="${compositionId}"`);
+    if (format1 > -1) {
+        return format1;
+    }
+    const format2 = input.indexOf(`id='${compositionId}'`);
+    if (format2 > -1) {
+        return format2;
+    }
+    const format3 = input.indexOf(`id={'${compositionId}'}`);
+    if (format3 > -1) {
+        return format3;
+    }
+    const format4 = input.indexOf(`id={"${compositionId}"}`);
+    if (format4 > -1) {
+        return format4;
+    }
+    const format5 = input.indexOf(`id={\`${compositionId}\``);
+    if (format5 > -1) {
+        return format5;
+    }
+    throw new Error(`Could not find composition ID ${compositionId} in file`);
+};
+const findEnder = (input, position, maxPosition) => {
+    let currentPosition = position;
+    while (currentPosition < maxPosition) {
+        const next = input.indexOf('}}', currentPosition + 1);
+        if (next === -1) {
+            throw new Error('Could not find end of defaultProps');
+        }
+        currentPosition = next;
+        const nextChar = input[next + 1];
+        if (nextChar === ',') {
+            continue;
+        }
+        return [position, currentPosition + 1];
+    }
+    throw new Error('did not find string');
+};
+const findTerminators = (input, position) => {
+    const nextComposition = input.indexOf('<Composition', position);
+    if (nextComposition > -1) {
+        return nextComposition;
+    }
+    const nextStill = input.indexOf('<Still', position);
+    if (nextStill > -1) {
+        return nextStill;
+    }
+    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__`;
+        }
+        return value;
+    })
+        .replace('"__REMOVEQUOTE__', '')
+        .replace('__REMOVEQUOTE__"', '');
+};
+// TODO: Add more sanity checks
+// TODO: better error messages
+// TODO: throw if prettier was not found
+const updateDefaultProps = async ({ input, compositionId, newDefaultProps, }) => {
+    const starter = findStarter({ input, compositionId });
+    const START_TOKEN = 'defaultProps={';
+    const start = input.indexOf(START_TOKEN, starter);
+    if (start === -1) {
+        throw new Error('Could not find defaultProps in <Composition> tag');
+    }
+    const maxEnd = findTerminators(input, starter);
+    const [startPos, endPos] = findEnder(input, start + START_TOKEN.length, maxEnd);
+    const newFile = input.substring(0, startPos) +
+        stringifyDefaultProps(newDefaultProps) +
+        input.substring(endPos);
+    const configFilePath = await (0, prettier_1.resolveConfigFile)();
+    if (!configFilePath) {
+        throw new Error('prettier config file not found');
+    }
+    const prettierConfig = await (0, prettier_1.resolveConfig)(configFilePath);
+    if (!prettierConfig) {
+        throw new Error('Prettier config not found');
+    }
+    const prettified = (0, prettier_1.format)(newFile, {
+        ...prettierConfig,
+        rangeStart: startPos,
+        rangeEnd: endPos,
+        filepath: 'test.tsx',
+        plugins: [],
+    });
+    return prettified;
+};
+exports.updateDefaultProps = updateDefaultProps;

package/dist/editor/components/Checkbox.js

@@ -21,6 +21,7 @@ const box = {
     top: 0,
     left: 0,
     pointerEvents: 'none',
+    color: 'white',
 };
 const Checkbox = ({ checked, onChange, disabled }) => {
     const input = (0, react_1.useMemo)(() => {

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const CollapsedSidebarExpander: React.FC<{
+    onExpand: () => void;
+    direction: 'left' | 'right';
+}>;

package/dist/editor/components/CollapsedSidebarExpander.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsedSidebarExpander = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const caret_1 = require("../icons/caret");
+const z_index_1 = require("../state/z-index");
+const CollapsedSidebarExpander = ({ onExpand, direction }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            border: 'none',
+            borderRight: `${direction === 'right' ? 1 : 0}px solid black`,
+            borderLeft: `${direction === 'left' ? 1 : 0}px solid black`,
+            cursor: 'pointer',
+            color: 'white',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingLeft: direction === 'right' ? 7 : 5,
+            paddingRight: direction === 'right' ? 4 : 5,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected: false,
+            }),
+            appearance: 'none',
+            WebkitAppearance: 'none',
+        };
+    }, [direction, hovered]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", role: "button", tabIndex: tabIndex, onClick: onExpand, children: direction === 'right' ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : (0, jsx_runtime_1.jsx)(caret_1.CaretLeft, {}) }));
+};
+exports.CollapsedSidebarExpander = CollapsedSidebarExpander;

package/dist/editor/components/CurrentCompositionSideEffects.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurrentCompositionKeybindings = exports.TitleUpdater = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const TitleUpdater = () => {
     const video = remotion_1.Internals.useVideo();
     (0, react_1.useEffect)(() => {
@@ -19,13 +21,19 @@ exports.TitleUpdater = TitleUpdater;
 const CurrentCompositionKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const video = remotion_1.Internals.useVideo();
+    const { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
     const openRenderModal = (0, react_1.useCallback)(() => {
         if (!video) {
-            return null;
+            return;
+        }
+        if (type !== 'connected') {
+            (0, NotificationCenter_1.sendErrorNotification)('Preview server is offline');
+            return;
         }
         const renderButton = document.getElementById('render-modal-button');
         renderButton.click();
-    }, [video]);
+    }, [type, video]);
+    // TODO: Does not work if the left sidebar is collapsed
     (0, react_1.useEffect)(() => {
         const binding = keybindings.registerKeybinding({
             event: 'keydown',
@@ -33,6 +41,7 @@ const CurrentCompositionKeybindings = () => {
             commandCtrlKey: false,
             callback: openRenderModal,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             binding.unregister();

package/dist/editor/components/InlineAction.js

@@ -24,7 +24,7 @@ const InlineAction = ({ children, onClick }) => {
             justifyContent: 'center',
             alignItems: 'center',
             borderRadius: 3,
-            opacity: hovered ? 1 : 0.6,
+            color: hovered ? 'white' : colors_1.LIGHT_TEXT,
         };
     }, [hovered]);
     return (

package/dist/editor/components/Modals.js

@@ -10,14 +10,14 @@ const client_id_1 = require("../helpers/client-id");
 const modals_1 = require("../state/modals");
 const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
 const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
-const RenderErrorModal_1 = require("./RenderModal/RenderErrorModal");
 const RenderModal_1 = require("./RenderModal/RenderModal");
+const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 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, initialQuality: modalContextType.initialQuality, 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 })), 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, initialQuality: modalContextType.initialQuality, 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 })), modalContextType &&
                 canRender &&
-                modalContextType.type === 'render-error' && ((0, jsx_runtime_1.jsx)(RenderErrorModal_1.RenderErrorModal, { job: modalContextType.job })), 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 }))] }));
+                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 }))] }));
 };
 exports.Modals = Modals;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
+    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 {};

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

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemTextarea = exports.inputBaseStyle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const RemInput_1 = require("../NewComposition/RemInput");
+exports.inputBaseStyle = {
+    padding: `${RemInput_1.INPUT_HORIZONTAL_PADDING}px 10px`,
+    color: 'white',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    fontSize: 14,
+    resize: 'vertical',
+};
+const RemTextareaFRFunction = ({ status, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...exports.inputBaseStyle,
+            width: '100%',
+            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style, status]);
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        const onKeyDown = (e) => {
+            if (!inputRef.current) {
+                return;
+            }
+            if (inputRef.current !== document.activeElement) {
+                return;
+            }
+            if (e.code === 'Tab') {
+                e.preventDefault();
+                // Always match up with value in JSON.stringify(content, null, 2)
+                document.execCommand('insertText', false, ' '.repeat(2));
+            }
+            if (e.code === 'Enter') {
+                e.preventDefault();
+                const { selectionStart, selectionEnd, value } = inputRef.current;
+                if (selectionStart !== selectionEnd) {
+                    return;
+                }
+                let prevNewline = selectionStart;
+                for (let i = selectionStart - 1; i >= 0; i--) {
+                    if (value[i] === '\n') {
+                        break;
+                    }
+                    prevNewline = i;
+                }
+                const currentLine = value.substring(prevNewline, selectionStart);
+                const trimmed = currentLine.trim();
+                const difference = currentLine.length - trimmed.length;
+                document.execCommand('insertText', false, '\n' + ' '.repeat(difference));
+            }
+        };
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        current.addEventListener('keydown', onKeyDown);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('keydown', onKeyDown);
+        };
+    }, [inputRef]);
+    return ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, tabIndex: tabIndex, ...props, style: style }));
+};
+exports.RemTextarea = (0, react_1.forwardRef)(RemTextareaFRFunction);

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

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

package/dist/editor/components/RenderButton.js

@@ -58,6 +58,11 @@ const RenderButton = ({ composition, visible }) => {
             initialNumberOfGifLoops: defaults.numberOfGifLoops,
             initialDelayRenderTimeout: defaults.delayRenderTimeout,
             initialAudioCodec: defaults.audioCodec,
+            initialEnvVariables: window.process.env,
+            initialDisableWebSecurity: defaults.disableWebSecurity,
+            initialOpenGlRenderer: defaults.openGlRenderer,
+            initialHeadless: defaults.headless,
+            initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
         });
     }, [composition.id, isVideo, setSelectedModal]);
     if (!visible) {

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CliCopyButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CliCopyButton = ({ valueToCopy, }) => {
+    const iconStyle = {
+        width: 16,
+        height: 16,
+        color: '#a6a8aa',
+        verticalAlign: 'sub',
+    };
+    const clipBoardIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "#a6a8aa", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: {
+            width: '30px',
+            height: '30px',
+            border: 'none',
+            cursor: 'pointer',
+        }, onClick: () => {
+            navigator.clipboard.writeText(valueToCopy);
+        }, children: clipBoardIcon }));
+};
+exports.CliCopyButton = CliCopyButton;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Codec } from '@remotion/renderer';
+import type { Codec, RemotionOption } from '@remotion/renderer';
 export declare const useCrfState: (codec: Codec) => {
     crf: number;
     setCrf: import("react").Dispatch<import("react").SetStateAction<number>>;
@@ -12,4 +12,5 @@ export declare const CrfSetting: React.FC<{
     setCrf: React.Dispatch<React.SetStateAction<number>>;
     min: number;
     max: number;
+    option: RemotionOption;
 }>;

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

@@ -37,7 +37,7 @@ const useCrfState = (codec) => {
     };
 };
 exports.useCrfState = useCrfState;
-const CrfSetting = ({ crf, setCrf, min, max }) => {
-    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: min, max: max, name: "CRF", onValueChanged: setCrf, value: crf, step: 1 }));
+const CrfSetting = ({ crf, setCrf, min, max, option }) => {
+    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: min, max: max, name: "CRF", onValueChanged: setCrf, value: crf, step: 1, hint: option }));
 };
 exports.CrfSetting = CrfSetting;

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

@@ -1,6 +1,8 @@
+import type { RemotionOption } from '@remotion/renderer';
 import React from 'react';
 export declare const EnforceAudioTrackSetting: React.FC<{
     enforceAudioTrack: boolean;
     setEnforceAudioTrack: React.Dispatch<React.SetStateAction<boolean>>;
     muted: boolean;
+    option: RemotionOption;
 }>;

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

@@ -4,11 +4,13 @@ exports.EnforceAudioTrackSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
+const InfoBubble_1 = require("./InfoBubble");
 const layout_1 = require("./layout");
-const EnforceAudioTrackSetting = ({ enforceAudioTrack, muted, setEnforceAudioTrack }) => {
+const OptionExplainer_1 = require("./OptionExplainer");
+const EnforceAudioTrackSetting = ({ enforceAudioTrack, muted, setEnforceAudioTrack, option }) => {
     const onEnforceAudioTrackChanged = (0, react_1.useCallback)((e) => {
         setEnforceAudioTrack(e.target.checked);
     }, [setEnforceAudioTrack]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Enforce Audio Track" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: muted && !enforceAudioTrack, checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Enforce Audio Track", (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: option }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: muted && !enforceAudioTrack, checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged }) })] }));
 };
 exports.EnforceAudioTrackSetting = EnforceAudioTrackSetting;