@remotion/cli 4.0.0-alpha4 → 4.0.0-alpha5

package/dist/editor/components/QuickSwitcher/QuickSwitcherResult.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
-const film_1 = require("../../icons/film");
 const still_1 = require("../../icons/still");
+const video_1 = require("../../icons/video");
 const layout_1 = require("../layout");
 const container = {
     paddingLeft: 16,
@@ -62,6 +62,8 @@ const QuickSwitcherResult = ({ result, selected }) => {
             commandCtrlKey: false,
             event: 'keydown',
             preventDefault: true,
+            // Input will be focused while sleection
+            triggerIfInputFieldFocused: true,
         });
         return () => {
             binding.unregister();
@@ -96,7 +98,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             fontSize: 15,
         };
     }, [hovered, result.type, selected]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(film_1.FilmIcon, { style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {
                                 __html: result.titleLine,

package/dist/editor/components/QuickSwitcher/algolia-search.d.ts

@@ -1,29 +1,2 @@
 import type { TQuickSwitcherResult } from './QuickSwitcherResult';
-declare type Levels = 'lvl0' | 'lvl1' | 'lvl2' | 'lvl3' | 'lvl4' | 'lvl5' | 'lvl6';
-export declare type Match = {
-    value: string;
-    matchLevel: 'none' | 'partial' | 'full';
-};
-declare type DynamicHit = {
-    type: 'content';
-    _highlightResult: {
-        content: Match;
-        hierarchy: Record<Levels, Match>;
-    };
-} | {
-    type: Levels;
-    _highlightResult: {
-        hierarchy: Record<Levels, Match>;
-    };
-};
-declare type Hit = {
-    url: string;
-    hierarchy: Record<Levels, string | null>;
-    objectID: string;
-} & DynamicHit;
 export declare const algoliaSearch: (query: string) => Promise<TQuickSwitcherResult[]>;
-export declare const splitMatchIntoTitleAndSubtitle: (match: Hit) => {
-    title: string;
-    subtitle: string;
-};
-export {};

package/dist/editor/components/QuickSwitcher/algolia-search.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitMatchIntoTitleAndSubtitle = exports.algoliaSearch = void 0;
+exports.algoliaSearch = void 0;
 const truthy_1 = require("../../../truthy");
 const ALGOLIA_API_KEY = '3e42dbd4f895fe93ff5cf40d860c4a85';
 const ALGOLIA_APPLICATION_ID = 'PLSDUOL1CA';
@@ -31,7 +31,7 @@ const algoliaSearch = async (query) => {
         var _a;
         const entries = Object.values(hit._highlightResult.hierarchy);
         const result = (_a = entries.find((value) => value.matchLevel === 'full')) !== null && _a !== void 0 ? _a : entries.find((value) => value.matchLevel === 'partial');
-        const { subtitle, title } = (0, exports.splitMatchIntoTitleAndSubtitle)(hit);
+        const { subtitle, title } = splitMatchIntoTitleAndSubtitle(hit);
         if (!result) {
             return null;
         }
@@ -60,4 +60,3 @@ const splitMatchIntoTitleAndSubtitle = (match) => {
         .join(' • ');
     return { title, subtitle };
 };
-exports.splitMatchIntoTitleAndSubtitle = splitMatchIntoTitleAndSubtitle;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RenderButton: React.FC;

package/dist/editor/components/RenderButton.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_default_out_name_1 = require("../../get-default-out-name");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
+const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
+const client_id_1 = require("../helpers/client-id");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const render_1 = require("../icons/render");
+const modals_1 = require("../state/modals");
+const layout_1 = require("./layout");
+const button = {
+    paddingLeft: 7,
+    paddingRight: 7,
+    paddingTop: 7,
+    paddingBottom: 7,
+};
+const label = {
+    fontSize: 14,
+};
+const RenderButton = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
+    const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
+    const tooltip = type === 'connected'
+        ? 'Export the current composition ' + shortcut
+        : 'Connect to the preview server to render';
+    const iconStyle = (0, react_1.useMemo)(() => {
+        return {
+            style: {
+                height: 16,
+                color: 'currentColor',
+            },
+        };
+    }, []);
+    const video = remotion_1.Internals.useVideo();
+    const frame = (0, remotion_1.useCurrentFrame)();
+    const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const onClick = (0, react_1.useCallback)(() => {
+        var _a, _b, _c;
+        if (!video) {
+            return null;
+        }
+        const isVideo = video.durationInFrames > 1;
+        const defaults = window.remotion_renderDefaults;
+        if (!defaults) {
+            throw new TypeError('Expected defaults');
+        }
+        const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
+            defaultCodec: defaults.codec,
+            isStill: !isVideo,
+        });
+        setSelectedModal({
+            type: 'render',
+            compositionId: video.id,
+            initialFrame: frame,
+            initialStillImageFormat: defaults.stillImageFormat,
+            initialVideoImageFormat: defaults.videoImageFormat,
+            initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
+                compositionName: video.id,
+                defaultExtension: isVideo
+                    ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec)
+                    : defaults.stillImageFormat,
+                type: 'asset',
+            }),
+            initialJpegQuality: defaults.jpegQuality,
+            initialScale: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.scale) !== null && _b !== void 0 ? _b : 1,
+            initialVerbose: defaults.logLevel === 'verbose',
+            initialVideoCodecForAudioTab: initialAudioCodec,
+            initialRenderType,
+            initialVideoCodecForVideoTab: initialVideoCodec,
+            initialConcurrency: defaults.concurrency,
+            maxConcurrency: defaults.maxConcurrency,
+            minConcurrency: defaults.minConcurrency,
+            initialMuted: defaults.muted,
+            initialEnforceAudioTrack: defaults.enforceAudioTrack,
+            initialProResProfile: defaults.proResProfile,
+            initialPixelFormat: defaults.pixelFormat,
+            initialAudioBitrate: defaults.audioBitrate,
+            initialVideoBitrate: defaults.videoBitrate,
+            initialEveryNthFrame: defaults.everyNthFrame,
+            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,
+            defaultProps: (_c = props[video.id]) !== null && _c !== void 0 ? _c : video.defaultProps,
+        });
+    }, [video, setSelectedModal, frame, props]);
+    if (!video) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { id: "render-modal-button", title: tooltip, onClick: onClick, buttonContainerStyle: button, disabled: connectionStatus !== 'connected', children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("span", { style: label, children: "Render" })] }) }));
+};
+exports.RenderButton = RenderButton;

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

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

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CrfSetting = exports.useCrfState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
+const react_1 = require("react");
+const NumberSetting_1 = require("./NumberSetting");
+const getDefaultCrfState = () => {
+    return client_1.BrowserSafeApis.validCodecs
+        .map((c) => {
+        return [c, client_1.BrowserSafeApis.getDefaultCrfForCodec(c)];
+    })
+        .reduce((acc, [codec, crf]) => {
+        return {
+            ...acc,
+            [codec]: crf,
+        };
+    }, {});
+};
+const useCrfState = (codec) => {
+    const [state, setState] = (0, react_1.useState)(() => getDefaultCrfState());
+    const range = client_1.BrowserSafeApis.getValidCrfRanges(codec);
+    const setCrf = (updater) => {
+        setState((q) => {
+            return {
+                ...q,
+                [codec]: typeof updater === 'number' ? updater : updater(q[codec]),
+            };
+        });
+    };
+    return {
+        crf: state[codec],
+        setCrf,
+        minCrf: range[0],
+        maxCrf: range[1],
+    };
+};
+exports.useCrfState = useCrfState;
+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

