@remotion/cli 4.0.0-lambda.3 → 4.0.0-newpaths.1

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

@@ -0,0 +1,14 @@
+"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 layout_1 = require("./layout");
+const EnforceAudioTrackSetting = ({ enforceAudioTrack, setEnforceAudioTrack }) => {
+    const onEnforceAudioTrackChanged = (0, react_1.useCallback)((e) => {
+        setEnforceAudioTrack(e.target.checked);
+    }, [setEnforceAudioTrack]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Enforce Audio Track" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: enforceAudioTrack, onChange: onEnforceAudioTrackChanged }) })] }));
+};
+exports.EnforceAudioTrackSetting = EnforceAudioTrackSetting;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const EveryNthFrameSetting: React.FC<{
+    everyNthFrame: number;
+    setEveryNthFrameSetting: React.Dispatch<React.SetStateAction<number>>;
+}>;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EveryNthFrameSetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NumberSetting_1 = require("./NumberSetting");
+const EveryNthFrameSetting = ({ everyNthFrame, setEveryNthFrameSetting }) => {
+    return ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { name: "Every nth frame", min: 1, onValueChanged: setEveryNthFrameSetting, value: everyNthFrame }));
+};
+exports.EveryNthFrameSetting = EveryNthFrameSetting;

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 }) }), (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 }) })] })] }));
+};
+exports.FrameRangeSetting = FrameRangeSetting;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const MutedSetting: React.FC<{
+    muted: boolean;
+    setMuted: React.Dispatch<React.SetStateAction<boolean>>;
+}>;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MutedSetting = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../Checkbox");
+const layout_1 = require("./layout");
+const MutedSetting = ({ muted, setMuted }) => {
+    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, onChange: onMutedChanged }) })] }));
+};
+exports.MutedSetting = MutedSetting;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const NumberOfLoopsSetting: React.FC<{
+    numberOfGifLoops: number;
+    setNumberOfGifLoops: React.Dispatch<React.SetStateAction<number>>;
+}>;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberOfLoopsSetting = 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 min = 0;
+const NumberOfLoopsSetting = ({ numberOfGifLoops, setNumberOfGifLoops }) => {
+    const onNumberOfGifLoopsChangedDirectly = (0, react_1.useCallback)((newConcurrency) => {
+        setNumberOfGifLoops(newConcurrency);
+    }, [setNumberOfGifLoops]);
+    const onNumberOfGifLoopsChanged = (0, react_1.useCallback)((e) => {
+        setNumberOfGifLoops((q) => {
+            const newConcurrency = parseInt(e, 10);
+            if (Number.isNaN(newConcurrency)) {
+                return q;
+            }
+            const newConcurrencyClamped = Math.max(newConcurrency, min);
+            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 }) }) })] }));
+};
+exports.NumberOfLoopsSetting = NumberOfLoopsSetting;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const NumberSetting: React.FC<{
+    name: string;
+    value: number;
+    onValueChanged: React.Dispatch<React.SetStateAction<number>>;
+    max?: number;
+    min: number;
+    step: number;
+}>;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberSetting = 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 NumberSetting = ({ name, value, step, onValueChanged, max, min }) => {
+    const onTextChanged = (0, react_1.useCallback)((e) => {
+        onValueChanged((q) => {
+            const newSetting = parseInt(e, 10);
+            if (Number.isNaN(newSetting)) {
+                return q;
+            }
+            return Math.min(max !== null && max !== void 0 ? max : Infinity, Math.max(newSetting, min));
+        });
+    }, [max, min, onValueChanged]);
+    const onValueChange = (0, react_1.useCallback)((newConcurrency) => {
+        onValueChanged(newConcurrency);
+    }, [onValueChanged]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: name }), (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: 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 }) }) })] }));
+};
+exports.NumberSetting = NumberSetting;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const QualitySetting: React.FC<{
+    quality: number;
+    setQuality: React.Dispatch<React.SetStateAction<number>>;
+}>;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QualitySetting = 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 MIN_QUALITY = 1;
+const MAX_QUALITY = 100;
+const QualitySetting = ({ quality, setQuality }) => {
+    const onQualityChangedDirectly = (0, react_1.useCallback)((newQuality) => {
+        setQuality(newQuality);
+    }, [setQuality]);
+    const onQualityChanged = (0, react_1.useCallback)((e) => {
+        setQuality((q) => {
+            const newQuality = parseInt(e, 10);
+            if (Number.isNaN(newQuality)) {
+                return q;
+            }
+            const newQualityClamped = Math.min(MAX_QUALITY, Math.max(newQuality, MIN_QUALITY));
+            return newQualityClamped;
+        });
+    }, [setQuality]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "JPEG Quality" }), (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: quality, onTextChange: onQualityChanged, placeholder: `${MIN_QUALITY}-${MAX_QUALITY}`, onValueChange: onQualityChangedDirectly, name: "quality", step: 1, min: MIN_QUALITY, max: MAX_QUALITY }) }) })] }));
+};
+exports.QualitySetting = QualitySetting;

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

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

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderErrorModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Button_1 = require("../../../preview-server/error-overlay/remotion-overlay/Button");
+const make_retry_payload_1 = require("../../../preview-server/render-queue/make-retry-payload");
+const modals_1 = require("../../state/modals");
+const layout_1 = require("../layout");
+const ModalContainer_1 = require("../ModalContainer");
+const ModalHeader_1 = require("../ModalHeader");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const actions_1 = require("../RenderQueue/actions");
+const container = {
+    padding: 20,
+    maxWidth: 1200,
+    paddingTop: 0,
+};
+const codeBlock = {
+    backgroundColor: 'black',
+    whiteSpace: 'pre',
+    padding: 12,
+    borderRadius: 4,
+    fontFamily: 'monospace',
+    overflow: 'auto',
+    maxHeight: 300,
+};
+const spacer = {
+    height: layout_1.SPACING_UNIT,
+    width: layout_1.SPACING_UNIT,
+};
+const buttonRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+};
+const RenderErrorModal = ({ job }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onQuit = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const onRetry = (0, react_1.useCallback)(() => {
+        const retryPayload = (0, make_retry_payload_1.makeRetryPayload)(job);
+        setSelectedModal(retryPayload);
+    }, [job, setSelectedModal]);
+    const onClickOnRemove = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+        (0, actions_1.removeRenderJob)(job).catch((err) => {
+            var _a;
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                content: 'Failed to remove render job: ' + err.message,
+                created: Date.now(),
+                duration: 2000,
+                id: String(Math.random()),
+            });
+            console.log(err);
+        });
+    }, [job, setSelectedModal]);
+    if (job.status !== 'failed') {
+        throw new Error('should not have rendered this modal');
+    }
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${job.compositionId}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("p", { children: "The render failed because of the following error:" }), (0, jsx_runtime_1.jsx)("div", { style: codeBlock, children: job.error.stack }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: buttonRow, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClickOnRemove, children: "Remove render" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onRetry, children: "Retry" }), (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onQuit, children: "Close" })] })] })] }));
+};
+exports.RenderErrorModal = RenderErrorModal;

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

@@ -0,0 +1,28 @@
+import type { Codec, PixelFormat, ProResProfile, StillImageFormat } from '@remotion/renderer';
+import React from 'react';
+import type { RenderType } from './RenderModalAdvanced';
+export declare const RenderModal: React.FC<{
+    compositionId: string;
+    initialFrame: number;
+    initialVideoImageFormat: StillImageFormat;
+    initialStillImageFormat: StillImageFormat;
+    initialQuality: number;
+    initialScale: number;
+    initialVerbose: boolean;
+    initialOutName: string;
+    initialRenderType: RenderType;
+    initialAudioCodec: Codec;
+    initialVideoCodec: Codec;
+    initialConcurrency: number;
+    minConcurrency: number;
+    maxConcurrency: number;
+    initialMuted: boolean;
+    initialEnforceAudioTrack: boolean;
+    initialProResProfile: ProResProfile;
+    initialPixelFormat: PixelFormat;
+    initialVideoBitrate: string | null;
+    initialAudioBitrate: string | null;
+    initialEveryNthFrame: number;
+    initialNumberOfGifLoops: number | null;
+    initialDelayRenderTimeout: number;
+}>;