@remotion/cli 4.0.0-alpha.217 → 4.0.0-alpha4

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

@@ -1,92 +0,0 @@
-"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 is_menu_item_1 = require("../Menu/is-menu-item");
-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: 'none',
-    overflowX: 'hidden',
-};
-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, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, style: style }));
-};
-exports.RemTextarea = (0, react_1.forwardRef)(RemTextareaFRFunction);

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

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

package/dist/editor/components/PlayerEmitterContext.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlayerEmitterContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const player_1 = require("@remotion/player");
-const react_1 = require("react");
-const PlayerEmitterContext = ({ children }) => {
-    const [emitter] = (0, react_1.useState)(() => new player_1.PlayerInternals.PlayerEmitter());
-    return ((0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
-};
-exports.PlayerEmitterContext = PlayerEmitterContext;

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

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

package/dist/editor/components/RenderButton.js

@@ -1,80 +0,0 @@
-"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 get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
-const render_1 = require("../icons/render");
-const modals_1 = require("../state/modals");
-const InlineAction_1 = require("./InlineAction");
-const RenderButton = ({ composition, visible }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const iconStyle = (0, react_1.useMemo)(() => {
-        return {
-            style: {
-                height: 12,
-            },
-        };
-    }, []);
-    const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
-    const isVideo = composition.durationInFrames > 1;
-    const onClick = (0, react_1.useCallback)((e) => {
-        var _a;
-        const defaults = window.remotion_renderDefaults;
-        if (!defaults) {
-            throw new Error('expected defaults');
-        }
-        e.stopPropagation();
-        const { initialAudioCodec, initialRenderType, initialVideoCodec } = (0, get_default_video_contexts_1.getDefaultCodecs)({
-            defaultCodec: defaults.codec,
-            isStill: !isVideo,
-        });
-        setSelectedModal({
-            type: 'render',
-            compositionId: composition.id,
-            initialFrame: 0,
-            initialVideoImageFormat: defaults.videoImageFormat,
-            initialStillImageFormat: defaults.stillImageFormat,
-            initialJpegQuality: defaults.jpegQuality,
-            initialScale: defaults.scale,
-            initialVerbose: defaults.logLevel === 'verbose',
-            initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
-                compositionName: composition.id,
-                defaultExtension: isVideo
-                    ? defaults.stillImageFormat
-                    : client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec),
-                type: 'asset',
-            }),
-            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: (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps,
-        });
-    }, [composition.defaultProps, composition.id, isVideo, props, setSelectedModal]);
-    if (!visible) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(InlineAction_1.InlineAction, { onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.ThinRenderIcon, { svgProps: iconStyle }) }));
-};
-exports.RenderButton = RenderButton;

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

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

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

@@ -1,22 +0,0 @@
-"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,16 +0,0 @@
-/// <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;
-    shouldDisplayOption: boolean;
-};
-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

@@ -1,43 +0,0 @@
-"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],
-        shouldDisplayOption: range[0] !== range[1] && client_1.BrowserSafeApis.codecSupportsCrf(codec),
-    };
-};
-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

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

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

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

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

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

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

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

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

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