@remotion/cli 3.3.78 → 3.3.80

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare const EnvInput: React.FC<{
+    onEnvKeyChange: (index: number, newValue: string) => void;
+    onEnvValChange: (index: number, newValue: string) => void;
+    envKey: string;
+    envVal: string;
+    onDelete: (index: number) => void;
+    index: number;
+    autoFocus: boolean;
+}>;

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

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnvInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const layout_1 = require("../layout");
+const RemInput_1 = require("../NewComposition/RemInput");
+const InlineEyeIcon_1 = require("./InlineEyeIcon");
+const InlineRemoveButton_1 = require("./InlineRemoveButton");
+const layout_2 = require("./layout");
+const input = {
+    flex: 1,
+    width: '100%',
+};
+const EnvInput = ({ onEnvKeyChange, onEnvValChange, envKey, envVal, onDelete, index, autoFocus, }) => {
+    const [showInPlainText, setShowInPlainText] = react_1.default.useState(false);
+    const handleDelete = (0, react_1.useCallback)(() => {
+        onDelete(index);
+    }, [index, onDelete]);
+    const togglePlainText = (0, react_1.useCallback)(() => {
+        setShowInPlainText((prev) => !prev);
+    }, []);
+    const handleKeyChange = (0, react_1.useCallback)((e) => {
+        onEnvKeyChange(index, e.target.value);
+    }, [index, onEnvKeyChange]);
+    const handleValueChange = (0, react_1.useCallback)((e) => {
+        onEnvValChange(index, e.target.value);
+    }, [index, onEnvValChange]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: "ok", type: "text", placeholder: "Key", style: input, value: envKey, autoFocus: autoFocus, onChange: handleKeyChange }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: "ok", placeholder: "Value", type: showInPlainText ? 'text' : 'password', style: input, value: envVal, onChange: handleValueChange }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), (0, jsx_runtime_1.jsx)(InlineEyeIcon_1.InlineEyeButton, { enabled: !showInPlainText, onClick: togglePlainText }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), (0, jsx_runtime_1.jsx)(InlineRemoveButton_1.InlineRemoveButton, { onClick: handleDelete })] }));
+};
+exports.EnvInput = EnvInput;

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

@@ -37,6 +37,6 @@ const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames
             return newEndFrameClamped;
         });
     }, [maxEndFrame, minEndFrame, setEndFrame]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: startFrame, onTextChange: onStartFrameChanged, placeholder: `${minStartFrame}-${maxStartFrame}`, onValueChange: onStartFrameChangedDirectly, name: "startFrame", step: 1, min: minStartFrame, max: maxStartFrame }) }), (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: endFrame, onTextChange: onEndFrameChanged, placeholder: `${minEndFrame}-${maxEndFrame}`, onValueChange: onEndFrameChangedDirectly, name: "endFrame", step: 1, min: minEndFrame, max: maxEndFrame }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: startFrame, onTextChange: onStartFrameChanged, placeholder: `${minStartFrame}-${maxStartFrame}`, onValueChange: onStartFrameChangedDirectly, name: "startFrame", step: 1, min: minStartFrame, max: maxStartFrame, status: "ok" }) }), (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: endFrame, onTextChange: onEndFrameChanged, placeholder: `${minEndFrame}-${maxEndFrame}`, onValueChange: onEndFrameChangedDirectly, name: "endFrame", step: 1, min: minEndFrame, max: maxEndFrame, status: "ok" }) })] })] }));
 };
 exports.FrameRangeSetting = FrameRangeSetting;