@@ -0,0 +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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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.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;

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

@@ -0,0 +1,11 @@
+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;
+    isDuplicate: boolean;
+}>;

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

@@ -0,0 +1,74 @@
+"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 ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const InlineEyeIcon_1 = require("./InlineEyeIcon");
+const InlineRemoveButton_1 = require("./InlineRemoveButton");
+const layout_2 = require("./layout");
+const input = {
+    flex: 1,
+    width: '100%',
+};
+const validationStyle = {
+    paddingLeft: layout_2.optionRow.paddingLeft,
+    paddingRight: layout_2.optionRow.paddingRight,
+};
+const EnvInput = ({ onEnvKeyChange, onEnvValChange, envKey, envVal, onDelete, index, autoFocus, isDuplicate, }) => {
+    const [showInPlainText, setShowInPlainText] = react_1.default.useState(false);
+    const [initialWarningKeyMissing, setKeyWarningEligible] = react_1.default.useState(() => {
+        return envKey.trim() === '' && envVal.trim() !== '';
+    });
+    const [initialWarningValMissing, setValueWarningEligible] = react_1.default.useState(() => {
+        return envKey.trim() !== '' && envVal.trim() === '';
+    });
+    const isKeyMissing = envKey.trim() === '' && initialWarningKeyMissing && envVal.trim() !== '';
+    const isValMissing = envVal.trim() === '' && initialWarningValMissing && envKey.trim() !== '';
+    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]);
+    const makeKeyWarningEligible = (0, react_1.useCallback)(() => {
+        setKeyWarningEligible(true);
+    }, []);
+    const makeValueWarningEligible = (0, react_1.useCallback)(() => {
+        setValueWarningEligible(true);
+    }, []);
+    const isNodeEnvKey = envKey.trim() === 'NODE_ENV';
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: isNodeEnvKey || isDuplicate || isKeyMissing ? 'warning' : 'ok', type: "text", placeholder: "Key", style: input, value: envKey, onBlur: makeKeyWarningEligible, autoFocus: autoFocus, onChange: handleKeyChange, rightAlign: false }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { status: isValMissing ? 'warning' : 'ok', placeholder: "Value", type: showInPlainText ? 'text' : 'password', style: input, value: envVal, onBlur: makeValueWarningEligible, onChange: handleValueChange, rightAlign: false }), (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)(InlineRemoveButton_1.InlineRemoveButton, { onClick: handleDelete })] }), isNodeEnvKey ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "NODE_ENV will be overwritten by Remotion during the render process." }) })) : null, isDuplicate ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: `${envKey.toUpperCase()} is already defined.` }) })) : null, isKeyMissing ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "Key is missing." }) })) : null, isValMissing ? ((0, jsx_runtime_1.jsx)("div", { style: validationStyle, children: (0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { align: "flex-start", type: "warning", message: "Value is missing." }) })) : null] }));
+};
+exports.EnvInput = EnvInput;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const FrameRangeSetting: React.FC<{
+    startFrame: number;
+    endFrame: number;
+    setEndFrame: React.Dispatch<React.SetStateAction<number | null>>;
+    setStartFrame: React.Dispatch<React.SetStateAction<number | null>>;
+    durationInFrames: number;
+}>;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FrameRangeSetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const RemInput_1 = require("../NewComposition/RemInput");
+const layout_1 = require("./layout");
+const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
+    const maxStartFrame = endFrame - 1;
+    const minStartFrame = 0;
+    const minEndFrame = startFrame + 1;
+    const maxEndFrame = durationInFrames - 1;
+    const onStartFrameChangedDirectly = (0, react_1.useCallback)((newStartFrame) => {
+        setStartFrame(newStartFrame);
+    }, [setStartFrame]);
+    const onEndFrameChangedDirectly = (0, react_1.useCallback)((newEndFrame) => {
+        setEndFrame(newEndFrame);
+    }, [setEndFrame]);
+    const onStartFrameChanged = (0, react_1.useCallback)((e) => {
+        setStartFrame((q) => {
+            const newStartFrame = parseInt(e, 10);
+            if (Number.isNaN(newStartFrame)) {
+                return q;
+            }
+            const newStartFrameClamped = Math.min(maxStartFrame, Math.max(newStartFrame, minStartFrame));
+            return newStartFrameClamped;
+        });
+    }, [maxStartFrame, setStartFrame]);
+    const onEndFrameChanged = (0, react_1.useCallback)((e) => {
+        setEndFrame((q) => {
+            const newEndFrame = parseInt(e, 10);
+            if (Number.isNaN(newEndFrame)) {
+                return q;
+            }
+            const newEndFrameClamped = Math.min(maxEndFrame, Math.max(newEndFrame, minEndFrame));
+            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, status: "ok", rightAlign: true }) }), (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", rightAlign: true }) })] })] }));
+};
+exports.FrameRangeSetting = FrameRangeSetting;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { RenderJob } from '../../../preview-server/render-queue/job';
+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.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const InfoBubble: React.FC<{
+    title: string;
+    children: React.ReactNode;
+}>;