package/dist/editor/components/RenderModal/{RenderErrorModal.d.ts → GuiRenderStatus.d.ts}

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

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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GuiRenderStatus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const layout_1 = require("../layout");
+const actions_1 = require("../RenderQueue/actions");
+const CircularProgress_1 = require("../RenderQueue/CircularProgress");
+const RenderQueueOpenInFolder_1 = require("../RenderQueue/RenderQueueOpenInFolder");
+const SuccessIcon_1 = require("../RenderQueue/SuccessIcon");
+const progressItem = {
+    padding: 10,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const label = {
+    fontSize: 14,
+    width: 400,
+    color: 'white',
+};
+const right = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    textAlign: 'right',
+    flex: 1,
+};
+const BundlingProgress = ({ progress, doneIn }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [progress === 1 ? ((0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {})) : ((0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: progress })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: progress === 1 ? 'Bundled' : `Bundling ${progress * 100}%` }), doneIn ? (0, jsx_runtime_1.jsxs)("div", { style: right, children: [doneIn, "ms"] }) : null] }));
+};
+const RenderingProgress = ({ progress }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [progress.frames === progress.totalFrames ? ((0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {})) : ((0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: progress.frames / progress.totalFrames })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: progress.doneIn
+                    ? `Rendered ${progress.totalFrames} frames`
+                    : `Rendering ${progress.frames} / ${progress.totalFrames} frames` }), progress.doneIn ? (0, jsx_runtime_1.jsxs)("div", { style: right, children: [progress.doneIn, "ms"] }) : null] }));
+};
+const StitchingProgress = ({ progress }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [progress.frames === progress.totalFrames ? ((0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {})) : ((0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: progress.frames / progress.totalFrames })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: progress.doneIn
+                    ? `Stitched ${progress.totalFrames} frames`
+                    : `Stitching ${progress.frames} / ${progress.totalFrames} frames` }), progress.doneIn ? (0, jsx_runtime_1.jsxs)("div", { style: right, children: [progress.doneIn, "ms"] }) : null] }));
+};
+const DownloadsProgress = ({ downloads }) => {
+    const allHaveProgress = downloads.every((a) => a.totalBytes);
+    const totalBytes = allHaveProgress
+        ? downloads.reduce((a, b) => a + b.totalBytes, 0)
+        : null;
+    const downloaded = allHaveProgress
+        ? downloads.reduce((a, b) => a + b.downloaded, 0)
+        : null;
+    const progress = allHaveProgress
+        ? downloaded / totalBytes
+        : 0.1;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [progress === 1 ? ((0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {})) : ((0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { progress: progress })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["Downloading ", downloads.length, " file", downloads.length === 1 ? '' : 's'] })] }));
+};
+const OpenFile = ({ job }) => {
+    const labelStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...label,
+            textAlign: 'left',
+            appearance: 'none',
+            border: 0,
+            paddingLeft: 0,
+            cursor: job.deletedOutputLocation ? 'inherit' : 'pointer',
+            textDecoration: job.deletedOutputLocation ? 'line-through' : 'none',
+        };
+    }, [job.deletedOutputLocation]);
+    const onClick = (0, react_1.useCallback)(() => {
+        (0, actions_1.openInFileExplorer)({ directory: job.outName });
+    }, [job.outName]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: progressItem, children: [(0, jsx_runtime_1.jsx)(SuccessIcon_1.SuccessIcon, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("button", { style: labelStyle, type: "button", onClick: onClick, children: job.outName }), (0, jsx_runtime_1.jsx)("div", { style: right, children: (0, jsx_runtime_1.jsx)(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }) })] }));
+};
+const GuiRenderStatus = ({ job }) => {
+    if (job.status === 'idle' || job.status === 'failed') {
+        throw new Error('This component should not be rendered when the job is idle');
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5 }), (0, jsx_runtime_1.jsx)(BundlingProgress, { progress: job.progress.bundling.progress, doneIn: job.progress.bundling.doneIn }), job.progress.rendering ? ((0, jsx_runtime_1.jsx)(RenderingProgress, { progress: job.progress.rendering })) : null, job.progress.stitching ? ((0, jsx_runtime_1.jsx)(StitchingProgress, { progress: job.progress.stitching })) : null, job.progress.downloads.length > 0 ? ((0, jsx_runtime_1.jsx)(DownloadsProgress, { downloads: job.progress.downloads })) : null, job.status === 'done' ? (0, jsx_runtime_1.jsx)(OpenFile, { job: job }) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 })] }));
+};
+exports.GuiRenderStatus = GuiRenderStatus;

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

@@ -43,8 +43,7 @@ const InfoBubble = ({ title, children }) => {
         }
         const onMouseEnter = () => setIsHovered(true);
         const onMouseLeave = () => setIsHovered(false);
-        const onPointerDown = (e) => {
-            e.stopPropagation();
+        const onPointerUp = () => {
             return setOpened((o) => {
                 if (!o) {
                     refresh === null || refresh === void 0 ? void 0 : refresh();
@@ -64,24 +63,30 @@ const InfoBubble = ({ title, children }) => {
         };
         current.addEventListener('mouseenter', onMouseEnter);
         current.addEventListener('mouseleave', onMouseLeave);
-        current.addEventListener('pointerdown', onPointerDown);
+        current.addEventListener('pointerup', onPointerUp);
         current.addEventListener('click', onClick);
         return () => {
             current.removeEventListener('mouseenter', onMouseEnter);
             current.removeEventListener('mouseleave', onMouseLeave);
-            current.removeEventListener('pointerdown', onPointerDown);
+            current.removeEventListener('pointerup', onPointerUp);
             current.removeEventListener('click', onClick);
         };
     }, [refresh]);
-    const portalStyle = (0, react_1.useMemo)(() => {
-        if (!opened || !size) {
-            return null;
+    const layout = (0, react_1.useMemo)(() => {
+        if (!size) {
+            return 'down';
         }
         const spaceToBottom = size.windowSize.height - (size.top + size.height);
         const spaceToTop = size.top;
-        const layout = spaceToTop > spaceToBottom ? 'bottom' : 'top';
+        const l = spaceToTop > spaceToBottom ? 'down' : 'up';
+        return l;
+    }, [size]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!size || !opened) {
+            return null;
+        }
         return {
-            ...(layout === 'top'
+            ...(layout === 'up'
                 ? {
                     position: 'fixed',
                     top: size.top + size.height,
@@ -92,7 +97,7 @@ const InfoBubble = ({ title, children }) => {
                 }),
             left: size.left,
         };
-    }, [opened, size]);
+    }, [layout, opened, size]);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...container,
@@ -103,9 +108,8 @@ const InfoBubble = ({ title, children }) => {
             alignItems: 'center',
         };
     }, []);
-    // TODO: Can click two info bubbles at the same time
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: ref, tabIndex: tabIndex, style: style, title: title, type: "button", children: (0, jsx_runtime_1.jsx)("svg", { style: icon, viewBox: "0 0 512 512", children: (0, jsx_runtime_1.jsx)("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }) }) }), portalStyle
-                ? react_dom_1.default.createPortal((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)(InfoTooltip_1.InfoTooltip, { children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                ? react_dom_1.default.createPortal((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)(InfoTooltip_1.InfoTooltip, { arrowDirection: layout, children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.InfoBubble = InfoBubble;

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

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const InfoTooltip: React.FC<{
     children: React.ReactNode;
+    arrowDirection: 'up' | 'down';
 }>;

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

@@ -2,29 +2,38 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoTooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const styles_1 = require("../Menu/styles");
-const container = {
-    padding: '10px 12px',
-    // TODO: Depending on direction
-    boxShadow: styles_1.SHADOW_TOWARDS_TOP,
-    background: colors_1.BACKGROUND,
-    color: 'white',
-    border: '0.5px solid ' + colors_1.BORDER_COLOR,
-    maxHeight: 200,
-    overflow: 'auto',
-};
 const arrow = {
     height: 7,
     display: 'block',
     overflow: 'visible',
-    marginTop: -0.5,
     marginLeft: 7,
 };
-const InfoTooltip = ({ children }) => {
-    return (
-    // TODO: Down arrow
-    // TODO: not scrolling with portal
-    (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: container, children: children }), (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrow, children: (0, jsx_runtime_1.jsx)("path", { d: `M 14 0 L 7 7 L 0 0`, fill: colors_1.BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })] }));
+const arrowUp = {
+    ...arrow,
+    transform: `translateY(1px)`,
+};
+const arrowDown = {
+    ...arrow,
+    marginTop: -0.5,
+};
+const InfoTooltip = ({ children, arrowDirection }) => {
+    const container = (0, react_1.useMemo)(() => {
+        return {
+            boxShadow: arrowDirection === 'down' ? styles_1.SHADOW_TOWARDS_TOP : styles_1.SHADOW_TOWARDS_BOTTOM,
+            background: colors_1.BACKGROUND,
+            color: 'white',
+            border: '0.5px solid ' + colors_1.BORDER_COLOR,
+            maxHeight: 200,
+            overflow: 'auto',
+        };
+    }, [arrowDirection]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: arrowDirection === 'up' ? 'column-reverse' : 'column',
+            alignItems: 'flex-start',
+        }, children: [(0, jsx_runtime_1.jsx)("div", { style: container, className: "__remotion-vertical-scrollbar", children: children }), arrowDirection === 'down' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowDown, children: (0, jsx_runtime_1.jsx)("path", { d: `M 14 0 L 7 7 L 0 0`, fill: colors_1.BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null, arrowDirection === 'up' ? ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 14 7", style: arrowUp, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 7 L 7 0 L 14 7`, fill: colors_1.BACKGROUND, strokeLinecap: "butt", stroke: colors_1.BORDER_COLOR, strokeWidth: 0.5 }) })) : null] }));
 };
 exports.InfoTooltip = InfoTooltip;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const InlineEyeButton: React.FC<{
+    onClick: () => void;
+    enabled: boolean;
+}>;

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineEyeButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const clearIcon = {
+    height: 16,
+    color: colors_1.LIGHT_TEXT,
+};
+const InlineEyeButton = ({ onClick, enabled }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const handleClick = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        onClick();
+    }, [onClick]);
+    const color = hovered ? 'white' : colors_1.LIGHT_TEXT;
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            appearance: 'none',
+            padding: 0,
+            cursor: 'pointer',
+            border: 'none',
+            width: 24,
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("button", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: handleClick, type: "button", children: enabled ? ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 640 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M25.9 3.4C19-2 8.9-.8 3.4 6.1S-.8 23.1 6.1 28.6l608 480c6.9 5.5 17 4.3 22.5-2.6s4.3-17-2.6-22.5L25.9 3.4zM605.5 268.3c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-51.2 0-96 14.8-133.9 36.8l27.3 21.5C244.6 74.2 280.2 64 320 64c70.4 0 127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-9.2 22.1-25.9 52-49.5 81.5l25.1 19.8c25.6-32 43.7-64.4 53.9-89zM88.4 154.7c-25.6 32-43.7 64.4-53.9 89c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c51.2 0 96-14.8 133.9-36.8l-27.3-21.5C395.4 437.8 359.8 448 320 448c-70.4 0-127.7-32-170.8-72C106.1 336 77.3 288 64 256c9.2-22.1 25.9-52 49.5-81.5L88.4 154.7zM320 384c16.7 0 32.7-3.2 47.4-9.1l-30.9-24.4c-5.4 .9-10.9 1.4-16.5 1.4c-51 0-92.8-39.8-95.8-90.1l-30.9-24.4c-.9 6-1.3 12.2-1.3 18.5c0 70.7 57.3 128 128 128zM448 256c0-70.7-57.3-128-128-128c-16.7 0-32.7 3.2-47.4 9.1l30.9 24.4c5.4-.9 10.9-1.4 16.5-1.4c51 0 92.8 39.8 95.8 90.1l30.9 24.4c.9-6 1.3-12.2 1.3-18.5z" }) })) : ((0, jsx_runtime_1.jsx)("svg", { style: clearIcon, viewBox: "0 0 576 512", children: (0, jsx_runtime_1.jsx)("path", { fill: color, d: "M117.2 136C160.3 96 217.6 64 288 64s127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-13.3 32-42.1 80-85.2 120c-43.1 40-100.4 72-170.8 72s-127.7-32-170.8-72C74.1 336 45.3 288 32 256c13.3-32 42.1-80 85.2-120zM288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM192 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" }) })) }));
+};
+exports.InlineEyeButton = InlineEyeButton;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const InlineRemoveButton: React.FC<{
+    onClick: () => void;
+}>;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineRemoveButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const InlineAction_1 = require("../InlineAction");
+const clearIcon = {
+    height: 14,
+    color: colors_1.LIGHT_TEXT,
+};
+const InlineRemoveButton = ({ onClick }) => {
+    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", style: clearIcon, children: (0, jsx_runtime_1.jsx)("path", { d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z", fill: "currentcolor" }) }) }));
+};
+exports.InlineRemoveButton = InlineRemoveButton;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const JpegQualitySetting: React.FC<{
+    quality: number;
+    setQuality: (value: React.SetStateAction<number>) => void;
+}>;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JpegQualitySetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const NumberSetting_1 = require("./NumberSetting");
+const MIN_QUALITY = 1;
+const MAX_QUALITY = 100;
+const JpegQualitySetting = ({ quality: scale, setQuality: setScale }) => {
+    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: MIN_QUALITY, max: MAX_QUALITY, step: 1, name: "JPEG Quality", onValueChanged: setScale, value: scale, hint: client_1.BrowserSafeApis.options.jpegQualityOption }));
+};
+exports.JpegQualitySetting = JpegQualitySetting;

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

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

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

@@ -4,11 +4,13 @@ exports.MutedSetting = 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 MutedSetting = ({ muted, setMuted, enforceAudioTrack }) => {
+const OptionExplainer_1 = require("./OptionExplainer");
+const MutedSetting = ({ muted, setMuted, enforceAudioTrack, hint }) => {
     const onMutedChanged = (0, react_1.useCallback)((e) => {
         setMuted(e.target.checked);
     }, [setMuted]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Muted" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: muted, disabled: enforceAudioTrack && !muted, onChange: onMutedChanged }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_1.label, children: ["Muted", (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: hint }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: muted, disabled: enforceAudioTrack && !muted, onChange: onMutedChanged }) })] }));
 };
 exports.MutedSetting = MutedSetting;

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

@@ -21,6 +21,6 @@ const NumberOfLoopsSetting = ({ numberOfGifLoops, setNumberOfGifLoops }) => {
             return newConcurrencyClamped;
         });
     }, [setNumberOfGifLoops]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Number of loops" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: numberOfGifLoops, onTextChange: onNumberOfGifLoopsChanged, placeholder: `${min}-`, onValueChange: onNumberOfGifLoopsChangedDirectly, name: "number-of-gif-loops", step: 1, min: min }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Number of loops" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: numberOfGifLoops, onTextChange: onNumberOfGifLoopsChanged, placeholder: `${min}-`, onValueChange: onNumberOfGifLoopsChangedDirectly, name: "number-of-gif-loops", step: 1, min: min, status: "ok" }) }) })] }));
 };
 exports.NumberOfLoopsSetting = NumberOfLoopsSetting;

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

@@ -24,6 +24,6 @@ const NumberSetting = ({ name, value, step, hint, onValueChanged, max, min, form
     }, [onValueChanged]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: [name, hint ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.25 }), ' ', (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: hint }) })] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: value, name: name.toLowerCase(), onTextChange: onTextChanged, onValueChange: onValueChange, step: step, placeholder: [min, max]
                             .map((f) => (f !== null && f !== undefined ? f : ''))
-                            .join('-'), min: min, max: max, formatter: formatter }) }) })] }));
+                            .join('-'), min: min, max: max, formatter: formatter, status: "ok" }) }) })] }));
 };
 exports.NumberSetting = NumberSetting;

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { RemotionOption } from '@remotion/renderer';
+import React from 'react';
 export declare const OptionExplainer: React.FC<{
     option: RemotionOption;
 }>;

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

@@ -4,18 +4,42 @@ exports.OptionExplainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const layout_1 = require("../layout");
 const MenuDivider_1 = require("../Menu/MenuDivider");
+const CliCopyButton_1 = require("./CliCopyButton");
 const container = {
     fontSize: 14,
+    paddingTop: 10,
+    paddingBottom: 10,
+};
+const padding = {
+    paddingLeft: 12,
+    paddingRight: 12,
 };
 const title = {
     fontSize: 14,
 };
 const description = {
+    fontSize: 14,
+    maxWidth: 400,
+};
+const link = {
     fontSize: 14,
     maxWidth: 200,
+    color: '#0b84f3',
+    wordWrap: 'break-word',
+};
+const infoRow = {
+    ...padding,
+    fontSize: 14,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const infoRowLabel = {
+    width: 150,
+    fontSize: 14,
+    color: 'white',
 };
-// TODO: No style of <code>
 const OptionExplainer = ({ option }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("strong", { style: title, children: option.name }) }), (0, jsx_runtime_1.jsx)("div", { style: description, children: option.description }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsxs)("div", { style: description, children: ["CLI flag: ", option.cliFlag] }), (0, jsx_runtime_1.jsxs)("div", { style: description, children: ["Node.JS option: ", option.ssrName] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "__remotion-info-button-container", children: [(0, jsx_runtime_1.jsxs)("div", { style: padding, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("strong", { style: title, children: option.name }) }), (0, jsx_runtime_1.jsx)("div", { style: description, children: option.description })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsx)(MenuDivider_1.MenuDivider, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 0.5, block: true }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "CLI flag:" }), (0, jsx_runtime_1.jsx)("code", { children: option.cliFlag }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', justifyContent: 'flex-end', flex: 1 }, children: (0, jsx_runtime_1.jsx)(CliCopyButton_1.CliCopyButton, { valueToCopy: option.cliFlag }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: infoRow, children: [(0, jsx_runtime_1.jsx)("div", { style: infoRowLabel, children: "Node.JS option:" }), (0, jsx_runtime_1.jsx)("code", { children: option.ssrName })] }), (0, jsx_runtime_1.jsx)("div", { style: infoRow, children: (0, jsx_runtime_1.jsx)("a", { style: link, href: option.docLink, target: "_blank", children: "Docs" }) })] })] }));
 };
 exports.OptionExplainer = OptionExplainer;

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

@@ -1,4 +1,4 @@
-import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { AudioCodec, Codec, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 import React from 'react';
 import type { RenderType } from './RenderModalAdvanced';
 export declare const RenderModal: React.FC<{
@@ -26,4 +26,9 @@ export declare const RenderModal: React.FC<{
     initialEveryNthFrame: number;
     initialNumberOfGifLoops: number | null;
     initialDelayRenderTimeout: number;
+    initialEnvVariables: Record<string, string>;
+    initialDisableWebSecurity: boolean;
+    initialGl: OpenGlRenderer | null;
+    initialIgnoreCertificateErrors: boolean;
+    initialHeadless: boolean;
 }>;